Stduent Name: John Doe
Student ID: 2036380
Module Code: 7CC005
Title:
Table of Contents
Introduction ........................................................................................................... 2
Client-side framework using ReactJS .................................................................. 5
Server-side backend framework using CodeIgniter 4.1.9. ................................... 5
The Difference between traditional web application vs Single Page Application ... 6
Figure 1. Single Page Application ....................... Error! Bookmark not defined.
Conclusion ........................................................................................................... 10
References ........................................................................................................... 11
Page | 1
Introduction
Web application over the years has used multi-page designs and formatting,
something we might call a traditional approach (Mesbah et al, 2007). There are,
however, additional limitations to a client-to-server interaction. When working
with a multipage web application, the challenge is usually faced when it comes to
exchanging information with the server due to significant client-server
communication. Low page loading and bad user interaction are often experienced
during data transfers, especially large ones, which are difficult to deal with.
Although multipage web applications are quite popular, they haven't met the user
expectations of interactivity and responsiveness (Butkiewicz et al, 2011). In classic
Page | 2
web applications, every request goes through a multi-page interface refresh. As a
result, web developers cannot completely ignore the increased complexity of
loading pages from multiple servers due to frequent server errors on the internet.
Frozen browser occurrence due to the complexity of web page loading has been
researched and linked to multipage web applications, which is not a good image
for the website developers.
Today, one of the most common issues facing multipage applications is that they
must take into consideration web page optimization, which is essential for
increasing overall application performance. As a result, because these problems
pose a threat to user interactivity which is essential for a business to grow,
developers are a force to utilize frameworks on both the client and server sides to
promote better communication and interactivity between them. Fortunately,
developers have used a new technology to address the current problem that
involves clients rendering information in the server using multipage applications.
With the increasing load on multiple servers, newer approaches that divide a page
among multiple servers are referred to as Single Page Applications (Deshmukh,
2019).
Single Page Applications are web applications that use dynamic HTML to interact
with the user without requiring the user to reload the entire page. The final
objective is to increase the user's app-like experience to facilitate fast transitions
which are imperative for web applications to feel like native applications. All
necessary HTML, JavaScript, and CSS code is served by the single-page application
without the need to refresh the page. Browser-initiated page loads are used to
get just the resources that are required (HTML, JavaScript, and CSS), which are
Page | 3
then dynamically loaded and added to the page as needed. When working with
single-page applications, users never have to worry about being interrupted.
Since this program is a conventional desktop application, it runs as such. A single-
page application should have a single page load where the assets are already
loaded to optimize storage and delivery of the source code and other materials
(Koukia, 2017). Single page apps are a web application that does not refresh
pages while in use. If you frequently use websites like Google, Gmail, Maps,
Facebook, Twitter, or GitHub, you will find numerous SPAs that do things like their
respective website functions, for example, Google as a search engine, Gmail for
email, Facebook for social networking, Twitter for communications, and GitHub
for software development (Slawomir, 2019). They may perform logic inside the
browser instead of on the server. By using just data instead of the whole HTML,
the bandwidth is reduced, thus helping the user experience be smoother.
The primary aim of this project is to see how single-page applications built using a
client-side framework interact with a server-side API (application programming
interface) compared to conventional web development. To further grasp the
differences between single-page apps and conventional web apps, I'll use ReactJS,
a client-side framework for developing web apps, and Codeigniter 4, a backend
framework for creating APIs (application programming interfaces). Then, via the
API medium, ReactJS would interact with CodeIgniter. This kind of communication
would aid in explaining the benefits of utilizing a single-page application for client-
side page rendering, which aids in meeting the increasing need for
interoperability and improved user experience dependability. This may assist to
reduce the complexity of page overload and explain the suitable possible
Page | 4
difference in structuring scalability and performance of single-page applications
against conventional web application methodologies.
Client-side framework using ReactJS
To create and maintain the JavaScript front-end library, Facebook supported the
development and maintenance of ReactJS (Javeed, 2019). Single-page web
application frameworks are JavaScript web application development frameworks.
Useful for web design and development is ReactJS. You can use ReactJS because it
is simple, versatile, and scalable. Use the Reacts framework to build data-driven
web user interface components.
Using ReactJS has many advantages, one of which is the Virtual DOM. Reusable
code is facilitated by reduced DOM cost, which makes ReactJS an ideal choice for
using library features. When using the MVC architecture, it includes a virtual
DOM. Synchronizing the virtual DOM in memory used by the UI with the actual
DOM in use by the library is accomplished via the usage of a reconciliation
procedure (Facebook, 2021). A ReactJS-based framework that connects to an API
and database on the server is discussed in this project by the means of Single
Page Application. Making updates to a site's content is made easier using ReactJS
components. ReactJS may be thought of as a framework consisting of reusable
components best used for rendering in Single Page Applications.
Server-side framework using Codeigniter 4
Codeigniter 4 was used to build the API for the project which is utilized in the
front end to interact with the ReactJS. The great benefit of CodeIgniter is that it is
Page | 5
the backend medium that can make it possible for the ReactJS to store
information in a database.
MVC (Model-View-Controller) is one of the prominent programming paradigms
used by CodeIgniter (model view controller). To get maximum benefit from the
CodeIgniter framework, it's not essential for it to implement the whole MVC
(Model-View-Controller) paradigm, only the controller component is required.
CodeIgniter is renowned for its very quick load time (Valarezo et al, 2018).
The Difference between traditional web application vs Single Page Application
There are two general approaches to building web applications today: traditional web
applications that perform most of the application logic on the server, and single-page
applications (SPAs) that perform most of the user interface logic in a web browser,
communicating with the web server primarily using web APIs.
A hybrid approach is also possible, the simplest being host one or more rich SPA-like
subapplications within a larger traditional web application.
Use traditional web applications when:
• Your application's client-side requirements are simple or even read-only.
• Your application needs to function in browsers without JavaScript support.
Use a SPA when:
• Your application must expose a rich user interface with many features.
• Your team is familiar with JavaScript, TypeScript, or Blazor WebAssembly
development.
• Your application must already expose an API for other (internal or public)
clients.
Additionally, SPA frameworks require greater architectural and security expertise. They
experience greater churn due to frequent updates and new client frameworks than
traditional web applications. Configuring automated build and deployment processes
Page | 6
and utilizing deployment options like containers may be more difficult with SPA
applications than traditional web apps.
Improvements in user experience made possible by the SPA approach must be weighed
against these considerations.
Blazor
ASP.NET Core includes a model for building rich, interactive, and composable user
interfaces called Blazor. Blazor server-side allows developers to build UI with C# and
Razor on the server and for the UI to be interactively connected to the browser in real-
time using a persistent SignalR connection. Blazor WebAssembly introduces another
option for Blazor apps, allowing them to run in the browser using WebAssembly.
Because it's real .NET code running on WebAssembly, you can reuse code and libraries
from server-side parts of your application.
Blazor provides a new, third option to consider when evaluating whether to build a
purely server-rendered web application or a SPA. You can build rich, SPA-like client-side
behaviors using Blazor, without the need for significant JavaScript development. Blazor
applications can call APIs to request data or perform server-side operations. They can
interoperate with JavaScript where necessary to take advantage of JavaScript libraries
and frameworks.
Consider building your web application with Blazor when:
• Your application must expose a rich user interface
• Your team is more comfortable with .NET development than JavaScript or
TypeScript development
If you have an existing web forms application you're considering migrating to .NET Core
or the latest .NET, you may wish to review the free e-book, Blazor for Web Forms
Developers to see whether it makes sense to consider migrating it to Blazor.
For more information about Blazor, see Get started with Blazor.
When to choose traditional web apps
The following section is a more detailed explanation of the previously stated reasons for
picking traditional web applications.
Page | 7
Your application has simple, possibly read-only, client-side requirements
Many web applications are primarily consumed in a read-only fashion by the vast
majority of their users. Read-only (or read-mostly) applications tend to be much simpler
than those applications that maintain and manipulate a great deal of state. For example,
a search engine might consist of a single entry point with a textbox and a second page
for displaying search results. Anonymous users can easily make requests, and there is
little need for client-side logic. Likewise, a blog or content management system's public-
facing application usually consists mainly of content with little client-side behavior. Such
applications are easily built as traditional server-based web applications, which perform
logic on the web server and render HTML to be displayed in the browser. The fact that
each unique page of the site has its own URL that can be bookmarked and indexed by
search engines (by default, without having to add this functionality as a separate feature
of the application) is also a clear benefit in such scenarios.
Your application needs to function in browsers without JavaScript support
Web applications that need to function in browsers with limited or no JavaScript support
should be written using traditional web app workflows (or at least be able to fall back to
such behavior). SPAs require client-side JavaScript in order to function; if it's not
available, SPAs are not a good choice.
Your team is unfamiliar with JavaScript or TypeScript development techniques
If your team is unfamiliar with JavaScript or TypeScript, but is familiar with server-side
web application development, then they will probably be able to deliver a traditional
web app more quickly than a SPA. Unless learning to program SPAs is a goal, or the user
experience afforded by a SPA is required, traditional web apps are a more productive
choice for teams who are already familiar with building them.
When to choose SPAs
The following section is a more detailed explanation of when to choose a Single Page
Applications style of development for your web app.
Your application must expose a rich user interface with many features
SPAs can support rich client-side functionality that doesn't require reloading the page as
users take actions or navigate between areas of the app. SPAs can load more quickly,
fetching data in the background, and individual user actions are more responsive since
full page reloads are rare. SPAs can support incremental updates, saving partially
Page | 8
completed forms or documents without the user having to click a button to submit a
form. SPAs can support rich client-side behaviors, such as drag-and-drop, much more
readily than traditional applications. SPAs can be designed to run in a disconnected
mode, making updates to a client-side model that are eventually synchronized back to
the server once a connection is re-established. Choose a SPA-style application if your
app's requirements include rich functionality that goes beyond what typical HTML forms
offer.
Frequently, SPAs need to implement features that are built into traditional web apps,
such as displaying a meaningful URL in the address bar reflecting the current operation
(and allowing users to bookmark or deep link to this URL to return to it). SPAs also
should allow users to use the browser's back and forward buttons with results that won't
surprise them.
Your team is familiar with JavaScript and/or TypeScript development
Writing SPAs requires familiarity with JavaScript and/or TypeScript and client-side
programming techniques and libraries. Your team should be competent in writing
modern JavaScript using a SPA framework like Angular.
References – SPA Frameworks
• Angular: https://angular.io
• React: https://reactjs.org/
• Vue.js: https://vuejs.org/
Your application must already expose an API for other (internal or public) clients
If you're already supporting a web API for use by other clients, it may require less effort
to create a SPA implementation that leverages these APIs rather than reproducing the
logic in server-side form. SPAs make extensive use of web APIs to query and update
data as users interact with the application.
When to choose Blazor
The following section is a more detailed explanation of when to choose Blazor for your
web app.
Your application must expose a rich user interface
Page | 9
Like JavaScript-based SPAs, Blazor applications can support rich client behavior without
page reloads. These applications are more responsive to users, fetching only the data (or
HTML) required to respond to a given user interaction. Designed properly, server-side
Blazor apps can be configured to run as client-side Blazor apps with minimal changes
once this feature is supported.
Your team is more comfortable with .NET development than JavaScript or
TypeScript development
Many developers are more productive with .NET and Razor than with client-side
languages like JavaScript or TypeScript. Since the server-side of the application is
already being developed with .NET, using Blazor ensures every .NET developer on the
team can understand and potentially build the behavior of the front end of the
application.
Conclusion
The choice which one to use, whether Traditional web application or single web
page application is dependent on the project developer, project purpose and
company management capacity.
Most web applications are multi or traditional web applications because of the
purposes and needs required to run the project.
My project CourierTim, a courier tracker web application built with Codeigniter 4
and react js is a traditional or multipage web app because it has many pages for
CRUD functionality. For commencing a project, performances need, and technical
standards guide the final choice of which platform to employ. An increasing
number of businesses are migrating their web application from a traditional web
development to a single page application development online. This increases their
capabilities significantly, but for them to be used to their greatest potential,
Page | 10
consumers will have to engage with them. Since it has a strong scalable structure,
which can handle massive amounts of data, and has a great user experience
layout, it's a good concept for web development to have a single application
(Prabhu, 2019). While building a web application, I believe you should examine
your needs thoroughly. I strongly think you should use a single-page strategy for
the application. The benefits far outweigh the disadvantages. As far as the user
experience is concerned, I believe single-page application may provide a superior
overall experience because of the fast development and code reusability, as well
as a less complicated frontend deployment.
References
1. Mesbah, A. and Deursen, A., V. (2007). Migrating Multi-page Web
Applications to Single-page AJAX Interfaces, 11th European Conference on
Page | 11
Software Maintenance and Reengineering (CSMR'07), pp. 181-190, Doi:
10.1109/CSMR.2007.33.
2. 2Butkiewicz, M., Madhyastha, H,V. and Sekar, V. (2011). Understanding
website complexity: measurements, metrics, and implications. In
Proceedings of the 2011 ACM SIGCOMM conference on Internet
measurement conference, pp. 313-328.
3. Deshmukh, S., Mane, D. and Retawade, A. (2019). Building a Single Page
Application Web Front-end for E-Learning site, 3rd International
Conference on Computing Methodologies and Communication (ICCMC), pp.
985-987, Doi: 10.1109/ICCMC.2019.8819703.
4. Koukia, A. (2017). Going Single Page App or Traditional Web App. [online]
Medium. [Accessed 1 August. 2021. Available at: https://koukia.ca/going-
single-page-app-or-traditional-web-app-cedb10041b50].
5. Slawomir, (2019). What are single page applications. [Online] [Accessed 1
August. 2021]. Available at https://www.netguru.com/blog/what-are-
single-page-applications.
6. Javeed, A. (2019). Performance Optimization Techniques for ReactJS, IEEE
International Conference on Electrical, Computer and Communication
Technologies (ICECCT), pp. 1-5, Doi: 10.1109/ICECCT.2019.8869134.
7. Facebook (2021). React DOM - a JavaScript library for building user
interfaces, [online] Available at https://reactjs.org/docs/react-dom.html/
[Accessed 1 Aug 2021].
8. Valarezo, R. and Guarda, T. (2018). Comparative analysis of the laravel and
codeigniter frameworks: For the implementation of the management
system of merit and opposition competitions in the State University
Page | 12
Península de Santa Elena, 13th Iberian Conference on Information Systems
and Technologies (CISTI), pp. 1-6, Doi: 10.23919/CISTI.2018.8399242.
9. Ivan, P. (2019). Single Page Application. [Online]. [Accessed 1 August 2021].
Available at https://sitechecker.pro/single-page-application-seo/
10.Prabhu, J. (2019). When to Choose Single Page Apps (SPAs) and Traditional
Web Apps. Tech Blogs by TechAffinity. [online] [Accessed 2 August 2021].
Available at: https://techaffinity.com/blog/when-to-choose-single-page-
apps-spas-and-traditional-web-apps/.
11. https://docs.microsoft.com/en-us/dotnet/architecture/modern-web-apps-
azure/choose-between-traditional-web-and-single-page-apps
Page | 13
