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.
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.
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.
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
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.
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 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 implement. 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.
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.
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.