Playing around with Hotwire ⚡️

Hey 👋,

Let's jump into my bi-weekly update in the ramen profitability series, where I'm sharing progress on my latest project: HomeSuiteApartment, a tool to manage rental properties.

In this update, I've been focused on the workflow to inquire about units and scheduling viewings, and I touched up the subscription page. Given my current schedule (working fulltime with a 1 year old), I'm pretty happy with what I was able to accomplish in these past two weeks, and am looking forward to setting a open-beta launch date in the next month or two.

Updating the listing page

I updated the listing page, and have since added a form to submit inquiries and additional messages on-top of the inquiry.

Once the inquiry is submitted, the property manager will be able to respond in their inbox, and schedule a viewing.

As you can see in the example above, I'm using Turbo Frames to give a single-page application feel, while not having to write any JavaScript.

Here's a boiled down example of how you can accomplish a view that:

<%= link_to inquiry, data: { turbo_frame: "inquiry" } %> 

<%# this is a placeholder for the selected inquiry %>
<%= turbo_frame_tag "inquiry" %>

Now, in your #show action, you can simply wrap your item in the turbo frame tag, and instead of following the redirect, Turbo will replace the frame with id inquiry from the response.

<%= turbo_frame_tag "inquiry" do %>
  <%= turbo_frame_tag inquiry do %>
    <p>This is an inquiry!</p>
  <% end %>
<% end %>

A major benefit to this, is that if you want to implement single-page application-like features, all you need to do is use a few custom HTML elements, and some data-attributes. So if you're a Ruby on Rails developer, you really won't need to do much to decompose your views into frames.

You can use Turbo Frames on form submission using Turbo Streams. Turbo Streams allow you to modify Turbo Frames very precisely with these actions: append, prepend, (insert) before, (insert) after, replace, update, remove, and refresh.

In my example, when I submit a new message to the inquiry, I'm appending the message to the list, and also am clearing out the message form. Similar to decomposing with Turbo Frames, you're only ever sprinkling in things as needed, and you don't need to add any boilerplate up-front.

Most of your controllers still function as normal Ruby on Rails controllers using redirects, but when you need the extra functionality, or want to speed up page loads, you can use Turbo Streams.

I highly recommend checking out Hotwire, it's really been a breath of fresh air for me. You get to do a lot more with less JavaScript, and allows you to get the same benefits as other frameworks/libraries (such as react) without having to significantly change your development process.

If you're interested, you should have a look at the Hotrails tutorial which goes over all of the concepts introduced by Turbo and Stimulus.

Subscriptions

In the last update, I got subscriptions working, and integrated with Stripe. I'm using the Pay gem to manage the subscriptions, as it provides a lot of built-in functionality, and the Stripe Ruby Client for other API calls not supported with the Pay gem.

In this update, I went ahead and fleshed out the page with pricing and features. So we started with this:

and, ended with this:

I won't take credit for the re-design though. If you're using the Tailwind CSS Library you should checkout Tailwind UI. It's helped me scaffold a few components and pages quite easily, without having a designer onboard.

What's next!

• Further improving the viewing + inquiry pages
• Improve the unit to listing workflow

See you in two weeks!