Joel Drapper

Talk: Building Beautiful Views in Ruby with Phlex

Full-stack engineer at Prevail — author and maintainer of Phlex, Quickdraw, Literal, Morphlex

Building Beautiful Views in Ruby with Phlex

In this practical talk, you’ll learn how to use object-oriented pro- gramming 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 ar- chitecture 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 under- stands 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.

Bio

Joel Drapper is a software engineer at Prevail AI and the author of several Ruby gems including Phlex, Literal and Quickdraw. He loves skiing, climbing and wild swimming. He also co-hosts the Rooftop Ruby podcast.