Klauzinski Mastering JavaScript Single Page Application Development

An in-depth guide to building scalable and maintainable single-page applications in JavaScript
1. Auflage 2025
ISBN: 978-1-78588-644-7
Verlag: De Gruyter
Format: PDF
Kopierschutz: Adobe DRM (»Systemvoraussetzungen)

E-Book, Englisch, 452 Seiten

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.

Autoren/Hrsg.

Klauzinski, Philip

Fachgebiete

• Mathematik | Informatik EDV | Informatik Programmierung | Softwareentwicklung Software Engineering

Leseproben

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

JavaScript was the bane of the web development industry during the early days of the browser-rendered Internet. It now powers hugely impactful libraries such as jQuery, and JavaScript-rendered (as opposed to server-side-rendered) content is even indexed by many search engines. What was once largely considered an annoying language used primarily to generate pop-up windows and alert boxes, has now become arguably the most popular programming language in the world.

Not only is JavaScript now more prevalent than ever in frontend architecture, but it has become a server-side language as well, thanks to the runtime. We have also seen the proliferation of document-oriented databases, such as MongoDB, which store and return JSON data. With JavaScript present throughout the development stack, the door is now open for JavaScript developers to become full-stack developers without the need to learn a traditional server-side language. Given the right tools and know-how, any JavaScript developer can create comprised entirely of the language they know best, and they can do so using an architecture like (MongoDB, Express, AngularJS, and Node.js).

Organization is key to the development of any complex Single Page Application (SPA). If you don't get organized from the beginning, you are sure to introduce an inordinate number of regressions to your app. The Node.js ecosystem will help you to do this with a full suite of indispensable and open-source tools, three of which we will discuss here.

In this chapter, you will learn about:

• Node Package Manager (NPM)
• Bower frontend package manager
• Grunt JavaScript task runner
• How these three tools can be used together to create an organized development environment that is ideal for creating an SPA and is essential to the MEAN stack architecture.

What is Node Package Manager?

Within any full-stack JavaScript environment, Node Package Manager will be your tool for setting up your development environment and for managing server-side libraries. NPM can be used within both global and isolated environment contexts. We will first explore the use of NPM globally.

Installing Node.js and NPM

NPM is a component of , so before you can use it you must first install Node.js. You can find installers for both Mac and Windows at nodejs.org. Once you have Node.js installed, using NPM is incredibly easy and is done from the Command Line Interface (CLI). Start by ensuring you have the latest version of NPM installed, as it is updated more often than Node.js itself:

$ npm install -g npm

When using NPM, the option will apply your changes to your global environment. In this case, you want your version of NPM to apply globally. As stated previously, NPM can be used to manage packages both globally and within isolated environments. In the following, we want essential development tools to be applied globally so that you can use them in multiple projects on the same system.

Tip

With Mac and some Unix-based systems, you may have to run the command as the superuser (prefix the command with ) in order to install packages globally, depending on how NPM was installed. If you run into this issue and wish to remove the need to prefix with , see docs.npmjs.com/getting-started/fixing-npm-permissions.

Configuring your package.json file

For any project you develop, you will keep a local file to manage your Node.js dependencies. This file should be stored at the root of your project directory and it will only pertain to that isolated environment. This allows you to have multiple Node.js projects with different dependency chains on the same system.

When beginning a new project, you can automate the creation of the file from the command line:

$ npm init

Running will take you through a series of JSON property names to define through command line prompts, including your app's , number, , and more. The and properties are required, and your Node.js package will not install without them defined. Several of the properties will have a default value given within parentheses in the prompt so that you may simply hit to continue. Other properties will simply allow you to hit with a blank entry and will not be saved to the file, or will be saved with a blank value:

name: (my-app) version: (1.0.0) description: entry point: (index.js)

The prompt will be defined as the property in and is not necessary unless you are developing a Node.js application. In our case, we can forgo this field. The command may in fact force you to save the property, so you will have to edit afterward to remove it; however, that field will have no effect on your web app.

You may also choose to create the file manually using a text editor, if you know the appropriate structure to employ. Whichever method you choose, your initial version of the file should look similar to the following example:

{ "name": "my-app", "version": "1.0.0", "author": "Philip Klauzinski", "license": "MIT", "description": "My JavaScript single page application." }

If you want your project to be private and want to ensure that it does not accidently get published to the NPM registry, you may want to add the property to your file, and set it to . Additionally, you may remove some properties that only apply to a registered package:

{ "name": "my-app", "author": "Philip Klauzinski", "description": "My JavaScript single page application.", "private": true }

Once you have your file set up the way you like it, you can begin installing Node.js packages locally for your app. This is where the importance of dependencies begins to surface.

NPM dependencies

There are three types of dependencies that can be defined for any Node.js project in your file: , , and . For the purpose of building a web-based SPA, you will only need to use the declaration.

are those which are required for developing your application, but not required for its production environment or for simply running it. If other developers want to contribute to your Node.js application, they will need to run from the command line to set up the proper development environment. For information on the other types of dependencies, see docs.npmjs.com.

When adding to your , the command line again comes to the rescue. Let's use the installation of Browserify as an example:

$ npm install browserify --save-dev

This will install Browserify locally and save it along with its version range to the object in your file. Once installed, your file should look similar to the following example:

{ "name": "my-app", "version": "1.0.0", "author": "Philip Klauzinski", "license": "MIT", "devDependencies": { "browserify": "^12.0.1" } }

The object will store each package as a key-value pair in which the key is the and the value is the or . Node.js uses semantic versioning, where the three digits of the version number represent . For more information on semantic version formatting, see semver.org.

Updating your development dependencies

You will notice that the version number of the installed package is preceded by a caret () symbol by default. This means that package updates will only allow and updates for versions above 1.0.0. This is meant to prevent major version changes from breaking your dependency chain when updating your packages to the latest versions.

To update your and save the new version numbers, you can enter the following from the command line:

$ npm update --save-dev

Alternatively, you can use the option as a shortcut...