UNIT I • Back-End Frameworks: Concentrate on server-side logic and database interactions.

BASICS OF FULL STACK Examples include Ruby on Rails, Django, and Laravel.

FULL STACK DEVELOPMENT-BASICS

Understanding the Basic Web Development Framework – User – Browser – Webserver –
Backend Services – MVC Architecture – Understanding the different stacks –The role of
Express – Angular – Node – Mongo DB – React Full Stack Development refers to the development of both front end (client side) and back
end(server side) portions of web application.
Full stack web Developers
Full stack web developers have the ability to design complete web applications and websites. They
Introduction to Web Development Frameworks work on the frontend, backend, database and debugging of web applications or websites.
• Web development frameworks are pre-built software libraries that provide a structured Technology Related to Full Stack Development
foundation for creating web applications. Front-end Development
• The main components of any web framework are the user, browser, webserver, and backend
• It is the visible part of website or web application which is responsible for user
services. experience.
• They offer reusable code, tools, and best practices to streamline the development process.
• The user directly interacts with the front end portion of the web application or website.
• Examples: Ruby on Rails, Django, Angular, React, Vue.js, Laravel, etc.
Front-end Technologies
Benefits of Using Web Development Frameworks HTML
• Rapid Development: Frameworks provide pre-built components, reducing developmenttime. • HTML stands for Hyper Text Markup Language. It is used to design the front end
• Consistency: Follow established coding standards and conventions, enhancing codequality and portion of web pages using markup language.
maintainability.
• HTML is the combination of Hypertext and Markup language.
• Scalability: Built-in features for managing large-scale applications.
• Security: Frameworks often come with built-in security mechanisms to mitigate common • Hypertext defines the link between the web pages.
vulnerabilities. • The markup language is used to define the text documentation within tag which
Components of a Web Development Framework defines the structure of web pages.
CSS
Templates: Pre-designed layouts for creating user interfaces.
• Cascading Style Sheets, fondly referred to as CSS, is a simply designed language
Routing: Mapping URLs to specific functions or views.
Database Integration: Tools for interacting with databases efficiently. intended to simplify the process of making web pages presentable.
Middleware: Handling requests and responses between the server and application.
• CSS allows you to apply styles to web pages. More importantly, CSS enables you to
Authentication and Authorization: Managing user access and permissions.
Testing: Built-in tools for automated testing of the application. do this independent of the HTML that makes up each web page.
Session Management: Managing user sessions and data persistence. JavaScript
Caching: Mechanisms to improve performance by storing frequently used data. • JavaScript is a famous scripting language used to create the magic on the sites to make
the site interactive for the user.
Types of Web Development Frameworks • It is used to enhancing the functionality of a website to running cool games and web-
• Full-Stack Frameworks: Provide tools for both the client-side (front-end) and server-side based software.
(back-end) development.
• Front-End Frameworks: Focus on user interface development using languages likeHTML,
CSS, and JavaScript. Examples include React, Angular, and Vue.js.
1 2
Front End Libraries and Frameworks Back-end Technologies
• It refers to the server-side development of web application or website with a
AngularJS:
• AngularJs is a JavaScript open source front-end framework that is mainly used primary focus on how the website works.
to develop single page web applications(SPAs). • It is responsible for managing the database through queries and APIs by client-side
• It is a continuously growing and expanding framework which provides better ways for commands. This type of website mainly consists of three parts front end, back end,
developing web applications. and database.
• It changes the static HTML to dynamic HTML. It is an open source project which The back end portion is built by using some libraries, frameworks, and languages which
can be freely used and changed by anyone. It extends HTML attributes with Directives, are discussed below:
and data is bound with HTML. • PHP
PHP is a server-side scripting language designed specifically for web development.
React.js
Since, PHP code executed on server side so it is called server side scripting language.
• React is a declarative, efficient, and flexible JavaScript library for building user
• C++
interfaces. It is a general purpose programming language and widely used now a days for

