Home Page Icon
Home Page
Table of Contents for
Table of Contents
Close
Table of Contents
by John Moore, Philip Klauzinski
Mastering JavaScript Single Page Application Development
Mastering JavaScript Single Page Application Development
Mastering JavaScript Single Page Application Development
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Why subscribe?
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Cover
Next
Next Chapter
Mastering JavaScript Single Page Application Development
Table of Contents
Mastering JavaScript Single Page Application Development
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Why subscribe?
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset
