Lecture Notes: Web Application Architecture​

Dr. Hassan Eldeeb & Eng. Mostafa Abo Elnaga | Tanta University​
Course: Internet Technologies | Date: Feb, 2025

Introduction to Modern Frontend

Evolution of Frontend Development

●​ Before frameworks:
○​ We used vanilla JavaScript (often with jQuery) to manipulate the DOM.
○​ As projects grew more complex, code organization became a problem:
spaghetti code, global variables, multiple script files.
●​ Rise of frameworks:
○​ AngularJS (early 2010s) offered an MVC pattern in the browser.
○​ React (released 2013) introduced a component-based, declarative approach.
○​ Vue (2014) combined ideas from Angular and React with a smoother learning
curve.

Why frameworks/libraries are beneficial:

●​ Structured approach to building UIs.

●​ Reusable components, better state management.
●​ Rich ecosystems (routing, testing tools, dev server with live reload).
●​ Common patterns reduce developer overhead and errors.

Library vs. Framework

●​ React is often referred to as a library because it focuses on the view layer only.
●​ Angular is typically called a framework because it’s more prescriptive, including
routers, form handling, built-in services, etc.
●​ Vue is somewhat in between, often called a “progressive framework.”

Note: we can emphasize that the difference can be small in practice: the community around
React has built so many companion libraries (React Router, Redux, etc.) that it can feel
“framework-like”.
Popular Frontend Frameworks/Libraries
React

●​ Created by: Facebook (now Meta).

●​ First release: 2013 (open-sourced).
●​ Core concept:
○​ Declarative UI: Describe how the UI should look based on current data/state;
React handles updating the DOM.
○​ Virtual DOM: React keeps a virtual representation of the UI; updates are
efficient because React only re-renders changed parts.
○​ Component-Based: Build small, reusable pieces.
○​ JSX: JavaScript + XML-like syntax to define UI components.
●​ Ecosystem:
○​ React Router for routing.
○​ Redux, MobX, or other libraries for state management (though React has
introduced its own Context API & Hooks to help with local and global states).
○​ Next.js for server-side rendering.

Example: Simple React App

```bash
# Create a new React app (using Create React App)
npx create-react-app my-react-demo
cd my-react-demo
npm start
```

App.js (minimal example):

```jsx
import React from 'react';
function App() {
return (
<div>
<h1>Hello from React!</h1>
<p>This is our first React component.</p>
</div>
);
}
export default App;
```
Once you run npm start, you will have a local server at http://localhost:3000.
That’s the minimal React setup.
Angular

●​ Backed by: Google.

●​ Original Release: AngularJS (2010), later rewritten as Angular (v2+) around 2016.
●​ Core Concepts:
○​ TypeScript is the primary language.
○​ Opinionated: Has a built-in router, form management, HTTP client, and other
official tools.
○​ CLI (Command Line Interface) for scaffolding components, services, etc.
○​ Two-Way Data Binding: Changes in the UI can update the model, and
changes in the model can update the UI automatically.
●​ When to use:
○​ Large enterprise applications that need a consistent structure.
○​ Teams are comfortable with TypeScript.

Example: Angular “Hello World”

```bash
# Install Angular CLI globally
npm install -g @angular/cli

# Create a new Angular project

ng new my-angular-demo
cd my-angular-demo
ng serve --open
```

app.component.html (minimal change):

```html
<h1>Hello from Angular!</h1>
<p>{{ description }}</p>
```

app.component.ts:

```ts
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
description = 'This is our first Angular component.';
}
```

The CLI spins up a dev server at http://localhost:4200.

Vue

●​ Created by: Evan You (ex-Google).

●​ First Release: 2014.
●​ Core Concepts:
○​ Progressive Framework: You can adopt it incrementally.
○​ Single File Components: .vue files contain template, script, and style.
○​ Reactivity: Vue automatically tracks data changes and updates the DOM.
○​ Vue CLI, Vite, or Nuxt for SSR.
●​ When to Use:
○​ Simpler syntax, easier for quick prototypes or smaller teams.
○​ Smooth learning curve compared to Angular, a bit simpler than React’s
ecosystem in some aspects.

