Introduction to Web Application Development - Session 1 PDF

ITPFL 2 SESSION 1 Introduction to Web Application Development PREPARED BY: Jayrelle B. Sy, Ph.D.  WEB APPLICATION DEVELOPMENT Understand the fundamental conc...

ITPFL 2 SESSION 1 Introduction to Web Application Development PREPARED BY: Jayrelle B. Sy, Ph.D.  WEB APPLICATION DEVELOPMENT Understand the fundamental concepts of web application architecture, including the components and interactions involved in the development process. Differentiate between client-side and server-side processing, comprehending their respective roles and SESSION TOPICS functionalities within web applications. Overview of web application architecture Client-side vs. server-side processing Understand the critical role of back-end development in Role of back-end development in web applications web application development, emphasizing its importance in data management, request processing, and client-server communication. 2 OVERVIEW OF WEB APPLICATION ARCHITECTURE  WEB APPLICATION DEVELOPMENT WEB APPLICATION ARCHITECTURE ▪ Web application architecture refers to the structural design and organization of components that make up a web application. ▪ It encompasses the arrangement of software elements, including servers, databases, client-side interfaces, and communication protocols, as well as the interactions between these components. ▪ Web application architecture defines how data flows within the application, how user requests are processed, and how responses are generated and delivered. 4  WEB APPLICATION DEVELOPMENT WEB APPLICATION ARCHITECTURE ▪ Understanding the fundamental concepts of web application architecture is crucial for developers to design, develop, and maintain scalable, reliable, and secure web applications. ▪ Here are some key reasons why web application architecture is crucial: ▪ Scalability: Effective architecture allows web applications to scale seamlessly as user traffic and data volumes grow. Scalability ensures that the application can handle increasing loads without sacrificing performance or user experience. 5  WEB APPLICATION DEVELOPMENT WEB APPLICATION ARCHITECTURE ▪ Performance Optimization: Well-designed architecture optimizes resource utilization, minimizes latency, and enhances response times, resulting in faster load times and smoother user interactions. ▪ Reliability and Availability: Robust architecture enhances the reliability and availability of web applications by minimizing downtime, preventing system failures, and implementing fault-tolerant mechanisms. This ensures continuous availability and accessibility for users. ▪ Security: Architecture plays a crucial role in ensuring the security of web applications. By implementing layers of defense against cyber threats, vulnerabilities, and attacks, architecture helps protect sensitive data and prevent unauthorized access. 6  WEB APPLICATION DEVELOPMENT WEB APPLICATION ARCHITECTURE ▪ Maintainability: Well-structured architecture facilitates easier maintenance, updates, and modifications to web applications. Clear separation of concerns, modular design, and adherence to coding standards enable developers to make changes with minimal disruption and reduce the risk of introducing bugs or errors. ▪ Flexibility: Architecture provides flexibility in adapting to evolving business requirements, technological advancements, and changing user needs. A modular architecture allows components to be modified, replaced, or extended without affecting the overall functionality of the application. 7  WEB APPLICATION DEVELOPMENT WEB APPLICATION ARCHITECTURE ▪ Extensibility: An extensible architecture allows for the integration of new features, services, and third-party APIs seamlessly. Modular components and well-defined interfaces enable developers to extend the functionality of the application without significant redevelopment efforts. 8 COMPONENTS OF WEB APPLICATION ARCHITECTURE  WEB APPLICATION DEVELOPMENT COMPONENTS Client-Side Components ▪ Web Browser: The client-side software that users utilize to access websites and web applications. ▪ HTML (Hypertext Markup Language): Defines the structure and content of web pages. ▪ CSS (Cascading Style Sheets): Used for styling and presentation of HTML documents. ▪ JavaScript: A programming language that enables interactivity and dynamic behavior on web pages. ▪ React, Vue, Angular.js , Angular - Typescript 10  WEB APPLICATION DEVELOPMENT COMPONENTS Server-Side Components: ▪ Web Server: Software responsible for handling HTTP requests from clients and serving web pages. ▪ Application Server: Executes application logic and interacts with databases or other resources. ▪ Database Server: Stores and manages data used by the web application. ▪ Server-Side Scripting Language (e.g., PHP, Python, Ruby): Used for server-side logic and dynamic content generation. 11  WEB APPLICATION DEVELOPMENT COMPONENTS Communication Protocols: ▪ HTTP (Hypertext Transfer Protocol): The primary protocol used for communication between clients and servers on the World Wide Web. ▪ HTTPS (HTTP Secure): A secure version of HTTP that encrypts data transferred between the client and server using SSL/TLS. ▪ REST (Representational State Transfer): An architectural style for designing networked applications, commonly used in web services. 12  WEB APPLICATION DEVELOPMENT COMPONENTS Middleware: ▪ Components and Services: Middleware encompasses various software components and services that facilitate communication and data management between different layers of the architecture. ▪ Message Queues: Used for asynchronous communication between different parts of the system. ▪ Caching Servers: Improve performance by storing frequently accessed data in memory. 13  WEB APPLICATION DEVELOPMENT COMPONENTS Security Components: ▪ Firewalls: Protect the web server from unauthorized access and malicious attacks. ▪ SSL/TLS Certificates: Encrypt data transmitted between clients and servers to ensure privacy and security. ▪ Authentication and Authorization Mechanisms: Verify the identity of users and determine their access rights. 14  WEB APPLICATION DEVELOPMENT COMPONENTS Content Delivery Networks (CDNs): ▪ Distributed Network of Servers: CDNs cache and deliver content to users from servers located geographically closer to them, improving performance and reliability. ▪ Caching and Load Balancing: CDNs use caching and load balancing techniques to optimize content delivery and handle high traffic volumes. 15  WEB APPLICATION DEVELOPMENT COMPONENTS Monitoring and Management Tools: ▪ Logging: Record and analyze various events and activities occurring within the web architecture. ▪ Performance Monitoring: Track system performance metrics to identify bottlenecks and optimize resource utilization. ▪ Alerting and Notification Systems: Notify administrators about critical issues or anomalies in the system. 16 TYPES OF WEB APPLICATION ARCHITECTURE  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE 1. Client-Server Architecture 2. Three-Tier Architecture 3. Microservices Architecture 4. Serverless Architecture 18  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Client-Server Architecture It is a model where clients, typically web browsers, interact with servers to request and receive resources over a network. In this architecture, the server hosts and manages resources such as web pages, files, or data, while the client initiates requests for these resources and displays them to users. 19  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Client-Server Architecture It is a model where clients, typically web browsers, interact with servers to request and receive resources over a network. In this architecture, the server hosts and manages resources such as web pages, files, or data, while the client initiates requests for these resources and displays them to users. Examples of Common Client-Server Interactions: Fetching Web Pages, Submitting Forms, Retrieving Data from a Database 20  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Advantages of Client-Server Architecture ▪ Centralized Data Management: The data is stored and managed centrally on servers, making it easier to maintain consistency, security, and backup procedures. ▪ Scalability: Client-server architecture allows for scalable solutions, where additional servers can be added to handle increasing loads or traffic. This scalability ensures that the system can grow to accommodate more users or resources as needed. ▪ Ease of Maintenance: Since business logic and data management are centralized on servers, updates, patches, and maintenance tasks can be performed more efficiently. Changes can be made to the server-side code or databases without affecting clients, ensuring easier maintenance and updates. 21  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Sample of Client-Server Architecture ▪ Web Server and Web Browser: A classic example of the client-server model is the interaction between a web server (such as Apache or Nginx) and a web browser (such as Google Chrome or Mozilla Firefox). The web server hosts the website files and serves them upon request to the web browser, which then renders the content for the user. ▪ Email Client and Email Server: When you use an email client like Outlook or Thunderbird to access your email, it communicates with an email server (such as Microsoft Exchange or Gmail's servers) using protocols like IMAP or POP3. The email server stores and manages your emails, while the client requests and displays them. ▪ File Server and Client Computers: In a networked environment, client computers (desktops or laptops) may connect to a file server to access shared files and resources. The file server stores files centrally and responds to requests from client computers to read or write data. 22  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Three-Tier Architecture It is a software architecture pattern that divides an application into three separate layers or tiers: presentation, application (logic), and data. Each tier has specific responsibilities and interacts with the other tiers in a structured manner. 1 23  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE 1. Presentation Tier (User Interface): ▪ The presentation tier is responsible for handling user interaction and displaying information to users. ▪ It consists of user interfaces such as web pages, mobile apps, or desktop applications. ▪ This tier communicates with the application tier to request and receive data or perform actions based on user input. 24  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE 2. Application Tier (Logic or Business Logic): ▪ The application tier contains the business logic or application logic of the system. ▪ It processes and manipulates data based on user requests received from the presentation tier. ▪ This tier implements the core functionalities of the application, such as validation, calculations, and workflows. 25  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE 3. Data Tier (Data Storage): ▪ The data tier is responsible for managing data storage and retrieval. ▪ It stores and organizes data in databases or other data storage systems. ▪ This tier handles tasks such as querying, updating, and managing data integrity. 26  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Benefits of Three-Tier Architecture Improved Modularity: Three-tier architecture promotes modularity by separating concerns into distinct layers. Each tier has well-defined responsibilities, making it easier to understand, maintain, and update the application. Scalability: Three-tier architecture allows for scalability by enabling each tier to be scaled independently based on demand. For example, additional web servers can be added to the presentation tier, or database servers can be scaled horizontally in the data tier to handle increased data volumes. 27  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Benefits of Three-Tier Architecture Separation of Concerns: By separating the user interface, business logic, and data storage into different layers, three-tier architecture promotes separation of concerns. This separation enhances maintainability, as changes to one tier typically have minimal impact on other tiers. 28  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Examples of Three-Tier Architecture in Real-World Scenarios E-Commerce Platform Presentation Tier: The website or mobile app interface where users browse products, add items to the cart, and proceed to checkout. Application Tier: Handles business logic such as processing orders, calculating pricing, applying discounts, and managing inventory. Data Tier: Stores product information, user accounts, order details, and transaction history in databases. 29  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Examples of Three-Tier Architecture in Real-World Scenarios Banking Application: Presentation Tier: The banking application interface accessible through web browsers or mobile apps, allowing users to view account balances, transfer funds, and pay bills. Application Tier: Manages authentication, authorization, transaction processing, and account management functionalities. Data Tier: Stores customer account information, transaction records, loan details, and financial data in databases. 30  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Examples of Three-Tier Architecture in Real-World Scenarios Banking Application: Presentation Tier: The banking application interface accessible through web browsers or mobile apps, allowing users to view account balances, transfer funds, and pay bills. Application Tier: Manages authentication, authorization, transaction processing, and account management functionalities. Data Tier: Stores customer account information, transaction records, loan details, and financial data in databases. 31  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Microservices Architecture Microservices architecture is an approach to software development where applications are composed of small, independent services that are organized around specific business capabilities. Each service is self-contained, deployable, and communicates with other services over the network, typically using lightweight protocols such as HTTP or messaging queues. 32  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Characteristic of Microservices Bounded Contexts: Microservices are organized around bounded contexts, which define the scope and boundaries of each service's responsibilities. Each service focuses on a specific business domain or functionality, with clear boundaries that encapsulate its data and logic. Single Responsibility: Each microservice has a single responsibility or purpose, which it performs independently of other services. This promotes modularity and simplifies the development, testing, and maintenance of individual services. 33  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Characteristic of Microservices Decentralized Data Management: Microservices architecture favors decentralized data management, where each service manages its own data storage and persistence mechanisms. Services communicate with each other through well-defined APIs, exchanging data as needed. 34  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Advantages of Microservices Scalability: Microservices architecture enables horizontal scalability, where individual services can be scaled independently based on demand. This allows organizations to allocate resources efficiently and handle varying workloads more effectively. Agility: Microservices promote agility by enabling teams to develop, deploy, and update services independently of each other. This accelerates the development process, reduces time to market, and facilitates rapid experimentation and innovation. Fault Isolation: Microservices architecture improves fault isolation by isolating failures to individual services. If one service encounters an issue or failure, it does not necessarily affect other services, leading to increased resilience and fault tolerance. 35  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Examples of Microservices in Large-Scale Applications Netflix: Netflix uses microservices architecture to power its streaming platform. Each microservice handles specific functionalities such as user authentication, content recommendation, video streaming, and billing. This modular architecture enables Netflix to scale its services independently, experiment with new features, and optimize performance for millions of users worldwide. Amazon: Amazon's e-commerce platform relies on microservices architecture to support its vast array of functionalities, including product listings, shopping cart management, order processing, payment processing, and inventory management. Each microservice is responsible for a specific aspect of the shopping experience, allowing Amazon to handle massive scale while maintaining agility and flexibility. 36  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Examples of Microservices in Large-Scale Applications Uber: Uber's ride-hailing platform utilizes microservices architecture to support its global operations. Microservices handle functionalities such as user authentication, trip management, driver allocation, payment processing, and location tracking. This architecture enables Uber to scale its services rapidly, adapt to regional differences, and continuously innovate to meet customer demands. 37  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Serverless Architecture Serverless architecture is a cloud computing model where developers focus on writing code without the need to manage server infrastructure. In this model, cloud providers are responsible for dynamically allocating and managing server resources, allowing developers to focus solely on writing application logic. 38  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Concept of Serverless Functions: Serverless functions, also known as Function-as-a-Service (FaaS), are event-triggered, stateless functions that execute in response to specific events or requests. These functions are typically short-lived and stateless, meaning they do not maintain persistent connections or store data between invocations. Serverless functions can be written in various programming languages and are executed in a managed runtime environment provided by the cloud provider. 39  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Benefits of Serverless Architecture: Reduced Operational Overhead: With serverless architecture, developers are relieved of tasks such as server provisioning, scaling, and maintenance. Cloud providers handle infrastructure management, ensuring high availability and reliability without requiring manual intervention from developers. Automatic Scaling: Serverless architectures automatically scale resources up or down based on demand. Cloud providers dynamically allocate resources to handle incoming requests, ensuring optimal performance and responsiveness even during spikes in traffic.. 40  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Benefits of Serverless Architecture: Pay-Per-Use Pricing: Serverless architectures follow a pay-per-use pricing model, where developers only pay for the resources consumed by their functions. This pricing model offers cost efficiency, as developers are not charged for idle resources or unused capacity. Additionally, serverless architectures can provide significant cost savings for applications with unpredictable or variable workloads. 41  WEB APPLICATION DEVELOPMENT TYPES OF WEB APPLICATION ARCHITECTURE Examples of Serverless Architecture: AWS Lambda: AWS Lambda is a serverless compute service provided by Amazon Web Services (AWS). Developers can upload their code to Lambda functions and specify event sources (e.g., HTTP requests, database changes, file uploads). Lambda functions are executed in response to these events, with AWS automatically handling infrastructure provisioning and scaling. AWS Lambda supports a variety of programming languages, including Node.js, Python, Java, and.NET. Other examples includes Azure Function, Google Cloud Platform 42 CLIENT-SIDE VS SERVER-SIDE PROCESSING  WEB APPLICATION DEVELOPMENT CLIENT-SIDE vs SERVER-SIDE PROCESSING Client-side and server-side processing are two fundamental aspects of web development, each serving distinct roles in how web applications function and deliver content to users. Client-Side Processing Definition: Client-side processing refers to the execution of code or operations on the user's device (typically within the web browser) using technologies such as HTML, CSS, and JavaScript. Role: The primary role of client-side processing is to enhance user experience and interactivity by manipulating the content and behavior of web pages dynamically without requiring communication with the server. 44  WEB APPLICATION DEVELOPMENT CLIENT-SIDE vs SERVER-SIDE PROCESSING Functionalities: ▪ User Interface (UI) Rendering: Rendering of HTML, CSS, and JavaScript to create the visual layout and functionality of the web page. ▪ Form Validation: Validation of user inputs on forms to ensure they meet specified criteria before submission. ▪ DOM Manipulation: Dynamically altering the Document Object Model (DOM) structure of a webpage to update content or respond to user actions. ▪ Asynchronous Operations: Performing asynchronous operations such as fetching data from APIs or making AJAX requests to update content without reloading the entire page. 45  WEB APPLICATION DEVELOPMENT CLIENT-SIDE vs SERVER-SIDE PROCESSING Server-Side Processing: Definition: Server-side processing involves executing code and performing operations on the web server, typically using server-side scripting languages like PHP, Python, Ruby, or Node.js. Role: The primary role of server-side processing is to handle requests from clients, process data, perform business logic, and generate dynamic content before sending the response back to the client. 46  WEB APPLICATION DEVELOPMENT CLIENT-SIDE vs SERVER-SIDE PROCESSING Functionalities: Data Processing: Handling data operations such as database queries, file manipulation, authentication, and authorization. Business Logic: Implementing the core logic and rules of the application, such as calculations, validations, and decision-making processes. Session Management: Managing user sessions and maintaining session state across multiple requests. Content Generation: Generating dynamic content based on user requests, database queries, or other external factors to be sent back to the client. 47  WEB APPLICATION DEVELOPMENT CLIENT-SIDE vs SERVER-SIDE PROCESSING Key Differences: ▪ Execution Location: Client-side processing executes code on the user's device (browser), while server-side processing executes code on the web server. ▪ Responsibilities: Client-side processing focuses on user interface, interactivity, and client-side data manipulation, while server-side processing handles server-side logic, data processing, and content generation. ▪ Resource Access: Client-side processing has access to resources available on the user's device, such as local storage, while server-side processing has access to server-side resources such as databases and files. 48 ROLE OF BACK END DEVELOPMENT IN WEB APPLICATION DEVELOPMENT  WEB APPLICATION DEVELOPMENT BACK END DEVELOPMENT ROLE Data Management: ▪ Back-end development involves designing and implementing databases to store and manage data efficiently. This includes creating database schemas, defining relationships between different data entities, and optimizing database queries for performance. ▪ Back-end developers use technologies like SQL (Structured Query Language) or NoSQL databases such as MongoDB or Redis to handle different types of data storage requirements. ▪ They ensure data integrity, security, and scalability by implementing proper authentication, authorization, and encryption mechanisms. 50  WEB APPLICATION DEVELOPMENT BACK END DEVELOPMENT ROLE Request Processing: ▪ When a user interacts with a web application, their requests are sent to the back end for processing. This includes actions like submitting forms, fetching data, or performing transactions. ▪ Back-end developers write server-side code (using languages like Python, Java, Ruby, Node.js, etc.) to handle these incoming requests. This code processes the requests, interacts with the database if necessary, and generates appropriate responses. ▪ They implement business logic and algorithms to process and manipulate data according to the application's requirements. 51  WEB APPLICATION DEVELOPMENT BACK END DEVELOPMENT ROLE Client-Server Communication: ▪ Web applications follow a client-server architecture, where the client (browser) interacts with the server to access and manipulate data. ▪ Back-end development involves implementing APIs (Application Programming Interfaces) that define how clients can communicate with the server. This includes specifying endpoints, request methods (GET, POST, PUT, DELETE), and data formats (JSON, XML) for exchanging information. ▪ Back-end developers ensure that these APIs are well-designed, secure, and efficient, allowing clients to perform actions like CRUD operations (Create, Read, Update, Delete) on resources. 52  WEB APPLICATION DEVELOPMENT BACK END DEVELOPMENT ROLE ▪ Overall, back-end development acts as the backbone of web applications, handling critical tasks related to data management, request processing, and client-server communication. ▪ A well-designed and robust back end is essential for creating scalable, secure, and responsive web applications. 53  END OF SESSION 1 THANK YOU