Skip to document

Chapter 1

Introducing the Node.js-to-Angular Stack
Course

Machine design

5 Documents
Students shared 5 documents in this course
Academic year: 2023/2024

Comments

Please sign in or register to post comments.

Preview text

Introducing the Node-to-Angular Stack

Understanding the Basic Web Development Framework

The main components of any given web framework are

  1. the user,
  2. browser,
  3. webserver,
  4. and backend services.

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.  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. The browser makes three main types of requests to the server:

  1. GET: The GET request is typically used to retrieve data from the server, such as .html files, images, or JSON data.
  2. 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.
  3. 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 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.

Webserver

 The webserver’s main focus is handling requests from browsers.  The webserver uses the HTTP headers as well as the URL to determine

Fig. Node-to-Angular Stack web paradigm

1.Node

 Node is a development framework based on Google’s V8 JavaScript engine. Therefore, Node 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, as can the server-side scripts and any supporting web application functionality.  In the Node-to-Angular stack, Node provides the fundamental platform for development. The backend services and server-side scripts are all written in Node. MongoDB provides the data store for the website but is accessed via a MongoDB driver Node module. The webserver is defined by Express, which is also a Node module. The following are valuable features of Node:

  1. JavaScript end-to-end: One of the biggest advantages to Node is that it allows you to write both server- and client-side scripts in JavaScript.
  2. Event-driven scalability: Node 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.
  3. Extensibility: Node has a great following and an active development community. New modules to extend Node functionality are being developed all the time. Also it is simple to install and include new modules in Node, making it easy to extend a Node project to include new functionality in minutes.
  4. Time: Let’s face it, time is valuable. Node is super easy to set up and develop in. In only a few minutes, you can install Node and have a working webserver.

2

 MongoDB is an agile and scalable NoSQL database.  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  MongoDB driver library to access MongoDB from Node. The following are valuable features of MongoDB:

  1. 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.
  2. 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.
  3. High availability: MongoDB’s replication model makes it easy to maintain scalability while keeping high performance.
  4. High scalability: MongoDB’s structure makes it easy to scale horizontally by sharing the data across multiple servers.
  5. 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.

3

 The Express module acts as the webserver in the Node-to-Angular stack.  The fact that it is running in Node makes it easy to configure, implement, and control.  The Express module extends Node to provide several key components for handling web requests. The following are valuable features of Express:

  1. Route management: Express makes it easy to define routes (URL endpoints) that tie directly to Node script functionality on the server.
Was this document helpful?

Chapter 1

Course: Machine design

5 Documents
Students shared 5 documents in this course
Was this document helpful?
1 | P a g e
Introducing the Node.js-to-Angular Stack
Understanding the Basic Web Development Framework
The main components of any given web framework are
1. the user,
2. browser,
3. webserver,
4. and backend services.
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.
The user role in a web framework is to sit on the visual output and interaction
input of webpages.