DEV Community

Cover image for Experimenting with Modern UI Alternatives in Rails
Cristian Molina
Cristian Molina

Posted on

Experimenting with Modern UI Alternatives in Rails

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:

application screen-shot showing some articles and an Add button

Server outputs

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 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!

Top comments (2)

katafrakt profile image
Paweł Świątkowski

cool stack

stokry profile image