The release of Rails 7, and its powerful combination with Hotwire to create highly responsive single-page applications tries its best to convince us of its full-stack potential that could be a thing in 2022. There are already a number of talks focused on front-end tools in this year’s RailsConf.
Can Ruby on Rails be positioned as a complete ecosystem for full-stack development? This statement can sound uncomfortably ambitious to some readers.
One of the key features of Rails 7 that took the Ruby world by storm was what DHH referred to as the ideal stack for front-end development. Stimulus + Turbo = Hotwire has been gaining popularity by the day, offering everything you want for JavaScript in Rails 7.
We discussed how Rails’ full-stack strategy had been a leading factor in its success and without a doubt, with the addition of Hotwire, it’s ambitious, quite ambitious! But how far can you go with this full-stack? We’ll be covering the technical capabilities Hotwire offers with special attention to front-end development.
In this post, we’ll cover:
So, what's hot?
The resurgence of making HTML at the center of a web application has made many developers curious about server-side rendering (SSR), and Hotwire offers just that. Hotwire is an efficient alternative to building modern and reactive web applications by sending HTML instead of JSON over the wire.
Hotwire, an umbrella for trio frameworks; Turbo, Stimulus, and Strada (yet to be premiered), uses HTML over-the-wire approach to build web applications without using much, if any, JavaScript.
What does that mean?
- Fast first-load pages
- Keeps template rendering on the server
- Simpler development experience without compromising on speed or responsiveness associated with a traditional single-page application (SPA)
A wonderful example that showcases the power of Hotwire is hey.com, the new email service by BaseCamp. It delivers a fully-featured modern email app running on Hotwire and within 40KB of compressed JavaScript!
The HEY stack:
— DHH (@dhh) June 24, 2020
- Vanilla Ruby on Rails on the backend, running on edge
- Stimulus, Turbolinks, Trix + NEW MAGIC on the front end
- MySQL for DB (Vitess for sharding)
- Redis for short-lived data + caching
- ElasticSearch for indexing
- AWS/K8S
At a fraction of the complexity, Hotwire comes with all the essential tools for creating memorable user experiences. Being the new default front-end framework for Rails applications, the turbo-rails library is included in Rails 7 by default.
Turbo
It provides a set of techniques to speed up page changes and form submissions, divide complex pages into components, and stream partial page updates over WebSocket. Turbo offers a simpler alternative to client-side frameworks which put all the logic in the front-end and confine the server-side of your app to being little more than a JSON API.
Turbolinks have been replaced with a newer version, Turbo, that takes a step forward with form submissions, frames, and streams; taking care of almost 80% of the interactivity that traditionally would’ve required JavaScript. Without having to write any custom JavaScript, you can now create a bulk of your dynamic elements with just Turbo.
While Turbolinks and Rails UJS, as good as they were, would take you probably half of the way, Hotwire is here to take you all the way!
Turbo Features and their Benefits
Turbo Frames decompose pages into independent contexts which can be lazy-loaded and scope interaction. With scoped navigation, any interaction like following a link, or submitting a form, only the content of the frame changes, keeping the rest of the page from changing or reloading. The result is a highly responsive app.
Turbo Frames allow for efficient caching, parallelized execution, and having your application mobile-ready.
While Turbo Frames provide updates in response to direct interactions within a single frame, you can use Turbo Streams to change any part of the page in response to updates sent over a WebSocket connection, SSE, or other transport. Turbo Streams make it incredibly easy to add real-time features to your application in just a few lines of code.
Turbo Streams use just HTML and a set of CRUD-like action tags to deliver page changes. The tags let you append or prepend to replace and remove any target DOM element from the existing page. As these tags are strictly limited to DOM changes, you’ll need to connect a Stimulus controller if you need more than DOM changes.
With Turbo Streams, server-side templates can be reused to generate live page changes. It also offers a simpler control flow without the need for routing, event bubbling, or other indirection.
Turbo Drive accelerates links and forms submissions, giving you the same speed of navigation as traditional single-page applications by using the same persistent-process model. All clicks on links and form submissions are treated as AJAX requests which speed up your application. In simpler words, Turbo Drive allows you to convert any HTML-based application to a single-page application. With Turbo Drive, you don’t need to write jQuery Ajax code or any JavaScript code as it’s done automatically.
Turbo Frames → Update only part of the body
Turbo Streams → Update multiple parts of the page
Turbo Drive → No full page reloads
Turbo’s features empower you to fully utilize SSR HTML and without much doubt, frames and streams are the future.
Stimulus
Stimulus is a modest JavaScript framework designed to enhance static or server-rendered HTML, by connecting JavaScript objects to elements on the page using simple annotations. Stimulus focuses on three major concepts: controllers, actions, and targets.
It offers a nice alternative to heavy JavaScript client-side apps that speak JSON to a backend.
Stimulus combined with Turbo forms the core of Hotwire and provides a comprehensive solution for fast, compelling applications with minimal effort. Stimulus automatically connects DOM elements to JavaScript objects called controllers, that bring HTML to life.
Stimulus is not like the majority of contemporary JavaScript frameworks. How? Well, in terms of state, unlike most frameworks that maintain state within JavaScript objects, and then render HTML based on that state, Stimulus does things differently. The State is stored in the HTML so that controllers can be discarded between page changes, but still reinitialize as they were when the cached HTML appears again.
Hotwire: The answer to all your front-end needs?
DHH probably wanted the developer community to realize that HTML is not just good for the first render of server-side rendering, but also the subsequent ones. And what are the chances that the core principle of Rails full-stack is HTML-over-the-wire aka Hotwire?
Does Hotwire really provide engineers with front-end capabilities that are enough for us to stick with just Rails? Is it possible to build single-page applications without ever having to step out of our Rails comfort zone? Well, according to Principal Backend Engineer, Vladimir Dementyev, it is! He answers all these questions in his talk, “Front-End-Less Rails Front-End”, which I’d highly recommend watching.
Vladimir endorses Hotwire with its “killer” feature, Turbo Streams, and the fact that in order to use it, there’s zero JavaScript involved.
He also addresses the foreseen issue of keeping everything organized, especially when everything is HTML with a lot of partials. His answer is, “Think in Components”. View Component by GitHub, amongst many other gem options, resolves this issue and encapsulates view components in Rails. It allows for faster rendering, up to 10x faster than partials.
While there are CSS frameworks (other than Bootstrap) to address your CSS needs, if you’re interested in writing custom styles and keeping them isolated, PostCSS modules are your go-to.
To summarize, by demonstrating the HTML-first approach, Vladimir proposes that frontendless Rails way exists that can be used for applications with a not-so-tricky user interface.
The main benefit of why you might want to use Hotwire is that it lets you keep the classic approach of rendering all the HTML server-side using Rails templates while keeping apps fast and reactive.
Moving on to the next point of consideration, can Hotwire stand as a good replacement candidate for other front-end frameworks like React? Some developers might be a bit hesitant considering the newness of Hotwire. According to DHH, “If you’re happy with the complexity and effort it takes to maintain an application within the maelstrom of, say, React + Redux, then Turbo + Stimulus will not appeal to you”. However, for the folks who appreciate the classic HTML-first Rails way, Hotwire is the tool for you.
It is definitely possible to build reactive rails applications with NO javascript using Hotwire of course. It can give you 90% of the responsiveness of a React app without adding complexity.
If you’re eager to learn Hotwire with a more hands-on approach, watch our webinar with Cezar Halmagean! You can also check out Hotwire’s official documentation here.
Wrapping Up: Hotwire’s Hottest Edge
To recap, Hotwire has all the core essentials for a satisfying front-end development experience:
- Speed
- Simplicity
- Compatibility
One key takeaway is that Hotwire doesn’t just let you build single-page applications in half the time, but also with half the team size! A solo developer is well-equipped to address backend and front-end requirements using Hotwire, giving the essence of full-stack development. With the ease of understanding and features offered, it is a great choice for individual developers and smaller teams who won’t have to deal with the complexities of a completely different front-end technology. This is also good news for small-scale organizations that can’t afford a dedicated team of front-end developers. Hotwire lets you design an effortless experience of single-page applications at a fraction of React-Angular development costs, and this might just be Hotwire’s hottest selling point! But of course, you always have the option to use complex front-end frameworks for specific features you want to add to your application.
There might also be a misconception that Hotwire only works with Ruby on Rails, but that’s not the case. Hotwire works well with all back-end frameworks and all types of applications (web and mobile) making it completely full stack, not just web full-stack. With Hotwire being shipped by default with Rails 7, amongst other updates like import maps, it paints the full picture and truly becomes the ideal one-person framework.
This article is written by Team RubyConf Pakistan in collaboration with Hamza Rasheed. Hamza is a Senior Software Engineer at Sendoso. He's currently working on system design and development of enterprise-level applications by implementing lean-agile delivery. His core expertise lies in the development of multiple front-end solutions to scale apps.
