SPA, MPA, and

React Framework
 • A library for implement web frontends.
• It covers the view layer, i.e. it is a representation of
user interface.

What is • It is an open-source project.

• Developers have used open-source MIT license as it
React allows private and commercial use.
• The code of react is present on github and is
available in the form of NPM packages.
  A Single Page Application (SPA) is an application that
allows you to work inside a browser and does not
require reloading the page when a person is using it.
 Many of the apps we use every day are single page
applications. Navigation apps, many social media
SPA-Single platforms, and some email providers are SPAs

Page  A single-page application is a more modern approach

to app development. It was used by Google,
Applications Facebook, Twitter, etc.
 SPAs display stunning UX that acts like a browser. It
does so by maintaining the minimum possible code,
or “shell” of a page. This code is usually dependent
on JavaScript frameworks, and when used ensures the
high performance of the SPA
SPA-Single
Page
Applications
SPA-Single
Page
Applications
SPA-Single
Page
Applications
SPA-Single
Page
Applications
SPA-Single
Page
Applications
SPA vs MPA
 • Multi-page applications, or MPAs, request
rendering each time for a new page from the
server in the browser.
• They’re perfect for applications larger than SPAs,
and due to the amount of content, they have
different levels of UI.
SPA vs MPA • The multi-page design pattern requires a page
reload every time the content changes. It’s a
preferred option for large companies with
extensive product portfolios, such as e-commerce
businesses.
 SPA speed MPA speed
As SPA loads the  MPA is slower as the browser
majority of app must reload the entire page
resources just once. from scratch whenever the
The page doesn’t user wants to access new
data or moves to a different
SPA vs MPA reload entirely
whenever the user part of the website. The
optimal loading time for a
requests a new piece
website is 0.4 seconds. If
of data. your website or app is
image-heavy, then choosing
a SPA is a safer option.
 SPA coupling MPA coupling
In MPA’s, the front-
SPA is strongly decoupled, end and back-end
meaning that the front-end are more
and back-end are separate. interdependent. All
SPA vs MPA Single-page applications
use APIs developed by
coding is usually
housed under one
server- side developers to project.
read and display data.

Coupling- Degree of Interdependence among two modules

 SPA SEO MPA SEO
One of the weaknesses of the MPA enables better
SPA is SEO. Unfortunately, website positioning, as
they aren’t as SEO-friendly as each page can be
MPA’s. It’s primarily because optimized for a different
most single-page applications
SPA vs MPA are run on JavaScript, which
keyword. Also, meta tags
can be included on every
most search engines do not
support. Web pages are page – this positively
indexed through “crawling” impacts Google rankings.
or “spidering”. Search
engine crawlers download
the page’s HTML files
which makes static HTML web-
pages are easier to rank.

SEO- Search Engine Optimization

 SPA SEO MPA SEO
A good user experience is MPA’s, on the other
no longer an option but a hand, enable better
requirement. SPA’s are information architecture.
more mobile-friendly, which You can create as many
SPA vs MPA is worth remembering as a
lot of traffic comes from
pages as required, and
you can include as much
mobile devices. Even information on a page as
Google started to prioritize you need without any
mobile experience over the limits. Navigation is clear,
desktop. Frameworks so the user can easily
applied in SPA development find their way around the
enable you to develop website, which positively
mobile apps. impacts their experience.

SEO- Search Engine Optimization

SPA vs MPA
 • The main objective of ReactJS is to develop User
Interfaces (UI) that improves the speed of the
apps.
• It uses virtual DOM (JavaScript object),
Why React? which improves the performance of the
app.
• The JavaScript virtual DOM is faster
than the regular DOM
 Componen
ts

One Way
JSX Data
Binding

React React

Features Features

Virtual
Simplicity
DOM

Performan
ce
 JSX

JSX stands for JavaScript XML.

It is a JavaScript syntax extension.
 Its an XML or HTML like syntax used by
ReactJS. This syntax is processed into
React JavaScript calls of React Framework
Features  It extends the ES6 so that HTML like text can
co-exist with JavaScript react code. It is not
necessary to use JSX, but it is recommended to
use in ReactJS.
 Components

ReactJS is all about components.

 ReactJS application is made up of multiple
React components, and each component has its own
logic and controls.
Features  These components can be reusable which help you
to maintain the code when working on larger scale
projects.
 One-way Data Binding

 ReactJS is designed in such a manner that follows

unidirectional data flow or one-way data binding.
 The benefits of one-way data binding give you better
React control throughout the application. If the data flow is in
Features another direction, then it requires additional features.
 It is because components are supposed to be
immutable and the data within them cannot be
changed.
 Flux is a pattern that helps to keep your data
unidirectional. This makes the application more flexible
that leads to increase efficiency.
 Virtual DOM

 A virtual DOM object is a representation of the original

DOM object. It works like a one-way data binding.
 Whenever any modifications happen in the web
React application, the entire UI is re-rendered in virtual DOM
representation.
Features  Then it checks the difference between the previous
DOM representation and new DOM.
 Once it has done, the real DOM will update only the
things that have actually changed.
 This makes the application faster, and there is no
wastage of memory.
 Simplicity

 ReactJS uses JSX file which makes the application

simple and to code as well as understand.
React  We know that ReactJS is a component- based

Features approach which makes the code reusable as your

