SlideShare ist ein Scribd-Unternehmen logo
Modernes Frontend mit Magento 2
Stand Ende 2020
01. Dezember 2020 – Magento-Stammtisch Aachen
Andreas von Studnitz – integer_net – @avstudnitz
Andreas von Studnitz
Mitgründer und Geschäftsführer von integer_net
Magento-Entwickler, Trainer, Berater
seit 2008
Twitter: @avstudnitz
Agenda
• Luma
• PWA
• Hyvä
Das Frontend-Problem
a.k.a. UI Components
Stimmen aus der Community
Nachteile des Magento-Frontends
• Veraltete Technologien (LESS,
Knockout, RequireJS)
• Performance
• 2,5 MB JavaScript
• 0,6 MB CSS
“
Das traditionelle Magento-
Frontend will heute kaum noch
jemand für neue Projekte
einsetzen
Der Hoffnungsträger:
PWA
Progressive Web Apps
Vorteile von PWA
• Gefühlte Geschwindigkeit
• Dynamische Inhalte
(Verzicht auf Varnish & Co.)
• Trennung von Backend und
Frontend
• Keine UI Components
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
“
PWA ist nicht
für jeden Shop geeignet
Der neue Ansatz:
Weniger ist mehr
Ziele
• Weniger JavaScript-Code
• Weniger CSS-Code
• Mehr Performance
• Schnellere Entwicklung
• Mehr Spaß an der Entwicklung
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
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
tailwindcss
• Utility-First
•
(https://www.swyx.io/why-tailwind/)
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)
Hyvä
https://hyva.io/
Willem Wigman
Timeline
• Juni 2020
Timeline
• Juni 2020
• August 2020
Timeline
• Juni 2020
• August 2020
• Oktober 2020
Timeline
• Juni 2020
• August 2020
• Oktober 2020
• November 2020
Timeline
• Juni 2020: Entwicklungsbeginn
• August 2020: Erster Shop
• Oktober 2020: Präsentation Reacticon
• November 2020: Erste Partner
• Januar 2021: Release 1.0
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€
Checkout
• Komplexer als der Rest des Shops
• Anderer Ansatz sinnvoll
• Optionen: • Hyvä Checkout
• OneStepCheckout ($)
• Luma Checkout
• VueCheckout
• CleanCheckout
Ausblick
• Hyvä Checkout
• Hyvä Admin (von Vinai Kopp)
Dankeschön!
Weitere Fragen?
avs@integer-net.de
@avstudnitz
@integer_net
Presentation Template by SlidesCarnival

Weitere ähnliche Inhalte

Ähnlich wie Vorstellung Hyvä: Modernes Frontend mit Magento 2

Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
Eric Eggert
 
FMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam AugustinFMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam Augustin
Verein FM Konferenz
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
Kai Donato
 
Globetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HHGlobetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HH
Sebastian Heuer
 
Hybride Entwicklung mit Ionic
Hybride Entwicklung mit IonicHybride Entwicklung mit Ionic
Hybride Entwicklung mit Ionic
Lukas Leander Rosenstock
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Amazee Labs
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
Hussein Morsy
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
QAware GmbH
 
AdminCamp2017 - ApplicationInsights
AdminCamp2017 - ApplicationInsightsAdminCamp2017 - ApplicationInsights
AdminCamp2017 - ApplicationInsights
Christoph Adler
 
Performanter, hochskalierbarer Web 2.0-Dienst in Ruby
Performanter, hochskalierbarer Web 2.0-Dienst in RubyPerformanter, hochskalierbarer Web 2.0-Dienst in Ruby
Performanter, hochskalierbarer Web 2.0-Dienst in Ruby
vesparun
 
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzNode.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Kai Donato
 
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision AusbildungenGratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Eduvision Ausbildungen
 
FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert KaiserFMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
Verein FM Konferenz
 
Chatbot Hackathon Slidedeck
Chatbot Hackathon SlidedeckChatbot Hackathon Slidedeck
Chatbot Hackathon Slidedeck
Allgeier (Schweiz) AG
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
Christian Giesswein
 
SEODay 2011 - Seitennetzwerk mit WordPress effizient aufbauen und verwalten
SEODay 2011 - Seitennetzwerk mit WordPress effizient aufbauen und verwaltenSEODay 2011 - Seitennetzwerk mit WordPress effizient aufbauen und verwalten
SEODay 2011 - Seitennetzwerk mit WordPress effizient aufbauen und verwalten
get on top gmbh
 
OSMC 2011 | Monitoring "wer kennt wen" mit free and open source software by J...
OSMC 2011 | Monitoring "wer kennt wen" mit free and open source software by J...OSMC 2011 | Monitoring "wer kennt wen" mit free and open source software by J...
OSMC 2011 | Monitoring "wer kennt wen" mit free and open source software by J...
NETWAYS
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO Campixx
Sebastian Blum
 
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIsNever Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
Stefan Adolf
 
NETWAYS Cloud - Der Weg zur eigenen VM (Webinar vom 15. Juli 2016)
NETWAYS Cloud - Der Weg zur eigenen VM (Webinar vom 15. Juli 2016)NETWAYS Cloud - Der Weg zur eigenen VM (Webinar vom 15. Juli 2016)
NETWAYS Cloud - Der Weg zur eigenen VM (Webinar vom 15. Juli 2016)
NETWAYS
 

Ähnlich wie Vorstellung Hyvä: Modernes Frontend mit Magento 2 (20)

Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
FMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam AugustinFMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam Augustin
 
Avoid Network-Issues and Polling
Avoid Network-Issues and PollingAvoid Network-Issues and Polling
Avoid Network-Issues and Polling
 
Globetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HHGlobetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HH
 
Hybride Entwicklung mit Ionic
Hybride Entwicklung mit IonicHybride Entwicklung mit Ionic
Hybride Entwicklung mit Ionic
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
AdminCamp2017 - ApplicationInsights
AdminCamp2017 - ApplicationInsightsAdminCamp2017 - ApplicationInsights
AdminCamp2017 - ApplicationInsights
 
Performanter, hochskalierbarer Web 2.0-Dienst in Ruby
Performanter, hochskalierbarer Web 2.0-Dienst in RubyPerformanter, hochskalierbarer Web 2.0-Dienst in Ruby
Performanter, hochskalierbarer Web 2.0-Dienst in Ruby
 
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzNode.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
 
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision AusbildungenGratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
 
FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert KaiserFMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
 
Chatbot Hackathon Slidedeck
Chatbot Hackathon SlidedeckChatbot Hackathon Slidedeck
Chatbot Hackathon Slidedeck
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
 
SEODay 2011 - Seitennetzwerk mit WordPress effizient aufbauen und verwalten
SEODay 2011 - Seitennetzwerk mit WordPress effizient aufbauen und verwaltenSEODay 2011 - Seitennetzwerk mit WordPress effizient aufbauen und verwalten
SEODay 2011 - Seitennetzwerk mit WordPress effizient aufbauen und verwalten
 
OSMC 2011 | Monitoring "wer kennt wen" mit free and open source software by J...
OSMC 2011 | Monitoring "wer kennt wen" mit free and open source software by J...OSMC 2011 | Monitoring "wer kennt wen" mit free and open source software by J...
OSMC 2011 | Monitoring "wer kennt wen" mit free and open source software by J...
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO Campixx
 
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIsNever Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
 
NETWAYS Cloud - Der Weg zur eigenen VM (Webinar vom 15. Juli 2016)
NETWAYS Cloud - Der Weg zur eigenen VM (Webinar vom 15. Juli 2016)NETWAYS Cloud - Der Weg zur eigenen VM (Webinar vom 15. Juli 2016)
NETWAYS Cloud - Der Weg zur eigenen VM (Webinar vom 15. Juli 2016)
 

Mehr von Andreas von Studnitz

Successful projects with Hyvä - The impact of Developer Happiness
Successful projects with Hyvä - The impact of Developer HappinessSuccessful projects with Hyvä - The impact of Developer Happiness
Successful projects with Hyvä - The impact of Developer Happiness
Andreas von Studnitz
 
Code Quality with Magento 2
Code Quality with Magento 2Code Quality with Magento 2
Code Quality with Magento 2
Andreas von Studnitz
 
Dependency Injection Extended: the way to advanced Magento 2 development
Dependency Injection Extended: the way to advanced Magento 2 developmentDependency Injection Extended: the way to advanced Magento 2 development
Dependency Injection Extended: the way to advanced Magento 2 development
Andreas von Studnitz
 
Magento Audit - anonymisiert (German)
Magento Audit - anonymisiert (German)Magento Audit - anonymisiert (German)
Magento Audit - anonymisiert (German)
Andreas von Studnitz
 
Magento Worst Practice (Meet Magento Poland 2016)
Magento Worst Practice (Meet Magento Poland 2016)Magento Worst Practice (Meet Magento Poland 2016)
Magento Worst Practice (Meet Magento Poland 2016)
Andreas von Studnitz
 
Was kann denn schon passieren? Sicherheit in Magento-Shops
Was kann denn schon passieren? Sicherheit in Magento-ShopsWas kann denn schon passieren? Sicherheit in Magento-Shops
Was kann denn schon passieren? Sicherheit in Magento-Shops
Andreas von Studnitz
 
What could possibly go wrong? Security in Magento Shops
What could possibly go wrong? Security in Magento ShopsWhat could possibly go wrong? Security in Magento Shops
What could possibly go wrong? Security in Magento Shops
Andreas von Studnitz
 

Mehr von Andreas von Studnitz (7)

Successful projects with Hyvä - The impact of Developer Happiness
Successful projects with Hyvä - The impact of Developer HappinessSuccessful projects with Hyvä - The impact of Developer Happiness
Successful projects with Hyvä - The impact of Developer Happiness
 
Code Quality with Magento 2
Code Quality with Magento 2Code Quality with Magento 2
Code Quality with Magento 2
 
Dependency Injection Extended: the way to advanced Magento 2 development
Dependency Injection Extended: the way to advanced Magento 2 developmentDependency Injection Extended: the way to advanced Magento 2 development
Dependency Injection Extended: the way to advanced Magento 2 development
 
Magento Audit - anonymisiert (German)
Magento Audit - anonymisiert (German)Magento Audit - anonymisiert (German)
Magento Audit - anonymisiert (German)
 
Magento Worst Practice (Meet Magento Poland 2016)
Magento Worst Practice (Meet Magento Poland 2016)Magento Worst Practice (Meet Magento Poland 2016)
Magento Worst Practice (Meet Magento Poland 2016)
 
Was kann denn schon passieren? Sicherheit in Magento-Shops
Was kann denn schon passieren? Sicherheit in Magento-ShopsWas kann denn schon passieren? Sicherheit in Magento-Shops
Was kann denn schon passieren? Sicherheit in Magento-Shops
 
What could possibly go wrong? Security in Magento Shops
What could possibly go wrong? Security in Magento ShopsWhat could possibly go wrong? Security in Magento Shops
What could possibly go wrong? Security in Magento Shops
 

Vorstellung Hyvä: Modernes Frontend mit Magento 2