Fswd unit 1

 Theory

1.1 Understanding the Basic Web Development Framework

  • What is Framework?

  • The components of web development framework are –

    1. User
    2. Browser
    3. Webserver
    4. Backend services

1.2 User

1.3 Browser

  • Browser to web server communication
    i) GET
    ii) POST
    iii) AJAX

  • Difference between GET and POST requests

  • Rendering the browser view

    • HTML files
    • CSS files
    • Client side script
    • Media files
    • Data
    • HTTP headers
    • User interaction

1.4 Web Server

  • Functions of web server

1.4.1 Apache

1.4.2 IIS

  • Differences between Apache and IIS servers

1.5 Backend Services

1.6 MVC Architecture

  • Model

  • View

  • Controller

  • Features of MVC framework

1.6.1 MVC in Practical

1.7 Understanding the Different Stacks

  • The basic block diagram of how the Node.js to angular fits into the web framework model

1.7.1 Express

  • Routing
  • Error handling
  • Easy integration
  • Cookies
  • Session and cache management

1.7.2 Angular

  • Clean
  • Extensibility
  • Reusable Code
  • Data binding
  • Support
  • Compatibility

1.7.3 Node

  • Easy to use
  • Extensibility
  • Event driven scalability
  • Efficient
  • Use of JavaScript, end-to-end

1.7.4 MongoDB

  • Document orientation
  • High performance
  • High scalability
  • High availability

1.7.5 React

  • Virtual DOM
  • Components
  • JSX
  • One way data binding

Theory



1.1 What is Framework?

A framework is a ready-made platform with tools, code, and libraries to build websites or apps easily.

Web Development Components:

  1. User – The person using the app/website.
  2. Browser – Where the user opens the website (like Chrome).
  3. Webserver – The system that delivers the website to the browser.
  4. Backend Services – The logic, database, and data handling behind the scenes.

1.2 User

The user interacts with the website or app through the browser.

1.3 Browser

The browser displays the website and communicates with the server.

  • Browser to Web Server Communication:

    • GET – Requests data (Ex: opening a webpage).
    • POST – Sends data (Ex: submitting a form).
    • AJAX – Sends/gets data in the background without reloading the page.

  • GET vs POST:

    • GET – Data in URL, for fetching.
    • POST – Data hidden, for sending.

  • Rendering Browser View:

    • HTML – Content
    • CSS – Design
    • JS (Client-side script) – Actions
    • Media – Images, videos
    • Data – Info from server
    • HTTP Headers – Info about the request/response
    • User Interaction – Clicking, typing, etc.

1.4 Web Server

Manages user requests and sends the right data back.

  • Functions:

    • Handle requests
    • Serve files (HTML, CSS, JS)
    • Connect to backend

  • 1.4.1 Apache – Open-source, works on Linux, widely used.

  • 1.4.2 IIS – Microsoft’s server, works on Windows.

Apache vs IIS:

Feature Apache IIS
OS Linux Windows
Cost Free Comes with Windows
Use Open-source Enterprise

1.5 Backend Services

Handles data storage, logic, and database interaction (like servers and APIs).

1.6 MVC Architecture

MVC = Model + View + Controller

  • Model – Manages data.
  • View – User interface (what user sees).
  • Controller – Connects model and view, handles user input.

Features:

  • Separates logic, design, and data.
  • Easier to manage and scale.

1.6.1 Practical MVC:
Ex: User submits form → Controller processes → Model saves data → View updates.

1.7 Different Stacks (MEAN / MERN)

Stack = Set of tools/languages used together.

1.7.1 Express (Backend Framework)

  • Routing – Decide what happens when a URL is hit.
  • Error Handling – Manage errors.
  • Easy Integration – Works with databases & frontends.
  • Cookies & Session – Tracks users.
  • Cache – Saves data temporarily for speed.

1.7.2 Angular (Frontend Framework)

  • Clean – Well-structured code.
  • Extensible – Add plugins easily.
  • Reusable Code – Write once, use again.
  • Data Binding – Syncs UI & data.
  • Support & Compatibility – Google-backed, updates often.

1.7.3 Node.js (Runtime Environment)

  • Easy to Use – JavaScript everywhere.
  • Extensible – Add libraries.
  • Event-driven – Handles many tasks at once.
  • Efficient – Fast for data-heavy apps.
  • JavaScript End-to-End – Same language frontend & backend.

1.7.4 MongoDB (Database)

  • Document-Oriented – Stores data in JSON-like format.
  • High Performance – Fast operations.
  • Scalable – Handles big data.
  • Highly Available – Works even if some servers fail.

1.7.5 React (Frontend Library)

  • Virtual DOM – Faster page updates.
  • Components – Small reusable pieces.
  • JSX – Write HTML inside JavaScript.
  • One-Way Data Binding – Data flows one way for better control.

Important Points to Remember:

  • MVC helps organize code.
  • MEAN (Mongo, Express, Angular, Node) / MERN (React instead of Angular) are common stacks.
  • Frontend (React/Angular), Backend (Express/Node), Database (MongoDB).
  • Server handles requests, Backend handles logic, Browser displays view.