INTRODUCTION TO FULL STACK DEVELOPMENT:

Full Stack Development refers to the development of both front end(client side) and back end(server side) portions of web
application.

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, Express.js, Ember.js etc.
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.
Popular Stacks:
 MEAN Stack: MongoDB, Express, AngularJS and Node.js.

 MERN Stack: MongoDB, Express, ReactJS and Node.js

 Django Stack: Django, python and MySQL as Database.

 Rails or Ruby on Rails: Uses Ruby, PHP and MySQL.

 LAMP Stack: Linux, Apache, MySQL and PHP.

 NodeJS
Node.js was created in 2009 by Ryan Dahl.
Node.js is an open source, cross-platform runtime environment and library that is used for
running web applications outside the client’s browser.

It is used for server-side programming, and primarily deployed for non-blocking, event-driven
servers, such as traditional web sites and back-end API services, but was originally designed with
real-time, push-based architectures in mind. Every browser has its own version of a JS engine, and
node.js is built on Google Chrome’s V8 JavaScript engine. Sounds a bit complicated, right?
In simple terms, what this means is that entire sites can be run using a
unified ‘stack’, which makes development and maintenance quick and
easy, allowing you to focus on meeting the business goals of the project.
The fact that Node.js is open source means that it is free to use and
constantly being tweaked and improved by a global community of
developers.
An important thing to understand about Node.js is that it is actually
neither a framework or a library - as with traditional application
software -, but JavaScript a runtime environment.

A runtime environment (sometimes shortened to RTE) contains Web

API’s that a developer can access to build a code, and a JavaScript
engine that parses that code. This makes it lightweight, flexible and
easy to deploy, all features that will help to optimize and speed up your
application project.
Datatypes:
Node.js contains various types of data types similar to JavaScript.
Boolean
Undefined
Null
String
Number

Loose Typing:
Node.js supports loose typing, which means you don’t need to specify what type of information will be stored in
a variable in advance. We use the var and let keywords in Node.js declare any type of variable. Examples are
given below:
// Variable store number data type
let a = 10;
console.log(typeof a);

// Variable store string data type

a = “NodeJS";
console.log(typeof a); Output:
// Variable store Boolean data type
Number
a = true; string
console.log(typeof a); boolean
// Variable store undefined (no value) data type
undefined
a = undefined;
console.log(typeof a);
Objects & Functions:
Node.js objects are the same as JavaScript objects i.e. the objects are similar to variables and it contains many values which are written as name:
value pairs. Name and value are separated by a colon and every pair is separated by a comma.
Example:
let company = {
Name: “abc",
Address: “Chandigarh",
Contact: "+91000000000",
Email: "abc@cumail.in"
};

// Display the object information

console.log("Information of variable company:", company);

// Display the type of variable

console.log("Type of variable company:", typeof company);
Output:

Information of variable company: {

Name: ‘abc’,
Address: ‘Chandigarh’,
Contact: ‘+9100000000’,
Email: 'abc@cumail.in’ }
Type of variable company: object
Functions:
Node.js functions are defined using the function keyword then the name of the function and parameters which are passed in the function. In
Node.js, we don’t have to specify datatypes for the parameters and check the number of arguments received. Node.js functions follow every
rule which is there while writing JavaScript functions.
Example:
function multiply(num1, num2) {

// It returns the multiplication of num1 and num2

return num1 * num2;}
// Declare variable
let x = 2;
let y = 3;
// Display the answer returned by
// multiply function
console.log("Multiplication of", x, "and", y, "is", multiply(x, y));
Simple Program Using NodeJS:
Example: This example create a Hello World web-based
application using Node.js. Create a firstprogram.js file
containing the following code.
// Require http header
var http = require('http');

// Create server
http.createServer(function (req, res) {

// HTTP Status: 200 : OK

// Content Type: text/html
res.writeHead(200, {'Content-Type':
'text/html'});

// Send the response body as "Hello World!"

res.end('Hello World!');

}).listen(8080);
Run the file on Node.js command prompt using command node firstprogram.js and type http://127.0.0.1:8080/ in
a web browser to see the output.
Node.js REPL (READ, EVAL, PRINT, LOOP)
REPL (READ, EVAL, PRINT, LOOP) is a computer environment similar to Shell (Unix/Linux) and command
prompt. Node comes with the REPL environment when it is installed. System interacts with the user through
outputs of commands/expressions used. It is useful in writing and debugging the codes. The work of REPL can
be understood from its full form:
Read : It reads the inputs from users and parses it into JavaScript data structure. It is then stored to memory.
Eval : The parsed JavaScript data structure is evaluated for the results.
Print : The result is printed after the evaluation.
Loop : Loops the input command. To come out of NODE REPL, press ctrl+c twice
Getting Started with REPL:
To start working with REPL environment of NODE; open up the terminal (in case of UNIX/LINUX) or the
Command prompt (in case of Windows) and write node and press ‘enter’ to start the REPL.
 The REPL has started and is demarcated by the ‘>’ symbol. Various operations can be performed on the REPL. Below are
some of the examples to get familiar with the REPL environment.
Example: Performing Arithmetical operations in REPL
Example: Performing operations using libraries of NODE. MATH library is being used in below example.
Note: using ‘math’ shows error as the library is referenced as ‘Math’ in NODE and not ‘math’.
Example: Using variables in REPL. The keyword var is used to assign values to variables.
Node.js REPL Commands

Commands Description
ctrl + c It is used to terminate the current command.
ctrl + c twice It terminates the node repl.
ctrl + d It terminates the node repl.
up/down keys It is used to see command history and modify
previous commands.
tab keys It specifies the list of current command.
.help It specifies the list of all commands.
.break It is used to exit from multi-line expressions.
.clear It is used to exit from multi-line expressions.
.save filename It saves current node repl session to a file.
.load filename It is used to load file content in current node
repl session.
NODE JS Modules:
In Node.js, Modules are the blocks of encapsulated code that communicate with an external
application on the basis of their related functionality. Modules can be a single file or a collection of
multiple files/folders. The reason programmers are heavily reliant on modules is because of their
reusability as well as the ability to break down a complex piece of code into manageable chunks.
Modules are of three types:
Core Modules
local Modules
Third-party Modules
1. Core Modules: Node.js has many built-in modules that are part of the platform and come with
Node.js installation. These modules can be loaded into the program by using the required function.
Syntax:
const module = require('module_name');

The require() function will return a JavaScript type depending on what the particular module returns. The following
example demonstrates how to use the Node.js http module to create a web server.

const http = require('http');

http.createServer(function (req, res) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write('Welcome to the world of backend Technologies!');
res.end();
}).listen(5000);
In the above example, the require() function returns an object because the Http module returns its functionality as
an object. The function http.createServer() method will be executed when someone tries to access the computer on
port 5000. The res.writeHead() method is the status code where 200 means it is OK, while the second argument is
an object containing the response headers.

The following list contains some of the important core modules in Node.js:
 Core Modules Description
http creates an HTTP server in Node.js.

assert set of assertion functions useful for testing.

fs used to handle file system.

path includes methods to deal with file paths.

provides information and control about the current Node.js

process
process.

os provides information about the operating system.

querystring utility used for parsing and formatting URL query strings.

url module provides utilities for URL resolution and parsing.

Local Modules:
Unlike built-in and external modules, local modules are created locally in your Node.js application. Let’s create a simple calculating module that
calculates various operations. Create a eval.js file that has the following code:
Filename: eval.js
exports.add = function (x, y) {
return x + y;
};
exports.sub = function (x, y) {
return x - y;
};
exports.mult = function (x, y) {
return x * y;
};
exports.div = function (x, y) {
return x / y; };
Since this file provides attributes to the outer world via exports, another file can use its exported functionality using the require()
function.

const calculator = require('./eval');

let x = 50, y = 10;

console.log("Addition of 50 and 10 is "

+ calculator.add(x, y));

console.log("Subtraction of 50 and 10 is "

+ calculator.sub(x, y));
console.log("Multiplication of 50 and 10 is "
+ calculator.mult(x, y));
console.log("Division of 50 and 10 is "
+ calculator.div(x, y));
Step to run this program: Run the index.js file using the following command:
node index.js
Output:
Addition of 50 and 10 is 60
Subtraction of 50 and 10 is 40
Multiplication of 50 and 10 is 500
Division of 50 and 10 is 5
Third-party modules:

Third-party modules are modules that are available online using the Node Package Manager(NPM).
These modules can be installed in the project folder or globally. Some of the popular third-party
modules are Mongoose, express, angular, and React.

