1-2

Full Stack Web Development

Basics of Full Stac,
1.1 Understanding the Basic Web Development Framework
What is Framework ?

" Framework is a platform for developing applications which provides a

which software applications can be built. The front end frameworks are the foundation
packages that provide - software
The reusable code modules,
o Standardized front end technologies and
Ready made interface blocks for making the front end development faster an:
simple.
Basic concept : A web development framework is a collection of tools, libraries and
technologies that are used to create web applications and websites. It providesa basic structure and
setof conventions for developers to build web applications quickly and efficiently.
Following are some important reason which indicate why do we use web frameworks -
1. Saves time : The most striking feature of
web framework is that it saves time and energy
in developing any app because the developer
doesn't need to worry about session
handling, error handling and authentication logic. These functions are taken
web frameworks.
care of by
2. Well organized app : The web framework itself takes care of managing
files. This makes the complete application well directories and
organized.
3. Flexibility and customizable : Add-ons, themes, plugins,
customization on the web application. This brings out a lot widgets
of
enable rapu
development. flexibility in cod
4. Code reusability :Framework also promotes the reuse of code.
5. Security : Framework makes
developers sure that the
measurements because the framework itself takes care of [Link] uses good securny
The components of web
development framework are -
1. User 2. Browser 3. Webserver 4. Backend services

TECHNICAL PUBLICATIONS- an up-thrust for

knowledge
 Eul Stack Web Development
1
Basics of Fult Stack
Thecomponents of web
development framework are as shown below
Backend services

Browser Database
Webserver
Interacts Javascript XML Request Server-side MySQL
scripts
Oracle
HTML CSS
Files
User Response

Other
services

Fig. 1.1.1 Components of web development framework

Let us discuss them one by one -

1.2 User
" User is an important part of web
development framework.
" Users expectations from a website define the requirements for developing a good
website.
Normally an efficient and easy touse website is preferred by the user.
that the same website must behave They also expect
closer to the applications installed on their
computers and mobile devices.
" User interacts with the browser by using
input devices such as mouse, keyboard on
PC or swipes and taps on mobile devices. The web
framework processes the user input
and provides the required visualoutput.
1.3 Browser
" Browser is an application for accessing websites. User interacts with the browser in the
web development framework.
The brow ser plays three roles in web framework -
I. It provides communication to and from the web server.
2 It interprets the data from the server and displays the visual output.
3. The browser handles user interaction through the keyboard, mouse,
touchscreen or
other input device and takes the appropriate action.
Full Stack Web Development
1-4 Basics of Full Sta
communication:
Browser to web server
browser makes use of
communicating with the webserver, the HTTP
o For
HTTPS protocols.
o HTTP stands for HyperText Transfer Protocol. This protocol is used fo
server. Itiis a request/response
communication between browser and web
HTTP also defines what type of requests that can be made bythe user. Similarly t, protoco
and responses.
HTTP protocol defines the format of those requests
o HTTPS protocol is similar to HTTP protocol but it adds an additional security
connection or not.
layer so that the user can decide whether to accept the
There are three types of requests to the server -
server. This das.
i) GET: The GET request is typically used to retrieve data from the
can be in the .html files or images.
ii) POST:The POST request is used for sending the data to the server. For example .
Credit card details while performing online shopping.
iii)AJAX : AJAX stands for Asynchronous JavaScript and Extensible Markup
Language. In AJAX, the GET or POST request is done directly by JavaScrin
running in the browser.
" Difference between GET and POST requests : When a user submits his request using
the GET method then the URL string displays the request submitted by the user. But t
the POST method is used then URL string does not show the submitted contents.
The common browsers are Internet Explorer, Mozilla Firefox, Google Chrome, Safari.
Rendering the bowser view :
o The browser reads data from initial URL and then renders the HTML document to
build the Document Object Model (DOM).
The DOM is a tree structured object. The browser interprets each DOM elemem
and renders it to user's screen to build a webpage view.
Browsers get different types of data from multiple web server request to buildthe
webpage.
Following are various types of files that are displayed by the browser -
HTML files: The HTML files represent the static data.
- CSS files : These files define how the elements on the page are to be

styled using fonts, colors, borders and so on.

Client side script : Normally these scripts are in JavaScript files. These
scripts provide additional facilitate the
functionalities to the webpage,
TECHNICAL PUBLICA TIONS® An
Fl Stack Web Development 1-5 Basics of Full Stack

