If you're a web developer, you must have heard the terms Progressive Enhancement and Progressive Web Apps (PWAs). What about progressively building your web application, introducing advanced techniques only when needed?

I recently listened to an episode of the Full-Stack Radio (Building HEY with Hotwire), where David Heinemeier Hansson talked about progressive web application development using Hotwire:

Start with the absolute simplest. Don't even do Frames, don't even do anything. Do Turbo Drive to start, just build the thing with normal forms, normal everything, and when you run into issues like... this part is reset everytime I add new stuff. What's the smallest thing I could do to fix that? Alright, let's do a frame.

After some time, it's getting too complicated and you need more fidelity, or you need to send the updates live over websocket, change it to Turbo Streams. But you should always think like 'how can we start from the absolute baseline? and then progressively enhance your application one step at a time.'

Don't start out with the most expensive fireworks at the first minute. No, save that stuff. Keep your powder dry.

To paraphrase, Turbo Drive gives you the majority of the benefits out-of-box, without having to do anything. When you need more interactivity on your components, you introduce Turbo Frames, and finally, when you need to update multiple elements on your page in a single response, you introduce Turbo Streams.

This approach sounded really interesting, so I decided to give it a try by building and progressively enhancing a small UI component using all three Turbo frameworks: Drive, Frames, and Streams.

I am going to build a simple habit tracker, which lets you keep track of the number of days you've consistently followed a habit. You can increment the counter and also decrement it to reduce the count, all without writing a line of JavaScript.

First, we'll build the basic, fully-functioning counter with Turbo Drive. Then, we'll improve it using Turbo Frames. Finally, we'll optimize it further with Turbo Streams. In fact, I also built the whole counter in pure JavaScript, using the Stimulus library, but decided to leave it out for another post.

My goal for this article is to make you fall in love with Hotwire, and show how enjoyable it is to build web applications, especially when combined with Ruby on Rails.

Sounds interesting? Let's get started.