For more than a year, 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 solution developed from scratch with a UI library associated with Magento2.
Let’s take a closer look on a developer’s perspective on Hyvä
Table of Contents
Introduction
Compared to Magento themes and PWA Studio, Hyvä Themes holds fewer JS files and relies on Alpine.js only! When we say to reduce the dependencies of 3rd party libraries means to minimize the tech stacks. Hyvä depends on two tech stacks that is 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 the flawless checkout experience and a more admin-friendly backend Hyvä Admin. Checkout is under the beta version, and if you want to explore, you can register on their site and get hands-on experience.
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 the 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! 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, 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 as 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, 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 you can find 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?
TA broadway is there to understand the question if you are looking for a consultation for your eCommerce customers. 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.
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 of 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 side, if being a solution provider, your module code must convert 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.
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 competible and in the market to go when someone says performance revolution on Magento! At Navigate Commerce, we are an official supplier of Hyvä themes and take the initiative to help merchants to 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 Magento 2.4 upgrade and implementing Hyvä.