interactivity of user with the web page and provide any necessary logic
required o display the page and provide the functionality.
Media files : These are the files that contain images, videos and audio.
These files can be rendered as webpages.
Data : Any data such as XML, JSON or raw text can be provided to the
web server as a response to an AJAX request.
HTTP headers : The HTTP headers define the type of data in the request
as well as the type of data expected to be returned back to the browser.
" User interaction : User interacts with the browser with the help of input devices such as
mouse clicks, keyboards, touchscreens. The browser has an event system that captures
the user events and then takes appropriate action. This action can be loading the web
page obtained from the server as a response or displaying the pop-up menu.
1.4 Web Server
Web server is a special type of server to which the web browser submits the request of a web
page which is desired by the client. There are some popularly used web servers such as Apache and
IIS from Microsoft.
Functions of web server
Various functions of web server are -

1. The web servers accept the requests from the web browsers.
2. The user request is processed by the web server.
3. The web servers respond to the users by providing the services which they demand for
over the web browsers.

4. The web servers serve the web based applications.

5. The DNS translates the domain names into the IP addresses.
6 The servers verify given address exists, Iind necessary iles. run appropriate scripts,

exchange cookies if necessary and return back to the browser.

1
Some servers actively participate in session handling techniques.
14.1 Apache
Itis an excellent server because of its two important features Reliability and
Efmcieney
Secondly it is more popular because it is an open source software. That means it is
Ireely available to anybody Apache web server is best suitable for UNIXSystems but it
TECHNIGAL PUBLICA TIONSan up-thust fr knotee
FullStack Web Development 1-6

can also be used on Windows box. The apache web server can be
Basics oi Ful a
requirements using the file [Link]. This file is present in confiApache
the gured
package.
1.4.2|1S
The internet information services or internet information server is a kind of
web
provided by Microsoft. This server is most popular on the Windows platform.
Following are some differences between Apache and IIS servers -
Sr. No. Apache web server ISweb server
Apache web server is useful on both unix IIS web server is used on windows
based systems and on windows platform. platform.
2 It is an open source product. It is a vendor specific product and
can he
used on windows products only.
3 The Apache web server can be controlled For the IIS server:, the behaviour is
by editing the configuration file [Link] controlled by modifying the window
based management programs called IS
snap in. We can access IIS snap-in
through the Control-Panel
>Administrative Tools.
1.5 Backend Services
Backend services are the services that run behind the
data to the web server which is web server. These services provide
requested by the web browser.
The most commonly used
backend service is a database that stores the
When a browser requests some data to the information.
web server, the web server
(backend service) or some other backend service connects to the databas
sends it back to the browser. retrieves the information. formats it and the
Similarly, when the data comes browser to the web
server connects to the database and server in the form of request, then the
updates the data.
Review Question
1. Explain web
development framework with suitable block
components of it. diagram. Also expla

TECHNCAL PUEBLICATIONS- an up-thrust for

knowledge
 F Stack Web Development Basics of Full Stack

16 MVC Architecture
The MVC stands for Model, View and Controller It is &pattern for the
architectural
iramework
consists of three parts -
L Model : This part of the architecture is responsible for
managing the application data
Thismoule responds to the request made from view. The model gives
instructions to the
controller to updatewhen the response is made.
1 View : This part takes care of the presentation of data, The data is
presented in desired
format with the hclp of view. This isascrint based system using [Link]. PHP and so

3. Controller : The controller receives input, validates it and then performs

business
operations that modify the state of the data modcl. The controller basically responds to
user requests and performs interaction with the model. Refer Fig. L.6.1.

Controller ()
alerts updates
about event model

User interacts Notifies change

View Model
takes model data
and updates view

Fig.1.6.1 MVC architecture

" Model represents the data.
View is the user Interface.
Controller is the request handler.
Features of MVC framework
Separation of logie : 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
 Full Stack Web Developrmernt 1-8
Basics of Ful Stary
4. Returns data without formatting : MVC pattern returns data without
formatting. Hence, the same components can be used and called for use
with
applying
interface.
5. Customization : It is an extensible and pluggable framework. MVC
designed so that the components can be easily replaced or customized. framework
1.6.1 MVC in Practical
In order to understand the analogy of MVC let us take a real life example.
Let's take the example ofa restaurant.
U
When you visit a restaurant, the wvaiter presents you with a menu. You View the menu and thes
tell the waiter your order. The waiter notes down the order and passes it to the chef, in the kitchen
The chef uses the raw materials from the refrigerator and cooks the dish. The waiter then takes th.
dish from the kitchen and then presents it to you, after which you can enjoy your meal.
Here the menu and the food come under the view component.
The waiter acts as a controller.

