BIW10203 WEB APPLICATION

By ai210318 | Updated: Dec. 8, 2024, 5:11 a.m.

Slideshow Video

SHARE THE AWESOMENESS

Education

create your own animated videos for free

_abc cc

* Powtoon is not liable for any 3rd party content used. It is the responsibility of each user to comply with 3rd party copyright laws.

Embed code

Select a size, the embed code changes based on your selection.

_abc Powtoon Transcript

BIW 10203 
WEB APPLICATION

Web Application Architecture
Group Members of Group 6 (S5)
ONG PEI YEE
PHUA HUAYSZE
TEE LEE SHI
LENG HOOI QI
Web application architecture is a high-level structure layout with all the software components

(such as databases, applications and middleware)

It ensures multiple applications work simultaneously.

WEB APPLICATION
Client-side
Database server
Server-side

Web application consists of 3 main sides of process
1.You as a client type an URL in the relevant browser field.
2.The browser sends the request to the Domain Name Server to recognize the IP address.
3.If successful, the browser sends a request to the server to respond.
4.The server directs the request to the data storage to locate the page, request data display.
5.If successful, the initially requested data appears in your browser.

How does it work
Importance of web application architecture
Greater business results
-save time and money over the long term

-make sure website operates at optimal capacity and run smoothly

2. Better app performance
-introduce great degree of flexibility

-adaptiveness to dynamic market fluctuations and customer demands.

3. Enhanced app security

-protect each structural elements separately

-making software stand all the common safety threats, like malicious attack

3-Tier Architecture
 This architecture is the safest and most secure one.
Consists of  3 layers:
Presentation layer / Client LayerApplication Layer / Business LayerData Layer

More secure as client does not directly access the dataApplication servers can be deployed on multiple machine providers which provides higher scalability, better performance and better reuse.
3-Tier Architecture
Each tier can be scaled independently and hence this architecture can be scaled horizontally. Improves the overall data integrity as data will go through the app server.
Layers of Modern Web Application Architecture
Presentation Layer
It is client-side component (Front-end)Enables users to interact with the server and the backend service via a browser
The code resides in the browser, receives requests and presents the user with the required information Common front-end technologies: HTML, CSS, JavaScript
Application Layer
It is server-side component (Back-end)The key component of the web application architectureReceives user requests, performs business logic and delivers the required data to the front-end systems.
 contains databases and  DBM  that collect, manage and store data.
key component of a web application that stores and manages information for a web app.
the data service layer separates business logic from the client side while processing requests.
Data Layer
Components
Web Application Components
UI/UX Web Application Components
Structural Components
Client Component
Server Component
Main Category
Web Application Components
UI/UX Web Application Components
Structural Components
UI Application Components link directly to web pages that are responsible for settings and configurations.

While the structural components are just responsible for interacting with users. This also includes data storage and database control.

Web Application Components
Client Component

Server Component

The client component is a representation of a web application’s functionality that the end-user interacts with.

The server component can be build using one or a combination of several programming languages and frameworks,

Models
Web Application Models
One Web Server, One Database
Multiple Web Servers, One Database
Multiple Web Server, Multiple Databases

One Web Server, 
One Database
Web Application Models
A single server/database model is used to run test projects, but not for full-fledged web applications.

Multiple Web Servers, One Database
 
Web Application Models
It requires at least two web servers, but any database problems will cause the application to crash.

(At a Machine Rather than the Web server)
Multiple Web Server, Multiple Databases

Web Application Models
The most reliable and efficient model. You can store data in all web server databases at the same time, or evenly distribute them by saving the application.

Type 
Web Application Architecture
Single Page Application (SPA)

Microservice Architecture

Serverless Architecture
Progressive Web App (PWA)

Isomorphic

Monolithic

Server Side Rendering (SSR)

Static Side Generation (SSG)

Single Page Application (SPA)
• Works within a browser and is designed to show relevant content only

• Do not refer to the server for loading new pages but sends requests for the needed parts of the webpage only

• Allows building an interactive web app as it uses an API to communicate with the server

• Pros:
     - Faster Performance
     - Improved flexibility of UX

• Cons:
     - Increased testing time
     - Possible loss of unsaved progress
     - Slower first-load speed

Microservice Architecture
Loosely coupled and use APIs for communication if a sophisticated business problem arises

Components are not directly dependent on each other

Possible for individual service components to be built in different programming languages

• Pros:
     - Easier scaling up
     - Better fault tolerance
     - Simple-to-understand code base
     - Independent module deployment

• Cons:
     - Difficulties with testing and debugging
     - Complex deployment

Serverless Architecture
Outsource both server and infrastructure management to a third-party cloud service provider

The provisioning of the underlying infrastructure is managed by an infrastructure service provider

Allows working on small functions in apps
• Pros:
     - Absence of server management
     - Highly scalable
     - Minimized latency
     - Speed and flexibility

• Cons:
     - Security concerns
     - High complexity

Progressive Web App (PWA)
Use the logic of a single page web app with some services running next in the browser

Offer a convenient user experience available from any browser and device through a shared URL

Allows the web application to support offline experiences, background synchronization and push notifications
• Pros:
     - Browser availability
     - Mobile-first approach
     - Increased traffic
     - Effective offline performance

• Cons:
     - Restricted browser support
     - Narrow utilization of native APIs

Isomorphic
A type of JavaScript application that can run both on the client-side and the server-side

The client first loads an HTML, where the JavaScript app is uploaded to the browser, then the app starts running like a SPA

This allows Google crawlers examine the web pages and make SEO of the web application work
Pros:
     - Quick data updates
     - Responsiveness
     - Multiple UI/UX options
     - Instant display
     - User-friendly routing

Cons: 
     - Limited to JS-based frameworks and tools

Monolithic
The entire software is developed as a single piece of code going through the traditional waterfall model

All the components are interdependent and interconnected and every component is required to run the application

Pros:
     - Simple development and deployment
     - Save cost

Cons: 
     - Difficult to manage or update
     - Not eady to scale
Server Side Rendering (SSR)
The content is fetched from the server and passed to the browser to be displayed to the user

User has to navigate to the page before the browser fetches a page from the server

More time is needed to display the content to the user

Pros:
     - SEO
     - Linkability
     - Instant first page load

Cons: 
     - Cannot handle heavy server requests
     - Poor interaction with end-user
     - Inability to create full-fledged UI

Static Side Generation (SSG)
Involves a generator that automates coding of individual HTML pages, creating them from templates

Holds an already generated HTML page to be given to users upon request

Pros:
     - High speed delivery through CDN
     - API independent
     - Simple and affordable to realize

Cons: 
     - Long build time
     - Difficult to update

Thats all from us!!!
Thank You For Watching!!!

BIW10203 WEB APPLICATION

Copy this link to share with friends and colleagues:

WELCOME TO POWTOON!