UNIT-I

Introduction to Full Stack Development: Understanding the Basic Web Development Framework-
User, Browser, Webserver, Backend Services,
Full Stack Components - Node.js, MongoDB, Express, React, Angular. Java Script Fundamentals,
NodeJS- Understanding Node.js, Installing Node.js, Working with Node Packages, creating a
Node.js Application, Understanding the Node.js Event Model, Adding Work to the Event Queue,
Implementing Callbacks.
Full stack development:
Full Stack Development refers to the development of both front end (client side) and back
end (server side) portions of web applications.
full Stack Web Developers
Full Stack web developers have the ability to design complete web applications and websites. They
work on the frontend, backend, database, and debugging of web applications or websites.

Full Stack Development

Technology Related to Full Stack Development
Front-end Development
It is the visible part of website or web application which is responsible for user experience. The user
directly interacts with the front end portion of the web application or website.
Front-end Technologies
The front end portion is built by using some languages which are discussed below:
 HTML: HTML stands for Hyper Text Markup Language. It is used to design the front end
portion of web pages using markup language. HTML is the combination of Hypertext and
 Markup language. Hypertext defines the link between the web pages. The markup language
is used to define the text documentation within tag which defines the structure of web pages.
 CSS: Cascading Style Sheets, fondly referred to as CSS, is a simply designed language
intended to simplify the process of making web pages presentable. CSS allows you to apply
styles to web pages. More importantly, CSS enables you to do this independent of the HTML
that makes up each web page.
 JavaScript: JavaScript is a famous scripting language used to create the magic on the sites
to make the site interactive for the user. It is used to enhancing the functionality of a website
to running cool games and web-based software.
Front End Libraries and Frameworks
 AngularJS: AngularJs is a JavaScript open source front-end framework that is mainly used
to develop single page web applications(SPAs). It is a continuously growing and expanding
framework which provides better ways for developing web applications. It changes the static
HTML to dynamic HTML. It is an open source project which can be freely used and
changed by anyone. It extends HTML attributes with Directives, and data is bound with
HTML.
 React.js: React is a declarative, efficient, and flexible JavaScript library for building user
interfaces. ReactJS is an open-source, component-based front end library responsible only
for the view layer of the application. It is maintained by Facebook.
 Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications. It is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first web sites.
 jQuery: jQuery is an open source JavaScript library that simplifies the interactions between
an HTML/CSS document, or more precisely the Document Object Model (DOM), and
JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and
manipulation, browser event handling, DOM animations, Ajax interactions, and cross-
browser JavaScript development.
 SASS: It is the most reliable, mature and robust CSS extension language. It is used to extend
the functionality of an existing CSS of a site including everything from variables,
inheritance, and nesting with ease.
 Some other libraries and frameworks are: Semantic-
UI, Foundation, Materialize, Backbone.js, Ember.js etc.
Other Important Points
 Work with text editors to use shortcuts and its facilities i.e. Visual studio, Atom, Sublime etc.
 Make UI responsible using grid system.
 Git and git commands like init, add, commit etc for version control and to work with team.
 Other tools like npm & yarn package managers, sass css pre-processor, browser DevTools
i.e. chrome devtools.
 Understand using HTTP, JSON, GraphQL APIs to fetch data using axios or other tools.
 It also requires some design skill to make layout and look better.
Back-end Technologies
It refers to the server-side development of web application or website with a primary focus on
how the website works. It is responsible for managing the database through queries and APIs by
client-side commands. This type of website mainly consists of three parts front end, back end,
and database. The back end portion is built by using some libraries, frameworks, and languages
which are discussed below:
 PHP: PHP is a server-side scripting language designed specifically for web development.
Since, PHP code executed on server side so it is called server side scripting language.
 C++ It is a general purpose programming language and widely used now a days for
competitive programming. It is also used as backend language.
 Java: Java is one of the most popular and widely used programming language and platform.
It is highly scalable. Java components are easily available.
 Python: Python is a programming language that lets you work quickly and integrate systems
more efficiently.
 Node.js: Node.js is an open source and cross-platform runtime environment for executing
JavaScript code outside of a browser. You need to remember that NodeJS is not a framework
and it’s not a programming language. Most of the people are confused and understand it’s a
framework or a programming language. We often use Node.js for building back-end services
like APIs like Web App or Mobile App. It’s used in production by large companies such as
Paypal, Uber, Netflix, Walmart and so on.
 Back End Frameworks: The list of back end frameworks are: Express, Django, Rails,
Laravel, Spring etc.
 The other back end program/scripting languages are: C#, Ruby, REST, GO etc.
Other Important Points
 Structuring the data in efficient way.
 Handle request-response of APIs for storing and retrieve data.
 Security of data is important.
