Building Beautiful Views in Ruby with Phlex
In this practical talk, you’ll learn how to use object-oriented programming to create fast, maintainable UI components in pure Ruby with Phlex.
Ruby applications tend to end up with a spaghetti soup of HTML, ERB, Ruby and Tailwind directives all muddled up and entangled in huge template files that become increasingly difficult to test, debug and maintain over time.
ViewComponent can help to unravel some of that, but it only goes so far. Now, many teams — including GitHub (behind ViewComponent) — are turning the view layer over to frontend JavaScript frameworks such as React.
Despite this, I still believe that returning simple HTML documents from a simple backend is the best way to build most web applications today — whether you’re optimising for performance, developer productivity or long-term maintainability.
This talk introduces Phlex, a new Ruby gem that brings component-based architecture to the backend, enabling developers to create views that are fast, maintainable and really fun to work with in pure Ruby.
We’ll start by identifying common pain points in traditional approaches, such as lack of encapsulation, difficult testing and poor performance.
We’ll explore how Phlex addresses these issues by leveraging object-oriented programming to create reusable, composable UI components.
Through a series of real-world examples, you’ll learn how to:
- Agradually refactor an existing Rails application;
- apply OOP patterns like inheritance and composition to your views;
- extract methods and objects, applying your existing Ruby refactoring skills to a new domain;
- encapsulate view logic and helpers within components;
- yield interfaces to enable composition;
- test your components in isolation; and
- package components into reusable UI kit gems.
We’ll also cover the trade-offs and challenges of caching the view layer, the difference between views, layouts and components, and why you might want to reconsider the lost art of streaming HTML.
Finally, we’ll learn about the emergent capabilities of a view layer that understands the structure of HTML documents, and how Phlex can help you write safer, more accessible HTML.
We’ll also learn about Selective Rendering and the kinds of things that become possible when the frontend can ask the backend to render specific elements.
By the end of the talk, you’ll be equipped with a set of patterns and best practices for building and maintaining component-based architectures in Ruby applications, and you’ll have a solid foundation for using Phlex in your own projects, as well as a new perspective on what’s possible with Ruby.