Vue and JSX components for Rails without JS bundling

💡 Motivation

JavaScript build pipelines tend to be a complicated mess of infinite numbers of npm dependencies, dev servers, and piles of “opinionated” conventions (and the lack thereof).

📍Enter: Import maps

Modern browsers support native loading of ES modules using the import statement. By leveraging the new Rails Import Maps, modular JS applications can be built on top of Rails without having to integrate a complex JS toolchain.

However, framework-specific component formats like the React JSX format or Vue Single File Components could not be used this way till now, as browsers don’t understand these formats.

⚡️Introducing React JSX & Vue SFC support for the Rails asset pipeline

The jass-* gem series provides a straightforward way of integrating modern JS tooling with the existing Rails asset pipeline, while adhering to established workflows for asset processing in Rails applications.

jass-react-jsx enables the asset pipeline to compile .jsx files to ES modules, allowing to build modular React applications on Rails in a clear and straightforward way, without the necessity of external build tools.

Check out the example application and the docs!

jass-vue-sfc provides the same functionality for .vue single file components. Check out its docs!

Leave a Reply

Your email address will not be published. Required fields are marked *