small medium large xlarge

Rails, Angular, Postgres, and Bootstrap: Powerful, Effective, and Efficient Full-Stack Web Development

by

Cover image for Rails, Angular, Postgres, and Bootstrap

Rails, Angular, Postgres, and Bootstrap

by

As a Rails developer, you care about user experience and performance, but you also want simple and maintainable code. Achieve all that by embracing the full stack of web development, from styling with Bootstrap, building an interactive user interface with AngularJS, to storing data quickly and reliably in PostgreSQL. Take a holistic view of full-stack development to create usable, high-performing applications, and learn to use these technologies effectively in a Ruby on Rails environment.

The new edition is now available. Rails, Angular, Postgres, and Bootstrap, Second Edition.

About this Title

Skill-meter-5-8
Pages: 306
Published: 2016-01-21
Release: P1.0 (2016-01-19)
ISBN: 978-1-68050-126-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 AngularJS, Bootstrap, and PostgreSQL. When used together, these powerful and easy-to-use tools will open you to a new world of possibilities. In each chapter of this book, you’ll learn how these technologies can work together inside a Rails app to deliver well-performing applications that offer great user experiences.

Create a usable and attractive login form using Bootstrap’s styles, while ensuring the database table backing it is secure, using Postgres’ check constraints. You’ll see how creating an advanced Postgres index for a case-insensitive search can speed up your back-end—allowing you to create a highly dynamic user experience using AngularJS. You’ll create complex interfaces using Bootstrap’s grid, together with Angular’s form support, backed by a materialized view for caching within Postgres. You’ll get your front-end working with the Asset Pipeline, use Postgres’ features from migrations, and write unit tests for all of it. All of this within Rails.

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

Full-Stack Web Development Tips

by Dave Copeland

Embrace Your Database Most SQL databases are packed with handy features, but Postgres has more than most.  Accurately model your domain  with sophisticated data types like JSON and Arrays, speed up your queries with complex indexes and materialized views, and keep your data consistent with powerful check constraints.

Use a CSS Framework Hand-written CSS can be complex and unmanageable fast.  A CSS framework can allow you to style your UI more quickly and efficiently by using pre-build classes.  An all-inclusive framework like Bootstrap goes even farther by giving you the ability to create detailed components that look and feel great—quickly, easily, and with no CSS.

Invest in a JavaScript Framework When your user interface calls for more dynamic, interactive elements, you don’t want to start from scratch.  Even with JQuery, your front-end code can be messy and untestable.  Using a framework like Angular, you can confidently test your code, while easily providing complex features and interactions without making a mess.

Solve the Problem in the Right Place With the ability to be effective at all levels of the stack, you can see the entire problem at once, and solve it where it needs it.  It could be adding an index to your query takes your view from sluggish to snappy.  Or, you may need to use AJAX to grab results one at a time.  When you’re comfortable up and down the stack, you’ll solve it the right way.


Ten Features of Your Stack You’re Not Using

by Dave Copeland

  • Grid-based design with Bootstrap. When you think of a UI as a grid, creating it becomes a lot simpler.
  • Promises instead of Callbacks in Angular.  Write your front-end code imperatively and clearly, without callback soup.
  • MVC on the client using Angular.  Sometimes UI code is complex, and you want it distinct from your templates.  Keep your front-end code organized.
  • Test your front-end code with Teaspoon. By separating your front-end logic from your views, you can unit test it, and be confident it will work.
  • Materialized Views in Postgres. Automatically cache de-normalized data right in your database.  Get further without standing up new caching infrastructure.
  • Indexes on derived values in Postgres. Create a database index on normalized or modified values.  Make your indexes match your queries without any hacks.
  • Store, query, and index JSON with Postgres.  Don’t sacrifice performance if you have to deal with loosely defined data.
  • Native arrays in Postgres.  Sometimes you just need a list of strings without making a lot of new tables.
  • Headless integration tests with PhantomJS.  Run full-blown integration tests quickly from the command line, without launching an actual browser.
  • Bring it all together with Rails. Despite being an opinionated framework, Rails has all the hooks you need to enhance your stack.

Read the reviews .

What You Need

You’ll need Postgres 9.4, Rails 4.2, and Ruby 2.2. You’ll learn how to install Postgres on your computer or use a free version of it in the cloud. 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.

Contents & Extracts

  • Acknowledgments
  • Introduction
    • The Application Stack
    • Postgres, Angular, and Bootstrap—At the Same Time
    • How to Read This Book
    • What You Need to Know
    • Getting Set Up
  • 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
  • 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
  • Create Clean Search Results with Bootstrap Components
  • Build a Dynamic UI with AngularJS
    • Configuring Rails and Angular
    • Porting Our Search to Angular
    • Changing Our Search to Use Typeahead
    • 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
    • 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
  • 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
  • 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 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
  • 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
    • Understanding the Role of Rails Validators
    • Next: Everything Else
  • Dig Deeper
    • Unlocking More of Postgres’s Power
    • Leveling Up with Angular
    • Getting Everything Out of Bootstrap
  • Full Listing of Customer Detail Page HTML
  • Creating Customer Address Seed Data

Author

David Bryant Copeland is a programmer and author. He wrote The Senior Software Engineer and Build Awesome Command-Line Applications in Ruby 2, and has been a professional programmer since 1995. He’s worked at LivingSocial and Opower, and is the director of engineering at fashion start-up Stitch Fix.