Magento Hyvä Migration Made Easy: Best Practices for a Smooth Transition

What is Hyvä?

Hyvä is a modern Magento 2 theme developed to improve performance and page load speed. It is built using Tailwind CSS and Alpine.js – cutting-edge technologies that help reduce complexity and code size compared to ordinary Magento 2 themes.

The usage of up-to-date approaches for web development makes Hyvä flexible and easy to maintain. Moreover, it significantly enhances the user experience on the website thanks to streamlined page load times and smooth navigation.

Unique Benefits of Hyvä Theme

The primary advantage of the Hyvä theme is its high performance, especially when compared to the Luma theme. Read our detailed Hyvä vs Luma performance comparison.

Often page load speed is hindered by the large amount of JavaScript files that the browser needs to load for the page to work. Hyvä addresses this issue by using the frontend framework Alpine.js and embedding JavaScript scripts directly into the page markup. This approach significantly improves page load times and overall store performance.

Key Reasons to Switch to Hyvä

Migration to Hyvä can be an advantageous investment for companies striving to enhance store performance and improve user experience. Generally, we can highlight two reasons clients choose to migrate to Hyvä:

1. Addressing Poor Website Performance

If your website is experiencing poor performance and you have exhausted all optimization efforts — Magento Hyvä migration can be an effective solution. This change can directly impact overall SEO metrics and customer satisfaction.

2. Streamlining Development and Maintenance

A strong reason for migration may be to simplify website development and maintenance processes. Hyvä provides a clear and more understandable codebase, which means that future updates and enhancements can be implemented faster and with fewer errors.

Common Challenge with Migration to Hyvä

Compatibility issues are the primary challenges encountered during migration to Hyvä. Both third-party extensions and own customizations may be affected. For instance, some outdated or non-standard modules may simply not be compatible with Hyvä. In such cases, you need to either update them (if a newer version offers support) or look for an alternative.

However, be aware that customizations built over the original module you replace may stop working. Custom modules will also require adaptation to Hyvä standards. This may involve:

• Adjusting module styles to align with the new architecture
• Refactoring JavaScript logic if modules rely on jQuery
• Revamping existing templates

In the next section, we will delve into specific tips for a smooth and seamless migration, using the extension as an example.

Best Practices for Smooth Magento Hyvä Migration

To prevent the extension compatibility issues during Magento to Hyvä migration, or fix them once you encounter them, follow these guidelines.

1. Adhere to Official Magento Development Standards

Following official standards of Magento development is always a good idea and a solid basement of your website. It reduces the likelihood of errors and conflicts between different code sections, making the future migration process hassle-free.

2. Analyze the Module’s Frontend

Before migration, analyze the module’s frontend:

1. Identify which templates are used and on which pages they are rendered
2. Determine if JavaScript is used in these templates, and if so, how it is implemented (vanilla JavaScript, jQuery UI components or jQuery events)

3. Separate JavaScript

Split Javascript into two parts to avoid code duplication:

• The “View”: Responsible for display and user interaction
• The “Model”: Responsible for business logic (formatting, conversion, server-side submission, or any other data processing)

Here is an example of code separation:

applyChanges: function () {
   this.startLoader();


   this.currentRequest.inProgress = true;
   fetch(this.getRequestUrl(), {
       method: 'GET',
       headers: {'Content-Type': 'application/json'},
       signal: this.currentRequest.abortController.signal
   }).then(response => {
       if (! response.ok) {
           throw new Error(`HTTP error! Status: ${response.status}`);
       }


       return response.json();
   }).then(data => {
       prLayeredNavigationApi.cache.save(cacheKey, data);
       this.done(data);
       this.stopLoader();
   }).catch(error => {
       if (error.name !== 'AbortError') {
           alert('Sorry, something went wrong while filtering. Please try again later.');
       }
   });
}

4. Rewrite JavaScript

The “View” code responsible for display should be rewritten using Alpine.js, as required by Hyvä. Additionally, you should rewrite the “Model” code to eliminate dependencies on jQuery, RequireJS, or other libraries not supported by Hyvä.

jQuery('button.send').click(function () {
   prLayeredNavigationApi.action.applyChanges();
});

<button class="send" @click.prevent="prLayeredNavigationApi.action.applyChanges()">Send</button>

By following these best practices, you can simplify the migration process and ensure that your modules are compatible with Hyvä.