UNIT I BASICS OF FULL

STACK
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.
 UNDERSTANDING THE BASIC WEB
DEVELOPMENT FRAMEWORK
WEB:
The full form of WWW is the World Wide Web. WWW is also called a Web and it is
a catalogue of an order of all websites connected to the worldwide Internet. It is an
information system in which linked hypertext data and resources are accessed over
the Internet.
In simply it refers to Websites and Web Pages or anything that works over the
internet.
DEVELOPMENT: Refers to building the application from scratch.
WEB DEVELOPMENT:
Web development refers to the creating, building, and maintaining of websites. It
includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the internet
i.e. websites.
Web Development can be classified into two ways:
FRONTEND DEVELOPMENT
The part of a website where the user interacts directly is termed as front end. It is
also referred to as the ‘client side’ of the application.
Popular Frontend Technologies
HTML: HTML stands for HyperText Markup Language. It is used to design
the front end portion of web pages using markup language. It acts as a skeleton
for a website since it is used to make the structure of a website.
CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed
language intended to simplify the process of making web pages presentable. It
is used to style our website.
JavaScript: JavaScript is a scripting language used to provide a dynamic
behavior to our website.
Bootstrap: Bootstrap is a free and open-source tool collection for creating
responsive websites and web applications. It is the most popular CSS
framework for developing responsive, mobile-first websites. Nowadays, the
websites are perfect for all browsers (IE, Firefox, and Chrome) and for all
sizes of screens (Desktop, Tablets, Phablets, and Phones).
 Bootstrap 4
 Bootstrap 5

BACKEND DEVELOPMENT

Backend is the server side of a website. It is part of the website that users
cannot see and interact with. It is the portion of software that does not come
in direct contact with the users. It is used to store and arrange data.
POPULAR BACKEND TECHNOLOGIES
PHP: PHP is a server-side scripting language designed specifically for web
development.
Java: Java is one of the most popular and widely used programming
languages. It is highly scalable.
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 a browser.

FULL-STACK DEVELOPMENT
Typically, back-end website development and front-end development are carried
out by different professionals with expertise in each.

When the web solution is developed by a single developer who has experience
with both front-end and back-end, it is called full-stack development.
 WEB DEVELOPMENT FRAMEWORK

A web development framework is a set of resources and tools for software developers to build and manage
web applications, web services and websites, as well as to develop application programming interfaces
(APIs). Web development frameworks are also referred to as web application frameworks or simply web
frameworks.

Web development frameworks enable developers to build applications that can run on well-known
technology stacks such as the Linux, Apache, MySQL and PHP (LAMP) stack. Most frameworks provide
a wide range of features and functionality that help streamline application development.

Because web development frameworks are so comprehensive in scope, they offer development teams
several important benefits, including the following:
 Developers can build applications faster and more efficiently because they write less code, reuse code,
and contend with fewer errors and bugs.
 Many frameworks are open source and backed by strong developer communities that help to optimize
the code and reduce errors, leading to better performance and reliability, as well as easier maintenance.
 Many web development frameworks are widely used, adhere to industry standards and are backed by
strong developer communities. The continuous vetting and improvements that this provides results in
better security. Developers also avoid many of the risks that come with building applications from
scratch.
What are the web framework types?
1. Front-end frameworks. Also called user-side or client-side frameworks,front-end
frameworks focus on the user-facing elements of a web application.They provide the
components and templates necessary to render passive or interactive webpages in a
browser, using industry technologies such as HTML, CSS, JavaScript and jQuery.
2.Back-end frameworks. These frameworks, also called server-side frameworks, target
the server and back-end components that support a web application. They're
responsible for mapping URLs, processing HTTP requests, interfacing with data
sources and supporting other back-end operations. Back- end frameworks use industry
technologies such as Python, PHP, .NET, Java and Ruby.
 COMPONENTS OF WEB DEVELOPMENT

 Application templates for presenting information within a browser.

 Programming environment for scripting the flow of information.
 APIs for accessing back-end data resources
 Code libraries with prebuilt components and code snippets.
 Support for debugging, quality assurance (QA) testing and code
 reusability.

Benefits of Web Development Framework

 Makes the Development Process Easier

 Eases Debugging and Application Maintenance
 Reduces Code Length
 Improves Database Proficiency
 Reinforces Security
 USER
WEB APPLICATION
A web application is software that runs in your web browser. Businesses have to exchange information and
deliver services remotely. They use web applications to connect with customers conveniently and securely.
The most common website features like shopping carts, product search and filtering, instant messaging, and
social media newsfeeds are web applications in their design. They allow you to access complex functionality
without installing or configuring software.

