1

Introducing the
Node.js-to-Angular Stack

To get you off on the right foot, this chapter focuses on the fundamental components of the
web development framework and then describes the components of the Node.js-to-Angular
stack that will be the basis for the rest of the book. The first section discusses various aspects of
the general website/web application development framework from users to backend services.
The purpose of first covering the web development framework components is to get you in the
mindset to more easily understand how the components of the Node.js-to-Angular stack relate
to the pieces of the general framework. This should help you better see the benefits of using the
Node.js-to-Angular stack components over the more traditional technologies.

Understanding the Basic Web Development Framework

To get you in the right mindset to understand the benefits of utilizing Node.js, MongoDB,
and Angular as your web framework, this section provides an overview of the basic components
of most websites. If you are familiar with the full web framework, this section will be old hat,
but if you understand only the server side or client side of the web framework, this section
gives you a more complete picture.

The main components of any given web framework are the user, browser, webserver, and
backend services. Although websites vary greatly on appearance and behavior, all have these
basic components in one form or another.

This section is not intended to be in-depth, comprehensive, or technically exact, but rather
a high level perspective of the parts involved in a functional website. The components are
described in a top-down manner from user down to backend services. Then in the next section
we discuss the Node.js-to-Angular stack from the bottom up, and you can get a picture of where
each piece fits and why. Figure 1.1 provides a basic diagram to make it easier to visualize the
components in a website/web application.
8 Chapter 1 Introducing the Node.js-to-Angular Stack

Browser Server

JavaScript Webserver Other

Client Side JS Apache/IIS/ Services
JPG
etc.
HTTP GET/PUT/AJAX
JSON/XML/
JSON
User etc. Server-Side Scripts
HTML CSS PHP/Java/.NET/C++/
HTML/CSS/ etc.
Images

User DB
Interactions MySQL
Oracle
Files etc.

Figure 1.1 Diagram showing the components of a basic website/web application

User
Users are a fundamental part of all websites; they are, after all, the reason websites exist in the
first place. User expectations define the requirements for developing a good website, and these
expectations have changed a lot over the years. Users used to accept the slow, cumbersome
experience of the “world-wide-wait,” but no longer. They expect websites to behave closer to
applications installed on their computers and mobile devices.

The user role in a web framework is to sit on the visual output and interaction input of
webpages. That is, users view the results of the web framework processing and then provide
interactions using mouse clicks, keyboard input, and swipes and taps on mobile devices.

Browser
The browser plays three roles in the web framework. First, it provides communication to
and from the webserver. Second, it interprets the data from the server and renders it into the
view that the user actually sees. Finally, the browser handles user interaction through the
keyboard, mouse, touchscreen, or other input device and takes the appropriate action.

Browser to Webserver Communication

Browser-to-webserver communication consists of a series of requests using the HTTP and HTTPS
protocols. Hypertext Transfer Protocol (HTTP) defines communication between the browser
and the webserver. HTTP defines what types of requests can be made as well as the format of
those requests and the HTTP response.

HTTPS adds an additional security layer, SSL/TLS, to ensure secure connections by requiring
the webserver to provide a certificate to the browser. The user then can determine whether to
accept the certificate before allowing the connection.
 Understanding the Basic Web Development Framework 9

The browser makes three main types of requests to the server:

■ GET: The GET request is typically used to retrieve data from the server, such as .html
files, images, or JSON data.
■ POST: POST requests are used when sending data to the server, such as adding an item to
a shopping cart or submitting a web form.
■ AJAX: Asynchronous JavaScript and XML (AJAX) is actually just a GET or POST
request done directly by JavaScript running in the browser. Despite the name, an AJAX
request can receive XML, JSON, or raw data in the response.

Rendering the Browser View

The screen that the user actually views and interacts with is often made up of several different
pieces of data retrieved from the webserver. The browser reads data from the initial URL and
then renders the HTML document to build a Document Object Model (DOM). The DOM is a
tree structure object with the HTML document as the root. The structure of the tree basically
matches the structure of the HTML document. For example, the document will have html as
a child, and html will have head and body as children, and body may have div, p, or other
elements as children, like this:
document
+ html
+ head
+ body
+ div
+ p

The browser interprets each DOM element and renders it to the user’s screen to build the
webpage view.

The browser often ends up getting various types of data from multiple webserver requests to
build the webpage. The following are the most common types of data the browser uses to
render the final user view as well as define the webpage behavior.

■ HTML files: These provide the fundamental structure of the DOM.

■ CSS files: These define how each of the elements on the page is to be styled; for example,
font, color, borders, and spacing.
■ Client-side scripts: These are typically JavaScript files. They can provide added
functionality to the webpage, manipulate the DOM to change the look of the webpage,
and provide any necessary logic required to display the page and provide functionality.
■ Media files: Image, video, and sound files are rendered as part of the webpage.
■ Data: Any data, such as XML, JSON, or raw text, can be provided by the webserver as a
response to an AJAX request. Rather than sending a request back to the server to rebuild
the webpage, new data can be retrieved via AJAX and inserted into the webpage via
JavaScript.
10 Chapter 1 Introducing the Node.js-to-Angular Stack