Note: JavaScript is essential for all stacks as it is dominant technology on Web.
Database: Database is the collection of inter-related data which helps in efficient retrieval,
insertion and deletion of data from database and organizes the data in the form of tables, views,
schemas, reports etc.
 Oracle: Oracle database is the collection of data which is treated as a unit. The purpose of
this database is to store and retrieve information related to the query. It is a database server
and used to manages information.
  MongoDB: MongoDB, the most popular NoSQL database, is an open source document-
oriented database. The term ‘NoSQL’ means ‘non-relational’. It means that MongoDB isn’t
based on the table-like relational database structure but provides an altogether different
mechanism for storage and retrieval of data.
 SQL: Structured Query Language is a standard Database language which is used to create,
maintain and retrieve the relational database.

Understanding the Basic Web Development Framework

To get you in the right mind-set to understand the benefits of utilizing Node.js, MongoDB, and
AngularJS as your web framework, this section provides an overview of the basic components of
most websites. If you are already familiar with the full web framework, then this section will be old
hat, but if you only understand just the server side or client side of the web framework, then this
section will give you a more complete picture.
The main components of any web framework are the user, browser, webserver, and backend
services. Although websites vary greatly in terms of 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 very
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 the next section discusses the
Node.js-to-AngularJS stack from the bottom up, so you can get a picture of where each of the pieces
fits and why. Figure 1.1 provides a basic diagram to help you visualize the components in a
website/web application, which are discussed in the following sections.

Figure 1.1 Basic diagram of the components of a basic website/web application.

Users
Users are a fundamental part of every website; they are, after all, the reason websites exist in the
first place. User expectations define the requirements for developing a good website. User
expectations have changed a lot over the years. In the past, users accepted the slow, cumbersome
experience of the “world-wide-wait,” but not today. They expect websites to behave much more
quickly, like 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.
The Browser
The browser plays three roles in the web framework:

 Provide communication to and from the webserver

 Interpret the data from the server and render it into the view that the user actually sees
  Handle user interaction through the keyboard, mouse, touchscreen, or other input
device and take 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) is used to define 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 can then determine whether to accept the
certificate before allowing the connection.
There are three main types of requests that a browser will make to a webserver:

 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 that is 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, 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 gets various types of data from multiple webserver requests to build a 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, in terms
of font, color, borders, and spacing.
 Client-side scripts: These are typically JavaScript files. They can provide added
functionality to a 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: The webserver can provide data such as XML, JSON, or raw text as a response
to an AJAX request. Rather than send 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: HTTP defines a set of headers that the browser can use, as well as
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 to the browser.
User Interaction
The user interacts with the browser via mice, keyboards, and touchscreens. A browser has an
elaborate event system that captures user input events and then takes the appropriate actions.
Actions vary from displaying a popup menu to loading a new document from the server to
executing client-side JavaScript.
Webservers
A webserver’s main focus is handling requests from browsers. As described earlier, a browser may
request a document, post data, or perform an AJAX request to get data. The webserver uses HTTP
headers as well as a URL to determine what action to take. This is where things get very 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 script is really anything that a webserver can execute in order to perform the task the
browser is requesting. These scripts can be written in PHP, Python, C, C++, C#, Perl, 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 requests to the appropriate scripts.
Server-side scripts either generate a 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 responses.
Backend Services
Backend services are services that run behind a webserver and provide data that is 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. On the other hand, 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-AngularJS Stack Components

With the basic structure of the web framework fresh in your mind, it is time to discuss the Node.js-
to-AngularJS stack. The most common—and I believe the best—version of this stack is the Node.js-
to-AngularJS stack comprised of MongoDB, Express, AngularJS, and Node.js.
In the Node.js-to-AngularJS 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 AngularJS framework. AngularJS is an
MVC framework in which the model is made up of JSON or JavaScript objects, the view is
HTML/CSS, and the controller is AngularJS JavaScript code.
Figure 1.2 provides a very basic diagram of how the Node.js to AngularJS 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 AngularJS stack. Later chapters in the book will cover
each of the technologies in much more detail.

Figure 1.2 Basic diagram showing where Node.js, Express, MongoDB, and AngularJS fit in the web
paradigm.
Node.js
Node.js is a development framework that is based on Google’s V8 JavaScript engine and executes
it.
You can write most—or maybe even all—of your server-side code in Node.js, including the
webserver and the server-side scripts and any supporting web application functionality. The fact that
the webserver and the supporting web application scripts are running together in the same server-
side application allows for much tighter integration between the webserver and the scripts. Also, the
webserver can run directly on the Node.js platform as a Node.js module, which means it’s much
easier than using, say, Apache for wiring up new services or server-side scripts.
The following are just a few reasons Node.js is a great framework:

 JavaScript end-to-end: One of the biggest advantages of Node.js is that it allows you
