What readers are saying about The Rails View This is a must-read for Rails developers looking to juice up their skills for a world of web apps that increasingly includes mobile browsers and a lot more JavaScript. ➤ Yehuda Katz Driving force behind Rails 3.0 and Co-founder, Tilde In the past several years, I’ve been privileged to work with some of the world’s leading Rails developers. If asked to name the best view-layer Rails developer I’ve met, I’d have a hard time picking between two names: Bruce Williams and John Athayde. This book is a rare opportunity to look into the minds of two of the leading experts on an area that receives far too little attention. Read, apply, and reread. ➤ Chad Fowler VP Engineering, LivingSocial Finally! An authoritative and up-to-date guide to everything view-related in Rails 3. If you’re stabbing in the dark when putting together your Rails apps’ views, The Rails View provides a big confidence boost and shows how to get things done the right way. ➤ Peter Cooper Editor, Ruby Inside and Ruby Weekly The Rails view layer has always been a morass, but this book reins it in with details of how to build views as software, not just as markup. This book represents the wisdom gained from years’ worth of building maintainable interfaces by two of the best and brightest minds in our business. I have been writing Ruby code for over a decade and Rails code since its inception, and out of all the Ruby books I’ve read, I value this one the most. ➤ Rich Kilmer Director, RubyCentral The Rails View Creating a Beautiful and Maintainable User Experience John Athayde Bruce Williams The Pragmatic Bookshelf Dallas, Texas • Raleigh, North Carolina Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and The Pragmatic Programmers, LLC was aware of a trademark claim, the designations have been printed in initial capital letters or in all capitals. The Pragmatic Starter Kit, The Pragmatic Programmer, Pragmatic Programming, Pragmatic Bookshelf, PragProg and the linking g device are trade- marks of The Pragmatic Programmers, LLC. Every precaution was taken in the preparation of this book. However, the publisher assumes no responsibility for errors or omissions, or for damages that may result from the use of information (including program listings) contained herein. Our Pragmatic courses, workshops, and other products can help you and your team create better software and have more fun. For more information, as well as the latest Pragmatic titles, please visit us at http://pragprog.com. The team that produced this book includes: Brian Hogan (editor) Potomac Indexing, LLC (indexer) Molly McBeath (copyeditor) David J Kelly (typesetter) Janet Furlow (producer) Juliet Benda (rights) Ellie Callahan (support) Copyright © 2012 Pragmatic Programmers, LLC. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior consent of the publisher. Printed in the United States of America. ISBN-13: 978-1-93435-687-6 Encoded using the finest acid-free high-entropy binary digits. Book version: P1.1—April 2012 Contents Acknowledgments . ix Preface . xi 1. Creating an Application Layout . 1 1.1 Creating a Basic Layout 2 1.2 Setting Up a Boilerplate 6 1.3 Building the Page Frame 14 1.4 Adding a Sidebar 23 1.5 Adding Navigation 28 1.6 Displaying Notifications 36 1.7 Validating Our Code 39 1.8 Testing Internet Explorer 42 1.9 Wrapping Up 47 2. Improving Readability . 49 2.1 Choosing a Templating Language 49 2.2 Standardizing Coding Practices 51 2.3 Simplifying Complex Output 56 2.4 Working with Models 63 2.5 Displaying Conditional Content 65 2.6 Adding Model DOM IDs for JavaScript 69 2.7 Cleaning Up 71 2.8 Wrapping Up 72 3. Adding Cascading Style Sheets . 73 3.1 Using the Asset Pipeline 73 3.2 Learning SCSS 76 3.3 Adding Sprites 88 3.4 Using Web Fonts 92 3.5 Wrapping Up 98 Contents • vii 4. Adding JavaScript . 101 4.1 Using JavaScript from Rails 101 4.2 Testing Ajax 110 4.3 Wrapping Up 117 5. Building Maintainable Forms . 119 5.1 Using Semantic Form Tags 119 5.2 Building Custom Form Builders 132 5.3 Looking Toward the Future of HTML5 Form Elements 140 5.4 Wrapping Up 142 6. Using Presenters . 143 6.1 Presenting a Record 144 6.2 Presenting Multiple Records 153 6.3 Using Presenters for Serialization 158 6.4 Wrapping Up 161 7. Handling Mobile Views . 163 7.1 Building a Flexible Layout 164 7.2 The Next Level with Responsive Design (@media queries) 168 7.3 Using Mobile-Specific Templates 174 7.4 Using jQuery Mobile 179 7.5 Wrapping Up 187 8. Working with Email . 189 8.1 Building a Mailer 189 8.2 Handling Email Templates 191 8.3 Testing Locally 195 8.4 Testing Across Clients 196 8.5 Wrapping Up 206 9. Optimizing Performance . 207 9.1 A/B Testing with Vanity 207 9.2 Performance Testing and Maintenance 214 9.3 Wrapping Up 228 9.4 Where Do We Go from Here? 229 viii • Contents Part I — Appendices A1. The Rails View Rules . 233 A2. Bibliography . 235 Index . 237 Acknowledgments We have many people to thank for making this very ambitious book possible. First of all, as this is a book about Rails, a lot of credit must go to the creator of the framework, David Heinemeier Hansson, the members of rails-core (past and present), and other contributors. The ideas in this book are distilled from years of discussion and collaboration with the Rails and Ruby communities. Throughout our careers we’ve drawn inspiration and motivation from a number of web luminaries, and we would be remiss in failing to mention at least a few of them: Dan Cederholm, Molly Holzschlag, Paul Irish, Jeremy Keith, Steve Krug, Eric Meyer, Jakob Nielsen, Mark Pilgrim, and Jeffrey Zeldman. We were surprised to learn that a number of people actually volunteered to read the book before it was complete, thereby putting their own sanity at risk. We’d like to thank these brave souls for their help in identifying issues, sug- gesting topics, and otherwise vastly improving the text: Derek Bailey, Kevin Beam, David A. Black, David Bock, Daniel Bretoi, Jeff Casimir, BJ Clark, Jeff Cohen, Justin Dell, Joel Friedman, Jeremy Hinegardner, Mark Margolis, Dan Reedy, Sam Rose, Loren Sands-Ramshaw, Diego Scataglini, Tibor Simac, Charley Stran, Mark Tabler, and Lynn M. Wallenstein. This book simply would not have been completed if not for our amazing editor, Brian Hogan. He continuously challenged our preconceptions and helped to clarify our intent, all with seemingly unbounded patience and class. And we promise, Brian, we’ll never again utilize utilize in our writing (except for that time right there). Many thanks to Rich Kilmer, Chad Fowler, Aaron Batalion, and our colleagues in the engineering, design, and product teams at LivingSocial. You keep us hungry to win every day, constantly building pressure to innovate, which makes us better designers and developers. report erratum • discuss x • Acknowledgments John would like to thank his supportive wife, Whitney, for her patience and encouragement throughout the process; his parents, grandparents, and extended family for their love and support and for purchasing that Mac SE back in the day with Hypercard installed; all the members of #caboose for their patience and discussion over the years; Justin Hankins and Sara Flemming for all the years of experimenting in HTML, CSS, and Rails with Meticulous; and Amy Hoy for an intense year of business, design, and devel- opment boot camp while running Hyphenated People with him. He also thanks Bruce for agreeing to be a coauthor so that this book could rise to its potential. Bruce credits the care and support of his wife, Melissa, and his two sons, Braedyn and Jamis, for the uncharacteristic level of determination and attention he’s managed to focus on this single project, which broke any number of personal records. Also, Bruce’s life would have turned out very differently were it not for the love of his mother, Monique, and father, Bruce (the elder), and a varied and distributed family he’s proud to call his own, even if they do occasionally call him for tech support. To his coauthor, Bruce offers an equal share of sincere thanks and rampant design skill jealousy. Some things do not change. Finally, Bruce would like to dedicate his work on this book to the memory of his brother, Tristan Eppler. John Athayde & Bruce Williams March 2012 [email protected] | [email protected] report erratum • discuss Preface In 2004, Rails was born and the web discovered the MVC (model-view- controller) pattern in earnest, which brought a whole new level of productivity and fun to a world of developers and designers. You’ll find no end of books that provide a firm foundation for writing controllers and models (which benefit greatly from being written top-to-bottom in plain Ruby), but when it comes to views—that meeting place of Ruby, HTML, JavaScript, and CSS (not to mention developers and designers)—what’s a disciplined craftsman to do? This book aims to widen the discussion of Rails best practices to include solid, objective principles we can follow when building and refactoring views. By the time you’re finished reading, you’ll understand how you can structure your front end to be less brittle and more effective and boost your team’s productivity.