Cover

Copyright

Credits

About the Authors

About the Reviewer

www.PacktPub.com

Table of Contents

Preface

Chapter 1: Getting Organized with NPM, Bower, and Grunt

What is Node Package Manager?

Installing Node.js and NPM

Configuring your package.json file

NPM dependencies

Updating your development dependencies

Bower

Installing Bower

Configuring your bower.json file

Bower components location and the .bowerrc file

Bower dependencies

Searching the Bower registry

Grunt

Installing the Grunt CLI

Installing the Grunt task runner

Installing Grunt plugins

Configuring Grunt

Understanding Node.js modules

Creating a Gruntfile

Defining Grunt task configuration

Loading Grunt plugins

Running the jshint Grunt task

Running the watch Grunt task

Defining the default Grunt task

Defining custom tasks

Summary

Chapter 2: Model-View-Whatever

The original MVC pattern

The Model

The View

The Controller

MVP and MVVM

MVP

MVVM

Summarizing the differences between MVC, MVP, and MVVM

VIPER and other variations of MVW

VIPER

Other variations of MVW

AngularJS and MVW

A brief history of AngularJS

AngularJS components

Template

Directives

Model

Scope

Expressions

Compiler

Filter

View

Data binding

Controller

Dependency injection

Injector

Module

Service

Using the MVW pattern in an SPA

Building a simple JavaScript SPA

Creating the Model

Creating the View

Setting up frontend assets

Compiling web templates

Precompiling web templates

Handling server HTTP requests

Creating the SPA layout

Serving the SPA

Overview of a simple JavaScript SPA

Summary

Chapter 3: SPA Essentials – Creating the Ideal Application Environment

The JSON data format

Other data formats

XML

YAML

BSON

Why does JSON reign supreme?

The differences between SQL and NoSQL databases

NoSQL data typing

Relational data typing

ACID transactions

Atomicity

Consistency

Isolation

Durability

MongoDB and ACID

Write-ahead logging with MongoDB

When to use SQL versus NoSQL databases

Scalability

Horizontal scaling

Big Data

Operational Big Data

Analytical Big Data

Overall considerations

Methods of presenting an SPA container

How to define your SPA container

Partial page container

Full page container

How to load your SPA container

Loading on user interaction

Login page transition

Loading based on the DOMContentLoaded event

Loading based on the document readystatechange event

Loading directly from the document.body

Using the script tag async attribute

Using the script tag defer attribute

Managing layouts

Static layouts

Dynamic layouts

Installing Express

Setting up a basic server with Express

Basic routing with Express

Running a server with Express

Loading static assets with Express

Dynamic routing with Express

Summary

Chapter 4: REST is Best – Interacting with the Server Side of Your App

Understanding the fundamentals of REST

Understanding an architectural style versus a protocol

Architectural style

Protocol

Transport layer protocols

Application layer protocols

Using HTTP as a transfer protocol for REST

The constraints of REST

Client-server

Stateless

Cache

Uniform interface

Identification of resources

Manipulation of resources through representations

Self-descriptive messages

Hypermedia as the engine of application state

Layered system

Code-on-demand

Benefits of REST

Performance

Simplicity

Separation of concerns

Scalability

Portability

Visibility

Reliability

RESTful web services

Setting up a simple database with MongoDB

Installing MongoDB

Installing MongoDB on Mac using Homebrew

Creating a MongoDB data directory

Running MongoDB

Creating a collection with MongoDB

Installing the Node.js MongoDB driver

Writing basic REST API endpoints

CRUD with REST

Handling request data with Node.js and Express

Creating with a POST request

Testing the POST request on the frontend

Reading with a GET request

Testing the GET request on the frontend

Updating with a PUT request

Testing the PUT request on the frontend

Deleting with a DELETE request

Testing the DELETE request on the frontend

Alternatives to REST

TCP versus UDP

SOAP

WebSockets

MQTT

AMQP

CoAP

DDP

Summary

Chapter 5: Its All About the View

JavaScript templating engines

Underscore.js

Mustache.js

Sections

Boolean values

Lists

Lambdas

Inverted sections

Comments

Partials

Set alternative delimiters

Handlebars.js

Explicit path lookup versus recursive path lookup

Helpers

Helpers as block expressions

#if block helper

#unless block helper

#each block helper

#with block helper

Other differences in Handlebars from Mustache templates

Precompiling templates

No alternative delimiters

Pure.js

Markup

Pug

Embedded JavaScript (EJS)

Synchronous template loading

Asynchronous data loading

Caching

View helpers

The link_to view helper

The img_tag view helper

The form_tag view helper

Partials

Optimizing your application layout

UglifyJS and grunt-contrib-uglify

grunt-contrib-handlebars

Options configuration

Files configuration

Running the Grunt Handlebars task

Watching for changes

Putting it all together

Summary

Chapter 6: Data Binding, and Why You Should Embrace It

What is data binding?

One-way data binding

Two-way data binding

Data binding with modern JavaScript frameworks

Data binding with AngularJS

One-way data binding with AngularJS

Two-way data binding with AngularJS

Dirty checking with AngularJS

Dirty checking by reference

Dirty checking by collection contents

Dirty checking by value

When to use dirty checking for data binding

Data binding with Ember.js

Computed properties

One-way data binding with Ember.js

Two-way data binding with Ember.js