■ HTTP headers: The HTTP protocol defines a set of headers that can be used by
the browser and client-side scripts to define the behavior of the webpage. For example,
cookies are contained in the HTTP headers. The HTTP headers also define the type
of data in the request as well as the type of data expected to be returned back to the
browser.

User Interaction
The user interacts with the browser via input devices such as mice, keyboards, and
touchscreens. The browser has an elaborate event system that captures these user input
events and then takes the appropriate action. Actions vary from displaying a popup menu to
loading a new document from the server to executing client-side JavaScript.

Webserver
The webserver’s main focus is handling requests from browsers. As described earlier, the browser
may request a document, post data, or perform an AJAX request to get a data. The webserver
uses the HTTP headers as well as the URL to determine what action to take. This is where
things get different depending on the webserver, configuration, and technologies used.

Most out-of-the-box webservers, such as Apache and IIS, are made to serve static files such as
.html, .css, and media files. To handle POST requests that modify server data and AJAX requests
to interact with backend services, webservers need to be extended with server-side scripts.

A server-side program is really anything that can be executed by the webserver to perform the
task the browser is requesting. These can be written in PHP, Python, C, C++, C#, Java, … the list
goes on and on. Webservers such as Apache and IIS provide mechanisms to include server-side
scripts and then wire them up to specific URL locations requested by the browser.

This is where having a solid webserver framework can make a big difference. It often takes quite
a bit of configuration to enable various scripting languages and wire up the server-side scripts
so that the webserver can route the appropriate request to the appropriate script.

The server-side scripts either generate the response directly by executing their code or connect
with other backend servers such as databases to obtain the necessary information and then use
that information to build and send the appropriate response.

Backend Services
Backend services are services that run behind the webserver and provide data used to build
responses to the browser. The most common type of backend service is a database that stores
information. When a request comes in from the browser that requires information from the
database or other backend service, the server-side script connects to the database, retrieves the
information, formats it, and then sends it back to the browser. Conversely, when data comes
in from a web request that needs to be stored in the database, the server-side script connects to
the database and updates the data.
 Understanding the Node.js-to-Angular Stack Components 11

Understanding the Node.js-to-Angular Stack Components

Now that you have the basic structure of the web framework fresh in your mind, it is time
to discuss the Node.js-to-Angular stack. The most common—and we believe the best—version
of this stack is the Node.js-to-Angular stack comprised of MongoDB, Express, Angular, and
Node.js.

In the Node.js-to-Angular stack, Node.js provides the fundamental platform for development.
The backend services and server-side scripts are all written in Node.js. MongoDB provides the
data store for the website but is accessed via a MongoDB driver Node.js module. The webserver
is defined by Express, which is also a Node.js module.

The view in the browser is defined and controlled using the Angular framework. Angular is an
MVC framework where the model is made up of JSON or JavaScript objects, the view is HTML/
CSS, and the controller is made up of Angular JavaScript.

Figure 1.2 provides a basic diagram of how the Node.js-to-Angular stack fits into the basic
website/web application model. The following sections describe each of these technologies and
why they were chosen as part of the Node.js-to-Angular stack. Later chapters in the book cover
each of the technologies in much more detail.

Browser

Angular Server

JavaScript CSS
Client Side HTML Node.js
HTTP GET/PUT/AJAX MongoDB
Express
JSON/XML/ JSON
Webserver
User etc. JPG JS

HTML/CSS/ Server-Side
Images Scripts

User
Interactions Other
Services Files

Figure 1.2 Basic diagram showing where Node.js, Express, MongoDB, and Angular fit in the web
paradigm

Node.js
Node.js is a development framework based on Google’s V8 JavaScript engine. Therefore, Node.js
code is written in JavaScript and then compiled into machine code by V8 to be executed.

Many of your backend services can be written in Node.js, as can the server-side scripts and
any supporting web application functionality. The nice thing about Node.js is that it is all just
12 Chapter 1 Introducing the Node.js-to-Angular Stack

JavaScript, so you can easily take functionality from a client-side script and place it in a
server-side script. Also, the webserver can run directly within the Node.js platform as a Node.js
module, so it makes it much easier than, say, Apache at wiring up new services or server-side
scripts.

The following are just a few reasons why Node.js is a great framework to start from:

■ JavaScript end-to-end: One of the biggest advantages to Node.js is that it allows you to
write both server- and client-side scripts in JavaScript. There have always been difficulties
in deciding where to put scripting logic. Too much on the client side makes the client
cumbersome and unwieldy, but too much on the server side slows down web applications
and puts a heavy burden on the webserver. With Node.js you can take JavaScript written
on the client and easily adapt it for the server and vice versa. Also, your client developers
and server developers will be speaking the same language.
■ Event-driven scalability: Node.js applies a different logic to handling web requests.
Rather than having multiple threads waiting to process web requests, they are processed
on the same thread using a basic event model. This allows Node.js webservers to scale
in ways that traditional webservers never can. This is discussed in more detail in later
chapters.
■ Extensibility: Node.js has a great following and an active development community.
New modules to extend Node.js functionality are being developed all the time. Also it is
simple to install and include new modules in Node.js, making it easy to extend a Node.js
project to include new functionality in minutes.
■ Time: Let’s face it, time is valuable. Node.js is super easy to set up and develop in. In
only a few minutes, you can install Node.js and have a working webserver.

MongoDB
MongoDB is an agile and scalable NoSQL database. The name Mongo comes from
“humongous.” It is based on the NoSQL document store model, meaning that data is stored
in the database as a form of JSON objects rather than the traditional columns and rows of a
relational database.

MongoDB provides great website backend storage for high traffic websites that need to store
data such as user comments, blogs, or other items because it is fast, scalable, and easy to imple-
ment. This book covers using the MongoDB driver library to access MongoDB from Node.js.

Node.js supports a variety of DB access drivers, so the data store could just as easily be MySQL
or some other database. However, the following are some of the reasons that MongoDB really
fits in the Node.js stack well:

■ Document orientation: Because MongoDB is document-oriented, the data is stored in the

database in a format close to what you will be dealing with in both server-side and client-
side scripts. This eliminates the need to transfer data from rows to objects and back.
 Understanding the Node.js-to-Angular Stack Components 13

■ High performance: MongoDB is one of the highest performing databases available.

Especially today when more and more people interact with websites, it is important to
have a backend that can support heavy traffic.
■ High availability: MongoDB’s replication model makes it easy to maintain scalability
while keeping high performance.
■ High scalability: MongoDB’s structure makes it easy to scale horizontally by sharing the
data across multiple servers.
■ No SQL injection: MongoDB is not susceptible to SQL injection (putting SQL statements
in web forms or other input from the browser that compromises the DB security) because
objects are stored as objects, not using SQL strings.

Express
The Express module acts as the webserver in the Node.js-to-Angular stack. The fact that it is
running in Node.js makes it easy to configure, implement, and control. The Express module
extends Node.js to provide several key components for handling web requests. This allows you
to implement a running webserver in Node.js with only a few lines of code.

For example, the Express module provides the ability to easily set up destination routes (URLs)
for users to connect to. It also provides great functionality on working with the HTTP request
and response objects, including things like cookies and HTTP headers.

The following is a partial list of the valuable features of Express:

■ Route management: Express makes it easy to define routes (URL endpoints) that tie
directly to Node.js script functionality on the server.
■ Error handling: Express provides built-in error handling for documents not found and
other errors.
■ Easy integration: An Express server can easily be implemented behind an existing
reverse proxy system such as Nginx or Varnish. This allows it to be easily integrated into
your existing secured system.
■ Cookies: Express provides easy cookie management.
■ Session and cache management: Express also enables session management and cache
management.

Angular
Angular is a client-side framework developed by Google. Angular provides all the functionality
needed to handle user input in the browser, manipulate data on the client side, and control
how elements are displayed in the browser view. It is written using TypeScript. The entire
theory behind Angular is to provide a framework that makes it easy to implement web
applications using the MVC framework.
14 Chapter 1 Introducing the Node.js-to-Angular Stack

Other JavaScript frameworks could be used with the Node.js platform, such as Backbone,
Ember, and Meteor. However, Angular has the best design, feature set, and trajectory at this
writing. Here are some of the benefits of Angular:

■ Data binding: Angular has a clean method to bind data to HTML elements using its
powerful scope mechanism.
■ Extensibility: The Angular architecture allows you to easily extend almost every aspect
of the language to provide your own custom implementations.
■ Clean: Angular forces you to write clean, logical code.
■ Reusable code: The combination of extensibility and clean code makes it easy to write
reusable code in Angular. In fact, the language often forces you to do so when creating
custom services.
■ Support: Google is investing a lot into this project, which gives it an advantage over
other similar initiatives.
■ Compatibility: Angular is based on TypeScript, which makes it easier to begin integrating
Angular into your environment and to reuse pieces of your existing code within the
structure of the Angular framework.

Summary
This chapter covered the basics of the web development framework. The chapter discussed
the interaction between the webserver and the browser as well as the functionality required to
make modern websites function.

The chapter also described the Node.js-to-Angular stack, comprising Node.js, MongoDB,
Express, and Angular. Node.js provides the platform for the framework, MongoDB provides
the backend data store, Express provides the webserver, and Angular provides the client-side
framework for modern web applications.

Next
The next chapter provides a primer on the JavaScript language. Since the entire Node.js-to-
Angular stack is based on JavaScript, you need to be familiar with the language to follow the
examples in the rest of the book.