The Rails View

Transcript

1. The Rails View Brian Reath CCI Systems, Inc. Wednesday, August 15, 12
2. Overview • Goals • Anti-patterns • Best Practices • Putting into Practice Wednesday, August 15, 12
3. Goals • Build simple, easy-to-maintain views • Establish standard view layer patterns across projects • Reduce duplication Wednesday, August 15, 12
4. Anti-patterns • Inline styles • “Classitis” • Duplication • Conditionals in Views • Enormous Views Wednesday, August 15, 12
5. Inline Styles • Just generally bad • Almost always leads to duplication • Move to external stylesheet Wednesday, August 15, 12
6. “Classitis” • Appending a million classes to every HTML tag • The “Twitter Bootstrap effect” • See every table in PODS Wednesday, August 15, 12
7. Duplication • We’re programmers • Duplication is evil • If there is duplication in views, remove it • Class names, HTML attributes, standard input options, etc Wednesday, August 15, 12
8. Conditionals in Views • Conditionals in views is equivalent to business logic in views • Try to encapsulate logic into helper functions or view classes • See field_logs_helper#field_log_task_badge for an example solution Wednesday, August 15, 12
9. Enormous, Complex Views • Don’t let view files get unreasonable to manage • Split into logical partials when over 100 lines or so • See field_log_approvals#new for an example of a view that could use a refactor • See every NOC view for more examples Wednesday, August 15, 12
10. Best Practices • Custom Form Inputs • Partials from Helpers • Building Components • Attaching JavaScript • JS Techniques • Presenters Wednesday, August 15, 12
11. Custom Form Inputs • We’ve standardized on simple_form • Learn it and understand it • Building custom form inputs is relatively easy (PODS uses several) Wednesday, August 15, 12
12. Render Partials from Helpers • Compose your pages out of easy-to-use partials • You can render a partial from a helper function, which significantly cleans up views Wednesday, August 15, 12
13. Building Components • Think about page sections as components • Encourages code reuse • Styles can be universally applied whenever a component is rendered Wednesday, August 15, 12
14. Attaching JavaScript • Make the functionality generic • Add “data-” attributes to HTML tags • Unobtrusive JS hooks into “data-” attributes Wednesday, August 15, 12
15. JS Techniques • Organizing JS files and classes • Twitter Bootstrap code reading • Global behavior • Controller-specific behavior • Page-specific behavior Wednesday, August 15, 12
16. Presenters • Helpers on steroids • Expose model layer logic to views • Gives you a more appropriate place to put view-specific logic (other than the model) • May also make views more testable Wednesday, August 15, 12