Pre-order

Phlex on Rails

Build amazing user-interfaces in Rails with Phlex 💪

Tired of Rails frontends that feel brittle and messy? Bring back the joy with Phlex. In this course you'll learn how to:

  • Build ambitious frontends. Snap together complex UIs without getting lost in partials, helpers, & views.
  • Work with existing Rails apps. Integrate Phlex components at your own pace without rewriting everything.
  • Level up your architecture. Create self-permitting forms, stateful views, and component-only apps that are easier to test, organize, & scale.

Whether you're leading a team or building your first app, you'll learn how to ship frontends that feel great to use and even better to build.

Buy video course ▶️ Watch introduction

Meet your guide, Brad Gessler

I built my first large Rails app when I founded Poll Everywhere. What started as a side project grew into a platform used by millions and trusted to handle billions of responses.

As CTO, I led a team of 35 Rails developers, designers, and product managers. You'll learn from the many mistakes I made along the way, so you can build clean, scalable frontends that work for your team and your 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.

Phlex is Ruby

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

Rendering

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

Tags, attributes, & text

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.

Blocks, slots, & yielding

One of the most powerful features of Phlex is how well it can handle blocks of content. If you’re familiar with custom HTML elements or other component frameworks, you may have heard this referred to as “slots”.

Inheritance

As you start to accumulating more components in your application, you’ll natrually find yourself wanting to make little tweaks in different areas. There’s several strategies to managing these tweaks including intialization parameters, extended classes, and composition.

Compositions

Inheritance is a useful tool for managing the complexity of Phlex views and components, but it can also lead to tight coupling and make it difficult to reuse components across different contexts. Compositions, on the other hand, offer a flexible and modular approach to building complex views.

Testing

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

Unit 3

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.

Getting Started

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

Rendering from templates

The beauty of Phlex components is that they can be rendered within your existing ERB, Haml, or Slim templates, making it possible to incrementally introduce Phlex into your application without requiring a complete rewrite.

Creating views & components

Phlex provides convenient generators that create new view components in your Rails projects, automatically placing them in the correct directories with proper namespacing.

Helpers

One of the more confusing concepts when getting started with Phlex is understanding how helper functions work. Unlike Rails helpers, Phlex helpers don’t leak state, which is beneficial for maintainability, but it does create a slight learning curve for Rails developers.

Staying organized

As your Phlex application grows, maintaining a clean and logical organization becomes crucial for long-term maintainability. This section covers best practices for organizing your components and views to keep your codebase scalable and easy to navigate.

Layouts

In Rails applications, layouts are typically defined in seperate files and “wrap” a view via some sort of yield block.

Views

Phlex views serve as the main templates for your Rails application, corresponding directly to controller actions. Unlike components, which are reusable UI elements, views represent complete pages or sections that are rendered when users visit specific routes in your application.

Caching

Phlex is impressively fast, rendering HTML at approximately 1.4 GB/s per core on a MacBook Pro (M3 Max) without performance degradation as you extract more components. Despite this performance, there are still scenarios where view caching can provide additional benefits.

Action Mailer

Phlex components excel at creating email templates, though email styling requires a different approach due to the limitations and inconsistencies of email clients. Unlike web browsers, email clients have varying levels of CSS support, making inline styles the most reliable approach.

Unit 4

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.

Stimulus

Stimulus is a JavaScript framework that ships with Rails. It provides a way to add client-side functionality to Phlex components with Stimulus controllers. For example, we can create a Stimulus component that copies a value from the DOM to the users clipboard.

Turbo Frames

Turbo frames are a way to update the content of a page without reloading the entire page. They are a key feature of Turbo, a framework for building fast and responsive web applications; however, they do break encapsulation by the fact that they work with DOM ids, which can easily be duplicated by accident when using the rails dom_id helper.

Turbo Streams

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

Turbo Pagemorphs

I always recommend starting with Turbo Pagemorphs before bothering with Turbo Streams or Turbo Frames. Turbo Pagemorphs are the simplest way to add interactivity to your Rails application. They also work best with components.

Unit 5

Build forms with components

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?

Forms are a critical part of web applications and traditionally have 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.

Getting Started

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

Working with forms

Superform was built with the understanding that web applications have many different types of forms dependung on context and the user.

Strong parameters

One of the most powerful things about Superform is it understands the structure of the data being submitted into the form, which means it can automatically permit form parameters based on the structure of the data being submitted.

Unit 6

Styling with CSS & 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

Composition

Before we dive into the specifics of CSS, its worth learning the parts of Phlex that make it easier to compose styles.

Overview

Styling components is a bit different than styling entire pages of CSS. Generally speaking, you want the styling rules to be co-located with the component. That means you can either see the CSS inside of the component or are using utility classes, like Tailwind or DaisyUI, to define the look and feel of each component.

Vanilla CSS

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

Tailwind CSS

Strategies for using inheritance 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

Pure Phlex Rails apps

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.

Invest in your team ⛹️‍

Buy 5+ courses for your team and meet regularly with Brad

In addition to the Phlex on Rails video course, your team gets four one-hour virtual meetings with Brad for a month to discuss how to apply the course content to the project you're team is working on.

Top-down 👩‍✈️

Manager pays for everybody on the team

You'll select the number of people on the team during checkout and pay for everybody on your team.

Pay for the whole team

Pre-order starting at $1,895 $1,295.

Bottoms-up 🧑🏻‍💻

Each engineer pays for their portion of the course

Enter your "Team Name" during the checkout process. Once all your team members pay we'll coordinate meeting times.

Pay for my portion

Pre-order your portion for $379 $249.

Looking for something more tailored? Email brad@beautifulruby.com and we'll discuss a custom plan for your team.

Invest in future developers 🧑‍🎓

Sponsor college & highschool students who want to learn Ruby

In addition to your company getting the team course, which includes four one-hour virtual meetings with Brad for a month and the Phlex on Rails video course for 5 developers, you'll also get your logo featured on the course homepage for a year and pay for 50 high school & college students who are eager to learn Ruby, Rails, and Phlex from this course.

Sponsor for $7,500 $5,000

Questions? Want to make tweaks to this package? Email brad@beautifulruby.com and let's chat.

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