• ReactJS is an open-source, component-based front end library competitive programming. It is also used as backend language.

responsible only for the view layer of the application. It is maintained by Facebook. • Java
Java is one of the most popular and widely used programming language and
Bootstrap
• Bootstrap is a free and open-source tool collection for creating responsive websites platform. It is highly scalable. Java components are easily available.

and web applications. • Python

• It is the most popular HTML, CSS, and JavaScript framework for developing Python is a programming language that lets you work quickly and integrate

responsive, mobile-first web sites. systems more efficiently.

jQuery • Node.js
• jQuery is an open source JavaScript library that simplifies the interactions between ➢ Node.js is an open source and cross-platform runtime environment for
an HTML/CSS document, or more precisely the Document Object Model (DOM), executing JavaScript code outside of a browser.
and JavaScript. ➢ NodeJS is not a framework and it’s not a programming language.
• Elaborating the terms, jQuery simplifies HTML document traversing and ➢ We often use Node.js for building back-end services like APIs like Web App or
manipulation, browser event handling, DOM animations, Ajax interactions, and Mobile App.
cross-browser JavaScript development. ➢ It’s used in production by large companies such as Paypal, Uber, Netflix,
SASS Walmart and so on.
• It is the most reliable, mature and robust CSS extension language. It is used to extend
Back End Frameworks
the functionality of an existing CSS of a site including everything from variables,
The list of back end frameworks are: Express, Django, Rails, Laravel, Spring etc.
inheritance, and nesting with ease.
The other back end program/scripting languages are: C#, Ruby, REST, GO etc.
• Some other libraries and frameworks are: Semantic-UI, Foundation, Materialize,
• Structuring the data in efficient way.
Backbone.js, Express.js, Ember.js etc. • Handle request-response of APIs for storing and retrieve data.
3 4
 Security of data is important. • To understand the benefits of utilizing Node.js, MongoDB, and Angular as in web
• Note: JavaScript is essential for all stacks as it is dominant technology on Web. framework, this section provides an overview of the basic components of most
Database websites.
Database is the collection of inter-related data which helps in efficient retrieval, • The main components of any given web framework are: -
insertion and deletion of data from database and organizes the data in the form of tables, i. User,
views, schemas, reports etc. ii. Browser,
Oracle iii. Webserver,
Oracle database is the collection of data which is treated as a unit. The
iv. Backend services.
purpose of this database is to store and retrieve information related to the query. It is a
database server and used to manages information.
• The components are described in a top-down manner from user down to
MongoDB
backend services.
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.

I. UNDERSTANDING THE BASIC WEB DEVELOPMENT FRAMEWORK

What is Framework?
• Framework is a platform for developing applications which provides a foundation on
Figure 1.2 The components of a basic website/web application
which software applications can be built.
• The front end frameworks are the software packages that provide-The Reusable code User
modules, standardized front end technologies and Readymade interface blocks for • Users are a fundamental part of all websites; they are, after all, the reason
making the front end development faster and simple. websites exist in the first place.
Basic concept: • User expectations define the requirements for developing a good website, and
• A web development framework is a collection of tools, libraries and technologies that these expectations have changed a lot over the years.
are used to create web applications and websites. • Users used to accept the slow, cumbersome experience of the “world-wide-wait,”
• It provides a basic structure and set of conventions for developers to build web but no longer.
applications quickly and efficiently. • They expect websites to behave closer to applications installed on their computers

5 6
 and mobile devices. form.
