SlideShare a Scribd company logo
 
Hyvä
a developers perspective
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Vinai
— 2008
Fell in love with Magento
— 2016
Frustrated and disillusioned
— Since October 2020
Freshly in love again
 
Having joined Hyvä
vs
an objective perspective
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
 
A primer
Hyvä is a brand-new frontend for Magento 2
with the best DevExperience, Performance and
Time to Market.
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
 
It's a theme, but unlike any Magento
theme you know.
 
A complete replacement of the frontend stack.
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
!
bye bye ugly parts
!
bye less
!
bye requirejs, jquery, knockout, underscore, ... (MB++)
!
bye Magento UI components
!
bye slow deployments
!
bye frontend complexity
!
bye days wasted optimizing frontend performance
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
HTML5
TailwindCSS
AlpineJS !
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
 
1.000 €
License
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
 
Trust
✅
Backed by a commercial entity
✅
Continued development
✅
Long term support
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Access to the ecosystem
✅
Community
✅
Documentation
✅
Private slack
✅
Gitlab source code
✅
Support
✅
Upgrades
✅
Compatibility modules
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Now that you know what Hyvä is...
As a primarily backend developer,
how was it ge!ing started?
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
How was it getting started with TailwindCSS?
It's like CSS but simpler. Great docs. It's fun!
Lots of great tooling: IDE plugins, chrome dev tools, CLI
tools, browser plugins
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
How was it getting started
with AlpineJS?
Reading the documentation took
me about one hour.
!
How was it getting started
with AlpineJS?
I felt comfortable working with it
after one more hour.
!
A thin layer over vanilla
JavaScript that makes working
with the DOM even simpler.
 
Day to day work
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Third Party
Modules
 
We all use them!
But, they are built for Luma...
Compatibility Modules
A compatibility module provides Hyvä compatible
templates for existing third party modules.
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
We all need a similar                                     Instead of
subset of                                                replicating the
modules.                                                             effort
 
                                          we share
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Compat Module Tracker
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Making a compatibility module:
1. Copy template into compat module
2. Inline data-mage-init, x-magento-init, and require()
3. Inline ko .html templates (default to SSR)
4. Port "Magento JS" to AlpineJS + native
5. Add TailwindCSS classes (use Windy Browser Plugin)
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Support
— Lots of documentation
— Automatic template overrides
for compat modules
— Support via slack
— Existing compat modules
Theming
— Styling templates with utility CSS classes is fast
— There is a gargantuan amount of Tailwindcss
examples on the interwebs
— Magento ViewModels take center stage
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
The View Model Registry
/** @var ViewModelRegistry $viewModels */
/** @var HeroiconsSolid $heroiconsSolid */
/** @var ProductPage $productViewModel */
/** @var Store $storeViewModel */
$heroiconsSolid = $viewModels->require(HeroiconsSolid::class);
$productViewModel = $viewModels->require(ProductPage::class);
$storeViewModel = $viewModels->require(Store::class);
$currentProduct = $productViewModel->getProduct();
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
The View Model Registry
— Templates are more encapsulated
— Not as dependent on the layout block hierarchy
— ViewModels are composable
— Hyvä ViewModel feature:
Provide FPC cache identities (a.k.a. tags) for pages!
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Roadmap for 2021
— Alpine v3 & Tailwind JIT integration
— Adobe Commerce Feature coverage
— More Compatibility Modules
— UI Component Library
— ??? Surprises (the good kind)
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Results
— Significantly shorter project build times
— All agencies who have completed a Hyvä project want
to continue or already have started doing more Hyvä
builds
— Overall developer satisfaction is very high
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Thanks
Please contact me at:
— vinai@hyva.io
— https://twitter.com/VinaiKopp
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
Image Credits thanks to Unsplash
 
 
 
By Jon Tyson             By Darryl Kelly         By Omid Armin
Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp

More Related Content

What's hot

Manchester MuleSoft Meetup #6 - Runtime Fabric with Mulesoft
Manchester MuleSoft Meetup #6 - Runtime Fabric with Mulesoft Manchester MuleSoft Meetup #6 - Runtime Fabric with Mulesoft
Manchester MuleSoft Meetup #6 - Runtime Fabric with Mulesoft
Akshata Sawant
 
