Presentation for Meet-Magento Indonesia 2021. It describes what the Hyvä Theme for Magento is and how it is working with it from a (mainly backend) 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