Building Beautiful Views in Ruby with Phlex

In this practical talk titled Building Beautiful Views in Ruby with Phlex, Joel Drapper introduces Phlex, a Ruby gem designed to create fast and maintainable UI components for web applications using an object-oriented programming (OOP) approach. The presentation addresses common issues faced by developers, like tangled template files and weak encapsulation in traditional Ruby views, and illustrates how Phlex aims to resolve these concerns. Drapper believes that simple HTML documents generated from a backend is still the most effective way to develop web applications, especially for performance and maintainability.

Key Points Discussed:
- Common Challenges in Ruby Applications:

Developers often encounter a mix of HTML, ERB, Ruby, and Tailwind in their views, making it hard to maintain and test code.

Phlex's Solution:

Phlex facilitates a component-based architecture in Ruby, promoting the creation of reusable and composable UI elements. The structure allows for testing in isolation, thereby enhancing maintainability.
Using OOP in Views:

The talk emphasizes applying OOP patterns, such as inheritance and composition, to UI components which leads to better organization of code.
Demo of Phlex Usage:

Drapper showcases how to create components like navigation bars and tab groups efficiently while maintaining separation of concerns and enhancing reusability.
Selective Rendering:

One of the standout features of Phlex is its ability to allow the backend to render specific elements based on frontend requests, optimizing performance by reducing unnecessary rendering.
Component Kit Creation:

Developers can package components into reusable kits for easy sharing and maintenance.
Testing and Accessibility:

Phlex includes tools that support component testing and promotes better accessibility practices in HTML generation.
Challenges with Caching and Streaming:

The talk concludes with a discussion on the trade-offs involved in caching and the importance of reconsidering streaming HTML to improve application performance.

In conclusion, Drapper's talk provides valuable insights and best practices for developers looking to adopt a component-driven approach in Ruby applications. The introduction of Phlex offers a new perspective on building UI without relying heavily on JavaScript frameworks, reaffirming the effectiveness of Ruby in modern web development.

Building Beautiful Views in Ruby with Phlex
Joel Drapper • Sarajevo, Bosnia and Herzegovina • Talk

Date: September 12, 2024
Published: January 13, 2025
Announced: unknown

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.

EuRuKo 2024