"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych
Fwdays
 
Website design with Wordpress ppt
Website design with Wordpress pptWebsite design with Wordpress ppt
Website design with Wordpress ppt
WTACADEMY5
 
E Commerce Proposal
E Commerce ProposalE Commerce Proposal
E Commerce Proposal
Ansar ul Haq
 
Mikrofrontend a Module Federation
Mikrofrontend a Module FederationMikrofrontend a Module Federation
Mikrofrontend a Module Federation
The Software House
 
MuleSoft Deployment Strategies (RTF vs Hybrid vs CloudHub)
MuleSoft Deployment Strategies (RTF vs Hybrid vs CloudHub)MuleSoft Deployment Strategies (RTF vs Hybrid vs CloudHub)
MuleSoft Deployment Strategies (RTF vs Hybrid vs CloudHub)
Prashanth Kurimella
 
An Introduction To Jenkins
An Introduction To JenkinsAn Introduction To Jenkins
An Introduction To Jenkins
Knoldus Inc.
 
Gitlab flow
Gitlab flowGitlab flow
Gitlab flow
viniciusban
 
Git Branching Model
Git Branching ModelGit Branching Model
Git Branching Model
Harun Yardımcı
 
Magento Product Recommendations powered by Adobe Sensei (AI)
Magento Product Recommendations powered by Adobe Sensei (AI)Magento Product Recommendations powered by Adobe Sensei (AI)
Magento Product Recommendations powered by Adobe Sensei (AI)
Deepika Janiyani
 
Chassis and AppFactory: Accelerate Development of Cloud-Native Microservices ...
Chassis and AppFactory: Accelerate Development of Cloud-Native Microservices ...Chassis and AppFactory: Accelerate Development of Cloud-Native Microservices ...
Chassis and AppFactory: Accelerate Development of Cloud-Native Microservices ...
VMware Tanzu
 
Shopify Mulesoft Integrations
Shopify Mulesoft IntegrationsShopify Mulesoft Integrations
Shopify Mulesoft Integrations
NeerajKumar1965
 
Introduction To CodeIgniter
Introduction To CodeIgniterIntroduction To CodeIgniter
Introduction To CodeIgniter
Muhammad Hafiz Hasan
 
Mule Common Logging & Error Handling Framework
Mule Common Logging & Error Handling FrameworkMule Common Logging & Error Handling Framework
Mule Common Logging & Error Handling Framework
Vijay Reddy
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
Julio Bitencourt
 
Introdução ao Flyway
Introdução ao FlywayIntrodução ao Flyway
Introdução ao Flyway
Jadson Santos
 
Content Management - The story of headless CMS
Content Management - The story of headless CMSContent Management - The story of headless CMS
Content Management - The story of headless CMS
Strapi
 
Basic Wordpress PPT
Basic Wordpress PPT Basic Wordpress PPT
Basic Wordpress PPT
mayur akabari
 

What's hot (20)

Manchester MuleSoft Meetup #6 - Runtime Fabric with Mulesoft
Manchester MuleSoft Meetup #6 - Runtime Fabric with Mulesoft Manchester MuleSoft Meetup #6 - Runtime Fabric with Mulesoft
Manchester MuleSoft Meetup #6 - Runtime Fabric with Mulesoft
 
Docker and Devops
Docker and DevopsDocker and Devops
Docker and Devops
 
"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych"Micro-frontends, web development", Oleksandr Khivrych
"Micro-frontends, web development", Oleksandr Khivrych
 
Oracle Fusion Middleware
Oracle Fusion MiddlewareOracle Fusion Middleware
Oracle Fusion Middleware
 
Website design with Wordpress ppt
Website design with Wordpress pptWebsite design with Wordpress ppt
Website design with Wordpress ppt
 
E Commerce Proposal
E Commerce ProposalE Commerce Proposal
E Commerce Proposal
 
Mikrofrontend a Module Federation
Mikrofrontend a Module FederationMikrofrontend a Module Federation
Mikrofrontend a Module Federation
 