Example:
npm install express
npm install mongoose
npm install -g @angular/cli
Event Loop in NODE JS:
An event loop is an event-listener which functions inside the Node JS environment and is always ready
to listen, process, and output for an event.
An event can be anything from a mouse click to a key press or a timeout.

What are Synchronous and Asynchronous programming?

Synchronous programming:
means that the code runs in the sequence it is defined. In a synchronous program, when a
function is called and has returned some value, only then will the next line be executed.

Let's understand with this an example:

const listItems = function(items) {
items.forEach(function(item) {
console.log(item)
})
}

const items = ["Buy milk", "Buy coffee"]

listItems(items)
The output will look like this:

"Buy milk"
"Buy coffee"

In this example, when the listItems(items) function is called, it will loop through the array of
items. The console.log(item) function gets called first for the first item of the array and it
prints "Buy milk". Then again console.log(item) gets executed and this time it passes the
second item of the array and prints "Buy coffee".

So you can say that the function was executed in the sequence it was defined.
Asynchronous programming:
on the other hand, refers code that doesn't execute in sequence. These functions are performed not
according to the sequence they are defined inside a program but only when certain conditions are met.

For example, setTimeOut() performs a task after a delay of a certain predefined number of miliseconds.

setTimeOut(function(){
return( console.log("Hello World!") )
}, 3000)

These functions do not run line by line but only when they are required to run,
irrespective of the function's declaration. In this case, the function runs automatically
after 3 seconds when all synchronous functions have been executed.
Stream and its types in Node.js:
A stream is a way of data handling that helps us to obtain a sequential output by
reading or writing the input (files, network communications, and any kind of end-
to-end information exchange). That is, they let you read data from a source or write
it to a destination or perform any other specific task uninterruptedly and
constantly. The stream is not a unique concept to Node.js and it is a part of Unix for
quite a long time. A pipe operator is used to make the programs react with each
other by passing streams. Hence, the Node.js stream is used as a basis for all
streaming APIs.
Example:

When you are streaming YouTube, Netflix, or Spotify then, instead of the whole content
downloading all at once, it downloads in small chunks while you keep browsing.
Another example can be chatting on Facebook or WhatsApp where the data is
continuously flowing between two people. This is because instead of reading all the
data at once in the memory the stream processes it into smaller pieces to make large
files easily readable. It is useful because some files are larger than the available free
space that you have on your device. Hence, the stream makes such files readable.
Advantages of Stream:
Memory efficiency:
Stream is memory (spatial) efficient because they enable you to download files in smaller chunks instead
of a whole in the memory before you can process it thus, saving space.
Time efficiency:
Stream is time-efficient because you start processing the data in smaller chunks so the procedure starts
earlier compared to the general way, where you have to download the whole data to be able to process
it. Hence, this early processing saves a lot of time.
Composable data:
Data is composed because of the piping ability of the streams which lets them connect together in spite
of however heavy the codes are. It means that the process of one input getting piped to output keeps on
happening.
Types of Streams:
Readable stream:
It is the stream from where you can receive and read the data in an ordered fashion. However, you are not allowed
to send anything. For example fs.createReadStream() lets us read the contents of a file.
Writable stream:
It is the stream where you can send data in an ordered fashion but you are not allowed to receive it back. For
example fs.createWriteStream() lets us write data to a file.
Duplex stream:
It is the stream that is both readable and writable. Thus you can send in and receive data together. For example
net.Socket is a TCP socket.
Transform stream:
It is the stream that is used to modify the data or transform it as it is read. The transform stream is basically a
duplex in nature. For example, zlib.createGzip stream is used to compress the data using gzip.
About Node.js file system:
To handle file operations like creating, reading, deleting, etc., Node.js provides an inbuilt module called FS (File
System). Node.js gives the functionality of file I/O by providing wrappers around the standard POSIX functions.
All file system operations can have synchronous and asynchronous forms depending upon user requirements. To
use this File System module, use the require() method:
Var fs = require(‘fs’);

Common use for File System module:

Read Files
Write Files
Append Files
Close Files
Delete Files
Open a File:
The fs.open() method is used to create, read, or write a file. The fs.readFile() method is only for reading the
file and fs.writeFile() method is only for writing to the file, whereas fs.open() method does several
operations on a file. First, we need to load the fs class which is a module to access the physical file
system.
Syntax:
fs.open(path, flags, mode, callback)
Parameters:
path: It holds the name of the file to read or the entire path if stored at other locations.
flags: Flags indicate the behavior of the file to be opened. All possible values are ( r, r+, rs, rs+, w, wx,
w+, wx+, a, ax, a+, ax+).
mode: Sets the mode of file i.e. r-read, w-write, r+ -readwrite. It sets to default as readwrite.
err: If any error occurs.
data: Contents of the file. It is called after the open operation is executed.
Example:
Let us create a js file named main.js having the following code to open a file input.txt for reading and writing.
var fs = require("fs");

// Asynchronous - Opening File

console.log("opening file!");
fs.open('input.txt', 'r+', function(err, fd) {
if (err) {
return console.error(err);
}
console.log("File open successfully");
});
Output:
opening file!
File open successfully

Reading a File:
The fs.read() method is used to read the file specified by fd. This method reads the entire file into the buffer.
Syntax:
fs.read(fd, buffer, offset, length, position, callback)
Parameters:
fd: This is the file descriptor returned by fs.open() method.
buffer: This is the buffer that the data will be written to.
offset: This is the offset in the buffer to start writing at.
length: This is an integer specifying the number of bytes to read.
position: This is an integer specifying where to begin reading from in the file. If the position is null, data
will be read from the current file position.
callback: It is a callback function that is called after reading of the file. It takes two parameters:
 err: If any error occurs.
 data: Contents of the file.
Example: Let us create a js file named main.js having the following code:

var fs = require("fs"); if (err){

var buf = new Buffer(1024); console.log(err);
}
console.log("opening an existing file"); console.log(bytes + " bytes read");
fs.open('input.txt', 'r+', function(err, fd) {
if (err) { // Print only read bytes to avoid junk.
return console.error(err); if(bytes > 0){
} console.log(buf.slice(0, bytes).toString());
console.log("File opened successfully!"); }
console.log("reading the file"); });
fs.read(fd, buf, 0, buf.length, 0, function(err, bytes){ });
Output:

opening an existing file

File opened successfully!
reading the file
40 bytes read
Node JS – A complete Backend Run time environment.
Node.js fs.readFile() Method:
The fs.readFile() method is an inbuilt method which is used to read the file. This method read the entire file into
buffer. To load the fs module we use require() method. For example: var fs = require(‘fs’);
Syntax:
fs.readFile( filename, encoding, callback_function )

Parameters: The method accept three parameters as mentioned above and described below:
filename: It holds the name of the file to read or the entire path if stored at other location.
encoding: It holds the encoding of file. Its default value is ‘utf8’.
callback_function: It is a callback function that is called after reading of file. It takes two parameters:
 err: If any error occurred.
 data: Contents of the file.
Return Value: It returns the contents/data stored in file or error if any.
Below examples illustrate the fs.readFile() method in Node.js: Example:

var fs = require('fs');

Output:
// Use fs.readFile() method to read the file
fs.readFile('Demo.txt', 'utf8', function(err, data){
readFile called
undefined
// Display the file content
console.log(data);
});

console.log('readFile called');
Node.js Utility Module:
The Util module in node.js provides access to various utility functions.

Syntax:

const util = require('util');

There are various utility modules available in the node.js module library. The modules are extremely useful in
developing node-based web applications. Various utility modules present in node.js are as follows:

OS Module:
Operating System-based utility modules for node.js are provided by the OS module.
Syntax:
const os = require('os');
Example:
const os = require("os");

// Display operating System type

console.log('Operating System type : ' + os.type());
// Display operating System platform
console.log('platform : ' + os.platform());
// Display total memory
console.log('total memory : ' + os.totalmem() + " bytes.");
// Display available memory
console.log('Available memory : ' + os.availmem() + " bytes.");
Path Module:
The path module in node.js is used for transforming and handling various file paths.
Syntax:
const path = require('path');
Example:
// Require path
const path = require('path');
// Display Resolve
console.log('resolve:' + path.resolve('paths.js'));
// Display Extension
console.log('extension:' + path.extname('paths.js'));
DNS Module:
DNS Module enables us to use the underlying Operating System name resolution functionalities. The actual DNS lookup is
also performed by the DNS Module. This DNS Module provides an asynchronous network wrapper. The DNS Module can be
imported using the below syntax.

