book

Mastering JavaScript Single Page Application Development

Name: Mastering JavaScript Single Page Application Development
ISBN: 9781785881640

by Philip Klauzinski, John Moore

October 2016

Intermediate to advanced

452 pages

9h 5m

English

Packt Publishing

Read now

Unlock full access

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 codeErrataPiracyQuestions
1. Getting Organized with NPM, Bower, and Grunt
What is Node Package Manager?Installing Node.js and NPMConfiguring your package.json fileNPM dependenciesUpdating your development dependencies
Bower
Installing BowerConfiguring your bower.json fileBower components location and the .bowerrc fileBower dependenciesSearching the Bower registry
Grunt
Installing the Grunt CLIInstalling the Grunt task runnerInstalling Grunt pluginsConfiguring GruntUnderstanding Node.js modulesCreating a GruntfileDefining Grunt task configurationLoading Grunt pluginsRunning the jshint Grunt taskRunning the watch Grunt taskDefining the default Grunt taskDefining custom tasks
Summary
2. Model-View-Whatever
The original MVC patternThe ModelThe ViewThe Controller
MVP and MVVM
MVPMVVMSummarizing the differences between MVC, MVP, and MVVM
VIPER and other variations of MVW
VIPEROther variations of MVW
AngularJS and MVW
A brief history of AngularJSAngularJS componentsTemplateDirectivesModelScopeExpressionsCompilerFilterViewData bindingControllerDependency injectionInjectorModuleService
Using the MVW pattern in an SPA
Building a simple JavaScript SPACreating the ModelCreating the ViewSetting up frontend assetsCompiling web templatesPrecompiling web templatesHandling server HTTP requestsCreating the SPA layoutServing the SPAOverview of a simple JavaScript SPA
Summary
3. SPA Essentials – Creating the Ideal Application Environment
The JSON data formatOther data formatsXMLYAMLBSONWhy does JSON reign supreme?
The differences between SQL and NoSQL databases
NoSQL data typingRelational data typingACID transactionsAtomicityConsistencyIsolationDurabilityMongoDB and ACIDWrite-ahead logging with MongoDB
When to use SQL versus NoSQL databases
ScalabilityHorizontal scalingBig DataOperational Big DataAnalytical Big DataOverall considerations
Methods of presenting an SPA container
How to define your SPA containerPartial page containerFull page containerHow to load your SPA containerLoading on user interactionLogin page transitionLoading based on the DOMContentLoaded eventLoading based on the document readystatechange eventLoading directly from the document.bodyUsing the script tag async attributeUsing the script tag defer attribute
Managing layouts
Static layoutsDynamic layoutsInstalling ExpressSetting up a basic server with ExpressBasic routing with ExpressRunning a server with ExpressLoading static assets with ExpressDynamic routing with Express
Summary
4. REST is Best – Interacting with the Server Side of Your App
Understanding the fundamentals of RESTUnderstanding an architectural style versus a protocolArchitectural styleProtocolTransport layer protocolsApplication layer protocolsUsing HTTP as a transfer protocol for RESTThe constraints of RESTClient-serverStatelessCacheUniform interfaceIdentification of resourcesManipulation of resources through representationsSelf-descriptive messagesHypermedia as the engine of application stateLayered systemCode-on-demand
Benefits of REST
PerformanceSimplicitySeparation of concernsScalabilityPortabilityVisibilityReliability
RESTful web services
Setting up a simple database with MongoDBInstalling MongoDBInstalling MongoDB on Mac using HomebrewCreating a MongoDB data directoryRunning MongoDBCreating a collection with MongoDBInstalling the Node.js MongoDB driver
Writing basic REST API endpoints
CRUD with RESTHandling request data with Node.js and ExpressCreating with a POST requestTesting the POST request on the frontendReading with a GET requestTesting the GET request on the frontendUpdating with a PUT requestTesting the PUT request on the frontendDeleting with a DELETE requestTesting the DELETE request on the frontend
Alternatives to REST
TCP versus UDPSOAPWebSocketsMQTTAMQPCoAPDDP
Summary
5. Its All About the View
JavaScript templating engines
Underscore.js
Mustache.js
SectionsBoolean valuesListsLambdasInverted sectionsCommentsPartialsSet alternative delimiters
Handlebars.js
Explicit path lookup versus recursive path lookupHelpersHelpers as block expressions#if block helper#unless block helper#each block helper#with block helper
Other differences in Handlebars from Mustache templates
Precompiling templatesNo alternative delimiters
Pure.js
Markup
Pug
Embedded JavaScript (EJS)
Synchronous template loadingAsynchronous data loadingCachingView helpersThe link_to view helperThe img_tag view helperThe form_tag view helperPartials
Optimizing your application layout
UglifyJS and grunt-contrib-uglifygrunt-contrib-handlebarsOptions configurationFiles configurationRunning the Grunt Handlebars taskWatching for changesPutting it all together
Summary
6. Data Binding, and Why You Should Embrace It
What is data binding?One-way data bindingTwo-way data binding
Data binding with modern JavaScript frameworks
Data binding with AngularJSOne-way data binding with AngularJSTwo-way data binding with AngularJSDirty checking with AngularJSDirty checking by referenceDirty checking by collection contentsDirty checking by valueWhen to use dirty checking for data bindingData binding with Ember.jsComputed propertiesOne-way data binding with Ember.jsTwo-way data binding with Ember.jsData binding with Rivets.jsOne-way data binding with Rivets.jsDefining your own one-way binderTwo-way data binding with Rivets.jsDefining your own two-way binder
Implementing data binding with native JavaScript
Object getters and settersThe object initializerThe Object.defineProperty() methodDesigning a getter and setter data binding patternSynchronizing data in the ViewAbstracting the design pattern to a reusable methodAccounting for DOM mutationsMutationObserverExtending dataBind with MutationObserver
Why use data binding?
Use cases for one-way data bindingUse cases for two-way data binding
Summary
7. Leveraging the MEAN Stack
The Node.js environmentRunning the REPLWriting a hello Node.js scriptSetting up a Node.js project with NPM
Getting started with Express
Installing ExpressStandard methodExpress generatorSetting up your Express applicationExploring the main scriptLooking at the main applicationLoading dependenciesConfiguring the applicationApplication-level middlewareOur first Express routeRendering the first view
Exploring MongoDB
Setting up MongoDBWorking with the MongoDB shellSelecting a databaseInserting documentsFinding documentsUpdating documentsRemoving documentsCreate your SPA database
Starting with AngularJS
Installing AngularJS into the applicationBuilding the first AngularJS moduleAdding a controllerDisplaying data with Angular expressionsTwo-way data binding
Summary
8. Managing Data Using MongoDB
Exploring the NoSQL database modelDefining NoSQLNoSQLNon-relationalDistributedFeatures of MongoDBDocument modelSchemalessOpen sourceWhy use MongoDB?Well supportedData modelPopularity
Commanding MongoDB
Getting informationInserting and updating dataRunning scripts in the MongoDB shellRunning bulk operationsFinding, modifying, and removing dataSpecific resultsQuery operatorsProjectionsQuery modifiersModifying dataRemoving dataThe cursor
Incorporating MongoDB into the SPA
Adding the NPM modulesAdding MongoDB into the main applicationWriting a queryDisplaying data in a page
MongoDB database performance
IndexingOptimizing queriesUsing limitUsing projectionsUsing hint()Analyzing performance
Summary
9. Handling Web Requests with Express
Examining Express in detailApp objectapp.localsapp.set()app.enable()app.disable()app.listen()app.METHOD()app.all()Request objectreq.paramsreq.bodyreq.queryreq.cookiesreq.xhrreq.accepts()req.get()Response objectres.appres.cookie()res.download()res.json()res.jsonp()res.redirect()res.render()res.send()Router objectrouter.METHOD()router.all()router.param()Writing our own middleware
Developing a RESTful API
Installing resourceful routingBuilding out giftlist controllerResponding with different data formats
Summary
10. Displaying Views
Setting up our dashboardBuilding the viewConnecting to initial dataImplementing Bootstrap
Implementing AngularJS
Our AngularJS moduleControlling state with UI-routerAngularJS controllers
Talking to the backend
Creating an AngularJS factoryUsing AngularJS $resource
Summary
11. Adding Security and Authentication
Adding authentication with PassportInstalling PassportUsing Mongoose to configure the databaseInstalling and configuring MongooseCreating the user modelSetting up Passport strategiesInitializing PassportCreating the signup strategyCreating the login strategyCreating routes for authenticationCreating views for authentication
Authenticating requests
Adding authentication-check middlewareInserting middleware into routesChanging the dashboard route
Securing Express
HelmetCSRFTaking additional security measuresImplementing HTTPSAvoiding running as rootValidating user input
Summary
12. Connecting the App to Social Media
Connecting to FacebookSetting up your Facebook developer account and appSetting up the Passport strategyConfiguring for FacebookSetting up the routes for Facebook authenticationFinishing setting up the Passport strategyAltering the User model for Facebook dataFinishing the connection to FacebookRecreating our home page
Connecting to Twitter
Adding a Twitter appSetting up our Twitter strategyAdding Twitter authorization to our home page
Sharing giftlists
Fleshing out the giftlist modelConnecting the UIConnecting the formCreating the controllerAngularizing the formConnecting to the backend controllerAdding the ability to share lists on social media
Summary
13. Testing with Mocha, Karma, and More
Types of testingUnit testingMochaAssertions with ChaiRunning Mocha tests in the browserSinon.jsSpiesStubsMocksJasmineKarma test runnerTesting with Karma, Mocha, and ChaiTesting AngularJS with Karma and JasmineIntegration testingEnd-to-end testingThe angular-seed projectEnd-to-end testing with AngularJS and angular-seed
Summary
14. Deploying and Scaling the SPA
Packaging for deploymentSetting up Grunt for deploymentInstalling GruntInstalling Grunt pluginsConfiguring the GruntfileRunning GruntSetting up our config for productionCreate a .gitignore fileCreate an environment-based configuration moduleUsing the new config file
Setting up a cloud database
Creating a MongoLab accountCreating a databaseSetting up a user to access the database
Deploying the application to Heroku
Getting ready to use HerokuSetting up GitSigning up for a Heroku accountInstalling the HerokuToolbeltSetting up the Heroku projectDeploying to HerokuDefining a ProcfileApp environment variablesDeploying
Scaling the SPA
Scaling the databaseScaling the server
Summary

