Front End Web Development

Topic 1:
Overview of Web Application
Architecture
© NCC Education Limited
 Overview of Web Application Architecture Topic 1 - 1.2

Scope and Coverage

• Overview of Internet and WWW

• Evolution of Website Development
• Web Application Architecture
• Types of Web Application Architecture
• Overview of Front-end Web Development
 Overview of Web Application Architecture Topic 1 - 1.3

Learning Outcomes

By the end of this topic students will be able to:

• Describe the underlying technologies for building websites.
• Explain about fundamental concepts of website design including the
client-server model.
• Distinguish between front-end web development and back-end web
development.
• Identify key concepts and technologies needed for front-end web
development.
 Overview of Web Application Architecture Topic 1 - 1.4

Unit Roadmap
Week Topic Week Topic
Overview of Web JavaScript - II
1 Application Architecture 7

2 Introduction to HTML5 8 jQuery

Introduction to CSS Responsive CSS Framework:
3 9
Bootstrap - I
HTML and CSS Responsive CSS Framework:
4 10
Bootstrap - II
CSS Flexbox and Grid Code Review, Testing and
5 11
Layout Collaboration
6 JavaScript - I 12 Unit Summary
 Overview of Web Application Architecture Topic 1 - 1.5

THE INTERNET AND WWW

 Overview of Web Application Architecture Topic 1 - 1.6

Internet
• A global network of interconnected • Internet connectivity is powered by
computers and devices. technologies like optical fibres,
• Enables communication and the wireless and satellite
exchange of information with support communication.
of numerous protocols and
technologies.

A website or a web-application
is a gateway to establish
connection between devices.
 Overview of Web Application Architecture Topic 1 - 1.7

Key Components of the Internet

• Servers: Computers that host the websites, and store and serve
the web contents.
• Clients: Devices (e.g., laptops, smartphones) that access and
interact with web content.
• Protocols: Rules and standards that govern how data is
transmitted over the Internet (e.g., HTTP, HTTPS).
 Overview of Web Application Architecture Topic 1 - 1.8

World Wide Web (WWW)

• WWW - World Wide Web – or

simply "Web"
• An interconnected network of
webpages and resources
accessible through the Internet.
• Sir Tim Berners-Lee invented in
1989 to share information and
documents electronically.
 Overview of Web Application Architecture Topic 1 - 1.9

How the World Wide Web Works

• Web pages are hosted on servers connected to the

Internet.
• Users access web pages using web browsers, which
send requests to the appropriate servers.
• Servers respond to these requests by sending back the
requested web pages, which the browsers then render
for users to view.
 Overview of Web Application Architecture Topic 1 - 1.10

Key Components of the World Wide Web

• Website: A platform with one or more webpages (documents)

containing text, images, multimedia, and other resources.
• Hyperlinks: Links within web pages that connect different
documents or resources.
• Web Browsers: Software applications that allow users to access
and view web pages, e.g. Google Chrome, Microsoft Edge.
 Overview of Web Application Architecture Topic 1 - 1.11

What is a Website?

• A website is a collection of web pages

hosted on a server and accessible
through the Internet.
• Web pages consist of text, images,
multimedia elements, and other
resources.
 Overview of Web Application Architecture Topic 1 - 1.12

Evolution of Website Development (1)

• Early websites were simple,

consisting mainly of text and basic
formatting.
• Advancements in web technologies
led to more interactive and visually
appealing websites.
• Today, websites are dynamic,
responsive, and feature-rich,
providing seamless user
Screengrab of an earlier version of BBC website
experiences.
 Overview of Web Application Architecture Topic 1 - 1.13

Evolution of Website Development (2)

Early Websites
• Early websites emerged in the 1990s
• primarily consisted of static pages with basic text and
limited styling.
• HTML (Hypertext Markup Language) was the main
language used for structuring web content.
 Overview of Web Application Architecture Topic 1 - 1.14

Evolution of Website Development (3)

CSS
• Cascading Style Sheets (CSS) in the late 1990
• Separate the presentation and layout from the HTML
structure.
• CSS enabled better control over typography, colors,
spacing, and overall design.
 Overview of Web Application Architecture Topic 1 - 1.15

Evolution of Website Development (4)

