As an experienced Ruby on Rails developer, I’ve always enjoyed working with the framework, but there’s one area I hadn’t explored much before—Hotwire. So, I decided to dive into it by building a simple app called Today, aiming to learn how to use Turbo and Stimulus together.
The Idea
I started with a simple sketch on Excalidraw to visualize what I wanted the app to do. The Today app is a straightforward todo app, with features like:
- Creating, editing, and deleting todos
- Marking todos as done
- Reordering todos
- Clearing completed todos
The goal was to keep things simple but functional, while exploring how Hotwire could make the app more interactive without relying on much JavaScript.
Learning Hotwire
One of the most valuable lessons from this project was understanding when and how to use Turbo Frames and Turbo Streams. Turbo Frames allowed me to break the app into components that could be updated individually, which really enhanced the user experience. Turbo Streams enabled real-time updates to the app—like automatically updating the list when a todo is marked as done, or when it’s reordered.
Another thing I learned was when to use Stimulus. I quickly found that it was perfect for things like handling the logic for marking a todo as complete or reordering the list. Stimulus allowed me to add small bits of interactivity while keeping the app’s main structure focused on Turbo.
Testing with Minitest
While I’m used to Rspec for testing, I decided to give Minitest a try for this project. It was a good exercise in working with Rails’ default testing framework. Writing tests for Turbo and Stimulus interactions was a bit tricky, but ultimately rewarding to see the app behave as expected.
A Simple Rails Setup
I kept the project simple: a vanilla Rails app using SQLite as the database. I also deployed the app to Render, which was surprisingly easy. The deployment process was straightforward, and I was up and running in no time.
PWA Capabilities
To make the app more user-friendly, I enabled PWA (Progressive Web App) capabilities. This was a great way to ensure the app works well not just on desktop, but on mobile as well. Users can even install the app on their phones for an app-like experience.
Conclusion
Building the Today app was a fun and challenging way to learn something new in the Rails ecosystem. It helped me dive deep into Hotwire and Stimulus, while also refreshing my understanding of Rails' capabilities. The app works well across both desktop and mobile, and I’m happy with how it turned out.