Session 1.pdf

ITPFL4 FUNDAMENTALS OF ADVANCE WEB DEVELOPMENT WEB ARCHITECTURE JAYRELLE B. SY, PH.D  ITPFL4...

ITPFL4 FUNDAMENTALS OF ADVANCE WEB DEVELOPMENT WEB ARCHITECTURE JAYRELLE B. SY, PH.D  ITPFL4 WEB ARCHITECTURE ADVANCE WEB DEVELOPMENT refers to the structural design and framework that defines how the components of a web-based system interact and operate.  ITPFL4 WEB ARCHITECTURE It involves the planning and organization of web applications, websites, or services. ADVANCE WEB DEVELOPMENT Specifies how data flows between the client (browser or app) and the server How components such as databases, APIs, and user interfaces work together  ITPFL4 PRINCIPLES OF WEB ARCHITECTURE ADVANCE WEB DEVELOPMENT Provide guidelines and best practices for the development of web technologies. These principles ensure that the web remains functional, accessible, and scalable.  ITPFL4 WEB ARCHITECTURE MODULARITY AND COMPONENT-BASED DESIGN Modularity refers to breaking down a web application into distinct components or modules, each responsible for a specific functionality. ADVANCE WEB DEVELOPMENT A component-based design further extends this principle, particularly in front-end frameworks like React or Angular. In a content management system, modules like the user authentication system, content editor, and comment section can be built independently and then integrated into the larger system.  ITPFL4 WEB ARCHITECTURE SEPARATION OF CONCERNS Separation of concerns (SoC) is a design principle that aims to divide a web application into distinct layers or sections, each ADVANCE WEB DEVELOPMENT handling a specific responsibility. It is typically implemented using the Model-View-Controller (MVC) architecture, where the data layer (Model), the user interface (View), and the application logic (Controller) are separate.  ITPFL4 WEB ARCHITECTURE SEPARATION OF CONCERNS ADVANCE WEB DEVELOPMENT  ITPFL4 WEB ARCHITECTURE STATELESSNESS AND STATE MANAGEMENT Statelessness refers to the design principle where each request from a client to a server must contain all the information the server ADVANCE WEB DEVELOPMENT needs to fulfill that request. A weather application that retrieves current weather data. Request: When a user requests weather data for a specific city, the client sends an HTTP GET request to the server Response: The server responds with the current weather data. The server does not store any information about the user or the previous requests. Each request is independent, and all necessary information is included in the request.  ITPFL4 WEB ARCHITECTURE STATELESSNESS AND STATE MANAGEMENT State management involves keeping track of the state of an application ADVANCE WEB DEVELOPMENT A web application that requires user login and maintains session state. Implementation: Using cookies or local storage to manage session state. State Management: The application uses local storage to persist user session information across page reloads. The state is maintained even if the user navigates away from the page.  ITPFL4 WEB ARCHITECTURE UNIVERSALITY It refers to the principle that web technologies and protocols should be designed to work across a wide range of platforms, ADVANCE WEB DEVELOPMENT devices, and environments. This principle emphasizes the need for standards that ensure accessibility and usability for all users, regardless of their hardware, software, or network conditions. Key Features : Standardization, Accessibility, Device Independence A website that needs to provide a consistent user experience across different devices and screen sizes.  ITPFL4 WEB ARCHITECTURE INTEROPERABILITY Refers to the ability of different systems, applications, or services to communicate and exchange data effectively. It focuses on ensuring ADVANCE WEB DEVELOPMENT that diverse systems can work together, share information, and perform tasks in a coordinated manner. Key Features : Data Exchange, Compatibility, Integration An e-commerce platform might use APIs to enable its inventory management system to interact with third-party payment processors  ITPFL4 WEB ARCHITECTURE PERFORMANCE AND SCALABILITY Web applications should be designed to handle growing amounts of traffic and data efficiently. Performance optimization, such as ADVANCE WEB DEVELOPMENT minimizing server requests and optimizing assets, plays a key role. Scalability ensures that websites can support a growing user base without losing performance.  ITPFL4 WEB ARCHITECTURE PERFORMANCE AND SCALABILITY Optimize web page by minimizing HTTP requests, compressing images, and using lazy loading (loading images only when they're ADVANCE WEB DEVELOPMENT visible in the user's viewport). They also implement a Content Delivery Network (CDN) to distribute static resources, such as JavaScript files and images, across servers closer to users, reducing latency and improving load times. For scalability, the developer ensures the web server is built with auto-scaling capabilities so that during high traffic, additional server instances can be spun up to handle the load.  ITPFL4 WEB ARCHITECTURE SECURITY Web architecture must ensure the security of data transmission, user privacy, and the integrity of websites. ADVANCE WEB DEVELOPMENT Use HTTPS to encrypt data exchanged between the client and server, ensuring that sensitive information like passwords is not exposed to attackers. The form also implements input validation to prevent Cross-Site Scripting (XSS) attacks by sanitizing user input. Additionally, the web application uses multi-factor authentication (MFA) for an extra layer of security during login.  ITPFL4 WEB ARCHITECTURE EXTENSIBILITY Web technologies should be designed to be extensible, meaning that new features and capabilities can be added without disrupting ADVANCE WEB DEVELOPMENT existing systems. This allows the web to evolve over time. Content Management System and its Plug ins A content management system (CMS) allows developers to create plugins or modules to extend its functionality. A developer builds a plugin that integrates a new social media sharing feature without modifying the core CMS code.  ITPFL4 CLIENT-SERVER INTERACTION ADVANCE WEB DEVELOPMENT It is the fundamental concept behind how most web applications work. It involves communication between two entities: the client and the server  ITPFL4 CLIENT-SERVER INTERACTION REQUEST-RESPONSE MODEL: Step 1: Client sends a request: A user interacts with the client (e.g., types a URL or clicks a button), ADVANCE WEB DEVELOPMENT which triggers an HTTP request to the server. This request contains details such as: HTTP method (e.g., GET, POST, PUT, DELETE). URL (Uniform Resource Locator) of the server's resource. Headers with metadata (e.g., browser type, authentication tokens). Request body (for methods like POST, containing form data).  ITPFL4 CLIENT-SERVER INTERACTION REQUEST-RESPONSE MODEL: Step 2: Server processes the request: The server receives the request, processes it (possibly querying a ADVANCE WEB DEVELOPMENT database or performing some logic), and prepares a response. This response could include: The requested data (e.g., a web page, JSON data, etc.). A status code to indicate success or failure (e.g., 200 OK, 404 Not Found, 500 Internal Server Error).  ITPFL4 CLIENT-SERVER INTERACTION REQUEST-RESPONSE MODEL: Step 3: Server sends a response: The server sends back an HTTP response, which includes: ADVANCE WEB DEVELOPMENT Status code: A numerical code indicating the success or failure of the request. Response headers: Information about the response, such as content type, cache settings, etc. Response body: The actual content requested, such as HTML, CSS, JavaScript, images, or data (often in JSON or XML).  ITPFL4 CLIENT-SERVER INTERACTION REQUEST-RESPONSE MODEL: Step 4: Client processes the response The client (browser or app) ADVANCE WEB DEVELOPMENT processes the server's response and updates the user interface accordingly (e.g., displaying a webpage, showing error messages, etc.).  ITPFL4 CLIENT-SERVER INTERACTION ENHANCEMENTS AJAX (ASYNCHRONOUS JAVASCRIPT AND XML): AJAX allows clients to request data from the server asynchronously (without reloading the page). This means only parts of the web page ADVANCE WEB DEVELOPMENT are updated, making the user experience smoother. Example: When you submit a search query, only the results section of the page refreshes, not the entire page.  ITPFL4 CLIENT-SERVER INTERACTION ENHANCEMENTS API (APPLICATION PROGRAMMING INTERFACES): Servers often expose RESTful APIs or GraphQL APIs for clients to interact with. These APIs allow the client to request data or services ADVANCE WEB DEVELOPMENT programmatically (e.g., fetching data for a weather app). REST API: The client makes specific GET, POST, PUT, or DELETE requests to endpoints that represent resources (e.g., GET /users). GraphQL API: The client can specify exactly what data they need in a single query, rather than making multiple REST requests. Example: Weather app makes API calls to a weather service to fetch real- time forecasts.  ITPFL4 CLIENT-SERVER INTERACTION ENHANCEMENTS WEBSOCKETS: WebSockets provide a full-duplex communication channel that allows real-time interactions between the client and server. Once a ADVANCE WEB DEVELOPMENT WebSocket connection is established, both the client and the server can send and receive messages at any time, without needing to re- establish the connection. Example: Online gaming, chat applications, and stock market updates use WebSockets to deliver real-time updates to users.  ITPFL4 TYPES OF WEB ARCHITECTURE ADVANCE WEB DEVELOPMENT Web architecture can vary depending on the complexity and needs of the application  ITPFL4 TYPES OF WEB ARCHITECTURE 1. MONOLITHIC ARCHITECTURE 2. CLIENT-SERVER ARCHITECTURE ADVANCE WEB DEVELOPMENT 3. THREE-TIER ARCHITECTURE 4. MICROSERVICES ARCHITECTURE 5. SERVERLESS ARCHITECTURE 6. EVENT-DRIVEN ARCHITECTURE 7. SERVICE-ORIENTED ARCHITECTURE (SOA)  ITPFL4 TYPES OF WEB ARCHITECTURE MONOLITHIC ARCHITECTURE In a monolithic architecture, the entire application is built as a single unit. All components, including the user interface, business logic, and ADVANCE WEB DEVELOPMENT database access, are integrated into a single codebase. Example: WordPress (traditional setup) Drupal (classic setup) Joomla (classic setup) Trello (original version) Basecamp (early version) Netflix (early version before transitioning to microservices  ITPFL4 TYPES OF WEB ARCHITECTURE CLIENT - SERVER ARCHITECTURE This architecture separates the client (frontend) from the server (backend). The client sends requests to the server, which processes ADVANCE WEB DEVELOPMENT them and sends back responses. Example: Gmail (web interface) Dropbox (desktop and mobile apps servers) Google Maps (web app interacting with backend services) LinkedIn (web and mobile apps) Snapchat (mobile app) Slack (desktop and web apps)  ITPFL4 TYPES OF WEB ARCHITECTURE THREE-TIER ARCHITECTURE Also known as the n-tier architecture, this model divides the application into three layers: the presentation layer (frontend), the ADVANCE WEB DEVELOPMENT application logic layer (backend), and the data layer (database). Example: Amazon Web Services (AWS Management Console) Online Shopping Platforms (e.g., Shopify) Salesforce (CRM platform) Jira (issue tracking and project management) Microsoft Dynamics CRM (customer relationship management) E-Trade (financial trading platform)  ITPFL4 TYPES OF WEB ARCHITECTURE MICROSERVICES ARCHITECTURE This architecture breaks down the application into a collection of loosely coupled services, each responsible for a specific business ADVANCE WEB DEVELOPMENT capability. Services communicate via APIs or messaging systems. Example: Netflix (streaming service) Spotify (music streaming) Amazon (e-commerce platform) eBay (online marketplace) Airbnb (short-term rental platform) PayPal (payment processing)  ITPFL4 TYPES OF WEB ARCHITECTURE SERVERLESS ARCHITECTURE In a serverless architecture, developers write and deploy code without managing the underlying servers. The cloud provider handles server ADVANCE WEB DEVELOPMENT management, scaling, and infrastructure. Example: AWS Lambda (general-purpose serverless computing) Google Cloud Functions (event-driven computing) Azure Functions (event-driven serverless computing) Netlify Functions (serverless functions for web apps) Auth0 (authentication as a service) Cloudflare Workers (serverless edge computing)  ITPFL4 TYPES OF WEB ARCHITECTURE EVENT-DRIVEN ARCHITECTURE This model is based on events and messages. Components communicate through events rather than direct API calls, often using ADVANCE WEB DEVELOPMENT message brokers or event streams. Example: Uber (ride-hailing platform) Amazon (order processing and inventory management) Slack (real-time messaging and notifications) Shopify (order fulfillment and inventory updates) Stripe (payment processing events) GitHub (webhooks and event-driven integrations)  ITPFL4 TYPES OF WEB ARCHITECTURE SERVICE-ORIENTED ARCHITECTURE (SOA) Similar to microservices but typically involves larger, more monolithic services. SOA focuses on using services to enable communication ADVANCE WEB DEVELOPMENT between different applications or systems. Example: Salesforce (CRM platform) Oracle Fusion Middleware (enterprise software) SAP ERP (enterprise resource planning) IBM WebSphere (application server for SOA) Microsoft Dynamics (business applications) Amazon Web Services (AWS) (various services)  ITPFL4 TYPES OF WEB ARCHITECTURE A system or application can indeed utilize different architectures, often combining several architectural styles to address different needs and challenges. Here’s how this might work: ADVANCE WEB DEVELOPMENT Example: Spotify uses a microservices architecture to manage its core functionalities, such as music streaming, user recommendations, and playlists. For certain tasks, especially those that need to be highly scalable or event-driven, Spotify also utilizes serverless functions. Microservices handle regular streaming and user interactions, while serverless functions might be used for processing real-time events or scaling specific operations on demand.  ITPFL4 TYPES OF WEB ARCHITECTURE Example: Amazon’s e-commerce platform uses a three-tier architecture for its main application structure: presentation (website), application logic (backend services), and data storage (databases). Additionally, Amazon ADVANCE WEB DEVELOPMENT employs event-driven architecture for order processing and inventory management. Uber uses a client-server architecture for its mobile and web apps. The client apps communicate with Uber’s backend servers, which are organized using a microservices architecture.  ITPFL4 SCALABLE WEB APPLICATION DESIGN ADVANCE WEB DEVELOPMENT Scalable web application design is essential for ensuring that applications can handle increasing demands efficiently while maintaining performance and functionality  ITPFL4 IMPORTANCE OF SCALABILITY Scalability allows web applications to accommodate an increasing number of users and data without degrading performance. This capability is crucial as it ensures uninterrupted service during peak ADVANCE WEB DEVELOPMENT usage times and supports the application’s growth as demands fluctuate. A scalable application can handle sudden traffic spikes, which is particularly beneficial for businesses experiencing rapid growth or seasonal fluctuations  ITPFL4 KEY PRINCIPLE OF SCALABILITY The foundational aspects of scalable design involve several important principles. These include horizontal and vertical scaling, which can be combined to optimize performance effectively. ADVANCE WEB DEVELOPMENT Horizontal scaling refers to adding more server resources, while vertical scaling involves enhancing the capacity of existing servers. Furthermore, adopting a microservices architecture promotes flexibility and independent scaling of application components, allowing for more efficient management of resources.  ITPFL4 CHALLENGES OF SCALABILITY Several challenges can impede the scalability of web applications. These include poor memory management, sufficient server resources, and overly complicated database schemas. ADVANCE WEB DEVELOPMENT Ineffective management of these aspects can lead to slow performance or system outages during high-traffic periods. Thus, it is crucial to address these potential pitfalls during the initial stages of development to prevent issues as user load increases  ITPFL4 CASE STUDIES Examples of companies demonstrating effective scalable web application design include Netflix and Twitter. Netflix transitioned from a monolithic architecture to microservices, allowing ADVANCE WEB DEVELOPMENT for better scalability and quicker deployment of new features. Similarly, Twitter improved its ability to handle high traffic by adopting a distributed database system, showcasing the importance of architectural evolution in scaling efforts.  ITPFL4 ADVANCE WEB DEVELOPMENT WEB ARCHITECTURE THANK YOU