The chef and the re frigerator can be thought of as the model.

to
Review Questions
1. Explain MVC architecture with a suitable diagram.
2. Enlist the features of MVC framework.
1.7 Understanding the Different Stacks
The stack development refers to the end to end application
software development. The Node.s
toangular stack consists of - MongoDB, express,
angular, [Link].
The basic block diagram of how the Node,js to angular fits
into the web framework model 1s 2
shown below -

1.

pro
clie

TECHNICAL PUBLICATIONs® an up-thrust for knowledge

Full Stack Web Development 1 -9 Basics of Full Stack
Backend services

Webserver
Database
Browser

Angular Nodejs
Request
Interacts (Javascript (JSON
XML Express
webserver
MongoDB|

HTML CSS Server-side)

Response soripts
User
Files

Other
services

Fig. 1.7.1 Full stack web development framework

1.7.1 Express
Express is used for server side development in full stack. As it is running in [Link], it is easy
to configure, implement and control the web application.
Following are the reasons why express is a great framework to start from -
1) Routing : Express JS provides a routing mechanism so that it is possible to reach to
different web pages using the URLs.
2) Error handling : Express provides built-in error handling for documents.
3) Easy integration : Express server can easily be implemented behind an existing reverse
proxy system. This allows it to be easily integrated into your existing secured system.
4) Cookies : Express provides easy cookie management.
5) Session and cache management : Express has session management and cache
management facility.
1.7.2 Angular
Angular is aclient side framework developed by Google. It is written in TypeScript. angular
povides all the functionalities needed to handle user input in the brow ser,
client side. It also controls how elements are displayed in the browser [Link] data on the

TECHNICAL PUBLICATIONSan up-thrust for knowiedge

Full Stack Web
Development 1-10

Following are the reasons whyangular is a great framework to start

from-
Basics oi Full s
1) Clean : Using angular the developer can develop clean and
2)
logical
Extensibility : The angular allows to extend almost every aspect
code. Fu

of the
provide the custom implementation.
3) Reusable Code: Using angular the reusable code can be
written. \anguag
4) Data binding : Using angular the data can
be bound to HTML elements
mechanism.
5) Support : As the angular
the lusing
framework is developed by Google, there
for developing the web
applications. exists agreat
6) Compatibility : Angular is
based on TypeScript. Hence it is easy to
into the working
1.7.3 Node
environment. integrate angl 1.

fac
The [Link] is a
development
meaning of V8 JavaScript engine isramework that uses Google's V8 Jav
that it parses and executes the JavaScript engine. T.
code is written in JavaScript code. The Node
JavaScript and then compiled.
Following are the reasons why [Link] is a great
1) Easy to use : framework to start from -
[Link] is very much easy to set up.
[Link] is also very easy. Developing the web applications i
2)
Extensibility : New modules that are required to extend the
developed at any time. [Link] functionality cant
3) Event driven
scalability: In
using a basic event model. [Link], the web requests are processed on the same tht.
[Link]
Similarly the non blocking response uses a single
thread model with event loop:
of [Link] makes it
number of requests. highly scalable to servely
4) Efficient : The [Link] is built on V8
execution. JavaScript engine and it is very fast in
5) Use of
JavaScript,
that it allows to writeend-to-end: The one of the important reasons of Nodejs
towork for client side
both server and client side scripts in using easte
JavaScript. This makes
developers well as for server side
as
1.7.4 MongoDB developers.
MongoDB is apart of backend services. It is
stored in the form of a JSON object. basically a scalable NoSÌL Thedata
database.

TECHNICAL PUBLICATIONS an
up-thrust for knowledge
 Full Stack Web Development 1-11 Basics of Full Stack

Following are the reasons why MongoDBis agreat framework to start from
1) Document orientation : The datais stored in the document form in the MongoDB.
2) High performance : Itis the highest perfomming database.
3) High sealability : The MongoDB allows horizontal scalability by sharing data across
multiple servers.
4) High availability :MongoDB provides high availability and redundancy with the help of
replication. That mcans it ereates multiple copies of the data and sends these copies to a
differentserver so that if one server fails, then the data is retrieved from another server.