• The user role in a web framework is to sit on the visual output and interaction input iii. AJAX: Asynchronous JavaScript and Extensible markup language,
In AJAX, the GET or POST request is done directly by
of webpages.
JavaScript runni
• That is, users view the results of the web framework processing and then provide
ng in the browser.
interactions using mouse clicks, keyboard input, and swipes and taps on mobile
• The screen that the user actually views and interacts with is often made up of
devices.
several different pieces of data retrieved from the webserver.
Browser
Browser is an application for accessing websites. User interacts with the browser in • The browser reads data from the initial URL and then renders the HTML document
the web development framework. to build a Document Object Model (DOM).
The browser plays three roles in the web framework, They are: Difference between GET and POST requests
1. It provides communication to and from the webserver. • When a user submits his request using the GET method then the URL string displays
2. It interprets the data from the server and renders it into the view that the the request submitted by the user. But if the POST method is used then URL string
user actually sees. does not show the submitted contents.
3. The browser handles user interaction through the keyboard, • The common browsers are Internet Explorer, Mozilla Firefox, Google Chrome,
mouse, touchscreen, or other input device and takes the appropriate action. Safari.
Browser to Webserver Communication Rendering the bowser view :
i. Browser-to-webserver communication consists of a series of requests using the
• The browser reads data from initial URL and then renders the HTML
HTTP and HTTPS protocols.
document to build the Document Object Model (DOM).
ii. Hypertext Transfer Protocol (HTTP) defines communication between the browser
• The DOM is a tree structured object. The browser interprets each DOM
and the webserver.
element and renders it to user's screen to build a webpage view.
iii. It is a request/response model.
• For example, the document will have html as a child, and html will have
iv. HTTP defines what types of requests can be made by the user as well as the format
head and body as children, and body may have div, p, or other elements as
of those requests and the HTTP response.
children,
v. HTTPS adds an additional security layer, SSL/TLS, to ensure secure connections by
like this:
requiring the webserver to provide a certificate to the browser. document
vi. The user then can determine whether to accept the certificate before allowing the
connection.
vii. The browser makes three main types of requests to the server:
i. GET: The GET request is typically used to retrieve data from the
server, such as .html files, images, or JSON data.
ii. POST: POST requests are used when sending data to the server,
such as adding an item to a shopping cart or submitting a web
7 8
• Browsers get different types of data from multiple web server requests to build the web page which is desired by the client
webpage. • The webserver’s main focus is handling requests from browsers. As described
• The browser interprets each DOM element and renders it to the user’s screen to build earlier, the browser may request a document, post data, or perform an AJAX
the webpage view. request to get a data. The webserver uses the HTTP headers as well as the
• The browser often ends up getting various types of data from multiple webserver URL to determine what action to take. This is where things get different
requests to build the webpage. depending on the webserver, configuration, and technologies used.
The following are the most common types of data the browser uses to render the final user • Most out-of-the-box webservers, such as Apache and IIS, are made to serve
view as well as define the webpage behavior. static files such as .html, .css, and media files. To handle POST requests that
• HTML files: These provide the fundamental structure of the DOM. modify server data and AJAX requests to interact with backend services,

• CSS files: These define how each of the elements on the page is to be webservers need to be extended with server-side scripts.

styled; for example, font, color, borders, and spacing. • A server-side program is really anything that can be executed by the

• Client-side scripts: These are typically JavaScript files. They can provide webserver to perform the task the browser is requesting. These can be written

added functionality to the webpage, manipulate the DOM to change the look in PHP, Python, C, C++, C#, Java, ... the list goes on and on. Webservers

of the webpage, and provide any necessary logic required to display the page such as Apache and IIS provide mechanisms to include server-side scripts

and provide functionality. and then wire them up to specific URL locations requested by the browser.

• Media files: Image, video, and sound files are rendered as part of the webpage. Functions of web server
Various functions of web server are
• Data: Any data, such as XML, JSON, or raw text, can be provided by the
1. The web servers accept the requests from the web browsers.
webserver as a response to an AJAX request.
2. The user request is processed by the web server.
• 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 3. The web servers respond to the users by providing the services which

example, cookies are contained in the HTTP headers. The HTTP headers also they demand

define the type of data in the request as well as the type of data expected to be for over the web browsers.

returned back to the browser. 4. The web servers serve the web based applications.

User Interaction 5. The DNS translates the domain names into the IP addresses.

• The user interacts with the browser via input devices such as mice, 6. The servers verify given address exists, find necessary files, run

