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: — [email protected] — 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