to write both server- and client-side scripts in JavaScript. There have always been
difficulties in deciding whether to put logic in client-side scripts or server-side scripts.
With Node.js you can take JavaScript written on the client and easily adapt it for the
server and vice versa. An added plus is that client developers and server developers are
speaking the same language.
 Event-driven scalability: Node.js applies a unique logic to handling web requests.
Rather than having multiple threads waiting to process web requests, with Node.js they
are processed on the same thread, using a basic event model. This allows Node.js
webservers to scale in ways that traditional webservers can’t.
 Extensibility: Node.js has a great following and very active development community.
People are providing new modules to extend Node.js functionality all the time. Also, it
is very simple to install and include new modules in Node.js; you can extend a Node.js
project to include new functionality in minutes.
 Fast implementation: Setting up Node.js and developing in it are super easy. In only a
few minutes you can install Node.js and have a working webserver.
MongoDB
MongoDB is an agile and very scalable NoSQL database. The name Mongo comes from the word
“humongous,” emphasizing the scalability and performance MongoDB provides. It is based on the
NoSQL document store model, which means data is stored in the database as basically JSON
objects rather than as 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 quickly 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 database access drivers, so the data store can 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, data is stored in the

database in a format that is very close to what you deal 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, with more and more people interacting with websites, it is important
to have a backend that can support heavy traffic.
 High availability: MongoDB’s replication model makes it very easy to maintain
scalability while keeping high performance.
 High scalability: MongoDB’s structure makes it easy to scale horizontally by sharding
the data across multiple servers.
Express
The Express module acts as the webserver in the Node.js-to-AngularJS stack. Because it runs in
Node.js, it is easy to configure, implement, and control. The Express module extends Node.js to
provide several key components for handling web requests. It 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 in terms of working with 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 the Node.js script functionality on the server.
 Error handling: Express provides built-in error handling for “document 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 you to easily integrate it
into your existing secured system.
 Cookies: Express provides easy cookie management.
 Session and cache management: Express also enables session management and cache
management.
AngularJS
AngularJS is a client-side framework developed by Google. It 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 in JavaScript, with a reduced jQuery library. The theory
behind AngularJS 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, AngularJS has the best design, feature set, and trajectory at this writing. Here
are some of the benefits AngularJS provides:

 Data binding: AngularJS has a very clean method for binding data to HTML elements,
using its powerful scope mechanism.
 Extensibility: The AngularJS architecture allows you to easily extend almost every
aspect of the language to provide your own custom implementations.
 Clean: AngularJS forces you to write clean, logical code.
 Reusable code: The combination of extensibility and clean code makes it very easy to
write reusable code in AngularJS. 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
similar initiatives that have failed.
 Compatibility: AngularJS is based on JavaScript and has a close relationship with
jQuery. This makes it easier to begin integrating AngularJS into your environment and
reuse pieces of your existing code within the structure of the AngularJS framework.

JAVA SCRIPT FUNDAMENTALS:

JavaScript is a powerful language with a rich set of features that enable developers to create dynamic and
interactive web applications. Understanding its fundamentals is essential for anyone looking to work in web
development.
JavaScript programs can be inserted almost anywhere into an HTML document
using the <script> tag.
For instance:

<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>

Syntax and Basics

 Variables: Used to store data values.

javascript
Copy code
var name = "John";
let age = 30;
const isStudent = true;

 Data Types: Common data types include strings, numbers, booleans, null, undefined,
objects, and arrays.

javascript
Copy code
let message = "Hello, World!"; // String
let count = 42; // Number
let isActive = true; // Boolean
let student = null; // Null
let course; // Undefined

2. Operators

 Arithmetic Operators: +, -, *, /, %
 javascript
Copy code
let sum = 10 + 5; // 15
let product = 10 * 5; // 50

 Comparison Operators: ==, ===, !=, !==, <, >, <=, >=

javascript
Copy code
let isEqual = (5 == '5'); // true
let isStrictEqual = (5 === '5'); // false

 Logical Operators: &&, ||, !

javascript
Copy code
let result = (true && false); // false
let isNotTrue = !true; // false

3. Control Structures

 Conditionals: if, else if, else, switch

javascript
Copy code
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}

 Loops: for, while, do...while

javascript
Copy code
for (let i = 0; i < 5; i++) {
console.log(i);
}

4. Functions

 Function Declaration

javascript
Copy code
function greet(name) {
return "Hello, " + name;
}

 Function Expression