Overview

Dive into the world of JavaScript Single Page Application (SPA) development with this comprehensive guide. Master the MEAN stack and learn to design, implement, and deploy SPAs using MongoDB, Express.js, AngularJS, and Node.js. This book offers a practical, step-by-step approach to building robust, testable, and scalable web applications.

What this Book will help me do

Understand the core concepts of JavaScript SPA architecture and design patterns.
Learn to use the MEAN stack for full-stack JavaScript development.
Develop secure and scalable SPAs with built-in integration for social media platforms.
Master JavaScript testing tools such as Mocha, Karma, and Jasmine.
Gain the ability to deploy JavaScript applications to production platforms like Heroku.

Author(s)

This book is co-authored by None Klauzinski and None Moore, experienced software developers with a passion for simplifying complex technical concepts. Combining their deep expertise in JavaScript and enthusiasm for teaching, they ensure readers have a clear and structured guide to SPA development. Their practical approach empowers readers to confidently create scalable and maintainable SPAs.

Who is it for?

If you're a JavaScript developer looking to expand your skill set and build professional-quality single-page applications, this book is for you. It caters to developers at various levels, whether you're transitioning to full-stack development or refining your SPA expertise. With some basic understanding of the JavaScript ecosystem, you'll find the structured guidance you need to build and deploy SPAs confidently.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781785881640

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills