https://media.pragprog.com/covers/dcbang2.jpg

Description

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.

Contents and Extracts

<b>Introduction</b>

• 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 <b>excerpt</b>

• 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 <b>excerpt</b>
• 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 <b>excerpt</b>
• 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 <b>excerpt</b>
• 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