1) Explain the working of the Node.js web server.

Node.js is a software platform that allows you to create your own web
server and build web applications on top of it.
• Node.js isn’t itself a web server; neither is it a language. It contains a
built-in HTTP server library, meaning that you don’t need to run a
separate web server program such as NGINX, Apache, or Internet
Information Services (IIS).
• This gives you greater control of how your web server works but also
• increases the complexity of getting it up and running, particularly in a
live environment.

JavaScript: The single language through the stack

One of the main reasons why Node.js is gaining broad popularity is that
you code it in
a language that most web developers are already familiar with: JavaScript.
Until Node
was released, if you wanted to be a full-stack developer, you had to be
proficient in at
least two languages: JavaScript on the front end and something like PHP
or Ruby on
the back end.
Fast, efficient, and scalable

Another reason for the popularity of Node.js is that, when coded correctly,
it’s
extremely fast and makes efficient use of system resources. These
features enable a
Node.js application to serve more users on fewer server resources than
most of the other mainstream server technologies. Business owners also
like the idea of Node.js
because it can reduce their running costs, even at large scale.
Using prebuilt packages via npm
A package manager, npm, gets installed when you install Node.js. npm
gives you the
ability to download Node.js modules or packages to extend the
functionality of your
application. Currently, more than 350,000 packages are available through
npm, an
indication of how much depth of knowledge and experience you can
bring to an
application.
2) Brief the Express framework and its working.

Express is a web application framework for Node.js that’s designed to

perform web
application development tasks in a well tested, repeatable way

Easing your server setup

As already noted, Node.js is a platform, not a server, which allows you to
get creative
with your server setup and do things that you can’t do with other web
servers. It also
makes getting a basic website up and running harder.
Express abstracts away this difficulty by setting up a web server to listen
to incoming
requests and return relevant responses. In addition, it defines a directory
structure.
Routing URLs to responses
One of the great features of Express is that it provides a simple interface
for directing
an incoming URL to a certain piece of code. Whether this interface will
serve a static
HTML page, read from a database, or write to a database doesn’t matter.
The interface
is simple and consistent
Views: HTML responses
It’s likely that you’ll want to respond to many of the requests to your
application by
sending some HTML to the browser. By now, it will come as no surprise
to you that
Express makes this task easier than it is in native Node.js.
Express provides support for many templating engines that make it easier
to build
HTML pages in an intelligent way, using reusable components as well as
data from
your application. Express compiles these together and serves them to the
browser as
HTML.
Remembering visitors with session support
Being single-threaded, Node.js doesn’t remember a visitor from one
request to the
next. It doesn’t have a silo of RAM set aside for you; it sees only a series
of HTTP
requests. HTTP is a stateless protocol, so there’s no concept of storing a
session state.
As it stands, it’s difficult to create a personalized experience in Node.js or
have a
secure area where a user has to log in; it’s not much use if the site forgets
who you are
on every page. You can do it, of course, but you have to code it yourself.

3) Discuss Mongo Db database and its benefits over a relational database

Introducing MongoDB: The database

The ability to store and use data is vital for most applications. In the
MEAN stack, the
database of choice is MongoDB, the M in MEAN. MongoDB fits into the
stack incredibly
well. Like Node.js, it’s renowned for being fast and scalable.
Relational databases vs. document stores
MongoDB is a document store. The concept of rows still
exists, but columns are removed from the picture. Rather than a column
defining
what should be in the row, each row is a document, and this document
both defines
and holds the data itself. Table 1.2 shows how a collection of documents
might be
Listed
MongoDB stores documents as BSON, which is binary JSON (JavaScript
Serialized
Object Notation). Don’t worry for now if you’re not fully familiar with
JSON; check
out the relevant section in appendix D. In short, JSON is a JavaScript way
of holding
data, which is why MongoDB fits so well into the JavaScript-centric
MEAN stack!
The following code snippet shows a simple example MongoDB
document:
{
"firstName" : "Simon",
"lastName" : "Holmes",
_id : ObjectId("52279effc62ca8b0c1000007")
}
More than just a document database
MongoDB sets itself apart from many other document databases with its
support for
secondary indexing and rich queries. You can create indexes on more
than the
unique identifier field, and querying indexed fields is much faster. You
can also create
some fairly complex queries against a MongoDB database—not to the
level of huge
SQL commands with joins all over the place, but powerful enough for
most use cases.
Mongoose for data modeling and more
MongoDB’s flexibility in what it stores in documents is a great thing for
the database.
But most applications need some structure to their data. Note that the
application
needs structure, not the database. So where does it make most sense to
define the
structure of your application data? In the application itself!

