Skip to content
intermediate Phase 58 · Frontend Strategy

Frontend Decision Making

Choosing the right frontend approach: when to use Luma, Hyvä, or headless architecture in Magento 2

45m
0 problems
Topic Progress 0%

Frontend Options Overview

Three Main Approaches

Approach Description
Luma Default Magento frontend, KnockoutJS + LESS
Hyvä Modern Magento frontend, Alpine.js + Tailwind
Headless Separate frontend, API-driven

Headless Sub-options

  • PWA Studio: Magento's PWA solution
  • Vue Storefront: Community PWA
  • Next.js/Remix: Custom React/Next.js
  • Astro/SvelteKit: Modern frameworks

Decision Matrix

Factor Luma Hyvä Headless
Performance Good Excellent Excellent
Development Speed Slow Fast Slow
Maintenance High Medium High
Flexibility Medium High Very High
Cost Low Medium High
Learning Curve High Low High

When to Use Luma

Luma Scenarios

  1. Legacy Systems

    • Existing Luma-based stores
    • Heavy customization in KnockoutJS
    • Budget constraints

  2. Complex B2B

    • Complex pricing rules
    • Custom quote management
    • Integration with ERP systems

  3. Extension Dependencies

    • Many extensions without Hyvä support
    • Custom Magento UI Components

Luma Advantages

- Full Magento ecosystem support
- All extensions work out of the box
- Extensive documentation
- Large developer community
- Proven for complex scenarios

Luma Limitations

- Slower performance
- Larger bundle size
- Complex build process
- KnockoutJS learning curve
- RequireJS configuration

Luma Decision Criteria

Use Luma if:
- Existing store with heavy customization
- Budget < $50k for frontend
- Many incompatible extensions
- Complex B2B requirements
- Short timeline (< 3 months)

When to Use Hyvä

Hyvä Scenarios

  1. New Projects

    • Starting fresh
    • No legacy code
    • Performance priority

  2. B2C Stores

    • Standard e-commerce
    • Content-heavy sites
    • Mobile-first experience

  3. Performance Critical

    • SEO optimization
    • Core Web Vitals focus
    • Conversion optimization

Hyvä Advantages

- Excellent performance (90+ Lighthouse)
- Fast development cycle
- Modern tech stack
- Lower maintenance
- Better developer experience

Hyvä Limitations

- Some extensions incompatible
- Requires migration effort
- Less mature ecosystem
- Limited Magento UI Components
- Custom modules need rewriting

Hyvä Decision Criteria

Use Hyvä if:
- New project or fresh start
- Performance is critical
- Budget > $100k
- Extensions are compatible
- Team is modern stack
- Timeline > 6 months

When to Go Headless

Headless Scenarios

  1. Multi-channel

    • Web + Mobile App
    • Web + Kiosk
    • Web + IoT

  2. Custom UX

    • Completely custom design
    • Unique interactions
    • Brand-specific experience

  3. Enterprise

    • Large teams
    • Multiple frontends
    • Complex integrations

Headless Advantages

- Complete frontend freedom
- Multi-channel support
- Best performance potential
- Modern frameworks
- API-first architecture

Headless Limitations

- Highest development cost
- Complex architecture
- Two codebases to maintain
- Authentication complexity
- Checkout customization

Headless Decision Criteria

Use Headless if:
- Multi-channel strategy
- Custom frontend required
- Large development team
- Budget > $250k
- Long-term investment
- Enterprise requirements

Technology Choices

Need Technology
React ecosystem Next.js, PWA Studio
Vue ecosystem Vue Storefront
Static generation Astro, SvelteKit
Full control Custom React/Vue

Hybrid Approach

Magento Backend:
  - Product management
  - Order processing
  - Customer data

Hyvä Frontend:
  - Standard pages
  - Catalog browsing
  - Account pages

Custom Headless:
  - Mobile app
  - Kiosk interface
  - Custom checkout

Quiz

1. When should you choose Luma?

Question 1 options

2. What is the main advantage of Hyvä?

Question 2 options

3. When should you go headless?

Question 3 options

Flashcards

Question

What are the three frontend options?

Click to reveal answer

Answer

Luma, Hyvä, Headless

Question

When to use Luma?

Click to reveal answer

Answer

Legacy systems, complex B2B, budget constraints

Question

When to use Hyvä?

Click to reveal answer

Answer

New projects, performance critical, modern stack

Question

When to use Headless?

Click to reveal answer

Answer

Multi-channel, custom UX, enterprise

Question

What is the cost order?

Click to reveal answer

Answer

Luma < Hyvä < Headless

Revision Notes

Key Takeaways

  • 1. Luma for legacy and complex B2B
  • 2. Hyvä for new projects and performance
  • 3. Headless for multi-channel and enterprise
  • 4. Cost increases: Luma < Hyvä < Headless
  • 5. Choose based on requirements and budget

Interview Tips

  • • Explain when to use each approach
  • • Know the trade-offs of each option
  • • Discuss hybrid approaches
  • • Be ready to evaluate project needs

Cheat Sheet

Luma: Legacy, complex B2B, budget < $50k
Hyvä: New projects, performance, budget > $100k
Headless: Multi-channel, custom UX, budget > $250k

Decision factors:
  - Budget
  - Timeline
  - Extensions
  - Team skills
  - Performance needs