March 14, 2024

Experimenting with Modern UI Alternatives in Rails

Tags: webdev ruby rails tailwindcss phlex htmx

I embarked on an experiment with a Rails application using modern alternative tools and libraries. In this post, I’ll walk you through the steps I took to set up a Rails template repository with the following technologies:

• Configuration with Bun JS runtime for efficient JavaScript management.

• Integration of TailwindCSS for sleek UI design.

• Utilization of Phlex library to build views entirely in Ruby, eliminating the need for mixed template languages and replacing partials and view helpers with components.

• Implementation of HTMX actions for dynamic content swapping without full page refresh.

Setup Steps:

1. Installed bun js runtime (I used mise, btw)

2. Added necessary gems and generated some configurations:

1. Edited Procfile to remove bun css watch line and use tailwindcss:watch task.

2. Edited application_layout.rb to remove javascript_importmap_tags line.

This is how it looks:

The Rails bin/dev command starts the three processes defined in the Procfile file. The Rails server, the Bun js runtime, and the TailwindCSS watcher.

Some code highlights:

The main application layout, in Ruby, has some header and footer definitions and a call to a Ruby block in the <main> tag.

The controller has an action for listing the Articles and the method to handle the POST to add a new Article.

The Index view has a title, an Add button, and the list of Articles. In a real app these Articles would probably be passed on initialization from a DB query outside this class.

The Article component just generates some random data. In a real app it would probably be populated from an Active Record object on initialization.

The full source repository is available here.

By following these steps, I was able to leverage a modern UI frontend for a Rails application in a hopefully more maintainable way.

I plan to continue experimenting with these tools on more advanced topics like forms, websockets & SSE updates, filters, pagination, using JS interactivity, and more complex components.

Happy coding!