keyboards, and touchscreens. appropriate scripts, exchange cookies if necessary and return back to the
browser.
• The browser has an elaborate event system that captures these users input
events and then takes the appropriate action. 7. Some servers actively participate in session handling techniques.

• Actions vary from displaying a popup menu to loading a new document Apache
• It is an excellent server because of its two important features: Reliability and
from the server to executing client-side JavaScript.
Efficiency.
Webserver
• Secondly it is more popular because it is an open source software. That
• Web server is a special type of server to which the web browser submits the request of a
9 10
 means it is freely available to anybody. Apache web server is best suitable for in the database, the server-side script connects to the database and updates
UNIX systems but it can also be used on window box the apache web server the data.
can be configured as per the requirements using the file httpd.conf. This MVC ARCHITECTURE
file is present in the Apache software package. The Model-View-Controller (MVC) is an architectural pattern that separates an
IIS application into three basic components:
• Model
The internet in information services or internet information server is a kind of web
• View
server provided by Microsoft. This server is most popular on the Windows
• controller.
platform.
Each of these components are built to handle specific development aspects of an
Differnces between Apache and IIS servers –
application. MVC is one of the most frequently used industry-standard web development
Sr.No Apache web server IIS web server framework to create scalable and extensible projects.

Apache web server is useful on IIS web server is used on windows

1. both unix based systems and on platform.
windows platform.

It is a vendor specific product and can be

2. It is an open source product.
used on windows products only.

For the IIS server, the behavior is

controlled by modifying the window
The Apache web server can be based management programs called IIS
3. controlled by editing the snap in. We can access IIS snap-in
configuration file httpd.conf
through the Control-Panel-
>Administrative Tools.

Backend Services
• Backend services are services that run behind the webserver and provide data Model:
used to build responses to the browser.
• This part of the architecture is responsible for managing the data of the application
• The most common type of backend service is a database that stores domain.
information.
• When a request comes in from the browser that requires information from • This module responds to requests for information about its state (usually from the
the database or other backend service, the server-side script connects to view).
the database, retrieves the information, formats it, and then sends it back • This model gives instructions to the controller to update when the response is made.
to the browser. • In event — driven systems, the model notifies observers (usually views) when the
information changes so that they can react.
• Similarly, when data comes in from a web request that needs to be stored
11 12
 In MVC Architecture,
▪ Model represents the data
▪ View is the user interface
▪ Controller is the request handler.

Features of MVC framework

1. Separation of logic
There is a separation of application tasks such as input logic, business logic
and UI logic. This makes testing and debugging easy. modification in one
component does not affect the other.
2. Ability to provide multiple views
In MVC model, we can create multiple views.
3. Faster development process
MVC supports rapid and parallel development. If an MVC model is used
to develop any particular we application, then it is possible that one
programmer can work on the view while the other can work on the controller
View: to create the business logic of the web application.
▪ This part takes care of the presentation of data.
4. Returns data without formatting
▪ The data is presented in desired format with help of view. MVC pattern returns data without applying any formatting. Hence, the
▪ renders the model into a form suitable for interaction, typically a user interface same components can be used and called for use with an interface.
element. 5. Customization
▪ Multiple views can exist for a single model for various purposes. It is an extensible and pluggable framework. MVC framework are designed
▪ A viewport typically has one to one correspondence with a display surface and knows so that the components can be placed or customized.
how to render to it. Brief Introduction to the MERN Stack
The MERN Stack is a JavaScript Stack that is used for easier and faster
Controller:
deployment of full-stack web applications.
• The controller receives input, validates it and then performs business operations that
modify the state of the data model.

• The controller basically responds to user requests and performs interaction with the
model receives user input and initiates a response by making calls on model objects.
• A controller accepts input from the user and instructs the model and viewport to perform
actions based on that input.
Fig 1.4 MERN Stack

13 14
 The MERN stack consists of the following technologies: ➢ LAMP Stack: Linux, Apache, MySQL and PHP.