Benefits of web applications:

1. Accessibility
2. Efficient development
3. User simplicity
4. Scalability
Some common web applications:
5. Workplace collaboration web applications
6. Ecommerce web applications
7. Email web applications
8. Online banking web applications
 WEB SERVER
The term web server can refer to hardware or software, or both of them working
together.
1. On the hardware side, a web server is a computer that stores web server
software and a website's component files (for example, HTML documents,
images, CSS stylesheets, and JavaScript files). A web server connects to the
Internet and supports physical data interchange with other devices connected to
the web.
2. On the software side, a web server includes several parts that control how web
users access hosted files. At a minimum, this is an HTTP server. An HTTP server
is software that understands URLs (web addresses) and HTTP (the protocol your
browser uses to view webpages). An HTTP server can be accessed through the
domain names of the websites it stores, and it delivers the content of these hosted
websites to the end user's device.
At the most basic level, whenever a browser needs a file that is hosted on a web
server, the browser requests the file via HTTP. When the request reaches the
correct (hardware) web server, the (software) HTTP server accepts the request,
finds the requested document, and sends it back to the browser, also through
HTTP. (If the server doesn't find the requested document, it returns a 404
response instead.)
To publish a website, you need either a static or a dynamic web server.
A static web server, or stack, consists of a computer (hardware) with an HTTP server
(software). We call it "static" because the server sends its hosted files as-is to your
browser.
A dynamic web server consists of a static web server plus extra software, most
commonly an application server and a database. We call it "dynamic" because the
application server updates the hosted files before sending content to your browser via
the HTTP 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, find necessary files, run appropriate
scripts, exchange cookies if necessary and return back to the browser.
7. Some servers actively participate in session handling techniques.
 BROWSER
 Browser is an application for accessing websites. User interacts with the browser in the
web development framework.
 The browser plays three roles in web framework –
1. 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.

BROWSER TO WEB SERVER

COMMUNICATION :

 For communicating with the webserver, the browser makes use of HTTP and HTTPS protocols.
 HTTP stands for HyperText Transfer Protocol. This protocol is used for communication
between browser and web server. It is a request/response protocol.
 HTTP also defines what type of requests that can be made by the user. Similarly the HTTP
protocol defines the format of those requests and responses.
 HTTPS protocol is similar to HTTP protocol but it adds an additional security layer so that the
 There are three types of requests to the server
i) GET: The GET request is typically used to retrieve data from the server. This data 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 JavaScript 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 if 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 :
 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 element and renders it to
user's screen to build a webpage view. Browsers get different types of data from multiple web
server requests to build the 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
functionalities to the webpage, facilitate the interactivity of user with the web page and provide any
necessary logic required to 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.
 Apache
 It is an excellent server because of its two important features: Reliability and
Efficiency.
 Secondly it is more' popular because it is an open source software. That means it is
freely available to anybody. Apache web server is best suitable for UNIX systems but it
can also be used on Windows box. The apache web server can be configured as per the
requirements using the file httpd.conf. This file is present in the Apache software
package.

IIS
 The internet information services or internet information server is a kind of wcbserver
provided by Microsoft. This server is most popular on the Windows platform.
 Following are some differences between Apache
and IIS servers -
SI.NO Apache web server IIS web server
1 Apache web server is useful on both IIS web server is used on windows
unix based systems and on windows platform.
platform.
2 It is an open source product. t is a vendor specific product and can
be used on windows products only.
3 The Apache web server can be For the IIS server, the behavior is
controlled by editing the controlled by modifying the window
configuration file htpd.conf based management programs called
IIS snap in. We can access IS snap-in
through the Control-Panel
>Administrative Tools.
 BACKEND SERVICES
 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.
 The most commonly used backend service is a database that stores the
information.
 When a browser requests some data to the web server. the web server
connects to the database (backend service) or some other backend
service retrieves the information, sends formats it and it back to the
browser.
 Similarly, when the data comes browser to the web server in the form of
request, then the web server connects to the database and updates the
data
 MVC Architecture
The MVC stands for Model. View and Controller. It is a pattern for the architectural
framework.
It consists of three parts –
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 a script 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.
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 web application then it is
possible that one programmer can work on the view while the other can work
on the controller to create the business logic of the web application.
4. Returns data without formatting : MVC pattern returns data without applying
any formatting. Hence, the same components can be used and called for use
with any interface.
5. Customization : It is an extensible and pluggable framework. MVC framework
are designed so that the components can be easily replaced or customized .
 MVC IN PRACTICAL
 In order to understand the analogy of MVC let us take a real life example.
