Fast UIs need to feel like a lot is happening, even if that’s in the background and out of site of your user. On a mobile app, usually that means moving network calls outside the “main thread” and into a background thread that calls back. On websites, it means making every request back to the Continue reading “Displaying Progress in a Long Running Background Job using HOTWire”
Category Archives: HOTWire
Adding Loading Screen with Turbo
One great aspect of Turbo frames is lazy loading. You can use this behavior to quickly load in the shell of a UI, and then lazy load all the data. Adding an animating loading status will help give the feeling of immediacy and “a lot of work is happening in the background” without the frustration Continue reading “Adding Loading Screen with Turbo”
Interactive HOTWire Notifications with Turbo Streams
Rails’ use of flash messages is a great way to provide context for customer actions. If they delete an object, flashing a notice that the delete action succeeded, or perhaps failed, gives them more context to make the next decision. With HOTWire’s asynchronous nature, you don’t get those notifications in the same way, especially if Continue reading “Interactive HOTWire Notifications with Turbo Streams”
Rails PWAs using Turbo HHNPWA #7
What makes any web site a progressive web app? Two small pieces tell the browser to treat your web page as a progressive web app.
HOTWiring an Existing Rails Monolith
How do you add Turbo to your existing Rails app? What do you need to watch out for as you transition to a full HOTWire approach? I found it to be very straight forward, and mostly a search and replace operation. Add Turbo Rails gem to the Gemfile and remove Turbolinks: Then run ./bin/bundle install Continue reading “HOTWiring an Existing Rails Monolith”
Lazy Loading Lots of Comments HOTWire Tutorial #5
As we continue in building out the HOTWire Hacker News Progressive Web App, it’s time to look at loading the comments. This is an interesting data problem, because each item has comments, and each comment has comments, and you can go recursively until you run out. The original HNWPA pushed all the comment loading into Continue reading “Lazy Loading Lots of Comments HOTWire Tutorial #5”
Russian Doll Caching – Building HOTWire HNPWA #4
What if we can increase page load the speed by not duplicating work in the server rendering process?
Paginating Top Items – HOTWire HNPWA #3
If you look at the number of TopItems coming back from the API, you’ll see it’s much more than 30. How do you display all these items? Pagination! ActiveRecord has an offset method that tells the database where to start in the records it returns. If you don’t specify an offset, the database starts counting Continue reading “Paginating Top Items – HOTWire HNPWA #3”
Turbo Streaming Top Items – HOTWire HNPWA #2
Turbo Streaming is going to work best with ActiveRecord Models. The Hacker News model uses Item models, which can be stories, comments, jobs, polls, or poll options. In the first implementation, the Item was modeled to be as generic as the API dispensed. This time, stories and jobs will continue to be modeled as Item Continue reading “Turbo Streaming Top Items – HOTWire HNPWA #2”
HOTWire HNPWA #1: Setting up for Top Stories
Follow along as we build the HOTWire Hacker News Progressive Webapp, or HHNPWA. This will build on the lessons from the Hacker News Progressive Web App, and will leverage all the enhancements that come from Turbo. In the end, you can compare the two, and decide for yourself what works.