Example: Vue “Hello World”

```bash
# Using Vue CLI
npm install -g @vue/cli
vue create my-vue-demo
cd my-vue-demo
npm run serve
```

App.vue:

```html
<template>
<div id="app">
<h1>{{ title }}</h1>
<p>This is our first Vue component.</p>
</div>
</template>

<script>
export default {
name: 'App',
data() {
return {
title: 'Hello from Vue!'
}
}
}
</script>

<style>
/* optional styles */
</style>
```
Once run, access http://localhost:8080. Vue’s dev server handles hot reloading out
of the box.

High-Level Comparison
Aspect React Angular Vue

Language JavaScript/TypeScript TypeScript (by JavaScript/TypeScript

optional default) optional

Learning Curve Moderate (JSX, Steep (full Smooth, easy to pick

ecosystem) framework, TS, up
RxJS)

Ecosystem Massive (community Comprehensive Rapidly growing,

libs) (official packages) strong support

Data Binding One-way (with Two-way binding by Two-way with

setState) default v-model

Use Cases Flexible, any scale Large enterprise Startups, small/med

apps apps, also used for
large scale

Traditional Web vs. SPAs & SSR

Traditional Multi-Page Apps

●​ Page Reloads: Every new route/URL is an entirely new request to the server that
returns a fully rendered HTML page.
●​ Workflow:
1.​ User requests /about.
2.​ The server responds with about.html.
3.​ Browser does a full-page refresh.

Pros:

●​ Simpler to develop initially (especially with server-side rendering templates like PHP,
Rails, or Django).
●​ No large JavaScript bundling required for basic static pages.

Cons:

●​ Page reloads can be slow for dynamic apps.

●​ State management across pages can be tricky.
Single-Page Applications (SPAs)

●​ Concept: The entire application runs in the browser. Only one HTML page is served
initially, and JavaScript handles navigation and dynamic updates.
●​ Examples: React Router or Angular Router transitions between components/URLs
without a full page reload.

Pros:

●​ Fast transitions, app-like user experience.

●​ Offloads rendering to the client side, often reducing server load.
●​ Potentially simpler to structure UI logic once you’re used to it.

Cons:

●​ Heavier initial page load (the user downloads all the JS).
●​ SEO can be challenging if the page doesn’t use SSR or pre-rendering.
●​ Requires client-side routing, which has its own complexities.

SPA Example (React Router)

```bash
npm install react-router-dom
```
​
```jsx
// src/App.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from
'react-router-dom';

function Home() {
return <h2>Home Page</h2>;
}
function About() {
return <h2>About Page</h2>;
}

function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link> |{" "}
<Link to="/about">About</Link>
</nav>
<Switch>
<Route path="/about"><About /></Route>
<Route path="/"><Home /></Route>
</Switch>
</Router>
);
 }

export default App;

```

Note that we’re not doing a full page reload; the router intercepts links and renders
components accordingly.

Server-Side Rendering (SSR)

●​ Definition: SSR means the server generates the initial HTML for a page, then sends
it to the client. The client can then hydrate/attach event handlers.
●​ Frameworks:
○​ Next.js & Remix (for React)
○​ Nuxt (for Vue)
○​ Angular Universal (for Angular)

Pros:

●​ Improved SEO (search engines see the fully rendered HTML).

●​ Faster initial load times, as the user sees content sooner.
●​ Good for e-commerce or content-heavy sites needing search indexing.

Cons:

●​ More complex setup compared to a standard SPA.

●​ Overhead in maintaining server and client logic.

Simple Next.js Example

```bash
npx create-next-app my-next-demo
cd my-next-demo
npm run dev
```