MuleSoft Deployment Strategies (RTF vs Hybrid vs CloudHub)
MuleSoft Deployment Strategies (RTF vs Hybrid vs CloudHub)MuleSoft Deployment Strategies (RTF vs Hybrid vs CloudHub)
MuleSoft Deployment Strategies (RTF vs Hybrid vs CloudHub)
 
An Introduction To Jenkins
An Introduction To JenkinsAn Introduction To Jenkins
An Introduction To Jenkins
 
Gitlab flow
Gitlab flowGitlab flow
Gitlab flow
 
Git Branching Model
Git Branching ModelGit Branching Model
Git Branching Model
 
Magento Product Recommendations powered by Adobe Sensei (AI)
Magento Product Recommendations powered by Adobe Sensei (AI)Magento Product Recommendations powered by Adobe Sensei (AI)
Magento Product Recommendations powered by Adobe Sensei (AI)
 
Chassis and AppFactory: Accelerate Development of Cloud-Native Microservices ...
Chassis and AppFactory: Accelerate Development of Cloud-Native Microservices ...Chassis and AppFactory: Accelerate Development of Cloud-Native Microservices ...
Chassis and AppFactory: Accelerate Development of Cloud-Native Microservices ...
 
Shopify Mulesoft Integrations
Shopify Mulesoft IntegrationsShopify Mulesoft Integrations
Shopify Mulesoft Integrations
 
Introduction To CodeIgniter
Introduction To CodeIgniterIntroduction To CodeIgniter
Introduction To CodeIgniter
 
Mule Common Logging & Error Handling Framework
Mule Common Logging & Error Handling FrameworkMule Common Logging & Error Handling Framework
Mule Common Logging & Error Handling Framework
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
 
Introdução ao Flyway
Introdução ao FlywayIntrodução ao Flyway
Introdução ao Flyway
 
Content Management - The story of headless CMS
Content Management - The story of headless CMSContent Management - The story of headless CMS
Content Management - The story of headless CMS
 
Basic Wordpress PPT
Basic Wordpress PPT Basic Wordpress PPT
Basic Wordpress PPT
 

Similar to Hyvä from a developer perspective

Yoav Kutner Dutchento
Yoav Kutner DutchentoYoav Kutner Dutchento
Yoav Kutner Dutchento
Guido X Jansen
 
Hyvä: Compatibility Modules
Hyvä: Compatibility ModulesHyvä: Compatibility Modules
Hyvä: Compatibility Modules
vinaikopp
 
Better Digital Products with Micro Frontends and Modyo
Better Digital Products with Micro Frontends and ModyoBetter Digital Products with Micro Frontends and Modyo
Better Digital Products with Micro Frontends and Modyo
Emma Parsons
 
My presentation at Grace Hopper Conference 2014, about Rewrite/Refactor with ...
My presentation at Grace Hopper Conference 2014, about Rewrite/Refactor with ...My presentation at Grace Hopper Conference 2014, about Rewrite/Refactor with ...
My presentation at Grace Hopper Conference 2014, about Rewrite/Refactor with ...
Ananya Sen
 
Chernivtsi Magento Meetup&Contribution day. Naida V.
Chernivtsi Magento Meetup&Contribution day. Naida V.Chernivtsi Magento Meetup&Contribution day. Naida V.
Chernivtsi Magento Meetup&Contribution day. Naida V.
Elogic Magento Development
 
Kendo ui web
Kendo ui webKendo ui web
How I ended up touching Magento core
How I ended up touching Magento coreHow I ended up touching Magento core
How I ended up touching Magento core
Alessandro Ronchi
 
Web components and Package managers
Web components and Package managersWeb components and Package managers
Web components and Package managers
btopro
 
Vue Storefront MUG
Vue Storefront MUGVue Storefront MUG
Vue Storefront MUG
Filip Rakowski
 
Js foo - Sept 8 upload
Js foo - Sept 8 uploadJs foo - Sept 8 upload
Js foo - Sept 8 upload
Debnath Sinha
 