4) Explain Angular and two-way data binding with an example.

Angular is the A in MEAN. In simple terms, Angular is a JavaScript

framework for creating
the interface for your website or application. In this book, you’ll be
working with
Angular 7, which is the most recently available version. All previous
versions have
been deprecated, and the online documentation no longer applies
To understand two-way data binding, consider a simple example.
Compare this
approach with traditional one-way data binding. Imagine that you have a
web page
and some data, and you want to do the following:
1 Display that data as a list to the user
2 Allow the user to filter that list by inputting text into a form field
In both approaches—one-way and two-way binding—step 1 is similar.
You use the data
to generate some HTML markup for the end user to see. Step 2 is where
things get a
bit different.
In step 2, you want to let the user enter some text in a form field to filter
the list of
data being displayed. With one-way data binding, you have to add event
listeners to the form input field manually to capture the data and update
the data model (to ultimately
change what’s displayed to the user).

Using Angular to load new pages

One thing that Angular was specifically designed for is single-page
application (SPA)
functionality. In real terms, an SPA runs everything inside the browser
and never does
a full page reload. All application logic, data processing, user flow, and
template delivery
can be managed in the browser.
Think Gmail. That’s an SPA. Different views get shown in the page,
along with a
variety of data sets, but the page itself never fully reloads.
This approach can reduce the amount of resources you need on your
server, because
you’re essentially crowdsourcing the computational power. Each person’s
browser is
doing the hard work; your server is serving up static files and data on
request.

5) Explain the common MEAN stack architecture and discuss the

difficulties in SPA. (10)
Marks)
Common MEAN Stack Architecture
The MEAN stack is a popular framework for developing modern web
applications using JavaScript technologies:

M: MongoDB
A NoSQL database that stores data in JSON-like documents. It is
schema-less, which makes it flexible for handling various data structures.

E: Express.js
A lightweight and flexible Node.js web application framework. It
provides middleware to handle HTTP requests and routing.

A: Angular
A front-end framework for building dynamic single-page applications
(SPAs). It uses two-way data binding and dependency injection to
simplify development.
N: Node.js
A runtime environment that enables server-side execution of JavaScript.
It allows developers to use a single programming language for both front-
end and back-end development.

The architecture typically involves:

Frontend: Angular handles the user interface (UI) and communicates with
the back-end using RESTful APIs or GraphQL.
Backend: Node.js with Express handles business logic, routes, and API
endpoints.
Database: MongoDB stores application data, which can be accessed via
the backend.
Difficulties in Single-Page Applications (SPAs)
SPAs offer a seamless user experience by dynamically updating content
without reloading the page. However, they come with challenges:

SEO Challenges:
SPAs dynamically render content, which can make it difficult for search
engines to index. Server-side rendering or pre-rendering may be required
for better SEO.

Initial Load Time:

SPAs often require downloading large JavaScript bundles upfront,
leading to slower initial load times, especially on slow networks.

State Management:
Managing the state of a complex SPA can be challenging as the
application grows. Libraries like Redux or RxJS are often needed to
handle state efficiently.

Browser Compatibility:
SPAs heavily rely on JavaScript and modern browser features, which can
lead to compatibility issues with older browsers.

Security Concerns:
SPAs expose API endpoints that can be vulnerable to attacks such as
Cross-Site Scripting (XSS) or Cross-Site Request Forgery (CSRF) if not
properly secured.
Memory Leaks:
Long-running SPAs can accumulate memory usage due to improper
handling of event listeners or DOM elements, degrading performance
over time.

Routing Complexity:
SPAs use client-side routing, which requires additional handling to ensure
navigation works seamlessly and properly handles deep linking.

6)Discuss the flexibility of MEAN architecture with an example (Blog

engine). (10
Marks)
The MEAN stack (MongoDB, Express, Angular, Node.js) demonstrates
flexibility by allowing developers to design tailored solutions for
different application requirements. Let’s examine this flexibility through
the example of a blog engine, which has two primary components:

Public-facing Blog Interface

Admin Interface
1. Public-facing Blog Interface
The blog interface delivers content-rich, low-interaction pages to readers.
Key characteristics include:

Content-rich: Focused on presenting articles.

Fast first load: Essential to retain readers and reduce bounce rates.
Public and shareable: Optimized for syndication and sharing.
For this side of the application, a server-rendered architecture is preferred.
Instead of building this as a Single-Page Application (SPA), using
Express and MongoDB to serve pre-rendered HTML pages ensures:

Fast loading times: Reducing the reliance on client-side JavaScript

improves performance.
SEO optimization: Server-side rendering makes content easier for search
engines to index, boosting visibility.
Example:

Blog articles are stored in MongoDB, allowing rich document queries.

Express handles routing and serves pre-rendered pages to the user.
Node.js ensures high-performance delivery of server-side data.
2. Admin Interface
The admin interface allows blog owners to write and manage articles.
Key characteristics include:

Feature-rich: Includes tools like WYSIWYG editors and media uploads.

High interaction: Requires real-time updates and user-friendly feedback.
Private and secure: Admins log in to a secure system.
For this side, an Angular SPA is the ideal solution:

Angular provides a highly interactive and feature-rich UI with tools like

two-way data binding for form management.
The SPA communicates with a RESTful API built using Express, Node.js,
and MongoDB for data operations like creating or editing blog posts.
Web sockets in Node.js enable real-time feedback for actions such as
saving drafts.

Combined Blog Engine Architecture

By separating concerns and leveraging the MEAN stack’s flexibility, you
create a dual-application architecture:

Public-facing blog:

Built with Express, Node.js, and MongoDB for fast and efficient server-
side rendering.
Optimized for speed and SEO to attract and retain readers.
Admin interface:

Developed as an Angular SPA, communicating with a Node.js/Express

REST API for dynamic functionality.
Provides a smooth and responsive experience for blog admins.
This approach ensures both ends meet their unique requirements while
utilizing the full potential of the MEAN stack.

Example Flow
A reader visits the blog:

The server quickly serves the blog article using Express and MongoDB.
An admin logs in:

Angular provides a rich, interactive interface to create or manage articles,

using the REST API for backend operations.
8) Describe the rapid prototype development stages.
STAGE 1: BUILD A STATIC SITE
The first stage is building a static version of the application, which is
essentially several
HTML screens. The aims of this stage are
To quickly figure out the layout
To ensure that the user flow makes sense
At this point, you’re not concerned with a database or flashy effects on
the user interface;
all you want to do is create a working mockup of the main screens and
journeys
that a user will take through the application.
STAGE 2: DESIGN THE DATA MODEL AND CREATE THE
DATABASE
When you have a working static prototype that you’re happy with, the
next thing to do
is look at any hardcoded data in the static application, and put it in a
database. The
aims of this stage are
To define a data model that reflects the requirements of the application
To create a database to work with the model
STAGE 3: BUILD YOUR DATA API
After stages 1 and 2, you have a static site on one hand and a database on
the other.
This stage and the next take the natural steps of linking them. The aim of
stage 3 is
To create a RESTful API that allows your application to interact with
the database
STAGE 4: HOOK THE DATABASE INTO THE APPLICATION
When you get to this stage, you have a static application and an API
exposing an interface
to your database. The aim of this stage is
To get your application to talk to your API
When this stage is complete, the application will look pretty much the
same as it did
before, but the data will be coming from the database. When it’s done,
you’ll have a
data-driven application!
STAGE 5: AUGMENT THE APPLICATION
This stage is all about embellishing the application with additional
functionality. You
might add authentication systems, data validation, or methods for
displaying error
messages to users. This stage could include adding more interactivity to
the front end
or tightening the business logic in the application.
The aims of this stage are
To add finishing touches to your application
To get the application ready for people to use
These five stages of development provide a great methodology for
approaching a new
build project. In the next section, you’ll take a look at how you’ll follow
these steps to
build Loc8r.

9)Explain the planning process for a ‘LOC8R’ application using MEAN

stack.

You’ll start by following stage 1 and building a static site. We

recommend doing this
for any application or site, because you can learn a lot with relatively
little effort.
When building the static site, it’s good to keep one eye on the future,
keeping in mind
what the final architecture will be. The architecture for Loc8r is already
defined, as
shown in figure 2.14.
Based on this architecture, you’ll build the static application in Node and
Express,
using that as your starting point into the MEAN stack. Figure 2.15
highlights this step
in the process as the first part of developing the proposed architecture.
This step is
covered in chapters 3 and 4.

