JavaScript in Rails: From Rails 6 to Rails 7

When diving into the Rails framework, one can't help but notice the evolution in how it handles JavaScript. Between Rails 6 and Rails 7, we've witnessed a significant paradigm shift. Let’s break down these changes:

1. Rails 6 and Webpacker:

In Rails 6, Webpacker became the default JavaScript compiler, replacing the old asset pipeline for JavaScript. It provided Rails developers with the power of modern JavaScript tools, libraries, and practices. With Webpacker, integrating frameworks like React, Vue, and Angular became more accessible. But while powerful, it also added a layer of complexity for those who just wanted simple JS functionalities.

2. Rails 7, Hotwire, and Import Maps:

With Rails 7, a new approach emerged. DHH, the creator of Rails, introduced Hotwire. The idea is to offer a way to build modern, interactive applications without requiring significant amounts of JavaScript. Instead of sending JSON and rendering it via JavaScript, Hotwire sends HTML updates. This means, for many applications, less reliance on heavy front-end frameworks.

Alongside Hotwire, Rails 7 brought in "import maps." Import maps allow developers to import JavaScript modules using ESM (ECMAScript Modules) without needing a bundler. This is a step back towards simplicity, eliminating the need for Webpacker in many applications.

Example:

Imagine you have a "like" button on a blog post. Traditionally, when you click it, you might use AJAX to send a request, get a JSON response, and then use JavaScript to update the number of likes on the page.

With Hotwire:

1. You click the "like" button.
2. Instead of sending a traditional AJAX request that expects JSON, Turbo sends an AJAX request that expects HTML in response.
3. The server processes the "like", then sends back a small chunk of updated HTML (for example, the updated like button with the new count).
4. Turbo takes this updated HTML and swaps it in, replacing the old button on the page.

The result? The button updates almost instantly, similar to an SPA, but without writing the custom JavaScript logic to handle the JSON and update the DOM. You essentially get the interactivity of an SPA with the simplicity and server-rendered benefits of a traditional Rails app.

In Conclusion:

The journey from Rails 6 to Rails 7 has been one of introspection for the Rails community. It revisits the essence of Rails—convention over configuration—and seeks to minimize unnecessary complexities. While Webpacker opened doors to the vast JavaScript ecosystem, Hotwire and import maps in Rails 7 aim to simplify and, in some cases, reduce the need for JavaScript. This evolution not only impacts Rails developers but also offers insights into the broader trajectory of web development practices.

Which approach resonates more with you? Are you a fan of the rich tooling that Webpacker brought, or are you excited about the simplicity that Hotwire and import maps promise? Whatever the preference, Rails continues to be at the forefront of web development, guiding the conversation on best practices.