Trading up: Adding Flexibility and Scalability to Bouygues Telecom with MongoDB
Trading up: Adding Flexibility and Scalability to Bouygues Telecom with MongoDBTrading up: Adding Flexibility and Scalability to Bouygues Telecom with MongoDB
Trading up: Adding Flexibility and Scalability to Bouygues Telecom with MongoDBMongoDB
 
Matteo Santagata - Is your project scaling right? The BEE case study - Codemo...
Matteo Santagata - Is your project scaling right? The BEE case study - Codemo...Matteo Santagata - Is your project scaling right? The BEE case study - Codemo...
Matteo Santagata - Is your project scaling right? The BEE case study - Codemo...
Codemotion
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
Temitayo Fadojutimi
 
Magezon Page Builder - Drag & Drop Magento 2 Page Builder Extension
Magezon Page Builder - Drag & Drop Magento 2 Page Builder ExtensionMagezon Page Builder - Drag & Drop Magento 2 Page Builder Extension
Magezon Page Builder - Drag & Drop Magento 2 Page Builder Extension
Magezon
 
Technologies A MERN Stack Developer Should Learn in 2022.pptx
Technologies A MERN Stack Developer Should Learn in 2022.pptxTechnologies A MERN Stack Developer Should Learn in 2022.pptx
Technologies A MERN Stack Developer Should Learn in 2022.pptx
75waytechnologies
 
Game changer for e-commerce - Vue Storefront - open source pwa
Game changer for e-commerce - Vue Storefront - open source pwa Game changer for e-commerce - Vue Storefront - open source pwa
Game changer for e-commerce - Vue Storefront - open source pwa
Divante
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistMark Fayngersh
 
React Native - Build Native Mobile App
React Native - Build Native Mobile AppReact Native - Build Native Mobile App
React Native - Build Native Mobile App
Mobio Solutions
 
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
Heiko Voigt
 
James Zetlen - PWA Studio Integration…With You
James Zetlen - PWA Studio Integration…With YouJames Zetlen - PWA Studio Integration…With You
James Zetlen - PWA Studio Integration…With You
Meet Magento Italy
 

Similar to Hyvä from a developer perspective (20)

Yoav Kutner Dutchento
Yoav Kutner DutchentoYoav Kutner Dutchento
Yoav Kutner Dutchento
 
Hyvä: Compatibility Modules
Hyvä: Compatibility ModulesHyvä: Compatibility Modules
Hyvä: Compatibility Modules
 
Better Digital Products with Micro Frontends and Modyo
Better Digital Products with Micro Frontends and ModyoBetter Digital Products with Micro Frontends and Modyo
Better Digital Products with Micro Frontends and Modyo
 
My presentation at Grace Hopper Conference 2014, about Rewrite/Refactor with ...
My presentation at Grace Hopper Conference 2014, about Rewrite/Refactor with ...My presentation at Grace Hopper Conference 2014, about Rewrite/Refactor with ...
My presentation at Grace Hopper Conference 2014, about Rewrite/Refactor with ...
 
Chernivtsi Magento Meetup&Contribution day. Naida V.
Chernivtsi Magento Meetup&Contribution day. Naida V.Chernivtsi Magento Meetup&Contribution day. Naida V.
Chernivtsi Magento Meetup&Contribution day. Naida V.
 
Kendo ui web
Kendo ui webKendo ui web
Kendo ui web
 
How I ended up touching Magento core
How I ended up touching Magento coreHow I ended up touching Magento core
How I ended up touching Magento core
 
Web components and Package managers
Web components and Package managersWeb components and Package managers
Web components and Package managers
 
Vue Storefront MUG
Vue Storefront MUGVue Storefront MUG
Vue Storefront MUG
 
Js foo - Sept 8 upload
Js foo - Sept 8 uploadJs foo - Sept 8 upload
Js foo - Sept 8 upload
 
Trading up: Adding Flexibility and Scalability to Bouygues Telecom with MongoDB
Trading up: Adding Flexibility and Scalability to Bouygues Telecom with MongoDBTrading up: Adding Flexibility and Scalability to Bouygues Telecom with MongoDB
Trading up: Adding Flexibility and Scalability to Bouygues Telecom with MongoDB
 