STEP 2: DESIGN THE DATA MODEL AND CREATE THE

DATABASE
Still following the stages of development, you’ll continue to stage 2 by
creating the
database and designing the data model. Again, any application is likely to
need this
step, and you’ll get much more out of it if you’ve been through step 1
first.
Figure 2.16 illustrates how this step adds to the overall picture of building
up the
application architecture.
In the MEAN stack, you’ll use MongoDB for this step, relying heavily on
Mongoose
for the data modeling. The data models are actually defined inside the
Express application
STEP 3: BUILD YOUR REST API
When you’ve built the database and defined the data models, you’ll want
to create a
REST API so that you can interact with the data through making web
calls. Pretty
much any data-driven application will benefit from having an API
interface, so this
step is another one you’ll want to have in most build projects.

STEP 4: USE THE API FROM YOUR APPLICATION

This step matches stage 4 of the development process and is where Loc8r
starts to
come to life. The static application from step 1 will be updated to use the
REST API
from step 3 to interact with the database created in step 2.
To learn about all parts of the stack and the different ways in which you
can use
them, you’ll use Express and Node.js to make calls to the API. If, in a
real-world scenario,
you planned to build the bulk of an application in Angular, you’d hook
your
API into Angular instead. That approach is covered in chapters 8, 9, and
10.
At the end of this step, you’ll have an application running on the first of
the three
architectures: an Express and Node.js application. Figure 2.18 shows how
this step
glues together the two sides of the architecture

STEP 5: EMBELLISH THE APPLICATION

Step 5 relates to stage 5 in the development process, where you get to add
extra
touches to the application. You’ll use this step to take a look at Angular
and see how
you can integrate Angular components into an Express application. This
addition to
the project architecture
STEP 6: REFACTOR THE CODE INTO AN ANGULAR SPA
In step 6, you’ll radically change the architecture by replacing the
Express application
and moving all the logic into an SPA, using Angular. Unlike the previous
steps, this
step replaces some of what came before it rather than building on it.
This step would be an unusual one in a normal build process—to develop
an application
in Express and redo it in Angular—but it suits the learning approach in
this
book particularly well. You’ll be able to focus on Angular, as you already
know what
the application should do, and a data API is ready for you to use.
STEP 7: ADD AUTHENTICATION
In step 7, you’ll add functionality to the application by enabling users to
register and
log in. You’ll also see how to make use of users’ data while they’re using
the application.
You’ll build on everything you’ve done so far and add authentication to
the
Angular SPA. As part of this step, you’ll save user information in the
database and
secure certain API endpoints so that they can be used only by
authenticated users.

9) Summarize the advantages and disadvantages of Angular.js in the

stack.
Advantages of Angular.js in the Stack
Two-Way Data Binding

Automatically synchronizes the UI with the underlying data model,

reducing boilerplate code.
Component-Based Architecture

Encourages modular development, making code easier to maintain and

reuse.
Built-In Dependency Injection

Simplifies the management of service dependencies, improving code

organization.
Rich Feature Set

Provides features like form validation, routing, and HTTP client,

eliminating the need for third-party libraries.
Single-Page Application (SPA) Support

Facilitates dynamic content updates without full page reloads, enhancing

user experience.
Testing-Friendly

Designed with testability in mind, making unit testing and end-to-end

testing straightforward.
Community and Ecosystem

Backed by Google and a large developer community, ensuring continued

support and resources.

Disadvantages of Angular.js in the Stack

Performance Issues for Large Applications

The two-way data binding mechanism can cause performance bottlenecks

in complex applications with many watchers.
Steep Learning Curve

The framework has a complex structure, requiring developers to

understand concepts like scopes, directives, and modules.
Verbosity

Angular.js often requires writing more boilerplate code compared to

newer frameworks like React or Vue.js.
Migration Challenges

Upgrading from Angular.js to Angular (2 and above) or other frameworks

can be challenging due to significant architectural differences.
Overhead for Small Applications

Angular.js may be overkill for simple applications, as its features and

structure add unnecessary complexity.
Limited SEO Capabilities

As a client-side framework, Angular.js struggles with search engine

optimization (SEO) unless combined with server-side rendering
techniques.