Legacy vs Modern Frontend

Technology Stack

File Structure

Luma:
├── view/frontend/
│   ├── requirejs-config.js
│   ├── web/css/source/_extend.less
│   └── Magento_*/templates/
└── Vendor Module/
    └── view/frontend/

Hyvä:
├── view/frontend/
│   ├── web/src/
│   │   ├── css/input.css
│   │   └── main.js
│   ├── tailwind.config.js
│   └── vite.config.js
└── Magento_*/templates/

Code Example

Luma (KnockoutJS)

<div data-bind="scope: 'cart'">
    <span data-bind="text: items().length"></span>
    <button data-bind="click: addItem">Add</button>
</div>

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "component": "cart"
        }
    }
}
</script>

Hyvä (Alpine.js)

<div x-data="{ items: [], addItem() { this.items.push({}) } }">
    <span x-text="items.length"></span>
    <button @click="addItem">Add</button>
</div>

Core Web Vitals

Lighthouse Scores

Luma:
  Performance: 50-70
  Accessibility: 80-90
  Best Practices: 70-80
  SEO: 85-95

Hyvä:
  Performance: 90-100
  Accessibility: 90-100
  Best Practices: 95-100
  SEO: 95-100

Bundle Size

JavaScript:
  Luma: 500KB+ (KnockoutJS, RequireJS, jQuery UI)
  Hyvä: ~50KB (Alpine.js, minimal dependencies)

CSS:
  Luma: 200KB+ (compiled LESS)
  Hyvä: 10-30KB (purged Tailwind)

Total:
  Luma: 700KB+
  Hyvä: ~80KB

Server Impact

• TTFB: Hyvä reduces server processing time
• Caching: Better cache hit rates
• Bandwidth: 85%+ reduction in payload
• CPU: Lower client-side processing

Luma Development

# Setup
bin/magento deploy:mode:set developer
bin/magento cache:clean

# Build
bin/magento setup:static-content:deploy -f

# Debug
bin/magento dev:template-hints:enable

Hyvä Development

# Setup
npm install
npm run dev

# Build
npm run build

# Watch
npm run watch

Development Speed

Debugging

Luma: Template hints, browser console, RequireJS debugger
Hyvä: Browser DevTools, Alpine.js debugger, Vite HMR

Learning Curve

• Luma: High (KnockoutJS, RequireJS, Magento UI)
• Hyvä: Low (Alpine.js, Tailwind, standard HTML)

When to Stay with Luma

• Complex custom KnockoutJS components
• Heavy reliance on Magento UI Components
• Limited budget for migration
• Short timeline
• Many incompatible extensions

When to Migrate to Hyvä

• Performance is critical
• New project (no legacy code)
• Budget available for migration
• Extensions are compatible
• Team comfortable with modern stack

Migration Cost Factors

Low Cost:
- Simple catalog site
- Few custom modules
- Compatible extensions

Medium Cost:
- Standard e-commerce
- Some custom modules
- Most extensions compatible

High Cost:
- Complex B2B
- Many custom modules
- Incompatible extensions

ROI Analysis

Benefits:
- 50-70% faster page loads
- 20-30% conversion improvement
- 10-20% revenue increase
- Lower hosting costs
- Better SEO rankings

Costs:
- Migration development
- Extension compatibility
- Testing and QA
- Training team

Decision Framework

1. Audit: List all customizations
2. Test: Check extension compatibility
3. Estimate: Calculate migration cost
4. Project: Calculate ROI
5. Decide: Based on data