WEB DEVELOPMENT
Web Development usually refers to development the developing the website for the
internet World wide web or for an internet private network. It is process of developing
website which include functionality creation and usability testing for that website.
● It is also Known as web programming.
● It is the creation of dynamic web applications. Ex- Twitter, E-commerce website like
amazon
There are two Broad division of web development – front-end-development
also called client-side development and back-end-development also called server-
side development.
❖ Web Development can be typically divided into two classes/parts :-
❖ Front-End Development
❖ Back-end Development
Frontend and Backend
Front-End Development
● Frontend is something that a user can see, interact and experience. It majorly
involves programming or coding the parts of the website and applications that
are visible to the user.
● The work of a Front End Developer is to build on the User Interface and User
Experience designs which are the key elements of bringing design to life.
● A front-end developer creates websites and applications using web languages
such as HTML, CSS, and JavaScript allow users to access and interact with the
site or app. When you visit a website, the design elements you see were created
by a front-end developer.
Back-end Development
● The major work of a Back End Developer includes linking every aspect of the front
end together and with the databases.
● It contains behind-the-scene activities that occur when performing any action on a
website.
● Code written by back-end developers helps browsers to communicate with database
information.
HTML
❖ Html is an acronym which stands for hyper Text Markup Language which is used
for creating web pages and web applications.
❖ HTML describes the structure of a web page.
❖ HTML consists of a series of elements.
❖ To decide the structure of the webpage.
❖ HTML elements tell the browser how to display the content.
❖ A simple HTML Document:-
CSS
❖ CSS stands for Cascading Style Sheets.
❖ CSS describes how HTML element are to be displayed on screen, paper or in
other media.
❖ To make look batter.
❖ CSS is used to define style for our web pages, including the design, layout and
variant in display for different devices and screen sizes.
❖ CSS can be added to html Document in 3 way:-
o Inline – by using the style attribute inside HTML elements. Internal- by
using a <style> element in the <head> section. External- by using a <link>
element to link to an external CSS file.
JAVASCRIPT
JavaScript is a dynamic programming language that's used for web development, in web
applications, for game development, and lots more
⮚ It allows you to implement dynamic features on web pages that cannot be
done with only HTML and CSS.
Introduction of ReactJs
⮚ Facebook created the React front-end library. For web and smartphone
applications, it is used to manage the display layer. We can build reusable UI
components with ReactJS. It has a solid base and a huge community behind it,
making it one of the most popular JavaScript libraries.
⮚ React is a library that allows you to build modular user interfaces. It supports the
creation of interchangeable user interface modules that display data that varies
over time. React is sometimes used as the V in MVC. React abstracts the DOM
from you, resulting in a more straightforward programming model and improved
performance. React will also use Node to render on the server and React Native
to run native applications. One-way reactive data flow is implemented in React,
which eliminates boilerplate and makes it simpler to think about than
conventional data linking.
ReactJS Feature
⮚ JSX is a syntax extension for JavaScript. JSX isn't needed for React growth, but it
is highly recommended.
⮚ Components are the backbone of React. All must be considered a variable. When
operating on bigger programmes, this would make it easier to maintain the code.
⮚ Flux and one-way data flow React incorporates one-way data flow, making it
simple to reason for the app. Flux is a pattern that aids in the unidirectional flow of
data.
⮚ React is authorized under the terms of the Facebook Inc. The documentation is
available under the Creative Commons Attribution 4.0 International License.
4
JSX (JavaScript XML)
⮚ Instead of using standard JavaScript, React uses JSX for templating. It is not
necessary to use it; however, the following are some advantages.
● It's easier because it optimizes code before converting it to JavaScript.
● It's also type-safe, with the majority of errors caught during compilation.
● If you are familiar with HTML, it makes writing templates simpler and
quicker.
State
⮚ State is the place where the data comes from. We should always try to make our
state as simple as possible and minimize the number of stateful components. If we
have, for example, ten components that need data from the state, we should create
one container component that will keep the state for all of them.
Figure 1 State in ReactJS
Props
⮚ Props are immutable, which is the key distinction between state and props. As a
result, the container component should specify the state that can be modified and
altered, while child components can only use props to transfer data from the state.
⮚ Props is properties of component that we use as attribute in HTML. Props are also
use to communicate between to components.
5
Figure 2 Props In ReactJs
Events in ReactJs
⮚ This is a basic example in which only one variable is used. When the button is
pressed, the onClick event is triggered, which calls the updateState operation.
⮚ React event handlers are written inside curly braces: onClick={increase} instead of
onClick=" increase ()"
Figure 3 Events In ReactAdvantage of ReactJS
⮚ Easy to use: ReactJS is a lot easier to understand and use than ReactJS. It includes
a lot of notes, tutorials, and instructional materials. Any developer with a
JavaScript experience will quickly learn React and start building mobile apps in a
matter of days. It's the V(view part) of the MVC (Platform-View-Controller)
model, and it's also known as a JavaScript system. It isn't completely featured, but
6
it benefits from the open-source JavaScript User Interface(UI) library, which aids
in task execution.
⮚ Creating Dynamic Web Applications Becomes Easier: It was difficult to build a
dynamic web application with HTML strings because it required complicated
scripting, but React JS solved the problem and made it simpler. It needs less
coding while providing more flexibility. It employs the JSX (JavaScript Extension)
syntax, which is a special syntax that allows HTML quotes and HTML tag syntax
to render certain subcomponents. It also allows you to create machine-readable
passwords.
⮚ Reusable component: A ReactJS web application consists of several modules,
each with its own logic and controls. These components are in charge of producing
a lightweight, reusable piece of HTML code that you can use anywhere you need
it. The reusable code makes it easy to create and manage your games. These
Components may be nested with each other to create complex applications from
basic building blocks. To fill data in the HTML DOM, ReactJS uses a virtual
DOM- based mechanism. The virtual DOM is fast because it only modifies
individual DOM components rather than reloading the whole DOM every time.
⮚ Increase performance: The virtual DOM in ReactJS boosts performance. The
Document Object Model (DOM) is a cross-platform and programming API for
dealing with HTML, XML, and XHTML. When the DOM was revamped, most
developers encountered a problem that hampered the application's performance.
The introduction of virtual DOM in ReactJS solved this problem. The React
Virtual DOM is a reflection of the web browser's DOM that resides solely in
memory. As a result, we didn't write directly to the DOM while writing a React
part. Instead, we're writing virtual components that respond to the DOM, resulting
in a smoother and faster experience.
⮚ SEO friendly: When it comes to SEO, traditional JavaScript frameworks have an
issue. JavaScript-heavy programmes are usually difficult for search engines to
read. This is an
issue that many web developers have expressed their dissatisfaction with. ReactJS
solves this challenge making it easier for developers.
Disadvantage of ReactJs
7
⮚ Poor documentation: Another disadvantage of actively upgrading technologies is
this. React developments are evolving and accelerating at such a rapid pace that
there is little time to properly track them. To get around this, developers write their
own directions as new releases and tools in their current projects evolve.
⮚ JSX as barrier: JSX is used for ReactJS. It's a syntax extension that lets you
combine HTML and JavaScript. While this method has its advantages, some
members of the development community regard JSX as a barrier, especially for
new developers. Developers lament about the learning curve's difficult
NodeJS
Node.js is a JavaScript runtime environment that is free and cross-platform. It's a well-
liked tool for practically any job!
Outside of the browser, Node.js operates the V8 JavaScript engine, which is at the heart of
Google Chrome. As a result, Node.js is extremely fast.
Without establishing a new thread for each request, a Node.js software operates in a
single process. Node.js' standard library includes a set of asynchronous I/O primitives that
prevent JavaScript code from blocking, and libraries in Node.js are often created following
non-blocking paradigms, thus blocking behavior is the exception rather than the rule.
Instead of stalling the thread and wasting CPU cycles waiting for Node.js to complete an I/O
operation, such as reading from the network, accessing a database, or accessing the
filesystem, Node.js will continue the operations when the response comes back.
This allows Node.js to handle thousands of concurrent connections with a single server
without adding the overhead of thread concurrency management, which may be a major cause
of errors.
Because millions of frontend developers who write JavaScript for the browser can now create
server-side code in addition to client-side code without having to learn a new language,
Node.js offers a distinct advantage.
The new ECMAScript standards can be utilized without issue in Node.js since you don't have
to wait for all of your users' browsers to update - you can choose which ECMAScript version
to use by changing the Node.js version, and you can even enable certain experimental features
8
by running Node.js with flags.
ExpressJS
Express.js, or basically Express, is a back end web application structure for Node.js,
delivered as free and open-source programming under the MIT License. It is intended for
building web applications and APIs. It has been known as the accepted standard server
structure for Node.js.
The first creator, TJ Holowaychuk, depicted it as a Sinatra-propelled server, implying that it is
generally negligible with many elements accessible as modules. Express is the
back-end part of well known improvement stacks like the MEAN, MERN or MEVN stack,
along with the MongoDB data set programming and a JavaScript front-end
structure or library.
EJS
Embedded Javascript (EJS) is a type of Javascript that is embedded in a webpage. Node.js
uses Templating as a templating engine. The template engine makes it possible to develop
an HTML template with very little code. It may also inject data into an HTML template on
the client side before generating the final HTML. EJS is a basic templating language that
uses plain JavaScript to build HTML markup. It also aids in the integration of JavaScript
into HTML websites. The default behavior of EJS is to seek for templates to render in the
'views' folder.
MongoDB
MongoDB stores data in JSON-like documents with flexible fields that may change from
document to document and data structures that can evolve over time. The document model
corresponds to the objects in your application code, allowing you to interact with data more
easily. Ad hoc searches, indexing, and real-time aggregation are all useful tools
for gaining access to and analyzing your data. Because MongoDB is a distributed
database at its heart, it comes with built-in high availability, horizontal scaling,
and geographic dispersion. MongoDB is a completely free database.
Postman
Postman is an application programming interface (API) development tool that aids in the
creation, testing, and modification of APIs. This utility has almost all of the features that a
9
developer would want. Every month, over 5 million developers utilise it to make API
development straightforward and easy. It can make a variety of HTTP queries (GET, POST,
PUT, PATCH), save environments for later usage, and convert API to code in a variety of
languages (like JavaScript, Python). The URL that we wish to GET, POST, DELETE, etc. is
entered into the longest middle input box, which looks like a search bar.
User Application on NodeJS and ReactJs
The process to start with project on terminal is :
mkdir node-user-app
cd node-user-app
npm init
npm install express body-parser mongoose --save
10
First we write the code for the connection of the database to our code. Using library
‘Mongoose’ to make code of mongoDB more fast working and creation of schemas much
easier
Then we can see data is stored in database
11
After this we write the code for various Crud operations on the server side and handling the
API calls by using POSTMAN
12
Coming forward to the client side we create a landing page where all users are displayed
from the database, with actions button to update, delete and view specific users and when
we click on a particular user, the details page opens up with an image and the link
directed to is the specific user ID.
Also the page has a toggle for different views we want to have (i.e. cards and table views)
13
Now when the user clicks on the AddUser button, the page opens to add the user and
when he clicks on the submit button, the user is added and the page is redirected to
home.
In a similar way in the UpdateUser route, the user inputs are auto populated from existing
values and we can change them by overriding its value.
14
15
16
User Authentication using JSON web Token (JWT)
JSON Web Token (JWT) is an open norm (RFC 7519) that characterizes a minimized
and independent way for safely communicating data between parties as a JSON object. This
data can be confirmed and trusted in light of the fact that it is carefully marked. JWTs can be
marked utilizing confidentiality (with the HMAC calculation) or a public/confidential key pair
utilizing RSA or ECDSA.
In spite of the fact that JWTs can be encoded to likewise give mystery between parties, we
will zero in on marked tokens. Marked tokens can confirm the trustworthiness of the
cases held inside it, while scrambled tokens conceal those cases from different gatherings.
At the point when tokens are marked utilizing public/confidential key matches, the mark
likewise confirms that main the party holding the confidential key is the one that marked
it.JSON Web Token (JWT) is an open norm (RFC 7519) that characterizes a minimized and
independent way for safely communicating data between parties as a JSON object. This data
can be confirmed and trusted on the grounds that it is carefully marked. JWTs can be marked
utilizing confidentiality (with the HMAC calculation) or a public/confidential key pair
utilizing RSA or ECDSA.
In spite of the fact that JWTs can be encoded to likewise give mystery between parties, we
will zero in on marked tokens. Marked tokens can check the trustworthiness of the
cases held inside it, while encoded tokens conceal those cases from different gatherings. At
the point when tokens are marked utilizing public/confidential key matches, the mark
likewise ensures that the party holding the confidential key is the one that marked it.
JWT should be used when :
● Authorization is the most typical case in which JWT is used. Each subsequent
request will contain the JWT once the user has signed in, allowing the user to
access routes, services, and resources that are authorized with that token. Single Sign
On is a popular feature that makes use of JWT nowadays due to its low overhead and
ability to be utilized across many domains.
● Information Exchange: JSON Web Tokens are a safe mechanism to send data
between two parties. You can be sure the senders are who they say they are
17
because JWTs may be signed—for example, with public/private key pairs. You
may also check that the content hasn't been altered because the signature is
calculated based on the header and payload.
JSON Web Tokens are made up of three pieces that are separated by dots (.). They are:
● Header
● Payload
● Signature
First the user comes to the registration page and after registration its credentials are
stored in the database. Also the password is stored as in hash form by crypting so no one
can see it.
18
19
After successful registration, the user goes to the login page, where he enters his/her
email and password. There is a validation to check that if that email exist or not then
decrypt the password to compare it.
When user logins, that specific user page opens up with its unique id and a token is stored
in local storage and when user logouts that token in terminated.
20
Also functionalities like change password and update user password is also added to
enhance user experience.
21
22
MEAN STACK
MEAN stack is a popular full-stack JavaScript framework for building dynamic web
applications. The acronym MEAN stands for:
● MongoDB – A NoSQL database that stores data in flexible, JSON-like documents.
● Express.js – A minimal and flexible Node.js web application framework for
building backend services.
● Angular (or AngularJS) – A front-end framework developed by Google for
building dynamic, single-page web applications (SPA).
● Node.js – A runtime environment that allows you to run JavaScript code on the
server.
Angular
Angular is a powerful, modern front-end web framework developed and maintained
by Google. It allows developers to build scalable, maintainable, and feature-rich single-page
applications (SPAs). Unlike traditional multi-page applications, SPAs update content
dynamically without reloading the entire page, providing a smoother and faster user
experience.
Angular is built using TypeScript, a superset of JavaScript that adds static typing and
advanced object-oriented features. This allows for cleaner, more organized, and less error-
prone code, making it ideal for large-scale applications. Angular is the successor of
AngularJS, but it's a complete rewrite and not backward compatible, introducing a more
modular and performant architecture.
Benefits of Using Angular in MEAN
● Consistent structure with TypeScript and Angular CLI
● High productivity with reusable components and built-in tooling
● Performance optimizations like AOT compilation, tree shaking, and lazy loading
● Robust ecosystem with tools like Angular Material, NgRx (state management), and
testing frameworks
● Strong community support and active development by Google
23
Benefits of Using Angular in MEAN
● Consistent structure with TypeScript and Angular CLI
● High productivity with reusable components and built-in tooling
● Performance optimizations like AOT compilation, tree shaking, and lazy loading
● Robust ecosystem with tools like Angular Material, NgRx (state management), and
testing frameworks
● Strong community support and active development by Google
Node.js + Express backend
To connect a backend built with Node.js and Express to an Angular frontend, you
start by setting up your backend server. You can do this by creating a new Node.js project
using npm init, and then installing express and cors packages. These allow you to create
API routes and handle cross-origin requests from your Angular application. Inside the
backend folder, you create a simple server file (like server.js) that sets up Express, enables
CORS, and defines an API route—for example, GET /api/data that returns some sample
JSON data. This server will typically listen on a port such as 3000.
server.js
js
CopyEdit
const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;
app.use(cors()); // Allow cross-origin requests
app.use(express.json());
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from backend!' });
});
app.listen(port, () => {
console.log(`Backend running on http://localhost:${port}`);
});