Matteo Santagata - Is your project scaling right? The BEE case study - Codemo...
Matteo Santagata - Is your project scaling right? The BEE case study - Codemo...Matteo Santagata - Is your project scaling right? The BEE case study - Codemo...
Matteo Santagata - Is your project scaling right? The BEE case study - Codemo...
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
 
Magezon Page Builder - Drag & Drop Magento 2 Page Builder Extension
Magezon Page Builder - Drag & Drop Magento 2 Page Builder ExtensionMagezon Page Builder - Drag & Drop Magento 2 Page Builder Extension
Magezon Page Builder - Drag & Drop Magento 2 Page Builder Extension
 
Technologies A MERN Stack Developer Should Learn in 2022.pptx
Technologies A MERN Stack Developer Should Learn in 2022.pptxTechnologies A MERN Stack Developer Should Learn in 2022.pptx
Technologies A MERN Stack Developer Should Learn in 2022.pptx
 
Game changer for e-commerce - Vue Storefront - open source pwa
Game changer for e-commerce - Vue Storefront - open source pwa Game changer for e-commerce - Vue Storefront - open source pwa
Game changer for e-commerce - Vue Storefront - open source pwa
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
React Native - Build Native Mobile App
React Native - Build Native Mobile AppReact Native - Build Native Mobile App
React Native - Build Native Mobile App
 
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
 
James Zetlen - PWA Studio Integration…With You
James Zetlen - PWA Studio Integration…With YouJames Zetlen - PWA Studio Integration…With You
James Zetlen - PWA Studio Integration…With You
 

More from vinaikopp

Building Mage-OS - MageTitans 2023
Building Mage-OS - MageTitans 2023Building Mage-OS - MageTitans 2023
Building Mage-OS - MageTitans 2023
vinaikopp
 
Property Based Testing in PHP
Property Based Testing in PHPProperty Based Testing in PHP
Property Based Testing in PHP
vinaikopp
 
Property based testing - MageTestFest 2019
Property based testing - MageTestFest 2019Property based testing - MageTestFest 2019
Property based testing - MageTestFest 2019
vinaikopp
 
Becoming Certified - MageTitansMCR 2018
Becoming Certified - MageTitansMCR 2018Becoming Certified - MageTitansMCR 2018
Becoming Certified - MageTitansMCR 2018
vinaikopp
 
SOS UiComponents
SOS UiComponentsSOS UiComponents
SOS UiComponents
vinaikopp
 
ClojureScript in Magento 2 - PHPUGMRN
ClojureScript in Magento 2 - PHPUGMRNClojureScript in Magento 2 - PHPUGMRN
ClojureScript in Magento 2 - PHPUGMRN
vinaikopp
 
Magento 2 TDD Code Kata
Magento 2 TDD Code KataMagento 2 TDD Code Kata
Magento 2 TDD Code Kata
vinaikopp
 
Magento 2 TDD Code Kata Intro
Magento 2 TDD Code Kata IntroMagento 2 TDD Code Kata Intro
Magento 2 TDD Code Kata Intro
vinaikopp
 
Testing Magento 2
Testing Magento 2Testing Magento 2
Testing Magento 2
vinaikopp
 
ClojureScript in Magento 2 - MageTitansMCR 2017
ClojureScript in Magento 2 - MageTitansMCR 2017ClojureScript in Magento 2 - MageTitansMCR 2017
ClojureScript in Magento 2 - MageTitansMCR 2017
vinaikopp
 
Lizards & Pumpkins Catalog Replacement at mm17de
Lizards & Pumpkins Catalog Replacement at mm17deLizards & Pumpkins Catalog Replacement at mm17de
Lizards & Pumpkins Catalog Replacement at mm17de
vinaikopp
 
Stories from the other side
Stories from the other sideStories from the other side
Stories from the other side
vinaikopp
 
Writing Testable Code (for Magento 1 and 2) 2016 Romaina
Writing Testable Code (for Magento 1 and 2)  2016 RomainaWriting Testable Code (for Magento 1 and 2)  2016 Romaina
Writing Testable Code (for Magento 1 and 2) 2016 Romaina
vinaikopp
 