Client-Side Scripting
• The advent of JavaScript in the late 1990s revolutionised
website development.
• JavaScript enabled client-side interactivity, such as form
validation, image sliders, and dynamic page updates.
 Overview of Web Application Architecture Topic 1 - 1.16

Evolution of Website Development (5)

Server-Side Scripting
• With the introduction of server-side scripting languages like
PHP, websites became capable of generating dynamic
content.
• Server-side scripting enabled the inclusion of databases,
user authentication, and dynamic page rendering.
 Overview of Web Application Architecture Topic 1 - 1.17

Evolution of Website Development (6)

Web 2.0
• Web 2.0, coined in the early 2000s, marked a shift
towards user-generated content, social media, and
interactive web applications.
• Rich Internet Applications (RIAs) emerged, utilising
technologies like AJAX (Asynchronous JavaScript
and XML) for seamless user experiences.
 Overview of Web Application Architecture Topic 1 - 1.18

Evolution of Website Development (7)

Responsive Web Design

• The increasing use of mobile devices
prompted the need for responsive
web design.
• Responsive web design allows
websites to adapt and provide
optimal user experiences across
various screen sizes and devices.
 Overview of Web Application Architecture Topic 1 - 1.19

Evolution of Website Development (8)

Front-End Frameworks and Libraries

• Front-end frameworks and libraries, such as Bootstrap,
Foundation, and React, gained popularity.
• These tools provide pre-built components, responsive
grids, and streamlined development workflows.
 Overview of Web Application Architecture Topic 1 - 1.20

Evolution of Website Development (9)

Single Page Applications (SPAs)

• Single-Page Applications (SPAs) emerged as a popular
approach, delivering a more app-like experience within
a single web page.
• Frameworks like Angular, React, and Vue.js enable the
development of SPAs by managing state and updating
content dynamically.
 Overview of Web Application Architecture Topic 1 - 1.21

Evolution of Website Development (10)

Progressive Web Apps (PWAs)

• Progressive Web Apps (PWAs) combine the capabilities
of web technologies with mobile app features.
• PWAs can be installed on a user's device, work offline,
and provide push notifications, enhancing user
engagement.
 Overview of Web Application Architecture Topic 1 - 1.22

Evolution of Website Development (11)

Performance Optimisation
• Developers focus on optimising website performance
through techniques like minification, code splitting, lazy
loading, and caching.
• Content Delivery Networks (CDNs) help deliver assets
efficiently across global networks.
 Overview of Web Application Architecture Topic 1 - 1.23

Conclusion

• Website development has come a long way, evolving from simple

static pages to dynamic, interactive, and performant web
applications.
• Staying up-to-date with the latest technologies and trends is
crucial for modern web developers.
 Overview of Web Application Architecture Topic 1 - 1.24

WEB APPLICATION
 Overview of Web Application Architecture Topic 1 - 1.25

Web Application System

• A web application system is a software application accessed

through a web browser.
• It provides functionality and services to users over the Internet.
• Example: Gmail, LinkedIn, Amazon, E-bay
 Overview of Web Application Architecture Topic 1 - 1.26

Characteristics of Web Application Systems

• Web-Based: Accessed and operated using web browsers on

various devices.
• Client-Server Architecture: Consists of client-side (browser) and
server-side components.
• Interactivity: Enables user interactions, data submission, and real-
time updates.
• Scalability: Supports concurrent users and handles increased
traffic as needed.
 Overview of Web Application Architecture Topic 1 - 1.27

Key Technologies in Web Application Systems

• Front-end:
• HTML (Hypertext Markup Language): Defines the structure and content of web
pages.
• CSS (Cascading Style Sheets): Styles and presents the visual aspects of web
pages.
• JavaScript: Enables client-side interactivity and dynamic content manipulation.
• Back-end / Server-Side:
• PHP, Python, Ruby, Node.js, etc., for processing requests and generating
responses.
• Databases:
• Store and retrieve data for the web application, such as MySQL, PostgreSQL,
MongoDB, or SQLite.
 Overview of Web Application Architecture Topic 1 - 1.28

WEB APPLICATION
ARCHITECTURE
 Overview of Web Application Architecture Topic 1 - 1.29

Web Application Architecture

Web service
AJAX