Syntax:
const dns = require('dns');

Example:
// Require dns module
const dns = require('dns');

// Store the web address

const website = 'www.nodejs.org'; Output:

Address of www.Nodejs.org is "203.92.39.72“

// Call lookup function of DNS family: IPv4
dns.lookup(website, (err, address, family) => {
console.log('Address of %s is %j family: IPv%s',
website, address, family);
});
Net Module:
Net Module in node.js is used for the creation of both client and server. Similar to DNS Module this module also provides an asynchronous
network wrapper.
Syntax:
const net = require('net');
Example: This example contains the code for the server side.
// Require net module
const net = require('net');
const server = net.createServer(function (connection) {
console.log('client connected'); connection.on('end', function () {
console.log('client disconnected');
});
connection.write('Hello World!\r\n'); connection.pipe(connection);
});
server.listen(8080, function () {
console.log('server listening');
});
Example: This example is containing the client side in the net Module.
const net = require('net');
const client = net.connect(8124, function () {
console.log('Client Connected');
client.write(‘Node Net Module\r\n'); Output:
});
Client Connected
client.on('data', function (data) { Node Net Module
console.log(data.toString()); Server Disconnected

client.end();
});
client.on('end', function () {
console.log('Server Disconnected');
});
Node.js HTTP Module:
To make HTTP requests in Node.js, there is a built-in module HTTP in Node.js to transfer data over the HTTP. To use the HTTP
server in the node, we need to require the HTTP module. The HTTP module creates an HTTP server that listens to server ports
and gives a response back to the client.
Syntax:
const http = require('http');

Example 1:

In this example, we can create an HTTP server with the help of http.createServer() method.
const http = require('http');
// Create a server
http.createServer((request, response) => {
// Sends a chunk of the response body
response.write('Hello World!'); //Prints output on browser.

// Signals the server that all of the response headers and body have been sent
response.end();
}).listen(3000); // Server listening on port 3000
console.log("Server started on port 3000"); //Prints output on terminal.
To make requests via the HTTP module http.request() method is used.
Syntax:
http.request(options[, callback])
Example 2: In this example, we will see to make requests via the HTTP module http.request() method.
const http = require('http');
let options = {
host: 'www.chandigarhuniverisity.org',
path: '/courses',
method: 'GET'
};
// Making a get request to 'www.chandigarhuniversity.org'
http.request(options, (response) => {
// Printing the statusCode
console.log(`STATUS: ${response.statusCode}`);
}).end();
 Express:
Express.js, commonly referred to as Express, is a fast, un opinionated, and minimalist web application
framework for Node.js. It provides a set of features and tools that simplify the process of building web
applications and APIs. Express.js is one of the most popular and widely used frameworks in the Node.js
ecosystem.
Key features of Express.js include:
Routing:
Express allows you to define routes for different URLs and HTTP methods (GET, POST, PUT, DELETE, etc.). These routes
determine how the server responds to incoming requests.

Middleware:
Express uses middleware functions to process and modify incoming requests before they reach the final route handler.
Middleware can perform tasks like parsing request bodies, handling authentication, logging, and more.

Template Engines:
While not included by default, Express can be easily integrated with various template engines like EJS, Handlebars, or Pug.
These engines allow you to generate dynamic HTML pages based on data and templates.
Static File Serving:
Express can serve static files such as images, stylesheets, and client-side JavaScript files, making it convenient to
deliver front-end resources.
Error Handling:
Express provides mechanisms for handling errors gracefully, such as defining error-handling middleware that will
be triggered when an error occurs during request processing.
REST API Development:
Express is commonly used to build RESTful APIs due to its flexibility and ease of defining routes and handling
JSON data.
Middleware Ecosystem:
Express has a rich ecosystem of third-party middleware modules available through npm. These modules can add
various functionalities to your application, from authentication and security to caching and compression.
Express.js provides a balance between being lightweight and providing enough tools to build
robust web applications. It's often used in combination with other libraries and tools to create
full-fledged web applications, RESTful APIs, and more complex server-side solutions using
Node.js.
THANK YOU
Mr. Arshid Ahmad Wani
Assistant Professor
Department of UIC