Introduction

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

A real production application

I’ve never been a fan of how books and courses use trivial applications that aren’t actually running in production, so for this course I’ve decided to work with Thingybase, a Rails application I’ve been running in production with paying users.

Build high-quality, consistent UIs in Rails with Phlex components

Building user interfaces with components is such a powerful abstraction that teams often reach for React or Vue.js in Rails applications, not because they want or need JavaScript in their UI, but because they want to build UIs with components.

Phlex makes it possible to do just that without the complexity of bringing a heavy JavaScript framework into your application.

I also compare Phlex with ViewComponent and review other benefits it has for teams that want to ship high-quality user interfaces with their Rails applications.

I was CTO of a large Rails application

I lived through the pain of working with 10+ year-old Rails apps with lots of different “vintages” of front-end frameworks. This course is a culmination of that experience, so you can avoid the same mistakes I made.

Component fundamentals

You’ll learn the nitty-gritty of how to build Phlex components to stack them all up and build a more consistent, higher-quality, testable user interface.

There’s a certain way to architect and organize Phlex components that we’ll touch on in this unit, including tons of helper methods that make it easy to create component compositions. Most of the sound architectural patterns are good Ruby/OO design.

Existing Rails apps

As a former CTO, I know how difficult it is for teams to overcome sunk-cost bias and migrate to a better way of doing things.

I spend a lot of time in this course going over how Phlex can be incrementally introduced into existing applications that work right alongside the stuff you have deployed today.

Phlex and Hotwire

Hotwire and Phlex work really well together. Phlex renders components on the server, and Hotwire sends that over the wire to your user’s browser, so you maintain that buttery smoothness that people expect from modern web applications without introducing the complexity of React and Vue.js into your stack.

Build forms with components

Forms are among the most important parts of building a web application, so I make them easier and spend more time on them with a dedicated video unit.

You’ll learn how to use Superview, a Rails form helper library built from the ground up using Phlex components, to have more control over your forms than the helpers that ship with Rails.

For even more productivity, I show how Superform can be used to eliminate the need for strong parameters, which makes it even easier to ship CRUD applications with Rails.

Styling components

There are a lot of ways to style HTML in web applications. I pick from a few of the most popular approaches, including “vanilla CSS” with BEM or a utility framework like Tailwind CSS.

Going all the way with components

Then we’ll explore what it looks like to go “all in” with Phlex and Rails, and how to build a complete web application from scratch using nothing but Phlex components. It’s not as crazy as it sounds, and along the way, you’ll learn how to compose layouts, views, components, blocks, and slots with Phlex.

There are a few other fun things we’ll look at, too, such as using Superform to build forms with components that automatically permit their own parameters.

The bigger picture

Throughout the course, we’ll always ask “why” and zoom out so you can see the big picture of how Phlex improves the Rails front end and works with your team.

At the end of this course, you’ll have a solid understanding of how to build user interfaces with Phlex and Rails, and how to integrate them with other tools and frameworks.