Early praise for Rails, Angular, Postgres, and Bootstrap This book is a fantastic resource for anyone looking to gain a practical understanding of full-stack development using contemporary, ubiquitous technologies I was particularly impressed by how well the author was able to cover so many different software components in such a constructive and cohesive manner As an engineer who spends most of my time at the data layer, I walked away with a ton of helpful insight into the other layers of the typical application stack ➤ Matthew Oldham Director of data architecture, Graphium Health A book that deals with integrating Angular into Rails is something I’ve been waiting a long time for, and what’s here is a definite step above existing online tutorials Like the author, I’m used to viewing different database management systems as black boxes that are much like each other, and this book made me reconsider that line of thinking I highly recommend this book for Rails developers who want to try Angular and make use of PostgreSQL’s advanced features ➤ Nigel Lowry Company director, Lemmata Rails, Angular, Postgres, and Bootstrap is a powerful resource for all software engineers interested in full-stack development No matter your proficiency at each level in the stack, you’ll acquire a new technique that’s immediately applicable to your project ➤ Simeon Willbanks Lead software engineer, Stitch Fix This book provides beginner developers with solid steps to get “your” application running and to be able to see/do it yourself I recommend the book to Rails developers beginning their learning journey with Angular ➤ Maricris Nonato Senior Ruby on Rails developer, Premiere Speakers Bureau Rails, Angular, Postgres, and Bootstrap Powerful, Effective, and Efficient Full-Stack Web Development David Bryant Copeland 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 trademarks 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 https://pragprog.com The team that produced this book includes: Fahmida Y Rashid (editor) Potomac Indexing, LLC (index) Liz Welch (copyedit) Dave Thomas (layout) Janet Furlow (producer) Ellie Callahan (support) For international rights, please contact rights@pragprog.com Copyright © 2016 The 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-68050-126-1 Encoded using the finest acid-free high-entropy binary digits Book version: P1.0—January 2016 Contents Acknowledgments Introduction ix xi 10 16 22 23 Create a Great-Looking Login with Bootstrap and Devise Setting Up Devise for Authentication Installing Bootstrap with Bower Styling the Login and Registration Forms Validating Registration Next: Using Postgres to Make Our Login More Secure Secure the Login Database with Postgres Constraints Exposing the Vulnerability Devise and Rails Leave Open Prevent Bad Data Using Check Constraints Why Use Rails Validations? Next: Using Postgres Indexes to Speed Up a Fuzzy Search 25 25 26 31 32 Use Fast Queries with Advanced Postgres Indexes Implementing a Basic Fuzzy Search with Rails Understanding Query Performance with the Query Plan Indexing Derived and Partial Values Next: Better-Looking Results with Bootstrap’s List Group 33 34 45 46 50 Create Clean Search Results with Bootstrap Components Creating Google-Style Search Results Without Tables Paginating the Results Using Bootstrap’s Components Next: Angular! 51 52 57 60 Build a Dynamic UI with AngularJS Configuring Rails and Angular Porting Our Search to Angular 61 62 65 Contents Changing Our Search to Use Typeahead Next: Testing • vi 79 81 Test This Fancy New Code Installing RSpec for Testing Testing Database Constraints Running Headless Acceptance Tests in PhantomJS Writing Unit Tests for Angular Components Next: Level Up on Everything 83 84 87 91 103 117 Create a Single-Page App Using Angular’s Router Using Angular’s Router for User Navigation Serving Angular Templates from the Asset Pipeline Adding a Second View and Controller to Our Angular App Next: Design Using Grids 119 121 124 127 135 Design Great UIs with Bootstrap’s Grid and Components The Grid: The Cornerstone of a Web Design Using Bootstrap’s Grid Adding Polish with Bootstrap Components Next: Populating the View Easily and Efficiently 137 138 140 146 150 Cache Complex Queries Using Materialized Views Understanding the Performance Impact of Complex Data Using Materialized Views for Better Performance Keeping Materialized Views Updated Next: Combining Data with a Second Source in Angular 151 152 160 165 169 10 Asynchronously Load Data from Many Sources Understanding How Asynchronous Requests Work Using Angular-Resource to Connect to Rails Nesting Controllers to Organize Code Using Bootstrap’s Progress Bar When Data Is Loading Passing Data Between Controllers Testing Controllers That Use Angular-Resource Next: Sending Changes Back to the Server 171 172 175 180 183 186 189 191 11 Wrangle Forms and Validations with Angular Managing Client-Side State with Bindings Validating User Input with Angular Forms Styling Invalid Fields with Bootstrap Saving Data Back to the Server 193 194 195 200 205 Contents Understanding the Role of Rails Validators Next: Everything Else 12 Dig Deeper Unlocking More of Postgres’s Power Leveling Up with Angular Getting Everything Out of Bootstrap 209 211 213 213 225 234 A1 Full Listing of Customer Detail Page HTML A2 Creating Customer Address Seed Data 249 253 257 259 Bibliography Index • vii Acknowledgments I’d like to first thank my wife Amy, who gave me the encouragement and space to spend time every morning writing this book I’d also like to thank my editor, Fahmida Rashid, who managed to take what started as a functional requirements document for a customer service application and helped me turn it into a useful book I’d further like to thank the many people who reviewed the in-progress book, including Chris Hoffman, David McClain, J Daniel Ashton, Jacob Chae, John Cater, Maricris Nonato, Matthew Oldham, Nell Shamrell, Nigel Lowry, Simeon Willbanks, and Jeremy Frens (who had particular insights that I hope I’ve reflected well) And a huge thanks to the various readers who pointed out errors in the beta version of the book (including some rather embarrassing omissions): Andrea Bufalo Riva, Bradford Baker, Brent Nordquist, C R Myers, Chris McCann, Harri Jauri, J Daniel Ashton, Jamie Finlay, Jesus Alc, John Lyons, Michael Pope, Narongsak Jirajaruwong, Nick Clyde, Patrick Joyce, Russ Martin, Sernin van de Krol, Stephen Lloyd, and Volker Wiegand Finally, I’d like to thank the contributors to the software you’re learning about in this book The people who have given their free time to make Ruby, Rails, Postgres, Angular, Bootstrap, PhantomJS, Teaspoon, Poltergeist, Devise, Capybara, RSpec, Angular-UI, Database Cleaner, Bower, and all other open source software are far too numerous to list here, but without their work, most developers would have a hard time doing their jobs report erratum • discuss ... developer, Premiere Speakers Bureau Rails, Angular, Postgres, and Bootstrap Powerful, Effective, and Efficient Full- Stack Web Development David Bryant Copeland The Pragmatic Bookshelf Dallas,... three parts—one for Postgres, one for Angular, and one for Bootstrap That’s not how a full- stack developer approaches development A full- stack developer is given a problem to solve and is expected... Early praise for Rails, Angular, Postgres, and Bootstrap This book is a fantastic resource for anyone looking to gain a practical understanding of full- stack development using contemporary,