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.

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?”

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.

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.

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

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.


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.

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