Thinking in Components: Building Reusable UIs in Rails with ViewComponent

Transcript

1. Building Reusable UIs in Rails with ViewComponent Thinking in Components Prabin Poudel Ruby on Rails Consultant & CEO @ Truemark Technology
2. @coolprobn @coolprobn Prabin Poudel 👋 Ruby on Rails Consultant & CEO @ Truemark Technology prabinpoudel.com.np
3. Rails view convention The problem with raw views Enter ViewComponent Example: Building a Form Field Example: Building a Button Benefits of ViewComponent Q&A Agenda
4. Rails scaffolds views in ERB templates Let’s say we generate a User form: Rails View Convention
6. Repetition of code Hard to maintain consistency across the app Code Spaghetti Difficult to preview in isolation Problems with Raw Views
7. https://viewcomponent.org/ A framework from GitHub to build encapsulated, reusable view objects Think of it as React components, but for Rails views Each UI piece = a Ruby class + a template Example: following command generates two files app/components/button_component.rb app/components/button_component.html.erb Enter ViewComponent
8. Example 1: Form Input Field
9. Refactored Code
10. Example 2: Button
11. Refactored Code
12. 1.Encapsulation 2.Reusable & Maintainable 3.First class support for Test 4.Easy to Preview in Browser Benefits of ViewComponent
13. Keep logic + markup together Isolate code in each component Encapsulation
14. Reusable across multiple views All buttons share consistent styles Reusable / Maintainable
15. Test UI in isolation without full controller First class support for Test
16. Preview like Action Mailer previews Create a file named `test/components/previews/button_component_preview.rb` Visit /rails/view_components to view all previewable components Easy to Preview in Browser
17. Thank you 🙏 Any Questions? @coolprobn @coolprobn prabinpoudel.com.np