Willem Wigman joins us in this episode to talk about Hyvä - his Tailwind & Alpinejs based front end solution to Magento 2's over-architectured default front end stack

The Registry - Magento 2 dev podcast

Peter Jaap Blaakmeer, Jisse Reitsma, Willem Wigman

Hyväaaaaalalalalalala

NOV 20, 202063 MIN
The Registry - Magento 2 dev podcast

Hyväaaaaalalalalalala

NOV 20, 202063 MIN

Description

Full transcription below the show notes

Show notes

We talked primarily about https://hyva.io/ 

Some other links we mentioned along the way: 

  • https://tailwindcss.com/
  • https://github.com/alpinejs/alpine 
  • https://laravel.com/ 
  • https://laravel-livewire.com/ 
  • https://reactjs.org/ 
  • https://vuejs.org/ 
  • https://angular.io/ 
  • https://jquery.com/ 
  • https://knockoutjs.com/ 
  • https://github.com/magento/pwa-studio 
  • https://github.com/SnowdogApps/magento2-alpaca-theme 
  • https://www.shipperhq.com/enhanced-checkout 
  • https://github.com/SnowdogApps/magento2-vue-checkout

Full transcription

Jisse: Hi, everyone. Thanks for tuning into the registry number four. Oh, and I made a little bit of mistake actually while starting because we were supposed to start in Dutch. So my accent is going to be very, very Dutchy.


Peter Jaap:
Very Dutchy? 


Jisse:
Very Dutchy. And Peter Jaap? 


Peter Jaap:
Hello


Jisse:
Hello. And Willem Wigman.


Willem:
Hallo


Peter Jaap:
Willem Wigman. 


Jisse:
Yeah. So The Registry, the podcast number four. And I had to ask Peter Jaap before we started, because I simply lost track. It feels like we have been talking about nonsense for ages already.


Peter Jaap:
It is only four? I thought it was 14.


Jisse:
42, yeah. 


Peter Jaap:
42


Jisse:
But yeah, so the format is a little bit different. Instead of boring all of the listeners with two Dutch guys talking, we thought we can do better. So there are three Dutch guys. One from the middle of the Netherlands, so that's me. One from the North, that's Peter Jaap, and one from the South, that's Willem. So hi, Willem.


Peter Jaap:
The deep South. 


Willem:
Hallo. 


Jisse:
Yeah, that’s the accent.


Willem:
Yeah. I come from the warm place in the Netherlands.


Peter Jaap:
That's why you're the only one without a sweater. I get it now.


Willem:
Yeah.


Jisse:
Yeah. So in the South, it's about 0.01 degrees warmer. So indeed, it’s quite a difference.


Willem:
Yeah, climate--


Jisse:
So thank you, Willem, for joining us. 


Willem:
Thanks for having me. 


Jisse:
Yeah, we came to this conclusion that it might be nice actually, to have you talk a little bit about the new thing that you've created. And I think a lot of the listeners will know about it but yeah, there was actually almost no attention for it during ReactorCon, and nobody asked you to do any kind of podcast or interview ever since. So actually, from the community, it was just dead silence. And we felt it was time for a change, right?


Willem:
Yeah, I would like some change as well. That's been kind of the headline of what we've been doing. Yeah, and certainly not enough attention.


Jisse:
Yeah. And so the obvious start always is with what it's called. So the name is Hyfa, hoofa, hufter… So what is the real pronunciation? Here we go. 


Willem:
Huva. 


Jisse:
And that's Swedish? 


Willem:
It’s Finnish.


Jisse:
It’s Finnish.


Willem:
Finnish, yeah.


Jisse:
It’s finished.


Willem:
It’s Finnish, yeah. People are going to have a hard time recognizing where it's sarcasm and where we're being serious. They're used to it from you but maybe from me, it's new. But to say the first serious thing here, Hyva is Finnish, and it means good, desirable, and trustworthy. So it has a lot of positive meanings and Finnish. 


Jisse:
Yeah. And I think in general, do we want to make sure that people get the memo? Could you maybe describe Hyva in a few sentences?


Willem:
Yeah, sure. So as a lot of listeners might well be aware of Magento 2 front end has been kind of an issue since Magento 2.0. Arguably, before, a little bit as well, but especially since Magento 2.0. The whole knockouts require jazz front end has been a pain to work with. It has become a bigger and bigger problem to have it performant and score well in Google. And it's just as a developer, it's no fun at all to work with. Magento has decided that the solution for this is not to fix the front end but to replace it. That's PWA Studio and headless. So there's a lot of PWA solutions now that will replace the old Magento 2 front ends but none of those solutions really suited me and I guess I can say the agency Integer_net where I work. 


Also didn't feel at home with the new solutions that are currently being provided, and we don't really believe in the whole PWA heavy JavaScript framework solutions. And so what Hyva is, to just round it up, and then I'd be glad to take your criticism already. So Hyva is our attempt to fully replace the old Magento 2 front end, which is still PHP, HTML, CSS based. It's fully server-side rendered, and you could say it's the current Magento front end redone in a good way. So it's performant, it's less complex, and it's fun to work with. And speed in which you can develop things is much, much faster than what we've seen with the old front end and what we've seen that PWA currently offers.


Jisse:
Yeah. Well, and I think Peter Jaap and I, we both know a little bit more about Hyva as well. We've seen the ReactorCon presentation that you ran there. And in general, could you say also that the real innovation of Hyva is that you simply just dump all of the JavaScript and write it into as less JavaScript as possible?


Willem:
Yeah, so we're trying to leverage the capabilities of modern browsers as much as possible. And a modern browser is perfectly capable of, as an example, to do form validation. We don't need 500 kilobytes of library to do form validations because your browser is perfectly capable of doing this. It's just a lot of developers don't really realize this because we've been depending on libraries for so long since jQuery was released years and years ago. We kind of went to the developer approach, where we use a library that serves multiple browsers and fills the gaps of capabilities that those browsers have. So we use a library because then it also works with Internet Explorer. That's how we used to do it. And now we're still used to using libraries for all the little features that we need. And in most of the cases, we don't need these libraries anymore. 


And as soon as you look at this, React and Vue and all these PWA libraries or frameworks, they heavily rely on frameworks. And it will always come with at least hundreds of kilobytes of boilerplate JavaScript, while you then have nothing but a page that renders. Then...