Andreas von Studnitz stellt beim Magento-Stammtisch Aachen des neue Frontend-Framework für Magento 2, Hyvä, vor. Die Kernprinzipien sind Einfachheit und Performance.

1. Modernes Frontend mit Magento 2
Stand Ende 2020
01. Dezember 2020 – Magento-Stammtisch Aachen
Andreas von Studnitz – integer_net – @avstudnitz

2. Andreas von Studnitz
Mitgründer und Geschäftsführer von integer_net
Magento-Entwickler, Trainer, Berater
seit 2008
Twitter: @avstudnitz

3. Agenda
• Luma
• PWA
• Hyvä

4. Das Frontend-Problem
a.k.a. UI Components

5. Stimmen aus der Community

6. Nachteile des Magento-Frontends
• Veraltete Technologien (LESS,
Knockout, RequireJS)
• Performance
• 2,5 MB JavaScript
• 0,6 MB CSS

7. “
Das traditionelle Magento-
Frontend will heute kaum noch
jemand für neue Projekte
einsetzen

8. Der Hoffnungsträger:
PWA
Progressive Web Apps

9. Vorteile von PWA
• Gefühlte Geschwindigkeit
• Dynamische Inhalte
(Verzicht auf Varnish & Co.)
• Trennung von Backend und
Frontend
• Keine UI Components

10. Nachteile von PWA
• Komplexität und Overhead
durch 1-2 weitere Systeme
• Stabilität / Reife der Frameworks
• Steile Lernkurve für Magento-
Entwickler
• Viel JS-Code
• Checkout und Zahlungsmöglichkeiten

11. “
PWA ist nicht
für jeden Shop geeignet

12. Der neue Ansatz:
Weniger ist mehr

13. Ziele
• Weniger JavaScript-Code
• Weniger CSS-Code
• Mehr Performance
• Schnellere Entwicklung
• Mehr Spaß an der Entwicklung

14. Brauchen wir das noch oder
kann das weg?
• Layout.xml
• Blocks und
ViewModels
• Routing, Cookies,
private-data
• Caching
• JS: jQuery, RequireJS,
Knockout
• UI Components
• Komplexität des
Layouts
• Menge und
Komplexität von CSS

15. Ansatz
• Layout entkernen
(Blocks weg, Container behalten)
• Nur wieder hinzufügen, was wirklich
gebraucht wird
• CSS komplett neu mit
• JavaScript komplett neu mit Alpine.js

16. tailwindcss
• Utility-First
•
(https://www.swyx.io/why-tailwind/)

17. Alpine.js
• Syntax wie Vue
• Kein Virtuelles DOM
• Nur da eingesetzt,
wo es unbedingt notwendig ist
“Alpine.js offers you the reactive and declarative nature of big
frameworks like Vue or React at a much lower cost. You get to
keep your DOM, and sprinkle in behavior as you see fit.”
(https://www.smashingmagazine.com)

18. Hyvä
https://hyva.io/
Willem Wigman

19. Timeline
• Juni 2020

20. Timeline
• Juni 2020
• August 2020

21. Timeline
• Juni 2020
• August 2020
• Oktober 2020

22. Timeline
• Juni 2020
• August 2020
• Oktober 2020
• November 2020

23. Timeline
• Juni 2020: Entwicklungsbeginn
• August 2020: Erster Shop
• Oktober 2020: Präsentation Reacticon
• November 2020: Erste Partner
• Januar 2021: Release 1.0

24. Hyvä Themes Release 1.0
• Vormerken auf Warteliste bereits jetzt
möglich (auf hyva.io)
• Lizenz mit Updates für ein Jahr für
1.000€

25. Checkout
• Komplexer als der Rest des Shops
• Anderer Ansatz sinnvoll
• Optionen: • Hyvä Checkout
• OneStepCheckout ($)
• Luma Checkout
• VueCheckout
• CleanCheckout

26. Ausblick
• Hyvä Checkout
• Hyvä Admin (von Vinai Kopp)

27. Dankeschön!
Weitere Fragen?
avs@integer-net.de
@avstudnitz
@integer_net
Presentation Template by SlidesCarnival