JSON Business logic

HTML

Server side
Client side

• Web application architecture refers to the structure and organisation of a web

application system.
• Defines the relationship of different components in a web application such as
databases, server, and applications.
• Enables to define the functionality and logic of the web application between the
server and the client side.
 Overview of Web Application Architecture Topic 1 - 1.30

Need for Web Application Architecture

• As web applications become increasingly complex, the need for a

well-defined architecture becomes crucial.
• Addresses the increasing complexity and demands of modern web
applications.
• It provides a structured approach to design, develop, and maintain
web applications.
• Benefits obtained include - scalability, manageability, maintainability,
reusability, and fosters collaboration while enhancing performance
and security.
 Overview of Web Application Architecture Topic 1 - 1.31

Benefits of Web Application Architecture (1)

Benefit 1: Scalability
• Web application architecture enables scalability to accommodate
increasing user traffic and concurrent user demands.
• It allows for horizontal scaling by adding more servers or utilising
cloud-based infrastructure as needed.
 Overview of Web Application Architecture Topic 1 - 1.32

Benefits of Web Application Architecture (2)

Benefit 2: Modularity and Maintainability

• Web application architecture promotes modularity, dividing the
system into separate components or modules.
• Modularity enhances maintainability by allowing developers to
update or replace specific components without impacting the
entire application.
 Overview of Web Application Architecture Topic 1 - 1.33

Benefits of Web Application Architecture (3)

Benefit 3: Reusability
• Components in web application architecture can be designed to
be reusable, saving time and effort in development.
• Reusability allows for the creation of libraries, frameworks, and
modules that can be utilised across multiple projects.
 Overview of Web Application Architecture Topic 1 - 1.34

Benefits of Web Application Architecture (4)

Benefit 4: Separation of Concerns

• Web application architecture promotes the separation of
concerns, dividing responsibilities into distinct components.
• Separation of concerns allows for better code organisation, easier
debugging, and improved collaboration among development
teams.
 Overview of Web Application Architecture Topic 1 - 1.35

Benefits of Web Application Architecture (5)

Benefit 5: Performance and Efficiency

• Web application architecture enables optimisation for performance
and efficiency.
• It allows for caching strategies, database optimisation, and load
balancing techniques to enhance application speed and
responsiveness.
 Overview of Web Application Architecture Topic 1 - 1.36

Benefits of Web Application Architecture (6)

Benefit 6: Security and Stability

• Web application architecture incorporates security measures and
best practices to protect user data and ensure system stability.
• By considering security requirements upfront, architecture helps
prevent vulnerabilities and ensures a robust application.
 Overview of Web Application Architecture Topic 1 - 1.37

TYPES OF WEB APPLICATION

ARCHITECTURE
 Overview of Web Application Architecture Topic 1 - 1.38

Types of Web Application Architecture

• Monolithic Architecture: A traditional approach where the entire

application is built as a single unit.
• Microservices Architecture: A modular approach where the
application is divided into smaller, independent services.
• Serverless Architecture: Applications built using serverless
functions or "Functions as a Service" (FaaS) platforms.
 Overview of Web Application Architecture Topic 1 - 1.39

Monolithic Architecture
• Web application is developed
User Interface and deployed as a single, self-
contained codebase unit.
Business logic
• All components including the
user interface, business logic,
Data access
and data access, are tightly
coupled and reside within the
same codebase.
 Overview of Web Application Architecture Topic 1 - 1.40

Monolithic Architecture - Characteristics

• Single Codebase: The entire application is written and maintained

within a single code repository.
• Centralised Database: All data access and storage functions are
handled by a centralised database shared across the application.
• Tight Coupling: Components are interconnected, making it
challenging to modify or replace individual elements without affecting
the entire application.
• Workflow: developers work on different parts of the application
within the same codebase.
 Overview of Web Application Architecture Topic 1 - 1.41

Monolithic Architecture – Pros & Cons

Pros Cons
• Simplicity: relatively • Scalability Issues: As user traffic
straightforward to develop, deploy, increases scalability is challenging.
and maintain. • Development Bottlenecks: Collaboration
• Easy to Scale: With low user with large teams is challenging and slower
traffic, monolithic applications can development cycles.
be cost-effective and easy to • Maintenance Complexity: Modifying or
manage. adding new features can be risky with side
effects.
• Lack of Flexibility: Challenging to adopt
new technologies or scale specific
components independently.
 Overview of Web Application Architecture Topic 1 - 1.42

