PhlexUIPre Release

Introduction

Reusable UI components for Ruby developers

About

PhlexUI is a UI framework for Ruby developers, built on top of Phlex, TailwindCSS and Stimulus JS. It provides a set of components that are easy to use, and easy to customize.

Core ingredients

PhlexUI is built on top of 3 core ingredients:

  • Phlex - A framework for building fast, reusable, testable views in pure Ruby.
  • TailwindCSS - A utility-first CSS framework for rapidly building custom designs.
  • Stimulus JS - A modest JavaScript framework for the HTML you already have.

Why I built PhlexUI

Many Ruby developers are familiar with Rails, and the convention over configuration approach it takes. PhlexUI is built on the same principles, providing a set of components that are easy to use, and easy to customize.

PhlexUI was born out of a desire for a comprehensive UI framework designed with Ruby developers in mind. While I've previously utilized TailwindUI and other solutions, none seemed to fit just right. The plethora of UI component libraries available for JavaScript frameworks highlighted a gap in the Ruby ecosystem, which PhlexUI aims to fill.

Upon discovering Phlex, it became clear that it was the ideal foundation for such a library. It offered the potential for a powerful, easy-to-use, and customizable component library when paired with StimulusJS. The goal was to create a tool that leverages the strengths of TailwindCSS and StimulusJS, providing Ruby developers with a comprehensive UI solution that is stylable at the HTML level.

Goals of PhlexUI

  1. Create a reusable UI component library specifically for Ruby devs
  2. Enable Ruby devs to create custom and complex UIs without needing to write CSS or JS

My experience using Phlex

I was initially skeptical about Phlex. I worried about using an abstraction layer on top of HTML and thought this would be a bad move. However, after trying it I realised that I was wrong, and I know others who have had the same experience as myself.

After some time using Phlex, it's obvious to me that this is a better way to render your views in Ruby apps. Phlex is intuitive and simple. It is also incredibly fast (12x faster than ERB, 5x faster than ViewComponent), it also makes your code more organised and leads to a better developer experience.

Same same, but different

Phlex is essentially just HTML in Ruby form, bundled into a component. It's a simple concept, but it's incredibly powerful. It allows you to write your views in pure Ruby, without the need for a templating language. This means you can use all the features of Ruby, including loops, conditionals, and more.

As an example, if you want to render a <p class='text-sm font-muted-foreground'>Phlex. Same same, but different.</p> element, you can do it like this p(class: 'text-sm font-muted-foreground') { 'Phlex. Same same, but different.' }.

This is a simple example, but it's easy to see how this can be scaled up to more complex views. It's only natural that we use logic to build HTML. Phlex simplifies this process, making it easier to convert data structures into HTML.

Acknowledgments

I'd like to thank the following projects and people for helping me build PhlexUI