Writing Testable Code (for Magento 1 and 2)
Writing Testable Code (for Magento 1 and 2)Writing Testable Code (for Magento 1 and 2)
Writing Testable Code (for Magento 1 and 2)
vinaikopp
 
Writing testable Code (MageTitans Mini 2016)
Writing testable Code (MageTitans Mini 2016)Writing testable Code (MageTitans Mini 2016)
Writing testable Code (MageTitans Mini 2016)
vinaikopp
 
Getting your Hands Dirty Testing Magento 2 (at London Meetup)
Getting your Hands Dirty Testing Magento 2 (at London Meetup)Getting your Hands Dirty Testing Magento 2 (at London Meetup)
Getting your Hands Dirty Testing Magento 2 (at London Meetup)
vinaikopp
 
Getting your hands dirty testing Magento 2 (at MageTitansIT)
Getting your hands dirty testing Magento 2 (at MageTitansIT)Getting your hands dirty testing Magento 2 (at MageTitansIT)
Getting your hands dirty testing Magento 2 (at MageTitansIT)
vinaikopp
 
Architecture in-the-small-slides
Architecture in-the-small-slidesArchitecture in-the-small-slides
Architecture in-the-small-slides
vinaikopp
 
Modern Module Architecture
Modern Module ArchitectureModern Module Architecture
Modern Module Architecture
vinaikopp
 
The beautiful Magento module - MageTitans 2014
The beautiful Magento module - MageTitans 2014The beautiful Magento module - MageTitans 2014
The beautiful Magento module - MageTitans 2014
vinaikopp
 

More from vinaikopp (20)

Building Mage-OS - MageTitans 2023
Building Mage-OS - MageTitans 2023Building Mage-OS - MageTitans 2023
Building Mage-OS - MageTitans 2023
 
Property Based Testing in PHP
Property Based Testing in PHPProperty Based Testing in PHP
Property Based Testing in PHP
 
Property based testing - MageTestFest 2019
Property based testing - MageTestFest 2019Property based testing - MageTestFest 2019
Property based testing - MageTestFest 2019
 
Becoming Certified - MageTitansMCR 2018
Becoming Certified - MageTitansMCR 2018Becoming Certified - MageTitansMCR 2018
Becoming Certified - MageTitansMCR 2018
 
SOS UiComponents
SOS UiComponentsSOS UiComponents
SOS UiComponents
 
ClojureScript in Magento 2 - PHPUGMRN
ClojureScript in Magento 2 - PHPUGMRNClojureScript in Magento 2 - PHPUGMRN
ClojureScript in Magento 2 - PHPUGMRN
 
Magento 2 TDD Code Kata
Magento 2 TDD Code KataMagento 2 TDD Code Kata
Magento 2 TDD Code Kata
 
Magento 2 TDD Code Kata Intro
Magento 2 TDD Code Kata IntroMagento 2 TDD Code Kata Intro
Magento 2 TDD Code Kata Intro
 
Testing Magento 2
Testing Magento 2Testing Magento 2
Testing Magento 2
 
ClojureScript in Magento 2 - MageTitansMCR 2017
ClojureScript in Magento 2 - MageTitansMCR 2017ClojureScript in Magento 2 - MageTitansMCR 2017
ClojureScript in Magento 2 - MageTitansMCR 2017
 
Lizards & Pumpkins Catalog Replacement at mm17de
Lizards & Pumpkins Catalog Replacement at mm17deLizards & Pumpkins Catalog Replacement at mm17de
Lizards & Pumpkins Catalog Replacement at mm17de
 
Stories from the other side
Stories from the other sideStories from the other side
Stories from the other side
 
Writing Testable Code (for Magento 1 and 2) 2016 Romaina
Writing Testable Code (for Magento 1 and 2)  2016 RomainaWriting Testable Code (for Magento 1 and 2)  2016 Romaina
Writing Testable Code (for Magento 1 and 2) 2016 Romaina
 
Writing Testable Code (for Magento 1 and 2)
Writing Testable Code (for Magento 1 and 2)Writing Testable Code (for Magento 1 and 2)
Writing Testable Code (for Magento 1 and 2)
 
