Rails, Angular, Postgres, and Bootstrap

298 Pages·2016·7.67 MB·English

by  David Bryant Copeland

Early praise for Rails, Angular, Postgres, and Bootstrap
This book is a fantastic resource for anyone looking to gain a practical understand-
ing 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 en-
gineers 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 devel-
opers 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 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 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 [email protected].
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 . . . . . . . . . . . ix
Introduction . . . . . . . . . . . . . xi
1. Create a Great-Looking Login with Bootstrap and Devise . . 1
Setting Up Devise for Authentication 2
Installing Bootstrap with Bower 10
Styling the Login and Registration Forms 16
Validating Registration 22
Next: Using Postgres to Make Our Login More Secure 23
2. Secure the Login Database with Postgres Constraints . . 25
Exposing the Vulnerability Devise and Rails Leave Open 25
Prevent Bad Data Using Check Constraints 26
Why Use Rails Validations? 31
Next: Using Postgres Indexes to Speed Up a Fuzzy Search 32
3. Use Fast Queries with Advanced Postgres Indexes . . . 33
Implementing a Basic Fuzzy Search with Rails 34
Understanding Query Performance with the Query Plan 45
Indexing Derived and Partial Values 46
Next: Better-Looking Results with Bootstrap’s List Group 50
4. Create Clean Search Results with Bootstrap Components . 51
Creating Google-Style Search Results Without Tables 52
Paginating the Results Using Bootstrap’s Components 57
Next: Angular! 60
5. Build a Dynamic UI with AngularJS . . . . . . . 61
Configuring Rails and Angular 62
Porting Our Search to Angular 65
Contents • vi
Changing Our Search to Use Typeahead 79
Next: Testing 81
6. Test This Fancy New Code . . . . . . . . . 83
Installing RSpec for Testing 84
Testing Database Constraints 87
Running Headless Acceptance Tests in PhantomJS 91
Writing Unit Tests for Angular Components 103
Next: Level Up on Everything 117
7. Create a Single-Page App Using Angular’s Router . . . 119
Using Angular’s Router for User Navigation 121
Serving Angular Templates from the Asset Pipeline 124
Adding a Second View and Controller to Our Angular App 127
Next: Design Using Grids 135
8. Design Great UIs with Bootstrap’s Grid and Components . 137
The Grid: The Cornerstone of a Web Design 138
Using Bootstrap’s Grid 140
Adding Polish with Bootstrap Components 146
Next: Populating the View Easily and Efficiently 150
9. Cache Complex Queries Using Materialized Views . . . 151
Understanding the Performance Impact of Complex Data 152
Using Materialized Views for Better Performance 160
Keeping Materialized Views Updated 165
Next: Combining Data with a Second Source in Angular 169
10. Asynchronously Load Data from Many Sources . . . . 171
Understanding How Asynchronous Requests Work 172
Using Angular-Resource to Connect to Rails 175
Nesting Controllers to Organize Code 180
Using Bootstrap’s Progress Bar When Data Is Loading 183
Passing Data Between Controllers 186
Testing Controllers That Use Angular-Resource 189
Next: Sending Changes Back to the Server 191
11. Wrangle Forms and Validations with Angular . . . . 193
Managing Client-Side State with Bindings 194
Validating User Input with Angular Forms 195
Styling Invalid Fields with Bootstrap 200
Saving Data Back to the Server 205
Contents • vii
Understanding the Role of Rails Validators 209
Next: Everything Else 211
12. Dig Deeper . . . . . . . . . . . . . 213
Unlocking More of Postgres’s Power 213
Leveling Up with Angular 225
Getting Everything Out of Bootstrap 234
A1. Full Listing of Customer Detail Page HTML . . . . . 249
A2. Creating Customer Address Seed Data . . . . . . 253
Bibliography . . . . . . . . . . . . 257
Index . . . . . . . . . . . . . . 259
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 appli-
cation 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