Knowledge
_ _ Ferenc Varga

Magento is renowned for its flexible web shop engines with a modern, robust, and well-designed PHP architecture that backend developers love. It excels at adding new features, modifying core functionality, creating APIs, and building integrations on the backend side. However, frontend technologies evolve more rapidly. New ideas, libraries, and tools appear and proliferate, rendering Magento’s default frontend theme, Luma, somewhat outdated. Luma can be overly heavy, unnecessarily complex, challenging to learn, and difficult to optimize.

Fortunately, Magento’s modular design and the application of design principles, such as separation of concerns, make accommodating entirely new front ends a feasible task. In this article, we explore two new approaches to Magento frontend: the Hyva theme and Progressive Web Applications (PWAs).

What is Hyva?

Hyva is more than just a Magento theme; it’s a philosophy. It focuses on being lean, high-performing, and easily customizable. Hyva harnesses modern and lightweight frameworks, AlpineJS and TailwindCSS, replacing older technologies like require.js, knockout.js, and Less CSS. This transition occurs while still leveraging Magento’s proven frontend architecture with layout XMLs, PHTML templates, and caching.

Pros and Cons of Hyva

Pros:

  • Reduced complexity
  • Improved performance
  • Enhanced developer experience
  • Faster development
  • Lower dependencies
  • Lower learning curve

Cons:

  • While easy to learn, delivering a successful Hyva project requires experience
  • Managing 3rd-party module compatibility can be extra effort, especially with numerous extensions

What is a Headless PWA?

Progressive Web Applications (PWAs) aim to be cutting-edge yet universal. A PWA is a single page JavaScript web application (SPA) that leverages the latest mobile and web technologies, such as push notifications, offline mode, and installability. Importantly, they do so progressively, meaning that if a feature isn’t available on a device or browser, they gracefully fall back to legacy technology while remaining functional. PWAs, in essence, push the boundaries of web applications towards mobile app functionality.

Pros and Cons of Headless PWAs

Pros (PWAs vs. Traditional Websites):

  • Faster in-app browsing
  • Efficient API communication with less data and network traffic
  • No page refreshes

Cons (PWAs vs. Traditional Websites):

  • Server-Side Rendering (SSR) is necessary for a fast first-page load
  • More complexity compared to traditional web apps

Pros (PWAs vs. Mobile Apps):

  • Offline functionality
  • Push notifications
  • App-like behavior
  • Search Engine Optimized
  • Linkable
  • Built-in security benefits
  • Cost-effective development
  • Silent updates
  • Cross-platform

Cons (PWAs vs. Mobile Apps):

  • Limited hardware feature access
  • Restricted animations

When to Choose Hyva

Hyva offers a straightforward Magento frontend theme that enhances performance through simplification and lightweight frontend frameworks. While it is on the more expensive end, it provides an excellent price-to-value ratio. Hyva is easy to work with and simple to maintain. It’s recommended for projects where performance is the primary focus, and a small number of 3rd-party extensions are used, ideally with Hyva support.

When to Choose Headless PWAs

Headless PWAs are sophisticated single-page applications that combine feature-rich behavior with performance. Developing with PWAs requires experience with cutting-edge frontend technologies (like React.js and Vue.js), server-side rendering (SSR), various caching solutions, API development, and optimization. Headless PWAs are best suited for projects where mobile app-like features are needed, particularly for web-browsing functionality, with consistent user flows on desktop and mobile.

At ITG Commerce, we bring extensive experience in both Hyva and headless PWAs. As CTO, I am eager to hear your thoughts on Hyva and headless PWAs. Let’s engage in a conversation about finding the best solution for your business. Feel free to reach out on LinkedIn with any feedback or questions. We look forward to connecting with you!