Building a Beautiful UI with Phlex & RubyUI

Tired of slow ERB templates and messy view logic? Discover how Phlex and RubyUI bring blazing-fast (12x!) and beautiful components to Rails while maintaining the Ruby way we all love. Let's see how we can build modern, accessible UIs without leaving the Rails ecosystem!

Transcript

1. Current State of Rails Views (ERB templates)
2. Current State of Rails Views • ERB templates are slow and hard to maintain • No type safety or component encapsulation • Poor developer experience • Hard to build consistent, accessible UIs
3. seth @ StateCert Building a Beautiful UI with Phlex & RubyUI
4. What is Phlex? Ruby-native view framework that replaces ERB • 12x faster than ERB • Type-safe components • Native Ruby syntax • Better IDE support
6. Performance Matters Phlex ViewComponent ERB Templates 3.05 6.1 9.15 12.2 *thank you Konner rogers for this
7. RubyUI - a shadcn for ruby
10. Components are like legos
12. Unlike IKEA furniture that always has screws left over
13. Component-Based Architecture • Components are reusable building blocks • Each component is self-contained • Components can be composed together • Everything is a component
14. Select Dropdown
18. Built-in Accessibility • ARIA attributes • Keyboard navigation • Screen reader support • Focus management
19. 🎯 LIVE DEMO:
20. rubyui.com
21. rubyui.com
22. rubyui.com
23. WAIT!!
24. Its not ready today
25. @SethHorsley
26. Learn More • Documentation -> rubyui.com • GitHub repository -> github.com/ruby-ui/ruby_ui • Community resources -> github.com/orgs/ruby-ui/discussions • @SethHorsley @cirdesh @george_kettle @marcoroth