• MongoDB: A document-based open source database. UNDERSTANDING THE NODE.JS-TO-ANGULAR STACK COMPONENTS
• Express: A web application framework for Node.js.
• React: A JavaScript front-end library for building user interfaces. Node.js-to-Angular stack comprised of MongoDB, Express, Angular, and Node.js.
• Node.js: JavaScript run-time environment that executes JavaScript code In the Node.js-to-Angular stack,
outside of a browser (such as a server). • Node.js provides the fundamental platform for development. The backend
It is also common to use Mongoose, which is a simple, schema-based solution to model services and server-side scripts are all written in Node.js.
application data. • MongoDB provides the data store for the website but is accessed via a MongoDB
MVC and MERN driver Node.js module.
MERN isn’t an MVC framework in the traditional sense, because it spans both the server • The webserver is defined by Express, which is also a Node.js module.
and the browser. MVC can also be achieved by sticking to server-side templating in Node, and • The view in the browser is defined and controlled using the Angular framework.
just sending the HTML to the browser and treating the browser as the View layer i.e. doing • Angular is an MVC framework where the model is made up of JSON or
things the way things have always been done forever. JavaScript objects, the view is HTML/CSS, and the controller is made up of
Although, when React is combined with a javascript backend, then it is MVC. React serves Angular JavaScript.
as the “V” in the MVC
• Mongoose’ models defines the data part. This is where we will store all of the crucial
data our application needs to function.
• Express & Node.js does all the functional programming and will be used to write
the Business Logic Tier (controller). This tier represents the Application Server that
will act as a bridge of communication for the Client and Database. This tier will
serve the React components to the user’s device and accept HTTP requests from the
user and follow with the appropriate response.
• React serves as the “V” in the MVC. Our Client tier (View) will be written in
JavaScript, HTML, and CSS, using ReactJS as the framework. This level of the
architecture is what the user will interact with to access the features of our
application.
UNDERSTANDING THE DIFFERENT STACKS
Popular Stacks Basic diagram showing where Node.js, Express, MongoDB, and Angular fit

➢ MEAN Stack: MongoDB, Express, AngularJS and Node.js. in the web paradigm

➢ 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.
15 16
Node.js Time:
• Node.js is a development framework based on Google’s V8 JavaScript engine. In only a few minutes, we can install Node.js and have a working webserver.
Therefore, Node.js code is written in JavaScript and then compiled into machine MongoDB
code by V8 to be executed. • MongoDB is a part of backend services.
• Many of your backend services can be written in Node.js, as can the server-side • MongoDB is an agile and scalable NoSQL database.
scripts and any supporting web application functionality. • The name Mongo comes from “humongous.”
• The nice thing about Node.js is that it is all just JavaScript, so you can easily take • It is basically a scalable NoSQL database. The data is stored in the database as a form
functionality from a client-side script and place it in a server-side script. Also, the of JSON objects.
webserver can run directly within the Node.js platform as a Node.js module, so it • MongoDB provides great website backend storage for high traffic websites that need to
makes it much easier than, say, Apache at wiring up new services or server-side store data such as user comments, blogs, or other items because it is fast, scalable,
scripts. and easy to implement.
JavaScript end-to-end: • Node.js supports a variety of DB access drivers, so the data store could just as
• One of the biggest advantages to Node.js is that it allows you to write both server- and easily be MySQL or some other database.
client-side scripts in JavaScript. • However, the following are some of the reasons that MongoDB really fits in the
• There have always been difficulties in deciding where to put scripting logic. Node.js stack well:
• Too much on the client side makes the client cumbersome and unwieldy, but too much Document orientation:
The Data is stored in the document form in the MongoDB.
on the server side slows down web applications and puts a heavy burden on the
High performance:
webserver.
• With Node.js you can take JavaScript written on the client and easily adapt it for the • MongoDB is one of the highest performing database.

server and vice versa. Also, your client developers and server developers will be • Especially today when more and more people interact with websites, it is

