Table of Contents & Menu
On this page
Navigation

Can we use Babel or other JavaScript compilers instead of inline JavaScript?

Modern JavaScript

Dropping support for IE11 allows us to write modern JavaScript, making development enjoyable.

While a few features like nullish coalescing (??), optional chaining (?.), and object spread syntax ({ ...object, ...otherObject }) are not yet available, these are mostly shorthand conveniences.

We fully utilize modern capabilities such as fetch, Promises, arrow functions, and many convenient Array. and Object. methods.

For example, we use Object.assign( { one: '1' }, { two: '2' } ) instead of object spread syntax. This is a small inconvenience given the overall benefits.

Transpiling / Using Babel

While you can use Babel with Hyvä, it makes little sense in the default setup. This is a deliberate design choice.

As discussed in the IE11 FAQ, Hyvä does not aim for IE compatibility. The downsides of transpiling outweigh the benefits for the few missing features:

  1. Added complexity of a build process.
  2. Increased code size due to polyfills, rather than relying on native browser functionality.
  3. Reduced in-browser debugging capabilities (even with source maps).
  4. Loss of in-browser code readability, hindering direct understanding and manipulation.

Modern browser support is robust, and the functionality we genuinely miss is minimal.

For complex components, you are free to implement compiling/transpiling within your theme's library or main.js files. The default theme prioritizes lightweight design, but offers full flexibility for custom additions.

In-lining JS

Inline JavaScript is a foundational and opinionated architectural choice in Hyvä, made after extensive consideration to create a comprehensible, composable, simple, lightweight, and enjoyable frontend.

This approach addresses common challenges with complex, JS-driven frontends (like PWAs/SPAs or Magento's Knockout stack), which often introduce layers of complexity, difficult debugging, and reduced developer happiness due to scattered code and extensive file tracing.

Furthermore, relying on external dependencies and bundles frequently leads to loading unnecessary "dead code" and larger file sizes. Even cached bundles require browser evaluation, impacting performance, especially on less powerful devices. This contrasts with the issues seen in previous Magento frontends (e.g., RequireJS).

The upsides of using inline JavaScript with HTML are significant:

  1. Component Isolation: HTML, CSS (Tailwind CSS), and JS (AlpineJS) are co-located, simplifying debugging and understanding.
  2. On-Demand Loading: Only the JavaScript required for rendered HTML components is loaded, aligning with Tailwind's efficiency principle.
  3. Performance: Code is written specifically for each component, eliminating unused methods often found in generic, bundled JavaScript files (e.g., a slider script with many unused effects).
  4. Isolated & Replaceable .phtml Templates: Templates are decoupled from inheritance or page dependencies, allowing easy replacement and modularity. Code can be decoupled using JavaScript events, enabling flexible placement of elements like message bars, mini-carts, or PDP price boxes. Hyvä UI, a component library similar to tailwindui.com, provides meticulously crafted, copy-and-paste elements for Hyvä Themes. Learn more at hyva.io/hyva-ui.html.

These factors combine to deliver an enjoyable developer experience and significantly faster development, reflecting the preferred frontend building approach for many Magento developers.