Rails, Angular, Postgres, and Bootstrap, Second Edition

Powerful, Effective, Efficient, Full-Stack Web Development

by David Bryant Copeland

Achieve awesome user experiences and performance with simple, maintainable code! Embrace the full stack of web development, from styling with Bootstrap, building an interactive user interface with Angular 4, to storing data quickly and reliably in PostgreSQL. With this fully revised new edition, take a holistic view of full-stack development to create usable, high-performing applications with Rails 5.1.

Rails is a great tool for building web applications, but it’s not the best at everything. Embrace the features built into your database. Learn how to use front-end frameworks. Seize the power of the application stack through Angular 4, Bootstrap, and PostgreSQL. When used together, these powerful and easy-to-use tools will open you to a new world of possibilities. This second edition is updated to cover Angular 4—a completely reworked front-end framework—and dives into new Postgres 9.6 features such as UPSERT. Also new is Webpack coverage, to develop the front-end code for your Rails application.

Create a usable and attractive login form using Bootstrap’s styles, while ensuring the database table backing it is secure using Postgres' check constraints. See how creating an advanced Postgres index for a case-insensitive search speeds up your back end—enabling you to create a dynamic user experience using Angular 4. Create reusable components that bring Bootstrap and Angular together and effectively use materialized views for caching within Postgres. Get your front end working with Webpack, use Postgres’ features from migrations, and write unit tests for all of it. All of this within Rails 5.1.

You’ll gain the confidence to work at every level of the application stack, bringing the right solution to every problem.

• Errata, typos, suggestions

• Source Code (zip file)

Releases:

• P1.0 2017/06/21
• B7.0 2017/06/09
• B6.0 2017/04/07
• B5.0 2017/01/18

Introduction

The Application Stack

How to Read This Book

What You Need to Know

Online Forum and Errata

• Set Up the Environment
  • Installing Ruby, Rails, and Postgres
  • Creating the Rails Application
  • Setting Up Bootstrap with Yarn and Webpack
  • Next: Authentication with Devise, Styled by Bootstrap
• Create a Great-Looking Login with Bootstrap and Devise excerpt
  • Adding Authentication with Devise
  • Styling the Login and Registration Forms
  • Validating Registration
  • Next: Using Postgres to Make Our Login More Secure
• Secure the User Database with Postgres Constraints
  • Exposing the Vulnerability Devise and Rails Leave Open
  • Preventing Bad Data Using Check Constraints
  • Why Use Rails Validations?
  • Next: Using Postgres Indexes to Speed Up a Fuzzy Search
• Perform Fast Queries with Advanced Postgres Indexes
  • Implementing a Basic Fuzzy Search with Rails
  • Understanding Query Performance with the Query Plan excerpt
  • Indexing Derived and Partial Values
  • Next: Better-Looking Results with Bootstrap’s List Group
• Create Clean Search Results with Bootstrap Components
  • Creating Google-Style Search Results Without Tables
  • Paginating the Results Using Bootstrap’s Components
  • Next: Angular!
• Build a Dynamic UI with Angular
  • Configuring Rails and Angular
  • Porting Our Search to Angular
  • Changing Our Search to Use Typeahead excerpt
  • Next: Testing
• 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
• Create a Single-Page App Using Angular’s Router
  • Storing View Templates in HTML Files
  • Configuring Angular’s Router for User Navigation
  • Navigating the User Interface Client-side
  • Implementing Back-End Integration Using TDD
  • Next: Design Using Grids
• Design Great UIs with Bootstrap’s Grid and Components
  • The Grid: The Cornerstone of a Web Design excerpt
  • Using Bootstrap’s Grid
  • Adding Polish with Bootstrap Components
  • Next: Populating the View Easily and Efficiently
• 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
• Asynchronously Load Data from Many Sources
  • Understanding Asynchronous Requests and Observables
  • Separating the App into Components
  • Sharing Data Between Components
  • Pulling Data from a Second Source
  • Using Bootstrap’s Progress Bar When Data Is Loading
  • Next: Sending Changes Back to the Server
• Wrangle Forms and Validations with Angular
  • Marrying Angular’s and Bootstrap’s Form Validations
  • Reusing Markup with a Generic Text Field Component
  • Customizing the Component’s Behavior and Appearance
  • Listening for User Change Events
  • Saving Changes to the Server
  • Next: Everything Else
• Dig Deeper
  • Unlocking More of Postgres’s Power
  • Leveling Up with Angular
  • Getting Everything Out of Bootstrap
  • The End
• Full Listing of Customer Detail Page HTML
• Creating Customer Address Seed Data
• Customer Details Extracted Components