Microservices Architecture
• The web application is broken into User
interface
smaller, loosely coupled services.
• Each service is called as a
microservice.
• Responsible for a specific Micro-
Micro-
service
business capability. service
Micro-
• Easier to develop, deploy, and service

scaled independently. Database

Database
Database
 Overview of Web Application Architecture Topic 1 - 1.43

Microservices Architecture - Characteristics

• Service Independence: Each microservice operates as an

independent unit, with its own codebase, database, and APIs.
• Decentralised Data Management: Microservices often manage their
data, reducing dependencies on a centralized database.
• Communication: Services communicate through lightweight protocols
like HTTP/REST or message queues.
• Workflow: Development teams work on individual microservices
independently.
• Multi-platform: Each microservice can use different programming
languages.
 Overview of Web Application Architecture Topic 1 - 1.44

Microservices Architecture – Pros & Cons

Pros Cons
• Scalability: Enables granular scaling, where only • Complexity: Managing a distributed
specific services handle increased load. system introduces additional complexities
• Flexibility: Allows adoption of new technologies and in deployment, monitoring, and
frameworks for individual services without impacting debugging.
the entire application. • Communication Overhead: As services
• Reduced risk: Isolating services reduces the risk of communicate over networks, additional
affecting other parts of the application during updates overhead may occur due to latency and
or bug fixes. message passing.
• Faster Development: Smaller teams working on • Data Consistency: Maintaining data
individual services enable faster development cycles. consistency across microservices can be
challenging due to decentralised data
• Fault Isolation: A failure in one microservice doesn't
management.
necessarily affect the entire system, promoting fault
tolerance.
 Overview of Web Application Architecture Topic 1 - 1.45

Serverless Architecture
Service 1

Service 2

User upload API Service 3

application code Gateway
Cloud provider executes
application code

• Serverless architecture - also known as Function as a Service (FaaS).

• Build and run applications and services without having to manage
infrastructure (servers).
• The cloud provider handles the infrastructure.
 Overview of Web Application Architecture Topic 1 - 1.46

Serverless Architecture – Pros & Cons

Pros Cons
• Scalability: Handle sudden spikes in demand, • Cold Start Latency: When a function is
automatically scaling functions as needed. invoked after being idle, there may be a
slight delay due to cold start latency.
• Cost-Efficiency: Cost-effective as users will
be billed only for the actual code requests for • Limited Execution Time: Functions
low to moderate traffic applications. typically have a maximum execution time
Reduced Operational Overhead: Developers limit, which may impact tasks with long-
•
don't need to manage servers, allowing them to running processes.
focus on writing code and business logic. • Vendor Lock-In: Moving between
Easy Deployment: Serverless platforms serverless providers may require code
•
handle deployment and configuration, making it adjustments and introduces vendor-
easier to release updates and new features. specific dependencies.
 Overview of Web Application Architecture Topic 1 - 1.47

3-Tier Web Architecture

• Presentation Tier: Handles user interface and

interaction, typically implemented using HTML, Presentation Layer
CSS, and JavaScript.
• Application (Logic) Tier: Contains the
business logic and processes user requests, Application Layer
often using a server-side language like Python,
Ruby, or Node.js.
• Data Tier: Stores and retrieves data, Data Layer
commonly using databases such as MySQL,
PostgreSQL, or MongoDB.
 Overview of Web Application Architecture Topic 1 - 1.48

LAYERS OF MODERN WEB

APPLICATION ARCHITECTURE
 Overview of Web Application Architecture Topic 1 - 1.49

Layers of Modern Web Application Architecture

• User Interface (UI) Layer: Handles the presentation and user interaction using
HTML, CSS, and JavaScript frameworks like React, Angular, or Vue.js.
• Application Layer: Implements the business logic, validation, and data
processing. It may include server-side frameworks or APIs.
• Data Layer: Manages the storage and retrieval of data, often through relational
or NoSQL databases.
• Infrastructure Layer: Includes the servers, networking, and other components
required to host and deploy the application.
 Overview of Web Application Architecture Topic 1 - 1.50

User Interface Layer

• Responsible for rendering the user interface and managing user

interactions.
• Utilizes HTML, CSS, and JavaScript frameworks to create
responsive and engaging UIs.
• Enables client-side interactivity, AJAX requests, and handling
events.
 Overview of Web Application Architecture Topic 1 - 1.51

Application Layer

• Implements the core logic of the web application.

• Handles user requests, performs data processing, and
communicates with the data layer.
• Can be built using server-side frameworks, microservices, or
serverless functions.
 Overview of Web Application Architecture Topic 1 - 1.52

Data Layer

• Manages the storage, retrieval, and manipulation of data.

• Includes databases, such as relational databases or NoSQL
solutions.
• Involves techniques like data modeling, querying, and caching.
 Overview of Web Application Architecture Topic 1 - 1.53

Infrastructure Layer

• Provides the necessary infrastructure for hosting and deploying

the web application.
• Involves servers, cloud services, load balancers, and networking
components.
• May use technologies like containers, virtual machines, or
serverless platforms.
 Overview of Web Application Architecture Topic 1 - 1.54

Conclusion

• Web application systems are complex software applications

accessed through web browsers.
• Different web application architectures, such as monolithic,
microservices, and serverless, offer various advantages and
trade-offs.
• Understanding the layers of modern web application architecture
helps in designing scalable, maintainable, and efficient
applications.
 Overview of Web Application Architecture Topic 1 - 1.55

FRONT-END WEB DEVELOPMENT

 Overview of Web Application Architecture Topic 1 - 1.56

Front-End Web Development

• Front-end web development focuses on the user-facing aspects of

a website or web application.
• It involves creating the visual and interactive components that
users see and interact with in their browsers.
• To ensure successful development, several key considerations
need to be taken into account as presented in the following slides.
 Overview of Web Application Architecture Topic 1 - 1.57

Key Considerations of Front-end Web Development (1)

User Experience (UX) Design

• UX design focuses on creating a seamless and enjoyable user
experience.
• Considerations include intuitive navigation, clear information
hierarchy, and visually appealing design.
 Overview of Web Application Architecture Topic 1 - 1.58

Key Considerations of Front-end Web Development (2)

Responsiveness and Mobile-First Design

• Websites should be responsive, adapting to different devices and
screen sizes.
• Mobile-first design ensures optimal experiences on mobile
devices by prioritising their needs during development.
 Overview of Web Application Architecture Topic 1 - 1.59

Key Considerations of Front-end Web Development (3)

Performance Optimisation
• Performance optimisation is crucial for a smooth user experience
and search engine visibility.
• Considerations include minimising file sizes, optimising images,
and leveraging caching and compression techniques.
 Overview of Web Application Architecture Topic 1 - 1.60

Key Considerations of Front-end Web Development (4)

Accessibility
• Designing websites with accessibility in mind ensures inclusivity
and usability for people with disabilities.
• Considerations include proper semantic markup, keyboard
accessibility, and alternative text for images.
 Overview of Web Application Architecture Topic 1 - 1.61

Key Considerations of Front-end Web Development (5)

Cross-Browser Compatibility
• Websites should be compatible with different web browsers and
their various versions.
• Considerations include testing and addressing browser-specific
quirks and using progressive enhancement techniques.
 Overview of Web Application Architecture Topic 1 - 1.62

Key Considerations of Front-end Web Development (6)

Search Engine Optimisation (SEO)

• SEO practices help websites rank higher in search engine results
and increase visibility.
• Considerations include optimising page titles, meta tags, URLs,
and ensuring proper content structure.
 Overview of Web Application Architecture Topic 1 - 1.63

Key Considerations of Front-end Web Development (7)

Code Efficiency and Performance

• Writing clean and efficient code improves performance,
maintainability, and scalability.
• Considerations include using proper code organization,
minimising dependencies, and avoiding unnecessary network
requests.
 Overview of Web Application Architecture Topic 1 - 1.64

Key Considerations of Front-end Web Development (8)

Security
• Web development should prioritise security to protect user data
and prevent unauthorised access.
• Considerations include implementing secure authentication,
input validation, and protecting against common vulnerabilities.
 Overview of Web Application Architecture Topic 1 - 1.65

