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

Mastering JavaScript Single Page Application Development

Book Description

An in-depth guide to exploring the design, architecture, and techniques behind building sophisticated, scalable, and maintainable single-page applications in JavaScript

About This Book

  • Build large-scale, feature-complete SPAs by leveraging widely used tools and techniques.
  • Gain a solid understanding of architecture and SPA design to build applications using the library or framework of your choice.
  • Explore the various facets of SPA development to build web apps that are fast, scalable, and easy to test.

Who This Book Is For

This book is ideal for JavaScript developers who want to build complex single-page applications in JavaScript. Some basic understanding of SPA concepts will be helpful but not essential.

What You Will Learn

  • Organize your development environment using the command line with NPM, Bower, and Grunt.
  • Choose an accurate design pattern for your app
  • Understand modular JavaScript programming and Node.js
  • Interact with a REST API using JavaScript and AJAX with practical examples
  • Build a single page application using the MEAN stack
  • Connect your app across popular social media platforms such as Facebook, Twitter, and LinkedIn
  • Test your app, both on the server side and in views
  • Prepare your app for the real world and deploy it to Heroku

In Detail

Single-page web applications—or SPAs, as they are commonly referred to—are quickly becoming the de facto standard for web app development. The fact that a major part of the app runs inside a single web page makes it very interesting and appealing. Also, the accelerated growth of browser capabilities is pushing us closer to the day when all apps will run entirely in the browser.

This book will take your JavaScript development skills to the next level by teaching you to create a single-page application within a full-stack JavaScript environment. Using only JavaScript, you can go from being a front-end developer to a full-stack application developer with relative ease.

You will learn to cross the boundary from front-end development to server-side development through the use of JavaScript on both ends. Use your existing knowledge of JavaScript by learning to manage a JSON document data store with MongoDB, writing a JavaScript powered REST API with Node.js and Express, and designing a front-end powered by AngularJS.

This book will teach you to leverage the MEAN stack to do everything from document database design, routing REST web API requests, data-binding within views, and adding authentication and security to building a full-fledged, complex, single-page web application.

In addition to building a full-stack JavaScript app, you will learn to test it with JavaScript-powered testing tools such as Mocha, Karma, and Jasmine. Finally, you will learn about deployment and scaling so that you can launch your own apps into the real world.

Style and approach