Let's take the example of a restaurant.
When you visit a restaurant, the waiter presents you with a menu. You view the
menu and then 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 the 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 refrigerator can be thought of as the model.
 ADVANTAGES OF MVC:

 Codes are easy to maintain and they can be extended easily.

 The MVC model component can be tested separately.
 The components of MVC can be developed simultaneously.
 It reduces complexity by dividing an application into three units. Model,
view, and controller.
 It supports Test Driven Development (TDD).
 It works well for Web apps that are supported by large teams of web designers
and developers.
 This architecture helps to test components independently as all classes and
objects are independent of each other Search Engine Optimization (SEO)
Friendly.
 DISADVANTAGES OF MVC:

 It is difficult to read, change, test, and reuse this model

 It is not suitable for building small applications.
 The inefficiency of data access in view.
 The framework navigation can be complex as it introduces new layers of
 abstraction which requires users to adapt to the decomposition criteria of
MVC.
 Increased complexity and Inefficiency of data
 POPULAR MVC FRAMEWORKS:
Some of the most popular and extensively used MVC frameworks are listed
below.
 Ruby on Rails
 Django
 CherryPy
 Spring MVC
 Catalyst
 Rails
 Zend Framework
 Fuel PHP
 Laravel
 Symphony
 UNDERSTANDING THE DIFFERENT
STACKS
 The stack development refers to the end to end application software
development. The Node,js to angular stack consists of- MongoDB, express,
angular, Node.js.
 The basic block diagram of how the Node.js to angular fits into the web
framework model is as shown below -
 EXPRESS
Express is used for server side development in full stack. As it is running in
Node.js, it is easy to configure, implement and control the web application.
Following are the reasons why express is a great framework to start from –
Routing : Express JS provides a routing mechanism so that it is possible to reach
to different web pages using the URLs.
Error handling: Express provides built-in error handling for documents.
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.
Cookies : Express provides easy cookie management.
Session and cache management : Express has session management and cache
management facility.
 ANGULAR
Angular is a client side framework developed by Google. It is written in Type Script.
angular provides all the functionalities needed to handle user input in the browser,
manipulate data on the client side. It also controls how elements are displayed in the
browser window.
Following are the reasons why angular is a great framework to start from –
Clean : Using angular the developer can develop clean and logical code.
Extensibility : The angular allows to extend almost every aspect of the language to
provide the custom implementation.
Reusable Code : Using angular the reusable code can be written.
Data binding : Using angular the data can be bound to HTML elements using the scone
mechanism.
Support : As the angular framework is developed by Google, there exists a great support
for developing the web applications.
Compatibility: Angular is based on Type Script. Hence it is easy to integrate angular
into the working environment.
 NODE
The Node.js is a development framework that uses Google's V8 JavaScript
engine. The meaning of V8 JavaScript engine is that it parses and executes the
JavaScript code. The Node.js code is written in JavaScript and then compiled.
Following are the reasons why Node.js is a great framework to start from –
Easy to use : Node.js is very much easy to set up. Developing the web
applications using Node.js is also very easy.
Extensibility : New modules that are required to extend the Node.js functionality
can be developed at any time.
Event driven scalability : In Node.js, the web requests are processed on the same
thread using a basic event model. Node.js uses a single thread model with event
looping. Similarly the non blocking response of Node.js makes it highly scalable
to serve large number of requests.
Efficient : The Node.js is built on V8 JavaScript engine and it is very fast in code
execution.
Use of JavaScript, end-to-end: The one of the important reasons of using Node.js
is that it allows to write both server and client side scripts i JavaScript. This
makes easier to work for client side developers as well as for server side
developers.
 MongoDB
MongoDB is a part of backend services, It is basically a scalable NoSQL
database. The data is stored in the form of a JSON object.
Following are the reasons why MongoDB is a great framework to start from –
Document orientation :The data is stored in the document form in the MongoDB.
High performance : It is the highest performing database.
High scalability: The MongoDB allows horizontal scalability by sharing data
across multiple servers.
High availability : MongoDB provides high availability and redundancy with the
help of replication. That means it creates multiple copies of the data and sends
these copies to a different server so that if one server fails, then the data is
retrieved from another server.
 React
ReactJS 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 JavaScript is for building user interfaces.
Following are the reasons why MongoDB is a great framework to start from –
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 ReactUS'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 reflectedon the web page within no time.
Components : This feature allows the web developer to create custom elements
which can be reused in HTML.
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.
One way data binding : The ReactJS 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 efficiency of an application.
THANK YOU