Key Concepts and Technologies for Front-End Web Development

Programming Languages:
• HTML (Hypertext Markup Language)
• HTML is the standard markup language used to structure and organise content on the web.
• It defines the elements, tags, and attributes that determine the structure and semantics of
web pages.
• CSS (Cascading Style Sheets)
• CSS is a stylesheet language used to control the presentation and layout of web pages.
• It enables the styling of HTML elements, including colors, typography, spacing, and
positioning.
• JavaScript
• JavaScript is a programming language that adds interactivity and behavior to web pages.
• It allows for dynamic content updates, user input validation, animations, and interactions with
APIs and services.
 Overview of Web Application Architecture Topic 1 - 1.66

Key Concepts and Technologies for Front-End Web Development

Frameworks:
• Front-end frameworks like React, Angular, and Vue.js provide
pre-built components and tools to streamline development.
• They facilitate building complex user interfaces, managing state,
and enhancing code reusability.
 Overview of Web Application Architecture Topic 1 - 1.67

Browser Developer Tools

• Browser developer tools, such as Chrome DevTools or Firefox

Developer Tools, are essential for front-end development.
• They provide debugging capabilities, inspecting and manipulating
HTML, CSS, and JavaScript in real-time.
 Overview of Web Application Architecture Topic 1 - 1.68

Version Control Systems

• Version control systems like Git help manage and track

changes in code and collaborate with other developers.
• They enable code versioning, branching, merging, and facilitate
teamwork in web development projects.
 Overview of Web Application Architecture Topic 1 - 1.69

Conclusion

• Understanding key concepts and technologies in front-end web

development is crucial for building modern, interactive, and
responsive websites.
• HTML, CSS, JavaScript, responsive design, frameworks,
developer tools, version control, and build tools are essential
components of front-end development.
 Overview of Web Application Architecture Topic 1 - 1.70

Quiz - 1
1. What is the primary role of a web application's architecture?
A) To define the user interface design
B) To outline the application’s interaction with databases
C) To structure the application for both client and server-side operations
D) To manage the application's security protocols
2. Which component is responsible for handling the business logic in a web application architecture?
A) The database
B) The application server
C) The client
D) The firewall
3. How do web applications typically communicate with databases?
A) Through direct file access
B) Using Application Programming Interfaces (APIs)
C) Via email protocols
D) With desktop software
 Overview of Web Application Architecture Topic 1 - 1.71

Quiz - 2
1. Which type of web application architecture involves generating HTML, CSS, and JavaScript by the server
and sending them to the client?
A) Single-Page Applications (SPA)
B) Server-Side Rendered (SSR) Applications
C) Microservices Architecture
D) Client-Side Rendered (CSR) Applications

2. What is a defining characteristic of a Microservices Architecture?

A) It uses a single monolithic server for all operations.
B) It involves multiple interconnected APIs.
C) It requires all components to be written in the same programming language.
D) It is primarily used for desktop applications, not web applications.
 Overview of Web Application Architecture Topic 1 - 1.72

Quiz - 3
1. Which technology is primarily used for structuring the content of web pages?
A) JavaScript
B) CSS
C) HTML
D) PHP
2. What is the main purpose of CSS in front-end development?
A) To create interactive elements
B) To style and layout web pages
C) To manage the database
D) To program server-side applications
 Overview of Web Application Architecture Topic 1 - 1.73

References
Evolution of Internet and WWW:
- Internet Society. (n.d.). *A Brief History of the Internet*. Available at:
https://www.internetsociety.org/internet/history-internet/brief-history-internet/

Web Application Architecture:

- Microsoft. (n.d.). *Common web application architectures*. Available at: https://learn.microsoft.com/en-
us/dotnet/architecture/modern-web-apps-azure/common-web-application-architectures

Types of Web Application Architecture:

- Radixweb. (n.d.). *Web Application Architecture: Comprehensive Overview*. Available at:
https://radixweb.com/blog/web-application-architecture-guide
- ClickIT Smart Technologies. (2024). *Web Application Architecture: The Latest Guide 2024*. Available
at: https://www.clickittech.com/web-application-architecture/
Topic – 1. Overview of Web Application
Architecture

Any Questions?