Pre-order

Phlex on Rails

Tame the Rails frontend with Phlex 💪 and Hotwire

Do you feel like there should be an easier way to snap pieces together to build UIs in Rails? Have you tried to tame a large Rails frontend, but got burned with bad abstractions or a mess of ERB templates, partials, and helpers?

Phlex brings sanity & joy back into building user interfaces in Rails.

This video course teaches you how to use Phlex to build high quality Rails frontends that you can use with existing Erb apps or go all-in and build from the ground up with components.

Buy video course ▶️ Watch introduction

Meet your guide, Brad Gessler

I built my first large Rails app when I founded Poll Everywhere. I scaled it up from a small app to one used by millions of people that processes billions of responses.

As CTO, I learned many lessons the hard way running a team of 35 Rails developers, designers, and product managers that I'll share with you so you can avoid the costly mistakes I made. Not only will you learn how to build excellent Rails applications—you will also know how it fits into the bigger picture of your team and organization.

Here's the lesson plan 🧑🏻‍💻

Unit 1

Getting started

This course will teach you the tactics and strategies for building user interfaces with Phlex, Rails, and other tools. In addition to the mechanics of Phlex, we’ll take a step back and ask “Why” and “How will this improve the development workflow?”

Introduction

This course will teach you the tactics and strategies for building user interfaces with Phlex, Rails, and other tools.

Why Rails?

Rails is highly productive full-stack framework. There’s ample documentation on “Why”, so I won’t cover it here, but I will cover the question of “Why Rails and Phlex?”

Why Phlex?

The frontend that ships with Rails starts to become a mess as views grow in complexity and size. This can lead to a tangled web of templates, partials, helpers, and code that is difficult to maintain, extend, and reuse throughout the application.

Why components?

Components make it easy to build a more consistent user interface, which ends up feeling much higher quality to your users. Additionally, shipping new features with a library of components is much easier than building everything from scratch or wrestling with various partials.

Unit 2

Component fundamentals

Phlex components are self-contained Ruby classes of a user interface that can be “snapped” together to build a more consistent, higher quality user experience. We’ll explore how you can use the full power of the Ruby programming languages to compose UIs for your Rails application.

Rendering

What happens when a component is rendered? Quite a bit actually. Let’s have a look.

Phlex is Ruby

Phlex is jut Ruby. The most basic Phlex component looks like this:

Blocks, slots, and yielding

A component is a self-contained unit of UI.

Inheritance

Use inheritance to extend and compose a framework library

Testing

Since Phlex components are Ruby classes, they’re much easier to test.

Compositions

Compose complex views in Phlex with multiple classes that have single responsibilities and modules.

Kits

Eliminate verbose component initialization and rendering with Phlex::Kit.

Unit 3

HTML in Phlex

Phlex is a lightweight HTML abstraction. Understanding how it maps to the generated HTML tags, attributes, comments, and other entities is foundational to creating quality components. We’ll also cover the built-in security and language server features in Phlex that make it a joy to use Phlex in your favorite code editor.

Tags

Phlex works with the HTML spec, but you can also register your own HTML tags.

Attributes

Phlex attributes are Ruby keyword arguments passed into a method and can be extended with powerful helper methods.

Safety

Built-in protection for XSS and other vulnerabilities in Phlex.

Text and whitespace

How to work with text and whitespace within Phlex blocks.

Unit 4

Existing Rails Apps

Phlex components can gradually be built and rolled-out in Rails apps with Erb, Haml, Slim templates and ViewComponents. These videos will show how to install Phlex into an existing Rails app, how to organize view files, and give you a strategy to gradually migrate your views into Phlex components.

Phlex in view templates

The beauty of Phlex components are that they can be rendered in your existing Erb, Haml, or Slim templates making it possible to incrementally introduce Phlex in your application without the need for a huge rewrite.

Getting Started

The first thing you need to do to get Phlex up and running in your Rails app is to install it.

Helpers

One of the more confusing concepts getting strarted with Phlex is the idea of helper functions. They don’t work how they do in Rails, which is a good thing because they don’t leak state, but it does mean there’s a slight learning curve.

Forms

Interoperate with Rails form helpers to bridge the gap between Rails form helpers and Superform.

Creating components

How to namespace and organize new components that you add to your Rails projects

Staying organized

As you add components and views to your project, where is the best place to put them?

Views

Render Phlex components for your entire view from Rails controllers.

Layouts

Use Phlex components as views for Erb components or Phlex views.

CSS

How to use and organize regular CSS with Phlex and the Rails asset pipeline.

Unit 5

Phlex and Hotwire