Data binding with Rivets.js

One-way data binding with Rivets.js

Defining your own one-way binder

Two-way data binding with Rivets.js

Defining your own two-way binder

Implementing data binding with native JavaScript

Object getters and setters

The object initializer

The Object.defineProperty() method

Designing a getter and setter data binding pattern

Synchronizing data in the View

Abstracting the design pattern to a reusable method

Accounting for DOM mutations

MutationObserver

Extending dataBind with MutationObserver

Why use data binding?

Use cases for one-way data binding

Use cases for two-way data binding

Summary

Chapter 7: Leveraging the MEAN Stack

The Node.js environment

Running the REPL

Writing a hello Node.js script

Setting up a Node.js project with NPM

Getting started with Express

Installing Express

Standard method

Express generator

Setting up your Express application

Exploring the main script

Looking at the main application

Loading dependencies

Configuring the application

Application-level middleware

Our first Express route

Rendering the first view

Exploring MongoDB

Setting up MongoDB

Working with the MongoDB shell

Selecting a database

Inserting documents

Finding documents

Updating documents

Removing documents

Create your SPA database

Starting with AngularJS

Installing AngularJS into the application

Building the first AngularJS module

Adding a controller

Displaying data with Angular expressions

Two-way data binding

Summary

Chapter 8: Managing Data Using MongoDB

Exploring the NoSQL database model

Defining NoSQL

NoSQL

Non-relational

Distributed

Features of MongoDB

Document model

Schemaless

Open source

Why use MongoDB?

Well supported

Data model

Popularity

Commanding MongoDB

Getting information

Inserting and updating data

Running scripts in the MongoDB shell

Running bulk operations

Finding, modifying, and removing data

Specific results

Query operators

Projections

Query modifiers

Modifying data

Removing data

The cursor

Incorporating MongoDB into the SPA

Adding the NPM modules

Adding MongoDB into the main application

Writing a query

Displaying data in a page

MongoDB database performance

Indexing

Optimizing queries

Using limit

Using projections

Using hint()

Analyzing performance

Summary

Chapter 9: Handling Web Requests with Express

Examining Express in detail

App object

app.locals

app.set()

app.enable()

app.disable()

app.listen()

app.METHOD()

app.all()

Request object

req.params

req.body

req.query

req.cookies

req.xhr

req.accepts()

req.get()

Response object

res.app

res.cookie()

res.download()

res.json()

res.jsonp()

res.redirect()

res.render()

res.send()

Router object

router.METHOD()

router.all()

router.param()

Writing our own middleware

Developing a RESTful API

Installing resourceful routing

Building out giftlist controller

Responding with different data formats

Summary

Chapter 10: Displaying Views

Setting up our dashboard

Building the view

Connecting to initial data

Implementing Bootstrap

Implementing AngularJS

Our AngularJS module

Controlling state with UI-router

AngularJS controllers

Talking to the backend

Creating an AngularJS factory

Using AngularJS $resource

Summary

Chapter 11: Adding Security and Authentication

Adding authentication with Passport

Installing Passport

Using Mongoose to configure the database

Installing and configuring Mongoose

Creating the user model

Setting up Passport strategies

Initializing Passport

Creating the signup strategy

Creating the login strategy

Creating routes for authentication

Creating views for authentication

Authenticating requests

Adding authentication-check middleware

Inserting middleware into routes

Changing the dashboard route

Securing Express

Helmet

CSRF

Taking additional security measures

Implementing HTTPS

Avoiding running as root

Validating user input

Summary

Chapter 12: Connecting the App to Social Media

Connecting to Facebook

Setting up your Facebook developer account and app

Setting up the Passport strategy

Configuring for Facebook

Setting up the routes for Facebook authentication

Finishing setting up the Passport strategy

Altering the User model for Facebook data

Finishing the connection to Facebook

Recreating our home page

Connecting to Twitter

Adding a Twitter app

Setting up our Twitter strategy

Adding Twitter authorization to our home page

Sharing giftlists

Fleshing out the giftlist model

Connecting the UI

Connecting the form

Creating the controller

Angularizing the form

Connecting to the backend controller

Adding the ability to share lists on social media

Summary

Chapter 13: Testing with Mocha, Karma, and More

Types of testing

Unit testing

Mocha

Assertions with Chai

Running Mocha tests in the browser

Sinon.js

Spies

Stubs

Mocks

Jasmine

Karma test runner

Testing with Karma, Mocha, and Chai

Testing AngularJS with Karma and Jasmine

Integration testing

End-to-end testing

The angular-seed project

End-to-end testing with AngularJS and angular-seed

Summary

Chapter 14: Deploying and Scaling the SPA

Packaging for deployment

Setting up Grunt for deployment

Installing Grunt

Installing Grunt plugins

Configuring the Gruntfile

Running Grunt

Setting up our config for production

Create a .gitignore file

Create an environment-based configuration module

Using the new config file

Setting up a cloud database

Creating a MongoLab account

Creating a database

Setting up a user to access the database

Deploying the application to Heroku

Getting ready to use Heroku

Setting up Git

Signing up for a Heroku account

Installing the HerokuToolbelt

Setting up the Heroku project

Deploying to Heroku

Defining a Procfile

App environment variables

Deploying

Scaling the SPA

Scaling the database

Scaling the server

Summary

Index