pages/index.js: (TODO: find a better example here)

```jsx
​ ‘use server’
export default function HomePage() {
return (
<div>
<h1>Welcome to Next.js SSR!</h1>
<p>The page was rendered on the server.</p>
</div>
);
}
```
When the user requests /, Next.js renders this page on the server, then hydrates it
client-side.

Selecting React or Next.js

Decision Factors

1.​ Project Requirements

○​ Need SEO? SSR helps. If minimal SEO is needed, a plain React SPA might
be enough.
2.​ Team Experience
○​ React might be simpler to start with. Next.js adds an extra layer (routing,
SSR, etc.).
3.​ Hosting
○​ Next.js integrates seamlessly with Vercel. React can be hosted anywhere
(Netlify, AWS, etc.).
4.​ Application Complexity
○​ Building a blog or content site? SSR might be advantageous.
○​ Building an internal tool or dashboard? An SPA is probably enough.

Conclusion:​
It might be helpful to start with React, then show how Next.js extends React if SSR/SEO is
needed. Also, if we wanted to highlight best practices for SEO, Next.js is a strong choice.

Component-Based Development (via React)

Concept & Benefits

●​ Encapsulation: Each component manages its own state, markup, and styles.
●​ Reusability: Build a component once; reuse it anywhere in your app.
●​ Maintainability: Changes in one component don’t break the rest of the UI if done
correctly.
●​ Scalability: Teams can work on different components in parallel.

History:

●​ React made this approach popular, but now Angular and Vue (and even other
frameworks like Svelte) also revolve around components.
●​ Web Components (native browser APIs) are another approach but not as widely
adopted in production as mainstream libraries.
State & Props in React (as an Example)

Basic Counter Component

```jsx
import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div style={{ margin: '1rem' }}>
<p>Current Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

export default Counter;

```

Key Points:

●​ useState hook returns [count, setCount].

●​ setCount(count + 1) re-renders the component with the new state (+1).