Writing testable Code (MageTitans Mini 2016)
Writing testable Code (MageTitans Mini 2016)Writing testable Code (MageTitans Mini 2016)
Writing testable Code (MageTitans Mini 2016)
 
Getting your Hands Dirty Testing Magento 2 (at London Meetup)
Getting your Hands Dirty Testing Magento 2 (at London Meetup)Getting your Hands Dirty Testing Magento 2 (at London Meetup)
Getting your Hands Dirty Testing Magento 2 (at London Meetup)
 
Getting your hands dirty testing Magento 2 (at MageTitansIT)
Getting your hands dirty testing Magento 2 (at MageTitansIT)Getting your hands dirty testing Magento 2 (at MageTitansIT)
Getting your hands dirty testing Magento 2 (at MageTitansIT)
 
Architecture in-the-small-slides
Architecture in-the-small-slidesArchitecture in-the-small-slides
Architecture in-the-small-slides
 
Modern Module Architecture
Modern Module ArchitectureModern Module Architecture
Modern Module Architecture
 
The beautiful Magento module - MageTitans 2014
The beautiful Magento module - MageTitans 2014The beautiful Magento module - MageTitans 2014
The beautiful Magento module - MageTitans 2014
 

Recently uploaded

top nidhi software solution freedownload
top nidhi software solution freedownloadtop nidhi software solution freedownload
top nidhi software solution freedownload
vrstrong314
 
How to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good PracticesHow to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good Practices
Globus
 
GlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote sessionGlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote session
Globus
 
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
Juraj Vysvader
 
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfEnhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Jay Das
 
Developing Distributed High-performance Computing Capabilities of an Open Sci...
Developing Distributed High-performance Computing Capabilities of an Open Sci...Developing Distributed High-performance Computing Capabilities of an Open Sci...
Developing Distributed High-performance Computing Capabilities of an Open Sci...
Globus
 
Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604
Fermin Galan
 
SOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar
 
Accelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with PlatformlessAccelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with Platformless
WSO2
 
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptx
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxTop Features to Include in Your Winzo Clone App for Business Growth (4).pptx
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptx
rickgrimesss22
 
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus
 
RISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent EnterpriseRISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent Enterprise
Srikant77
 
Using IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New ZealandUsing IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New Zealand
IES VE
 
Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024
Globus
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
Tendenci - The Open Source AMS (Association Management Software)
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
Globus
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
AMB-Review
 
Large Language Models and the End of Programming
Large Language Models and the End of ProgrammingLarge Language Models and the End of Programming
Large Language Models and the End of Programming
Matt Welsh
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
abdulrafaychaudhry
 
How Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptxHow Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptx
wottaspaceseo
 

Recently uploaded (20)

top nidhi software solution freedownload
top nidhi software solution freedownloadtop nidhi software solution freedownload
top nidhi software solution freedownload
 
How to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good PracticesHow to Position Your Globus Data Portal for Success Ten Good Practices
How to Position Your Globus Data Portal for Success Ten Good Practices
 
GlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote sessionGlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote session
 
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
 
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfEnhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf
 
Developing Distributed High-performance Computing Capabilities of an Open Sci...
Developing Distributed High-performance Computing Capabilities of an Open Sci...Developing Distributed High-performance Computing Capabilities of an Open Sci...
Developing Distributed High-performance Computing Capabilities of an Open Sci...
 
Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604Orion Context Broker introduction 20240604
Orion Context Broker introduction 20240604
 
SOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBroker
 
Accelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with PlatformlessAccelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with Platformless
 
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptx
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxTop Features to Include in Your Winzo Clone App for Business Growth (4).pptx
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptx
 
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024
 
RISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent EnterpriseRISE with SAP and Journey to the Intelligent Enterprise
RISE with SAP and Journey to the Intelligent Enterprise
 
Using IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New ZealandUsing IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New Zealand
 
Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
 
Understanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSageUnderstanding Globus Data Transfers with NetSage
Understanding Globus Data Transfers with NetSage
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
 
Large Language Models and the End of Programming
Large Language Models and the End of ProgrammingLarge Language Models and the End of Programming
Large Language Models and the End of Programming
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
 
How Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptxHow Recreation Management Software Can Streamline Your Operations.pptx
How Recreation Management Software Can Streamline Your Operations.pptx
 

Hyvä from a developer perspective

  • 1.   Hyvä a developers perspective Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 2. Vinai — 2008 Fell in love with Magento — 2016 Frustrated and disillusioned — Since October 2020 Freshly in love again
  • 3.   Having joined Hyvä vs an objective perspective Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 4.   A primer Hyvä is a brand-new frontend for Magento 2 with the best DevExperience, Performance and Time to Market. Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 5.   It's a theme, but unlike any Magento theme you know.   A complete replacement of the frontend stack. Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 6. ! bye bye ugly parts ! bye less ! bye requirejs, jquery, knockout, underscore, ... (MB++) ! bye Magento UI components ! bye slow deployments ! bye frontend complexity ! bye days wasted optimizing frontend performance Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 7. HTML5 TailwindCSS AlpineJS ! Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 8.   1.000 € License Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 9.   Trust ✅ Backed by a commercial entity ✅ Continued development ✅ Long term support Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 10. Access to the ecosystem ✅ Community ✅ Documentation ✅ Private slack ✅ Gitlab source code ✅ Support ✅ Upgrades ✅ Compatibility modules Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 11. Now that you know what Hyvä is... As a primarily backend developer, how was it ge!ing started? Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 12. How was it getting started with TailwindCSS? It's like CSS but simpler. Great docs. It's fun! Lots of great tooling: IDE plugins, chrome dev tools, CLI tools, browser plugins Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 13. How was it getting started with AlpineJS? Reading the documentation took me about one hour. !
  • 14. How was it getting started with AlpineJS? I felt comfortable working with it after one more hour. ! A thin layer over vanilla JavaScript that makes working with the DOM even simpler.
  • 15.   Day to day work Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 16. Third Party Modules   We all use them! But, they are built for Luma...
  • 17. Compatibility Modules A compatibility module provides Hyvä compatible templates for existing third party modules. Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 18. We all need a similar                                     Instead of subset of                                                replicating the modules.                                                             effort                                             we share Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 19. Compat Module Tracker Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 20. Making a compatibility module: 1. Copy template into compat module 2. Inline data-mage-init, x-magento-init, and require() 3. Inline ko .html templates (default to SSR) 4. Port "Magento JS" to AlpineJS + native 5. Add TailwindCSS classes (use Windy Browser Plugin) Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 21. Support — Lots of documentation — Automatic template overrides for compat modules — Support via slack — Existing compat modules
  • 22. Theming — Styling templates with utility CSS classes is fast — There is a gargantuan amount of Tailwindcss examples on the interwebs — Magento ViewModels take center stage Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 23. The View Model Registry /** @var ViewModelRegistry $viewModels */ /** @var HeroiconsSolid $heroiconsSolid */ /** @var ProductPage $productViewModel */ /** @var Store $storeViewModel */ $heroiconsSolid = $viewModels->require(HeroiconsSolid::class); $productViewModel = $viewModels->require(ProductPage::class); $storeViewModel = $viewModels->require(Store::class); $currentProduct = $productViewModel->getProduct(); Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 24. The View Model Registry — Templates are more encapsulated — Not as dependent on the layout block hierarchy — ViewModels are composable — Hyvä ViewModel feature: Provide FPC cache identities (a.k.a. tags) for pages! Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 25. Roadmap for 2021 — Alpine v3 & Tailwind JIT integration — Adobe Commerce Feature coverage — More Compatibility Modules — UI Component Library — ??? Surprises (the good kind) Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 26. Results — Significantly shorter project build times — All agencies who have completed a Hyvä project want to continue or already have started doing more Hyvä builds — Overall developer satisfaction is very high Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 27. Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 28. Thanks Please contact me at: — vinai@hyva.io — https://twitter.com/VinaiKopp Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp
  • 29. Image Credits thanks to Unsplash       By Jon Tyson             By Darryl Kelly         By Omid Armin Meet-Magento Indonesia – Hyvä: A developers perspective – 2021-12-08 – © Vinai Kopp