need.
 This makes it simple to use and learn.
 Performance
 ReactJS is known to be a great performer. This feature
makes it much better than other frameworks out there
today. The reason behind this is that it manages a
virtual DOM.
React  The DOM is a cross-platform and programming API

Features which deals with HTML, XML or XHTML. The DOM exists
entirely in memory.
 Due to this, when we create a component, we did not
write directly to the DOM.
 Instead, we are writing virtual components that will
turn into the DOM leading to smoother and faster
 Advantage of ReactJS

1. Easy to Learn and USe

Pros and ReactJS is much easier to learn and use. It comes with a
good supply of documentation, tutorials, and training
Cons of resources. Any developer who comes from a JavaScript
ReactJS background can easily understand and start creating web
apps using React in a few days. It is the View part in
the MVC (Model-View-Controller) model. It is not fully
featured but has the advantage of open-source
JavaScript User Interface(UI) library, which helps to
execute the task in a better manner.
 Advantage of ReactJS

2. Creating Dynamic Web Applications Becomes

Easier
Pros and To create a dynamic web application specifically with
Cons of HTML strings was tricky because it requires a complex
coding, but React JS solved that issue and makes it easier.
ReactJS It provides less coding and gives more functionality. It
makes use of the JSX(JavaScript Extension), which is a
particular syntax letting HTML quotes and HTML tag
syntax to render particular subcomponents. It also
supports the building of machine-readable codes.
 Advantage of ReactJS

3. Reusable Components
A ReactJS web application is made up of multiple
components, and each component has its own logic and
Pros and controls. These components are responsible for
Cons of outputting a small, reusable piece of HTML code which
can be reused wherever you need them. The reusable
ReactJS code helps to make your apps easier to develop and
maintain. 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.
 Advantage of ReactJS

4. Performance Enhancement
ReactJS improves performance due to virtual DOM. The
Pros and DOM is a cross-platform and programming API which
deals with HTML, XML or XHTML. Most of the developers
Cons of faced the problem when the DOM was updated, which
slowed down the performance of the application. ReactJS
ReactJS solved this problem by introducing virtual DOM. The
React Virtual DOM exists entirely in memory and is a
representation of the web browser's DOM. Due to this,
when we write a React component, we did not write
directly to the DOM. Instead, we are writing virtual
components that react will turn into the DOM, leading
to smoother and faster performance.
 Advantage of ReactJS

5. The Support of Handy Tools

React JS has also gained popularity due to the presence of
Pros and a handy set of tools. These tools make the task
Cons of of the developers understandable and easier. The
React Developer Tools have been designed as Chrome
ReactJS and Firefox dev extension and allow you to inspect the
React component hierarchies in the virtual DOM. It also
allows you to select particular components and examine
and edit their current props and state.
 Advantage of ReactJS

6. Known to be SEO Friendly

Traditional JavaScript frameworks have an issue in dealing
Pros and with SEO. The search engines generally having trouble
Cons of in reading JavaScript- heavy applications. Many web
developers have often complained about this problem.
ReactJS ReactJS overcomes this problem that helps developers
to be easily navigated on various search engines. It is
because React.js applications can run on the server, and
the virtual DOM will be rendering and returning to the
browser as a regular web page.
 Advantage of ReactJS

7. The Benefit of Having JavaScript Library

Today, ReactJS is choosing by most of the web
Pros and developers. It is because it is offering a very rich
JavaScript library. The JavaScript library provides more
Cons of flexibility to the web developers to choose the way
they want.
ReactJS
8. Scope for Testing the Codes
ReactJS applications are extremely easy to test. It
offers a scope where the developer can test and
debug their codes with the help of native tools.
 Disadvantages of ReactJS

1. The high pace of development

Pros and The high pace of development has an advantage and
disadvantage both. In case of disadvantage, since the
Cons of environment continually changes so fast, some of the
developers not feeling comfortable to relearn the new
ReactJS ways of doing things regularly. It may be hard for them to
adopt all these changes with all the continuous updates.
They need to be always updated with their skills and
learn new ways of doing things.
 Disadvantages of ReactJS

2. Poor Documentation
It is another cons which are common for
constantly updating technologies. React technologies
updating and accelerating so fast that there is no
Pros and time to make proper documentation. To overcome
this, developers write instructions on their own with
Cons of the evolving of new releases and tools in their current
ReactJS projects.

3. View Part
ReactJS Covers only the UI Layers of the app and
nothing else. So you still need to choose some other
technologies to get a complete tooling set for
development in the project.
 Disadvantages of ReactJS

Pros and 4. JSX as a barrier

ReactJS uses JSX. It's a syntax extension that allows
Cons of HTML with JavaScript mixed together. This approach
ReactJS has its own benefits, but some members of the
development community consider JSX as a barrier,
especially for new developers. Developers complain
about its complexity in the learning curve.
 What is JSX?

A. A combination of JavaScript and

Question 1 XML
B. A new version of JavaScript
C. The output of a React project
 Why would you use JSX to create a React application?

A. JSX is the only supported method for creating React

applications.
Question 2 B. JSX allows for good code management. It injects the
necessary logic with your HTML.
C. JSX is supported by all browsers.
 What is the purpose of a bundler in web development?

A. To generate JSX
Question 3 B. To convert JSX and other resources into JavaScript
C. To bootstrap an application