Ruby on Rails Articles - Frontend Integration

From import maps to Turbo: Streamlining JavaScript in Rails

From Rails 7 onwards, integrating frontend technologies has become more streamlined and flexible. Here is an overview of the current approaches to frontend integration in Rails, focusing on import maps, JavaScript bundlers, and the Turbo framework.

Import maps: The default in Rails

Import maps have become the default method for managing JavaScript dependencies since Rails 7. It imports JavaScript modules using logical names that the browser maps directly to versioned files. This approach eliminates the need for transpiling or bundling in many cases.

One of the significant advantages of using import maps is no longer requiring Node.js or Yarn. This reduces the moving pieces of the development environment. It is as simple as running the standard Rails server command, with no additional build steps needed.

Managing dependencies with importmap-rails

The importmap-rails gem enables import maps in Rails. It’s included by default since Rails 7. This gem allows you to pin JavaScript packages directly from your terminal, making dependency management straightforward.

JavaScript bundlers: An alternative approach

While import maps offer a simplified workflow, some applications may need traditional JavaScript bundlers like Bun, esbuild, or Webpack. These tools provide advanced features such as code transpilation, tree-shaking, and loaders for handling various asset types.

To use a bundler instead of import maps in a new Rails application, you can specify your choice during the creation process. Each bundler integrates with the Rails asset pipeline through the jsbundling-rails gem.

Installing JavaScript runtimes

Depending on the bundler you choose, you may need to install additional JavaScript runtimes:

• Bun: A JavaScript runtime and bundler in one.
• Node.js and Yarn: Required for bundlers like esbuild or Webpack.

Choosing between import maps and bundlers

Choosing an option for the frontend depends on the specific needs of your application. Import maps reduce complexity and are well-suited for applications that primarily rely on the JavaScript stack included in Rails by default, including Hotwire.

However, there are scenarios where a traditional bundler might be more appropriate:

• Transpilation Needs: If your application uses JSX, TypeScript, or any other syntax requiring transpilation.
• Advanced Asset Handling: When using JavaScript libraries that include CSS or require specialized loaders.
• Optimization Requirements: If tree-shaking and advanced code optimization are necessary for your application.
• CSS Frameworks: Certain CSS frameworks installed via cssbundling-rails may require a bundler.

Carefully assess your project’s requirements before deciding, as switching between methods can be time-consuming for complex applications.

Turbo: Enhancing Rails Applications

Regardless of the method chosen for JavaScript integration, Rails includes the Turbo framework to enhance the application performance and interactivity. It reduces the amount of custom JavaScript needed, and makes frontend development way easier, especially for backend developers.

Turbo Drive

Turbo Drive improves page load times by preventing full-page reloads during navigation. It preserves the state of the page, allowing for smoother transitions and a more app-like experience.

Turbo Frames

Turbo Frames enable partial page updates by targeting specific sections of a page for rendering. This allows for dynamic content updates without affecting the entire page, facilitating features like in-place editing.

Turbo Streams

Turbo Streams allow for real-time updates by delivering changes as fragments of HTML. It can even be used to broadcast updates over WebSockets, ensuring that all users see the most recent content without manual refreshes.

Stimulus: The JavaScript framework

While Turbo handles efficient page rendering and navigation, you may need to add client-side interactivity to your application. This is where Stimulus comes into play.

What is Stimulus?

Stimulus is a lightweight JavaScript framework that works by connecting JavaScript classes to your HTML using data attributes. It allows you to sprinkle interactive behavior into your pages without the overhead of a full-fledged frontend framework. Stimulus focuses on enhancing HTML rather than replacing it.

Stimulus in the Hotwire stack

Stimulus is a key component of Hotwire (HTML Over The Wire), an approach for building modern web applications with minimal custom JavaScript. Hotwire leverages server-rendered HTML to provide a fast, dynamic user experience. The Hotwire stack comprises:

• Turbo: Manages page navigation and partial updates efficiently, without writing JavaScript.
• Stimulus: A minimal JavaScript framework to write custom JavaScript.

By combining Turbo and Stimulus, you can build reactive applications that maintain the simplicity of server-rendered HTML while offering dynamic features typically associated with single-page applications.

Conclusion

Integrating frontend tools with Ruby on Rails has evolved to offer even more choices. Import maps provides a simplified, Node-free approach suitable for many projects, while traditional bundlers remain available for applications requiring advanced features. Coupled with the Hotwire stack, Rails is a great tool to build efficient and dynamic web applications with less complexity.