Since 2022, Hyvä has been taking the place of Magento themes for the most extraordinary speed and performance. Many of the Magento agencies have tagged it as a revolution of storefronts. Hyvä committed to store performance, quality code, and reduction in dependencies with a more straightforward structure than Magento’s native Theme. Why is it becoming the developer’s first choice while moving forward with Magento upgrade, migration, or even for a refreshed Online store? The answer is simple, as Hyvä is the only Magento frontend solution developed from scratch with a UI library associated with Magento2.
Let’s take a closer look at a developer’s perspective on Hyvä
Table of Contents
Introduction
Compared to Magento themes, headless solutions and PWA Studio, Hyvä Themes holds fewer JS files and relies on Alpine.js only! Reducing the dependencies of third-party libraries means minimizing the tech stacks. Hyvä depends on two tech stacks: TailwindCSS and Alpine.js. Both are used to implement a user-friendly experience and tend to increase!
Not only are Hyvä Themes, but they also provide Hyvä checkout for a flawless checkout experience and a more admin-friendly backend Hyvä Admin.
Hyvä Core Focus
Hyvä mainly focuses on reduced complexity, performance enhancement, superior developer experience, reduced dependencies, and reduced learning. We have covered this in our broad article on Hyvä Themes that you can check out here.
As said, Hyvä excels in performance, and no other storefronts can match that! If you follow the Hyvä Docs and manage the standards correctly, obtaining "Green" Core Web vitals is painless! With Luma, this can be achieved, but not 100%.
Aiming at a single JS library, it does not rely on RequiedJS, KnowckoutJS, JQuerry, and LESS. These stacks make Luma slow and complex compared to Hyvä. With such an updated architecture, Hyvä has a more straightforward, modified, and less complex design to follow.
Developers rejoice in the experience of working on Hyvä compared to Magento native themes as the new vibe in the town, and your every question gets the answer from their team. They are super active on the Slack channels and update the documentation well! Yes, along with the team, they are now a 4,000+ member community. It takes time to create a Hyvä based Magento store to understand and follow the theme footprints for the first timer. Once you achieve this, it will be like a Hyvä Expert. As mentioned, the Hyvä slack channel is the problem-solving platform that promptly solves your queries, as there are chances of module compatibility issues that need attention.
So, when you think of innovation, a strong foundation that is scalable and easy to customize, Hyvä is the answer. You can witness the experience of advanced updates to the recent versions of AlpineJS and TailwindCSS and the Adobe Commerce compatibility issue. The Adobe Commerce compatibility is fixed at 50% per the Hyvä Team updates.
Hyvä Highlights
What are the updates on Hyvä recently? As we know, AlpineJS replaced KnowckoutJS, and for the stylesheet, TailwinCSS is used. It shows clearly a new method of writing code. Hence, it shows if you are an experienced Magento developer who wants to work with Hyvä, you need to rethink the strategies while creating an asset in Hyvä. As it follows PostCSS, developers need to use the npm run, build-dev, or build-prod commands for asset creation. Building code and reflecting the same takes less time than other themes, and you will find it out as you work on it. To say, the modifications immediately reload on the browser following the responsiveness of devices. More on this can be found in their documentation.
Yet, some things are the same as common Magento themes. For instance. PHTML templates and XML layouts and blocks. Only the process of development is altered. Oh yes, there are some exceptions for adding a Tailwind class straight to XML layouts. The classes are passed through the htmlClass option.
AlpineJS
What about AlpineJS, and Why Hyvä is built on it? AlpineJS is a lightweight JavaScript library that helps you write modular code. It has a small footprint, making it perfect for use in mobile and web applications.
AlpineJS is also compatible with AMD and CommonJS modules, making it easy to use with other libraries and frameworks. Hyvä is built on AlpineJs because it is a lightweight and fast JavaScript platform with a small footprint. AlpineJs also has a package manager that makes installing and managing dependencies easy.
There are a few benefits of AlpineJS over knockoutJS. What are they? Some benefits of AlpineJS over knockoutJS include:
- AlpineJS is smaller and faster than knockoutJS.
- AlpineJS has a more intuitive and concise syntax than knockoutJS.
- AlpineJS has a more active development community than knockoutJS.
TailwindCSS
Tailwind is a utility-first CSS framework for rapidly building custom responsive websites. Tailwind is a utility-first CSS framework for quickly building custom responsive websites. It provides a comprehensive set of utilities that you can use to create cohesive and consistent designs across your entire project.
Benefits of TailwindCSS over LESS in Magento:
- There are several benefits of using TailwindCSS over LESS in Magento: Tailwind is a more comprehensive and complete solution than LESS. It offers more features and options and is better suited for complex projects.
- Tailwind is more stable and reliable than LESS. It is less likely to cause errors or problems during development.
- Tailwind is smaller and more efficient than LESS. It produces smaller and faster code, which can improve website performance.
- There is no definitive answer to the question of code size, as it can vary depending on the project. However, Tailwind generally tends to produce smaller code sizes than LESS.
The purpose of holding optimum performance, lean code, and smooth development without compromising any design possibilities is because of building it with TailwindCSS.
To add more, How does Hyvä help to achieve high-core web vitals? Well, it depends on a variety of factors, including the specific Theme in question, the website's content and function, and the overall goals of the project.
However, in general, it is often possible to achieve high-quality web vitals using Hyvä themes.
What do you prefer? Hyvä or PWA Studio?
If you are a brand looking for an enterprise solution along with great performance and support, the Hyva theme is the key. To get that deep thought on understanding hyva themes over a PWA initially, We'd recommend having a word with an eCommerce consultant or solution analyst. In most cases, Hyvä is preferred by the developers over PWA solutions for Magento. Yet, PWA is more in a development stage and requires vast resources in terms of time, experience, and effort! And yes, it costs a reasonable amount. There's more on the learning curve and fewer updates in the case of PWAs.
If you suggest it to mid- to enterprise-level owners, Hyvä is suitable. On the other note, PWA could be the choice when there is a need for custom, tech-heavy, and enterprise solutions that combine the top business models. But it all depends on the client to whom you refer it.
Hyvä is the solution for retailers of all sizes with the single-time license fee, and they can leverage its benefits it! Some of the benefits of implementing Hyvä themes over PWA for your Magento 2 store include:
- Improved performance and page load times
- Reduced bandwidth consumption
- Improved customer experience
- Faster page rendering
- Reduced development time and costs
- Leverage the other benefits of Magento 2 Admin, Checkout, GRaphQL of Hyvä
Hyvä and Compatibility
Suppose the sudden and obvious question that may arise is whether third-party modules are compatible. Well, in most cases, Hyvä is built from scratch and compatible with most points, yet the support is there to find the solutions. No need to worry about it! It's a support-driven team that helps you with the best of commerce.
On the other hand, if you are a solution provider, your module code must be converted from the Luma frontend (if it is a part) to Hyvä. To do so, remember that Hyvä needs only XML layout code to be supplied.
Or by creating vanilla JS that works with both Alpine and Knockout. The foundational logic of PHP remains the same and is transferred to view models.
The only concern that one should take note of: If your extension is native to Hyvä, the code must be factored focusing on the use of Tailwind and Alpine. There is a movement going on the Slack channel for support on extensions. Have your questions answered there.
On the legacy fallback mechanism, it is simple to change the front from Hyvä to Luma! Yes, that is the plus that Hyvä follows. For instance, as their checkout is still under deployment, merchants can continue using native Luma checkout without hampering code or having conflicts. Developers can manage URL-wise pages to have Hyvä and Luma. So on the most crucial point where the checkout should be smooth, if you follow the legacy fallback mechanism while moving to Hyvä, there are no compatibility issues with specific third-party extensions.
What Our Hyvä Developers Are Saying
The initial project took a while to understand the architecture and how compatibility works. Once you finish your first Hyvä Magento development, you are good to go with the next ones. It has been created to help you speed up development in an optimized way! Kudos to their team for making Hyvä Themes for Magento 2. : Milan Maniya, Magento Developer, Navigate Commerce
Here is another one from the frontend developer: I have been working on Magento frontend development for over five years, and it took a reasonable amount of time to create a custom theme following Figma designs. Thanks to Hyvä UI, a brilliantly crafted solution where you can use the native layouts and finish your frontend development. : Harshad Donga, Magento Frontend Developer, Navigate Commerce
Getting Started With Hyvä
Magento developer can commence a new theme by shifting the files from the old vendor/hyva-themes/magento2-default-theme/web/ to the correct web catalog in app/design/frontend once they are done with the installation of Magento and Hyvä. Most styles are directly added to the PHTML templates with no need for additional CSS files. Make sure to pay attention to the Hyvä Demo. Hyvä Demo is helpful when you need to find the answer and that along with the documentation. There might the chances you need to ask Slack for support if the stores greatly rely on third-party solutions.
The time is soon when everything about Hyvä is competitive and in the market to go when someone says performance revolution on Magento! At Navigate Commerce, we are an official partner agency of Hyvä themes and take the initiative to help merchants achieve those performance vitals with necessary and commendable commerce features of Magento and extended functionalities. Drop us a line if you need any consultation moving forward with the Magento 2.4 upgrade and implementing Hyvä.
