Working in the Rails View layer requires a breadth of knowledge and attention to detail unlike anywhere else in Rails. One wrong move can result in brittle, complex views that stop future development in its tracks. Break free from tangles of logic and markup in your views and implement your user interface cleanly and maintainably.

Buy Now

Select a DRM-free Format:

In Stock
In Stock
In Stock
Buy the eBook and get these DRM-free formats delivered immediately:
  • epub (for iPhone/iPad, Android, eReaders)
  • mobi (for Kindle)
  • PDF
We can automatically send them to your Kindle or Dropbox, and for a social reading experience we can link the book to your Readmill account. (You'll need to log in to enable these options.)
 

About this Book

  • 264 pages
  • Published:
  • Release: P1.1 (2012-04-06)
  • ISBN: 978-1-93435-687-6

In this book you’ll learn how to build up solid, sustainable layouts and popular interface elements with semantic HTML5 and CSS3. You’ll explore ways to make working with forms more manageable, and you’ll discover when you can responsibly generate markup and use advanced presenters—all without leaving the designers on your team out in the cold. You’ll even learn how to tame HTML emails so you can ensure your message reaches its intended audience.

Master the asset pipeline introduced in Rails 3.1 as you use Sass and Coffeescript to make your interface more enjoyable and your code shorter, and explore ways to present your application to that ever-growing mobile audience. You’ll see how to ensure that your interface stays snappy by evaluating its performance.

This book gives you comprehensive, objective guidance in a realm full of subjective opinions. Use it, and you’ll create elegant, well-structured views that are a joy to build upon.

What You Need:

All examples in the book assume Rails 3.1 or later and Ruby 1.9.x are installed. Detailed information on how to install these for Windows, Mac OS X and Linux is included in the book.


Top Ten View Rules

  1. Our markup should have meaning. We write templates using semantic HTML.
  2. Our style sheets should handle presentation. We don’t use markup to style or use images when CSS will do.
  3. Our templates should be free of client-side code. We unobtrusively attach behavior from our JavaScript files.
  4. Our templates should be easy to read. We consistently indent correctly using spaces instead of tabs, type lines no longer than eighty characters, and extract complex logic to helpers and presenters.
  5. Our templates should be easy to find. We use standard naming conventions and place them in the directory for the related resource (or the layout).
  6. Our markup should be easy for the entire team to modify. We prefer rendering partials over generating markup from Ruby code.
  7. Our technology choices should help, not hinder, the team. We use the templating language and tools that work best for all of us.
  8. Our designs for the Web should work on a variety of devices and browsers. We build for the simplest interactions first and support progressive enhancement.
  9. Our designs for email must work for a wide range of providers. We use HTML tables and images as necessary and always provide a plain-text alternative.
  10. Our application should perform as well as it needs to, when it needs to. We implement the most elegant approach first, then we optimize when necessary.

Contents and Extracts

Preface

  • Creating an Application Layout
    • Creating a Basic Layout
    • Setting Up a Boilerplate
    • Building the Page Frame
    • Adding a Sidebar
    • Adding Navigation
    • Displaying Notifications
    • Validating Our Code
    • Testing Internet Explorer
    • Wrapping Up
  • Improving Readability
    • Choosing a Templating Language
    • Standardizing Coding Practices excerpt
    • Simplifying Complex Output
    • Working with Models
    • Displaying Conditional Content
    • Adding Model DOM IDs for JavaScript
    • Cleaning Up
    • Wrapping Up
  • Adding Cascading Style Sheets
    • Using the Asset Pipeline
    • Learning SCSS
    • Adding Sprites
    • Using Web Fonts
    • Wrapping Up
  • Adding JavaScript
    • Using JavaScript from Rails
    • Testing Ajax
    • Wrapping Up
  • Building Maintainable Forms
    • Using Semantic Form Tags excerpt
    • Building Custom Form Builders
    • Looking Toward the Future of HTML5 Form Elements
    • Wrapping Up
  • Using Presenters
    • Presenting a Record excerpt
    • Presenting Multiple Records
    • Using Presenters for Serialization
    • Wrapping Up
  • Handling Mobile Views
    • Building a Flexible Layout
    • The Next Level with Responsive Design (@media queries)
    • Using Mobile-Specific Templates
    • Using jQuery Mobile
    • Wrapping Up
  • Working with Email
    • Building a Mailer
    • Handling Email Templates
    • Testing Locally
    • Testing Across Clients
    • Wrapping Up
  • Optimizing Performance
    • A/B Testing with Vanity
    • Performance Testing and Maintenance
    • Wrapping Up
    • Where Do We Go from Here?
  • The Rails View Rules

Top Ten View Rules

  1. Our markup should have meaning. We write templates using semantic HTML.
  2. Our style sheets should handle presentation. We don’t use markup to style or use images when CSS will do.
  3. Our templates should be free of client-side code. We unobtrusively attach behavior from our JavaScript files.
  4. Our templates should be easy to read. We consistently indent correctly using spaces instead of tabs, type lines no longer than eighty characters, and extract complex logic to helpers and presenters.
  5. Our templates should be easy to find. We use standard naming conventions and place them in the directory for the related resource (or the layout).
  6. Our markup should be easy for the entire team to modify. We prefer rendering partials over generating markup from Ruby code.
  7. Our technology choices should help, not hinder, the team. We use the templating language and tools that work best for all of us.
  8. Our designs for the Web should work on a variety of devices and browsers. We build for the simplest interactions first and support progressive enhancement.
  9. Our designs for email must work for a wide range of providers. We use HTML tables and images as necessary and always provide a plain-text alternative.
  10. Our application should perform as well as it needs to, when it needs to. We implement the most elegant approach first, then we optimize when necessary.

About the Author

John Athayde is a UI/UX Design type who comes from an architecture (of the building variety) background. He’s been in the Rails community since 2006 and has broad experience in e-commerce and running creative teams. He is a senior UI/UX designer at LivingSocial.

Bruce Williams is a longtime speaker, trainer, designer, and book contributor in the Ruby and Rails community and has experience in everything from low-level data processing backends to front-end user interaction. He is a senior developer in R&D at LivingSocial.

Upcoming Author Events

  • 2012-11-13: John M Athayde
    Giving talk on "The Rails View: The Junk Drawer Grows Up" At NYC.rb (NYC.rb)
  • 2013-01-08: John M Athayde
    The Rails View: The Junk Drawer Grows Up (Triangle.rb)
  • 2013-04-27: Brian P. Hogan
    JRuby - Imagine mixing the easy syntax, powerful language features, and rapid development of Ruby with the speed, power, and flexibility of the Java Virtual Machine? Ruby and the JVM go together like chocolate and peanut butter, and you'll see some examp (Twin Cities Code Camp, Minneapolis, MN)
  • 2013-08-13: Brian P. Hogan
    Testing Client Side Code with Jasmine and CoffeeScript With more logic moving from the client-side to the server-side, we've got to get better at testing code. In this talk you'll learn about writing tests for client-side code that help drive the d (ThatConference, Wisconsin Dells, Wisconsin)
  • 2013-10-04: John M Athayde
    "UX Eye for the JavaScript Guy/Gal" (NationJS)
  • 2013-10-12: John M Athayde
    Speaking on a panel "Custom Frameworks and Styleguides" on day 2 (Sun, 13 Oct) (SassConf)
  • 2014-04-05: Brian P. Hogan
    Automate with Grunt (Twin Cities Code Camp, Minneapolis, MN)

Comments and Reviews

  • 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
  • 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
  • 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
  • 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