Phlex components encapsulate views and fragments making them a perfect way to organize and compose views in the Turbo stack. Use them with Turbo Frames, Turbo Streams, and Turbo Pagemorphs and create a more responsive user interface.

Turbo Frames

Render updates to Turbo pages with Phlex components by way of Turbo Streams.

Turbo Streams

Render updates to Turbo pages with Phlex components by way of Turbo Streams.

Turbo Pagemorphs

A more reactive approach to rendering rich Rails applications.

Stimulus

Add client-side functionality to Phlex components with Stimulus controllers.

Unit 6

Tailwind CSS and utility frameworks

Components work great with CSS utility Frameworks, like Tailwind CSS. We’ll install Tailwind CSS in a Rails app and integrate it with Phlex components

Overview

Phlex components pair very well with utility CSS frameworks, like Tailwind.

Installation

Install the tailwindcss-rails gem, configure a few paths, run the pre-processor and its off to the races.

Variants

Strategies for using inheritence and composition for dealing with slightly different variations of a component.

DaisyUI

Add DaisyUI to your project to move even faster, then refine components later.

Unit 7

Composing forms

Forms are a critical part of web applications, but they’ve traditionally been difficult to customize in Rails, especially with Phlex. Superform is a powerful form builder library built completely on Phlex that makes it possible to build different types of forms in your apps and use them with ease.

Why Superform?

Built from the ground-up to work with Phlex components and Rails.

Installation

Install Superform in your Rails application, then customize the ApplicationForm.

Variants & composition

Built from the ground-up to work with Phlex components and Rails.

Extending forms

Extend the base form to support all the different types of forms in your Rails application

Unit 8

Pure Phlex

We’ll go all-in on Phlex and build a Rails app completely out of Phlex components. You might not take it this far, but seeing it in action is a great way to understand how layouts, views, controllers, and components work together to create elegant UIs.

Views in controllers

Building Rails apps entirely from Phlex starts from the controllers. Consider the following Rails controller that renders a list of blog posts for a blog.

Layouts

In the last video, we ended up with a controller that rendered inline views that looks like this:

Reducing boilerplate

This controller has a ton of boilerplate code that we can reduce into more concise code that’s easier to follow and modify.

Invest in yourself 🤗

Pay once for lifetime access to the video course. No subscription required.

Pre-order video course for $379 $249

You save 34% and get to work with Brad to tailor course content to your learning goals

  • Tame Erb, Haml, and Slim views in existing Rails apps with Phlex components
  • Learn how to use only Phlex components to build Rails apps without Erb
  • Understand how components clean-up architecture, improve reusability, simplify testing, and increase velocity
  • Watch videos as soon as they're recorded and published
  • Access to all course videos, source code, and text when it's finished
  • Lifetime access to updates and new content

Early adopter discount 🤗

Get in early, lock-in a lower price, and set the direction of the course.

  • Pre-order

    The first 50 people who order will get to work with Brad to shape the direction of the course.

    Pre-order video course
  • Early adopter

    After the first 50, prices will go up to $289 between when the videos are being worked on and when they're all published.

  • Grand Opening

    The course will be discounted for the grand opening! The first 100 people will get a $50 discount off the full price of the course.

  • Mainstream

    Course is fully published and full price.

Frequently asked questions

How long will it take to develop the course?

Before video production begins, Brad will work with people who pre-order to set the final lesson plan for the class. This ensures you get a class that's most relevant to the problems you're trying to solve.

When video production for the course starts, videos will be published with the lesson plan as soon as they're finished.

What if I'm not satisfied with the course?

First, please share what could be improved. If you're still not satisfied, you can get a refund.

Are there discounts?

I get it, $379 is easier to spend when it comes out of a training budget or is a business expense. If you're a student or that's not you, reach out to somebody@beautifulruby.com and let's talk.

Can I get a receipt?

Of course! You'll need it for your expense reports or tax documentation. After you pay for the course you should get a receipt over email. You can also request one at anytime and we'll email it your way.

What does "lifetime access" mean?

You'll always be able to access this website to watch videos. If for some reason the website needs to be taken down, you'll be offered a downloadable format that you can store on your own device.

Who is this course for?

This course is perfect for anyone who wants to build maintainable, testable, and reusable Rails frontends using Phlex components.

  • Rails developers frustrated by tangled ERB, Haml, or Slim views
  • Frontend engineers looking to adopt component-driven UI patterns in Rails
  • Team leads and architects seeking scalable, consistent UI abstractions
  • Full-stack developers aiming to streamline collaboration between backend, UI, and design
  • Beginners eager to learn modern Rails UI development best practices

Checkout in minutes

Use Apple Pay, Amazon Pay, or your credit card to order this course and we'll email you the receipt.

Pre-order video course for $379 $249