1.7.5 React
React/S is an open source, component-based front end JavaScript library maintained by
facebook. This library is responsible only for the view layer of the application. That means this
JavaSeriptis for building user interfaces.
Following are the reasons why MongoDB is a great framework to start from -
1) Virtual DOM: DOM stands for Document Object Model. It also provides a way to
update the content, structure and style of the document. Virtual DOM is a representation
of the original DOM. When a user updates something on the web application, DOM gets
updated. Updating the DOM is very slow, most of the JavaScript frameworks update the
whole DOM which makes it slower. But actually there is no need to update the whole
DOM, instead, these frameworks should update only the part of DOM that is required to
update. This is what the virtual DOM does. This is why ReactJS's DOM manipulation is
much faster than other frameworks. Due to this property, whenever any change is made
in the web application, then those changes are reflected on the web page within no time.
2) Components: This feature allows the web developer to create custom elements which
can be reused in HTML.
3) JSX:JSX is an extension of JavaScript syntax. JSX can be seen as a combination of
javascript and XML. The syntax of JSX is very simple that makes writing components
very easy
4) One way data binding : The React/S is designed in such a way that it follows.
unidirectional or one way data binding. That means, data is allowed to flow in one
direction at a time. This helps in achieving greater control over the application. This
makes helps in increasing the efliciency of an application.

TECHNICAL PUBLICATIONS-a up-thrust for knowiedge

Full Stack Web 1-12
Development
Review Questions Rasics of ful S
1. Explain the use of [Link] in full stack development. Full S
2. Write short note on - MongoDB.
Q.
3. Give the reasons - Why is express useful in web frameworks ?
An
4. Explain the role of react in web
framework.
1.8 Two Marks
Questions with Answers
Q.1 What is web
Ans. :
development framework ?
" A web
development framework is a collection of tools, A
used to create web
applications and websites.
libraries and technologies
" It provides a that are
basic structure and set of
quickly and efficiently. conventions for developers to build web applicatin
Q.2 Why do we use
web framework ? Give
Ans. : any two reasons.
1. Saves time : The most
striking
developing any app because thefeature of web
developer
framework is that it saves time and energy in
error handling and authentication logic. doesn't need to worry about session handling,
frameworks. These functions are
2.
taken care of by wet
Flexibility and customizable :
customization on the web [Link]-ons,
This
themes, plugins, widgets enable
rapu
development
0.3 What are the
brings out a lot of
flexibility in c0
Ans. : The components web development
of
components of web framnework ?
(1)User (2)
Browser development
(3)Web Server (4) framework are
Q.4 Give the
importance of browser Backend services
Ans. : The
1. It
browser plays three roles in web
2. It
provides
communi framework -
cation from the web server.
to and
interprets
3. The
the data from the
server and displays the
browser
input device andhandles user visual output.
takes the interaction through the keyboard,
appropriate action. mouse, touchscreen or other
Ful Stack Web Development 1- 13 Basics of Full Stack

Q.5 What is GET and POST request ?

Ans. :

) GET:The GET request is typically used to retrieve data from the server. This data can be in
the .html files or images.
i) POST : The POST request is used for sending the data to the server. For example - Credit
card details while performing online shopping.
Q.6 What is web server ?

Ans. : Web server is a special type of server to which the web browser submits the request of a
web page which is desired by the client.
Q.7 Enlist the functions of web server
Ans. : Various functions of web server are -
1. The web servers accept the requests from the web browsers.
2. The user request is processed by the web server.
3. The web servers respond to the users by providing the services which they demand for over
the web browsers.

4. The web servers serve the web based applications.

Q.8 What do you mean by backend services
Ans. :

1) Backend services are the services that run behind the web server. These services provide the
data to the web server which is requested by the web browser.
2) The most commonly used backend service is a database that stores the information.
Q.9 What is MVC?
Ans. :

1. Model : This part of the architecture is responsible for managing the application data. This
module responds to the request made from view. The model gives instructions to the
controller to update when the response is made.
2. View : This part takes care of the presentation of data. The data is presented in desired
format with the help of view. This is aseript based system using JSP, ASP,PHP and so on.
3. Controller : 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.

TECHNICAL PUBLICATIONSan up-thrust for knowiedge