speaking the same language. important to have a backend that can support heavy traffic.

Event-driven scalability: High availability:

• Node.js applies a different logic to handling web requests. Rather than having • MongoDB’s replication model makes it easy to maintain scalability while

multiplethreads waiting to process web requests, they are processed on the same keeping high performance. That means it creates multiple copies of the

thread using a basic event model. data and sends these copies to a different server so that if one server
fails, then the data is retrieved from another server.
Extensibility:
High scalability:
• Node.js has a great following and an active development
community. New modules to extend Node.js functionality are being • MongoDB’s structure makes it easy to scale horizontally by sharing the data

developed all the time. across multiple servers.

No SQL injection:
• 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. • MongoDB is not susceptible to SQL injection because objects are stored as
objects, not using SQL strings.
17 18
 • Angular provides all the functionality needed to handle user input in the browser,
Express
manipulate data on the client side, and control how elements are displayed in the
• Express is used for server side development in full stack.
browser view.
• As it is running in node.js, it is easy to configure, implement and
• The entire theory behind Angular is to provide a framework that makes it
control the web application. easy to implement web applications using the MVC framework.
• The Express module acts as the webserver in the Node.js-to-Angular stack. • Other JavaScript frameworks could be used with the Node.js platform, such
• The fact that it is running in Node.js makes it easy to configure, implement, and as
control.
• Backbone, Ember, and Meteor. However, Angular has the best design, feature
• The Express module extends Node.js to provide several key components for set, and trajectory at this writing.
handling web requests.
Benefits of Angular:
For example, the Express module provides the ability to easily set up destination routes
(URLs) for users to connect to. Data binding: Angular has a clean method to bind data to HTML elements
• It also provides great functionality on working with the HTTP request and using its powerful scope mechanism.
response objects, including things like cookies and HTTP headers. Extensibility: The Angular architecture allows you to easily extend almost every aspect

• The following is a partial list of the valuable features of Express: of the language to provide your own custom implementations.

Route management: Clean: Angular forces you to write clean, logical code.
Express makes it easy to define routes (URL endpoints) that tie directly Reusable code: The combination of extensibility and clean code makes it easy to write
to Node.js script functionality on the server. reusable code in Angular.
Error handling:
Support: Google is investing a lot into this project, which gives it an advantage over
Express provides built-in error handling for documents not found and other
errors. other similar initiatives.

Easy integration: Compatibility: Angular is based on Type Script, which makes it easier to begin
An Express server can easily be implemented behind an existing reverse integrating Angular into your environment and to reuse pieces of your existing code within
proxy system such as Nginx or Varnish. This allows it to be easily the structure of the Angular framework.
integrated into your existing secured system. REACT JS
Cookies • ReactJS is a declarative, efficient, and flexible JavaScript library for building
Express provides easy cookie management.
reusable UI components.
Session and cache management
Express also enables session management and cache management. • It is an open-source, component-based front end JavaScript library. This library
responsible only for the view layer of the application. That means this
JavaScript is for building for interfaces.
Angular • It was created by Jordan Walke, who was a software engineer at Facebook.
• Angular is a client-side framework developed by Google. • It was initially developed and maintained by Facebook and was later used in
• It is written in TypeScript. its products like WhatsApp & Instagram.
19 20
• Today, most of the websites are built using MVC (model view controller)
architecture. In MVC architecture,
• React is the 'V' which stands for view, whereas the architecture is provided
by the Redux or Flux.
• A ReactJS application is made up of multiple components, each component
responsible for outputting a small, reusable piece of HTML code.
• The components are the heart of all React applications. These Components
can be nested with other components to allow complex applications to be
built of simple building blocks.
• ReactJS uses virtual DOM based mechanism to fill data in HTML DOM. The
virtual DOM works fast as it only changes individual DOM elements instead of
reloading complete DOM every time.
• To create React app, we write React components that correspond to various
elements. We organize these components inside higher level components which
define the application structure.

*****************

21