javascript
Copy code
const greet = function(name) {
return "Hello, " + name;
};
  Arrow Functions

javascript
Copy code
const greet = (name) => "Hello, " + name;

5. Objects and Arrays

 Objects: Collections of key-value pairs.

javascript
Copy code
let person = {
firstName: "John",
lastName: "Doe",
age: 25
};
console.log(person.firstName); // John

 Arrays: Ordered lists of values.

javascript
Copy code
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1

6. DOM Manipulation

 JavaScript can interact with and manipulate the HTML DOM (Document Object Model).

javascript
Copy code
document.getElementById("myElement").innerHTML = "New Content";

7. Events

 JavaScript can respond to user actions such as clicks, keypresses, etc.

javascript
Copy code
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});

8. Asynchronous JavaScript

 Callbacks

javascript
Copy code
function fetchData(callback) {
setTimeout(() => {
callback("Data received");
}, 2000);
}
 fetchData((data) => {
console.log(data);
});

 Promises

javascript
Copy code
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Promise resolved");
} else {
reject("Promise rejected");
}
});
promise.then((message) => {
console.log(message);
}).catch((message) => {
console.log(message);
});

 Async/Await

javascript
Copy code
async function fetchData() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
}
fetchData();

9. ES6 and Beyond

 New features introduced in ECMAScript 2015 (ES6) and later versions.

o let and const for block-scoped variables.
o Arrow functions.
o Template literals.
o Destructuring assignment.
o Default parameters.
o Classes.
o Modules (import/export).

Understanding Node.js

Node.js is a runtime environment that allows you to run JavaScript code on the server side. It uses
the V8 JavaScript engine (the same one used by Google Chrome) to execute code, and it provides a
non-blocking, event-driven architecture for building scalable network applications.

Installing Node.js

1. Download Node.js:
o Visit the official Node.js website.
 o Download the installer for your operating system (Windows, macOS, Linux).
2. Install Node.js:
o Run the installer and follow the instructions.
o Verify the installation by opening a terminal or command prompt and typing:

bash
Copy code
node -v
npm -v

This should display the installed versions of Node.js and npm (Node Package
Manager).

Working with Node Packages

Node.js uses npm to manage packages (libraries and tools). With npm, you can install, update, and
remove packages easily.

1. Initialize a Project:
o Create a new directory for your project and navigate into it.

bash
Copy code
mkdir my-node-app
cd my-node-app

o Initialize a new Node.js project:

bash
Copy code
npm init -y

This creates a package.json file in your project directory, which keeps track of your
project's dependencies and configuration.

2. Installing Packages:
o Install a package (e.g., Express for web server functionality):

bash
Copy code
npm install express

o Installed packages are listed in the package.json file under "dependencies".

3. Using Packages:
o Require the installed package in your JavaScript files:

javascript
Copy code
const express = require('express');

Creating a Node.js Application

 1. Set Up the Application:
o Create an app.js file in your project directory.
o Require the necessary modules:

javascript
Copy code
const express = require('express');
const app = express();

2. Define Routes:
o Set up a simple route to handle requests:

javascript
Copy code
app.get('/', (req, res) => {
res.send('Hello, World!');
});

3. Start the Server:

o Listen for incoming requests:

javascript
Copy code
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

4. Run the Application:

o Start the server by running the app.js file:

bash
Copy code
node app.js

o Open a web browser and navigate to http://localhost:3000 to see the "Hello,

World!" message.

Understanding the Node.js Event Model

Node.js uses an event-driven model, where events trigger callback functions. This model is
implemented using an event loop, which continuously checks for new events and executes their
corresponding callbacks.

Adding Work to the Event Queue

You can use functions like setTimeout, setInterval, and process.nextTick to add tasks to the
event queue.

 setTimeout:

javascript
Copy code
 setTimeout(() => {
console.log('This will run after 1 second');
}, 1000);

 setInterval:

javascript
Copy code
setInterval(() => {
console.log('This will run every 2 seconds');
}, 2000);

 process.nextTick:

javascript
Copy code
process.nextTick(() => {
console.log('This will run at the end of the current operation');
});

Implementing Callbacks

Callbacks are functions passed as arguments to other functions and are invoked after the completion
of certain tasks.

 Example with a Timer:

javascript
Copy code
function greet(name, callback) {
console.log(`Hello, ${name}!`);
callback();
}

function afterGreet() {
console.log('This function runs after the greet function');
}

greet('John', afterGreet);

 Example with Asynchronous Code:

javascript
Copy code
const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {

if (err) {
console.error(err);
return;
}
console.log(data);
});

In this example, fs.readFile reads a file asynchronously, and the callback function is executed
after the file reading is complete.