Our partners from IT Delight have recently held a discussion on migrating from Luma, the default theme delivered with Magento, to Hyvä, an up-and-coming custom theme for Magento. In this article, we summarize the main points of the discussion and explore the implications of migrating to Hyvä for businesses and developers alike.
The moderator, Volodymyr Korniienko, CBDO at IT Delight, E-commerce business growth expert, leads the discussion with Manuel García Solipa, Tech Lead at Ebolution, and Alexander Galdin, Magento 2 Frontend Developer at IT Delight.
Further down the line, we will leave parts of the video that reveal the topics in their entirety with an accompanying commentary explaining the essence of the video excerpt.
Get your brand-new responsive and ultra fast Magento 2 store and possess all progressive technological benefits of Hyvä with our Hyvä Theme Development service.
What is Luma
Luma is the default theme that comes with Magento and it's important to understand the technologies it's based on: RequireJS, Less CSS precompiler, and UI components. It is also mentioned that that the PWA technology is different but also included in the platform.
At the end of the day, Luma is simply a combination of all the technologies delivered by Magento, which they believe should have been the frontend of the platform on the early days.
What is Hyvä, its main advantages, and disadvantages
To our readers, Hyvä is a new front-end solution for Magento 2 that offers an alternative to the default Luma theme and it takes the e-commerce world by storm. At Amasty, we're continuously adding Hyvä compatibility to our most popular extensions to provide our customers with the best e-commerce experience possible.
Let’s return to our muttons. Hyvä is a step ahead for the Magento ecosystem and here are three main advantages of Hyvä by Alex:
- It was easy for him to transfer from Luma to Hyvä because it works on the same logic and structure.
- Hyvä uses modern tools for development, such as Tailwind CSS and Alpine.js, which are constantly improving, and offer better performance.
- With Hyvä, developers can focus more on the development result, rather than the development process, as it provides an easier way to provide customizations.
Hyvä is a popular option for front-end development, but as Manuel and Alex discussed, there are both benefits and considerations to keep in mind.
Learn more about Hyvä's key features.
Disadvantages of Hyvä
While Hyvä has many advantages, such as an accessible learning curve and a vibrant community, there is a notable disadvantage – third-party modules and custom features written in JavaScript may not be compatible with the new technology.
This means that existing projects may need to be rewritten in JavaScript when migrating to Hyvä, which can be a time-consuming process. However, Manuel sees this as an opportunity for innovation and rethinking the front-end development process.
In summary, Hyvä has numerous benefits for front-end development, but it is essential to consider the potential challenges of compatibility with third-party modules and custom JavaScript features. Nevertheless, implementing Hyvä could lead to innovation and improvements in the development process.
How Hyvä changed the work process of speakers
According to the discussion, Hyvä has brought about significant changes in the work process of both Alex and Manuel. They are happy with the modern technologies that Hyvä provides, as it has helped improve their personal performance as developers.
Easier customization
The easier customization process has also been highlighted as a significant benefit, as it saves them time and allows them to deliver results faster to their clients. Despite being an opinionated framework, both Alex and Manuel see Hyvä's use of Tailwind CSS as a positive aspect.
Reduced complexity of working with front-end
Manuel further added that Hyvä has reduced complexity on the Magento front end, which has made their daily work much easier. He prefers working with Tailwind CSS and Alpine JS, as they provide a lot of information, examples, and answers to common problems, instead of dealing with a very complex structure of fewer files.
The effect of Hyvä on website speed
In today's digital landscape, website performance is a crucial factor, and experts highlight its significance in a conversation. They emphasize the impact of website complexity on its speed, with Manuel mentioning how Hyvä simplifies websites, leading to better optimization approaches and a better understanding of the front-end.
Performance boost
Compared to using a custom theme, Luma may achieve good metrics, but it is much more complicated. The Hyvä theme, however, can achieve almost perfect scores in Google Core Web Vitals metrics, so customers can install this theme to attain excellent website performance as it provides a great starting point.
Downsides of other frameworks
It's worth noting that excessive JavaScript can negatively impact metrics, especially the Time to Interactive (TTI) score. Alex shares his experience with a Magento-based framework called Silver, highlighting that default Magento themes still have issues with Cumulative Layout Shift (CLS) and TTI scores.
Overall, it's essential to consider website performance when designing a website, and utilizing the right theme and approach can lead to excellent results.
Practical cases from the experience of the participants
In the world of e-commerce development, Hyvä has become a buzzword lately. Manuel shares his experience working with Hyvä on various projects, ranging from small to large and complex.
Case by Manuel
Manuel's team started with simple projects, such as implementing a product view page for an online startup, before moving on to more complex projects. One of their biggest challenges was migrating a customized store with a complex front-end while maintaining the same UX/UI. However, they were able to successfully replicate the same UX while improving the performance and stability of the system.
Currently, Manuel and his team are working on a mix of small projects, adapting Hyvä themes to their validated UI, while also working on projects where the default UI is sufficient.
Case by Alex
Alex shares his experience working on around 10 projects over the past two years:
For smaller projects, there were cases where there wasn't even a design, and the client didn't know exactly what they wanted on the home page. In such cases, Alex and his team would send the client a link to the Tailwind components library, and the client would scroll through the components and select the ones they liked. Alex would then copy the HTML and paste it into their code as a skeleton for the widgets on the home page.
For more complex projects with custom designs and multiple stores, Alex mentions considerations regarding efficient style inheritance, template organization, and placement of common JavaScript code chunks and components.
He also emphasizes the importance of performance and recommends always thinking about it while developing, especially for complex UIs with a lot of dynamic JavaScript components.
How Hyvä affects businesses
Hyvä is a popular e-commerce platform that is rapidly gaining popularity in the development community. According to Manuel and Alex, investing in Hyvä can have a positive impact on businesses.
By reducing complexity in the development process, your development team can focus on adding new features that customers actually need and that add value to the platform. By doing this, businesses can minimize the time-to-live, thereby reducing financial expenses.
-
Community
Furthermore, as the Hyvä community continues to grow, businesses can benefit from the expertise and support of this community. This can provide a competitive advantage to online businesses as they can leverage the knowledge and experience of other Hyvä developers to improve their platform.
Final thoughts
In conclusion, Hyvä offers a new, modern, and efficient solution for front-end development for Magento, with many benefits such as improved performance, easier customization, and an accessible learning curve. However, there are also potential challenges to consider, such as compatibility issues with third-party modules and custom JavaScript features. Nevertheless, Hyvä has the potential to lead to innovation and improvements in the development process.
The speakers from IT Delight shared their experiences of how Hyvä has positively impacted their work process and website speed, as well as practical cases of using Hyvä in their projects. They also offered valuable insights and tips on how to migrate from Luma to Hyvä, such as using the fallback system of Hyvä to gradually migrate parts of the site.
In summary, Hyvä is a promising solution for front-end development for Magento, and developers should not be afraid to explore alternative ways of front-end development. With its modern tools and technologies, Hyvä can offer a more efficient and productive way to develop e-commerce websites.
