O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Rails, Angular, Postgres, and Bootstrap, 2nd Edition

Rails, Angular, Postgres, and Bootstrap, 2nd Edition

by David B. Copeland
Publisher: Pragmatic Bookshelf
Release Date: June 2017
ISBN: 9781680502657
View table of contents
Start reading

Book Description

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



What You Need:

This book covers Postgres 9.5, Rails 5, and Ruby 2.3. You should have some experience with basic Rails concepts and a cursory understanding of JavaScript, CSS, and SQL, but by no means need to be an expert. You'll learn how to install Postgres on your computer or use a free version of it in the cloud.

Table of Contents

  1.  Acknowledgments
  2.  Introduction
    1. The Application Stack
    2. How to Read This Book
    3. What You Need to Know
    4. Online Forum and Errata
  3. 1. Set Up the Environment
    1. Installing Ruby, Rails, and Postgres
    2. Creating the Rails Application
    3. Setting Up Bootstrap with Yarn and Webpack
    4. Next: Authentication with Devise, Styled by Bootstrap
  4. 2. Create a Great-Looking Login with Bootstrap and Devise
    1. Adding Authentication with Devise
    2. Styling the Login and Registration Forms
    3. Validating Registration
    4. Next: Using Postgres to Make Our Login More Secure
  5. 3. Secure the User Database with Postgres Constraints
    1. Exposing the Vulnerability Devise and Rails Leave Open
    2. Preventing Bad Data Using Check Constraints
    3. Why Use Rails Validations?
    4. Next: Using Postgres Indexes to Speed Up a Fuzzy Search
  6. 4. Perform Fast Queries with Advanced Postgres Indexes
    1. Implementing a Basic Fuzzy Search with Rails
    2. Understanding Query Performance with the Query Plan
    3. Indexing Derived and Partial Values
    4. Next: Better-Looking Results with Bootstrap’s List Group
  7. 5. Create Clean Search Results with Bootstrap Components
    1. Creating Google-Style Search Results Without Tables
    2. Paginating the Results Using Bootstrap’s Components
    3. Next: Angular!
  8. 6. Build a Dynamic UI with Angular
    1. Configuring Rails and Angular
    2. Porting Our Search to Angular
    3. Changing Our Search to Use Typeahead
    4. Next: Testing
  9. 7. Test This Fancy New Code
    1. Installing RSpec for Testing
    2. Testing Database Constraints
    3. Running Headless Acceptance Tests in PhantomJS
    4. Writing Unit Tests for Angular Components
    5. Next: Level Up on Everything
  10. 8. Create a Single-Page App Using Angular’s RouterCreate a Single-Page App Using Angular’s Router
    1. Storing View Templates in HTML Files
    2. Configuring Angular’s Router for User Navigation
    3. Navigating the User Interface Client-Side
    4. Implementing Back-End Integration Using TDD
    5. Next: Design Using Grids
  11. 9. Design Great UIs with Bootstrap’s Grid and ComponentsDesign Great UIs with Bootstrap’s Grid and Components
    1. The Grid: The Cornerstone of a Web Design
    2. Using Bootstrap’s Grid
    3. Adding Polish with Bootstrap Components
    4. Next: Populating the View Easily and Efficiently
  12. 10. Cache Complex Queries Using Materialized Views
    1. Understanding the Performance Impact of Complex Data
    2. Using Materialized Views for Better Performance
    3. Keeping Materialized Views Updated
    4. Next: Combining Data with a Second Source in Angular
  13. 11. Asynchronously Load Data from Many Sources
    1. Understanding Asynchronous Requests and Observables
    2. Separating the App into Components
    3. Sharing Data Between Components
    4. Pulling Data from a Second Source
    5. Using Bootstrap’s Progress Bar When Data Is Loading
    6. Next: Sending Changes Back to the Server
  14. 12. Wrangle Forms and Validations with Angular
    1. Marrying Angular’s and Bootstrap’s Form Validations
    2. Reusing Markup with a Generic Text Field Component
    3. Customizing the Component’s Behavior and Appearance
    4. Listening for User Change Events
    5. Saving Changes to the Server
    6. Next: Everything Else
  15. 13. Dig Deeper
    1. Unlocking More of Postgres’s Power
    2. Leveling Up with Angular
    3. Getting Everything Out of Bootstrap
    4. The End
  16. A1. Full Listing of Customer Detail Page HTML
  17. A2. Creating Customer Address Seed Data
  18. A3. Customer Details Extracted Components
  19.  Bibliography