FEWD Topic 1 - Overview of Web Application Architecture.pdf

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...

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 Cost-Efficiency: Cost-effective as users will slight delay due to cold start latency. 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?