Following a structured approach, this book helps readers gain expertise in SPA development. Its thorough coverage of SPA architecture and design, along with practical use cases, provides readers with a clear path to building applications with the library of their choice. For readers who are afraid to take the plunge straightaway, the book also offers step-by-step guidance on developing a complex web app.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Mastering JavaScript Single Page Application Development
    1. Mastering JavaScript Single Page Application Development
    2. Credits
    3. About the Authors
    4. About the Reviewer
    5. www.PacktPub.com
      1. Why subscribe?
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    7. 1. Getting Organized with NPM, Bower, and Grunt
      1. What is Node Package Manager?
        1. Installing Node.js and NPM
        2. Configuring your package.json file
          1. NPM dependencies
            1. Updating your development dependencies
      2. Bower
        1. Installing Bower
        2. Configuring your bower.json file
          1. Bower components location and the .bowerrc file
          2. Bower dependencies
        3. Searching the Bower registry
      3. Grunt
        1. Installing the Grunt CLI
        2. Installing the Grunt task runner
        3. Installing Grunt plugins
        4. Configuring Grunt
          1. Understanding Node.js modules
          2. Creating a Gruntfile
            1. Defining Grunt task configuration
            2. Loading Grunt plugins
            3. Running the jshint Grunt task
            4. Running the watch Grunt task
            5. Defining the default Grunt task
            6. Defining custom tasks
      4. Summary
    8. 2. Model-View-Whatever
      1. The original MVC pattern
        1. The Model
        2. The View
        3. The Controller
      2. MVP and MVVM
        1. MVP
        2. MVVM
        3. Summarizing the differences between MVC, MVP, and MVVM
      3. VIPER and other variations of MVW
        1. VIPER
        2. Other variations of MVW
      4. AngularJS and MVW
        1. A brief history of AngularJS
        2. AngularJS components
          1. Template
          2. Directives
          3. Model
          4. Scope
          5. Expressions
          6. Compiler
          7. Filter
          8. View
          9. Data binding
          10. Controller
          11. Dependency injection
          12. Injector
          13. Module
          14. Service
      5. Using the MVW pattern in an SPA
        1. Building a simple JavaScript SPA
          1. Creating the Model
          2. Creating the View
          3. Setting up frontend assets
            1. Compiling web templates
            2. Precompiling web templates
            3. Handling server HTTP requests
          4. Creating the SPA layout
          5. Serving the SPA
          6. Overview of a simple JavaScript SPA
      6. Summary
    9. 3. SPA Essentials – Creating the Ideal Application Environment
      1. The JSON data format
        1. Other data formats
          1. XML
          2. YAML
          3. BSON
        2. Why does JSON reign supreme?
      2. The differences between SQL and NoSQL databases
        1. NoSQL data typing
        2. Relational data typing
        3. ACID transactions
          1. Atomicity
          2. Consistency
          3. Isolation
          4. Durability
          5. MongoDB and ACID
            1. Write-ahead logging with MongoDB
      3. When to use SQL versus NoSQL databases
        1. Scalability
          1. Horizontal scaling
        2. Big Data
          1. Operational Big Data
          2. Analytical Big Data
        3. Overall considerations
      4. Methods of presenting an SPA container
        1. How to define your SPA container
          1. Partial page container
          2. Full page container
        2. How to load your SPA container
          1. Loading on user interaction
            1. Login page transition
          2. Loading based on the DOMContentLoaded event
          3. Loading based on the document readystatechange event
          4. Loading directly from the document.body
            1. Using the script tag async attribute
            2. Using the script tag defer attribute
      5. Managing layouts
        1. Static layouts
        2. Dynamic layouts
          1. Installing Express
          2. Setting up a basic server with Express
          3. Basic routing with Express
          4. Running a server with Express
          5. Loading static assets with Express
          6. Dynamic routing with Express
      6. Summary
    10. 4. REST is Best – Interacting with the Server Side of Your App
      1. Understanding the fundamentals of REST
        1. Understanding an architectural style versus a protocol
          1. Architectural style
          2. Protocol
            1. Transport layer protocols
            2. Application layer protocols
            3. Using HTTP as a transfer protocol for REST
        2. The constraints of REST
          1. Client-server
          2. Stateless
          3. Cache
          4. Uniform interface
            1. Identification of resources
            2. Manipulation of resources through representations
            3. Self-descriptive messages
            4. Hypermedia as the engine of application state
          5. Layered system
          6. Code-on-demand
      2. Benefits of REST
        1. Performance
        2. Simplicity
        3. Separation of concerns
        4. Scalability
        5. Portability
        6. Visibility
        7. Reliability
      3. RESTful web services
        1. Setting up a simple database with MongoDB
          1. Installing MongoDB
            1. Installing MongoDB on Mac using Homebrew
            2. Creating a MongoDB data directory
            3. Running MongoDB
          2. Creating a collection with MongoDB
          3. Installing the Node.js MongoDB driver
      4. Writing basic REST API endpoints
        1. CRUD with REST
          1. Handling request data with Node.js and Express
          2. Creating with a POST request
            1. Testing the POST request on the frontend
          3. Reading with a GET request
            1. Testing the GET request on the frontend
          4. Updating with a PUT request
            1. Testing the PUT request on the frontend
          5. Deleting with a DELETE request
            1. Testing the DELETE request on the frontend
      5. Alternatives to REST
        1. TCP versus UDP
        2. SOAP
        3. WebSockets
        4. MQTT
        5. AMQP
        6. CoAP
        7. DDP
      6. Summary
    11. 5. Its All About the View
      1. JavaScript templating engines
      2. Underscore.js
      3. Mustache.js
        1. Sections
          1. Boolean values
          2. Lists
          3. Lambdas
        2. Inverted sections
        3. Comments
        4. Partials
        5. Set alternative delimiters
      4. Handlebars.js
        1. Explicit path lookup versus recursive path lookup
        2. Helpers
          1. Helpers as block expressions
            1. #if block helper
            2. #unless block helper
            3. #each block helper
            4. #with block helper
      5. Other differences in Handlebars from Mustache templates
        1. Precompiling templates
        2. No alternative delimiters
      6. Pure.js
        1. Markup
      7. Pug
      8. Embedded JavaScript (EJS)
        1. Synchronous template loading
        2. Asynchronous data loading
        3. Caching
        4. View helpers
          1. The link_to view helper
          2. The img_tag view helper
          3. The form_tag view helper
        5. Partials
      9. Optimizing your application layout
        1. UglifyJS and grunt-contrib-uglify
        2. grunt-contrib-handlebars
          1. Options configuration
          2. Files configuration
          3. Running the Grunt Handlebars task
        3. Watching for changes
        4. Putting it all together
      10. Summary
    12. 6. Data Binding, and Why You Should Embrace It
      1. What is data binding?
        1. One-way data binding
        2. Two-way data binding
      2. Data binding with modern JavaScript frameworks
        1. Data binding with AngularJS
          1. One-way data binding with AngularJS
          2. Two-way data binding with AngularJS
          3. Dirty checking with AngularJS
            1. Dirty checking by reference
            2. Dirty checking by collection contents
            3. Dirty checking by value
            4. When to use dirty checking for data binding
        2. Data binding with Ember.js
          1. Computed properties
          2. One-way data binding with Ember.js
          3. Two-way data binding with Ember.js
        3. Data binding with Rivets.js
          1. One-way data binding with Rivets.js
            1. Defining your own one-way binder
          2. Two-way data binding with Rivets.js
            1. Defining your own two-way binder
      3. Implementing data binding with native JavaScript
        1. Object getters and setters
          1. The object initializer
          2. The Object.defineProperty() method
          3. Designing a getter and setter data binding pattern
            1. Synchronizing data in the View
            2. Abstracting the design pattern to a reusable method
        2. Accounting for DOM mutations
          1. MutationObserver
            1. Extending dataBind with MutationObserver
      4. Why use data binding?
        1. Use cases for one-way data binding
        2. Use cases for two-way data binding
      5. Summary
    13. 7. Leveraging the MEAN Stack
      1. The Node.js environment
        1. Running the REPL
        2. Writing a hello Node.js script
        3. Setting up a Node.js project with NPM
      2. Getting started with Express
        1. Installing Express
          1. Standard method
          2. Express generator
        2. Setting up your Express application
        3. Exploring the main script
        4. Looking at the main application
          1. Loading dependencies
          2. Configuring the application
          3. Application-level middleware
        5. Our first Express route
        6. Rendering the first view
      3. Exploring MongoDB
        1. Setting up MongoDB
        2. Working with the MongoDB shell
          1. Selecting a database
          2. Inserting documents
          3. Finding documents
          4. Updating documents
          5. Removing documents
        3. Create your SPA database
      4. Starting with AngularJS
        1. Installing AngularJS into the application
        2. Building the first AngularJS module
        3. Adding a controller
        4. Displaying data with Angular expressions
        5. Two-way data binding
      5. Summary
    14. 8. Managing Data Using MongoDB
      1. Exploring the NoSQL database model
        1. Defining NoSQL
          1. NoSQL
          2. Non-relational
          3. Distributed
        2. Features of MongoDB
          1. Document model
          2. Schemaless
          3. Open source
        3. Why use MongoDB?
          1. Well supported
          2. Data model
          3. Popularity
      2. Commanding MongoDB
        1. Getting information
        2. Inserting and updating data
          1. Running scripts in the MongoDB shell
          2. Running bulk operations
        3. Finding, modifying, and removing data
          1. Specific results
          2. Query operators
          3. Projections
          4. Query modifiers
          5. Modifying data
          6. Removing data
        4. The cursor
      3. Incorporating MongoDB into the SPA
        1. Adding the NPM modules
        2. Adding MongoDB into the main application
        3. Writing a query
        4. Displaying data in a page
      4. MongoDB database performance
        1. Indexing
        2. Optimizing queries
          1. Using limit
          2. Using projections
          3. Using hint()
          4. Analyzing performance
      5. Summary
    15. 9. Handling Web Requests with Express
      1. Examining Express in detail
        1. App object
          1. app.locals
          2. app.set()
          3. app.enable()
          4. app.disable()
          5. app.listen()
          6. app.METHOD()
          7. app.all()
        2. Request object
          1. req.params
          2. req.body
          3. req.query
          4. req.cookies
          5. req.xhr
          6. req.accepts()
          7. req.get()
        3. Response object
          1. res.app
          2. res.cookie()
          3. res.download()
          4. res.json()
          5. res.jsonp()
          6. res.redirect()
          7. res.render()
          8. res.send()
        4. Router object
          1. router.METHOD()
          2. router.all()
          3. router.param()
        5. Writing our own middleware
      2. Developing a RESTful API
        1. Installing resourceful routing
        2. Building out giftlist controller
          1. Responding with different data formats
      3. Summary
    16. 10. Displaying Views
      1. Setting up our dashboard
        1. Building the view
        2. Connecting to initial data
        3. Implementing Bootstrap
      2. Implementing AngularJS
        1. Our AngularJS module
        2. Controlling state with UI-router
        3. AngularJS controllers
      3. Talking to the backend
        1. Creating an AngularJS factory
        2. Using AngularJS $resource
      4. Summary
    17. 11. Adding Security and Authentication
      1. Adding authentication with Passport
        1. Installing Passport
        2. Using Mongoose to configure the database
          1. Installing and configuring Mongoose
          2. Creating the user model
        3. Setting up Passport strategies
          1. Initializing Passport
          2. Creating the signup strategy
          3. Creating the login strategy
          4. Creating routes for authentication
          5. Creating views for authentication
      2. Authenticating requests
        1. Adding authentication-check middleware
        2. Inserting middleware into routes
        3. Changing the dashboard route
      3. Securing Express
        1. Helmet
        2. CSRF
        3. Taking additional security measures
          1. Implementing HTTPS
          2. Avoiding running as root
          3. Validating user input
      4. Summary
    18. 12. Connecting the App to Social Media
      1. Connecting to Facebook
        1. Setting up your Facebook developer account and app
        2. Setting up the Passport strategy
          1. Configuring for Facebook
          2. Setting up the routes for Facebook authentication
          3. Finishing setting up the Passport strategy
        3. Altering the User model for Facebook data
        4. Finishing the connection to Facebook
          1. Recreating our home page
      2. Connecting to Twitter
        1. Adding a Twitter app
        2. Setting up our Twitter strategy
        3. Adding Twitter authorization to our home page
      3. Sharing giftlists
        1. Fleshing out the giftlist model
        2. Connecting the UI
        3. Connecting the form
          1. Creating the controller
          2. Angularizing the form
          3. Connecting to the backend controller
        4. Adding the ability to share lists on social media
      4. Summary
    19. 13. Testing with Mocha, Karma, and More
      1. Types of testing
        1. Unit testing
          1. Mocha
            1. Assertions with Chai
            2. Running Mocha tests in the browser
          2. Sinon.js
            1. Spies
            2. Stubs
            3. Mocks
          3. Jasmine
          4. Karma test runner
            1. Testing with Karma, Mocha, and Chai
            2. Testing AngularJS with Karma and Jasmine
        2. Integration testing
        3. End-to-end testing
          1. The angular-seed project
            1. End-to-end testing with AngularJS and angular-seed
      2. Summary
    20. 14. Deploying and Scaling the SPA
      1. Packaging for deployment
        1. Setting up Grunt for deployment
          1. Installing Grunt
          2. Installing Grunt plugins
          3. Configuring the Gruntfile
          4. Running Grunt
        2. Setting up our config for production
          1. Create a .gitignore file
          2. Create an environment-based configuration module
          3. Using the new config file
      2. Setting up a cloud database
        1. Creating a MongoLab account
        2. Creating a database
        3. Setting up a user to access the database
      3. Deploying the application to Heroku
        1. Getting ready to use Heroku
          1. Setting up Git
          2. Signing up for a Heroku account
          3. Installing the HerokuToolbelt
        2. Setting up the Heroku project
        3. Deploying to Heroku
          1. Defining a Procfile
          2. App environment variables
          3. Deploying
      4. Scaling the SPA
        1. Scaling the database
        2. Scaling the server
      5. Summary