(using https://playcode.io/react)
Passing Props to Child
```jsx
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}

export default App;

```

Explanation:

●​ props.name is how data flows from parent to child.

●​ This ensures components remain reusable for different data inputs.

Events & Data Flow

●​ One-Way Data Flow:

○​ In React, data generally goes parent → child via props.
○​ For child → parent updates, you pass a callback function as a prop.
●​ Angular uses event emitters for child → parent.
●​ Vue has a v-model for simpler two-way binding.
 Definitions:
●​ DOM: a programming interface for HTML and XML documents. It represents the
page so that programs can change the document structure, style, and content.
○​ manipulating the DOM is central to frontend development; frameworks like
React and Vue optimize how these manipulations occur.
○​ MDN: Document Object Model (DOM)

●​ MVC (Model-View-Controller): a software architectural pattern that separates an

application into three main logical components:
○​ Model: manages application data and business logic.
○​ View: the user-facing interface or presentation layer.
○​ Controller: handles input (like HTTP requests), communicates between the
Model and the View.
○​ popular in both frontend and backend frameworks to keep code organized
and maintainable.
○​ Wikipedia: Model–View–Controller

●​ CLI (Command Line Interface): a text-based interface that lets users interact with
software by typing commands. Many frameworks (Angular, Vue, etc.) provide CLI
tools for scaffolding projects.
○​ simplifies repetitive tasks—e.g., generating components, running
development servers, bundling code.
○​ Wikipedia: Command-line interface

●​ SSR (Server-Side Rendering): a technique where a web server generates the full
HTML for a page, sends it to the client, and then the client’s JavaScript code
“hydrates” it for interactivity.
○​ improves initial load performance and SEO, especially crucial for sites that
need to be indexed by search engines.

●​ SEO (Search Engine Optimization): the process of improving a website’s visibility

and ranking in search engine results pages (SERPs).
○​ websites with SSR or pre-rendering often rank better because search engines
can easily parse the content.
●​ SPA (Single-Page Application): a web application that loads a single HTML page
and dynamically updates it as the user interacts with the app, instead of requesting
new pages from the server.
○​ SPAs provide a faster, more app-like user experience, but can have SEO
challenges without SSR.
○​ MDN: Single-page application

●​ RxJS (Reactive Extensions for JavaScript): a library for reactive programming with
observables, commonly used in Angular for async operations.
○​ allows for powerful data-stream handling, especially for events, HTTP calls,
and real-time scenarios.
○​ Official RxJS Docs

●​ TS (TypeScript): a strongly typed superset of JavaScript that compiles to plain

JavaScript. Created by Microsoft.
○​ used by Angular (and optional in React/Vue) to provide better tooling, type
safety, and catching errors at compile time rather than runtime.
○​ TypeScript Official Site

●​ JSX (JavaScript XML): a React extension that lets you write HTML-like syntax
directly in JavaScript. Behind the scenes, it compiles into React function calls.
○​ makes your UI code more readable by placing markup and logic together.

●​ v-model (in Vue): a directive in Vue that creates two-way data binding between form
input and component state.
○​ simplifies handling user input. When a user types in a text field, it
automatically updates the data property in the component (and vice versa).

●​ jQuery: a fast, small, feature-rich JavaScript library released in 2006. It made DOM
manipulation and AJAX calls simpler at the time.
○​ paved the way for more advanced frameworks, though it’s used less today in
large-scale apps due to the rise of React, Vue, Angular, etc.
○​ jQuery Official Site
●​ Virtual DOM: A concept used primarily by React (and others) where a virtual
representation of the UI is kept in memory and synced with the “real” DOM via a
reconciliation process.
○​ boosts performance by minimizing direct DOM manipulations, which can be
expensive.

●​ Redux: A predictable state container for JavaScript apps, often used with React to
manage application-wide state.
●​ ensures a single source of truth for state, making debugging and scaling easier in
large applications.

●​ “Vanilla JavaScript”: plain JavaScript without any libraries or frameworks.

○​ Historically, developers wrote raw JS and jQuery to manipulate the DOM.
Modern frameworks abstract much of that complexity.
●​ “Spaghetti Code”: slang for code with a complex and tangled control structure,
making it hard to understand or maintain.
●​ early JS projects often grew into spaghetti code when there was no structured
approach (like MVC or components).
●​ Opinionated Framework: a framework (like Angular) that prescribes a strict
structure, coding style, or workflow.
●​ Unopinionated Framework: a library (like React) that leaves architecture decisions
to the developer.
●​ “Component-Based” Architecture: The practice of splitting an interface into
reusable, independent pieces (components), each managing its own state and
rendering logic.
○​ improves maintainability and scalability by isolating concerns.
●​ “Hydration” (in SSR): In server-side rendering, the browser takes the
already-rendered HTML from the server and attaches interactive event handlers once
the JavaScript bundle loads.
○​ minimizes the time to first render, ensuring the user sees content quickly
while still enabling full interactivity.
●​ Routing: The mechanism to map specific URLs/paths to a particular component or
server handler.
○​ allows your single-page app or multi-page app to handle multiple views,
dynamic parameters (e.g., /user/:id), etc.
 Additional Resources
●​ React:
○​ React Official Docs
○​ Create React App GitHub
●​ Angular:
○​ Angular Official Docs
○​ Angular CLI
●​ Vue:
○​ Vue Official Docs
○​ Vue CLI
●​ Next.js (SSR for React):
○​ Next.js Official Docs
●​ Remix (Full Stack React Framework):
○​ Remix Official Site
●​ Nuxt (SSR for Vue):
○​ Nuxt Official Docs
●​ MDN Web Docs:
○​ Mozilla Developer Network – an invaluable reference for HTML, CSS, JS, and
more.

Contact:

●​ Email: ha.eldeeb@gmail.com
●​ Email: mostafa.aenaga@gmail.com