Modern Web Platform

Beyond the core technologies, the modern web platform offers a wide range of APIs, patterns, and tools that extend what’s possible in the browser.

Progressive Web Apps (PWAs)

A Progressive Web App is a website that can behave like a native mobile or desktop app. It can be installed on a device, work offline, and send push notifications.

Key Technologies

Technology	Purpose
Web App Manifest (manifest.json)	A JSON file that tells the browser about your app (name, icons, theme color) and enables the “Add to Home Screen” prompt.
Service Workers	A JavaScript file that runs in the background, intercepting network requests. Enables offline support by caching resources.
HTTPS	Required for service workers. PWAs must be served over a secure connection.

What PWAs Can Do

• Work offline or on unreliable networks.
• Be installed on the home screen (no app store needed).
• Send push notifications.
• Access device features like the camera, geolocation, and Bluetooth.
• Run background sync (e.g., save form data and submit when back online).

Examples

Twitter Lite, Spotify Web, Starbucks, and Pinterest all offer PWA versions.

---

Web Components

Web Components are a set of browser-native APIs for creating reusable, encapsulated HTML elements — no framework required.

The Three Pillars

API	Purpose
Custom Elements	Define your own HTML tags (e.g., <user-card>).
Shadow DOM	Encapsulate a component’s internal DOM and CSS so it doesn’t leak into or get affected by the rest of the page.
HTML Templates	<template> and <slot> elements for declaring reusable markup.

// Defining a custom element
class UserCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <div class="card">
        <h2>${this.getAttribute('name')}</h2>
        <p>${this.getAttribute('role')}</p>
      </div>
    `;
  }
}

customElements.define('user-card', UserCard);

<!-- Using the custom element -->
<user-card name="Alice" role="Developer"></user-card>

Why It Matters

• Framework-agnostic: Works in React, Vue, Angular, or plain HTML.
• Browser-native: No build step or library required.
• Used in production: GitHub, YouTube, and Salesforce use Web Components extensively.

---

Additional Browser APIs

The browser provides a rich set of APIs beyond the DOM, Fetch, and Storage covered in the JavaScript module.

Communication

API	Purpose
WebSockets	Full-duplex, real-time communication between client and server. Used for chat apps, live feeds, multiplayer games.
Server-Sent Events (SSE)	One-way stream from server to client. Lighter than WebSockets for notifications and live updates.
Broadcast Channel	Communicate between browser tabs or windows of the same origin.

Observation & Interaction

API	Purpose
Intersection Observer	Detect when an element enters or exits the viewport. Used for lazy loading images, infinite scroll, and scroll-based animations.
Resize Observer	Watch for size changes on elements. Powers container queries and responsive components.
Mutation Observer	React to changes in the DOM tree (added/removed nodes, attribute changes).

Device & Hardware

API	Purpose
Geolocation	Access the user’s GPS coordinates (with permission).
Notifications	Show native OS-level notifications to the user.
Clipboard	Read from and write to the system clipboard.
Web Workers	Run JavaScript in a background thread to avoid blocking the UI for heavy computations.
Media Devices	Access camera and microphone. Used by video call apps.

Graphics & Visual

API	Purpose
Canvas	2D drawing API for charts, image editing, and games.
WebGL / WebGPU	Hardware-accelerated 3D graphics in the browser. Libraries like Three.js make this accessible.
Web Animations API	Programmatic control over CSS animations and transitions via JavaScript.

---

GraphQL

GraphQL is a query language for APIs, developed by Facebook as an alternative to REST.

REST vs GraphQL

Aspect	REST	GraphQL
Endpoints	Multiple (one per resource).	Single endpoint for all queries.
Data Shape	Server decides the response shape.	Client requests exactly the fields it needs.
Over-fetching	Common (you get all fields).	Eliminated (you specify fields).
Under-fetching	Common (need multiple requests).	One request can fetch related data.

# GraphQL Query — ask for exactly what you need
query {
  user(id: 1) {
    name
    email
    posts {
      title
    }
  }
}

Popular GraphQL Clients

• Apollo Client — Full-featured client with caching, used mostly with React.
• urql — Lightweight, extensible GraphQL client.
• TanStack Query — Can also be used with GraphQL via custom fetch functions.

---

Internationalization (i18n)

Internationalization is the process of designing your app to support multiple languages and regional formats (dates, numbers, currencies).

Key Concepts

• i18n: Internationalization — making the app translatable.
• l10n: Localization — actually translating content for a specific locale.
• Locale: A combination of language and region (e.g., en-US, nl-NL, es-CO).

Libraries

Library	Ecosystem	Notes
react-i18next	React	Most popular, based on the i18next core.
vue-i18n	Vue	Official internationalization plugin for Vue.
Paraglide.js	Any	Compile-time i18n with tree-shaking.
FormatJS / react-intl	React	ICU message syntax for complex pluralization and formatting.

Browser API: Intl

The browser has a built-in Intl object for formatting dates, numbers, and currencies without any library.

// Format a date for a German locale
new Intl.DateTimeFormat('de-DE').format(new Date()); // "18.2.2026"

// Format currency
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
  1234.5,
);
// "$1,234.50"

// Relative time
new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(-1, 'day');
// "yesterday"

---

Design Handoff

In professional environments, designers create the visual designs in specialized tools and hand them off to developers for implementation.

Design Tools

Tool	Description
Figma	The industry standard for UI/UX design. Collaborative, browser-based. Developers can inspect designs, export assets, and copy CSS values directly.
Adobe XD	Adobe’s UI/UX design tool.
Sketch	macOS-only design tool, popular before Figma.
Penpot	Open-source design platform, similar to Figma.

The Handoff Workflow

1. Designer creates mockups and prototypes in Figma.
2. Developer inspects the design in Figma — clicks elements to see exact spacing, colors, fonts, and sizes.
3. Assets (icons, images) are exported from Figma in the required formats (SVG, PNG, WebP).
4. Design tokens (colors, spacing, typography) are extracted into CSS variables or a design system.

---

Deployment

Deploying a frontend application means making it accessible on the internet. Modern platforms make this extremely simple.

Hosting Platforms

Platform	Best For	Key Feature
Vercel	Next.js, React, any framework	Instant previews on every pull request.
Netlify	Static sites, Jamstack	Form handling, serverless functions.
GitHub Pages	Static sites, documentation	Free hosting directly from a GitHub repo.
Cloudflare Pages	Static + edge-rendered sites	Global CDN, fast builds, generous free tier.
Railway	Full-stack apps	Simple container deployment with databases.
Fly.io	Full-stack, edge compute	Deploy Docker containers globally.

CI/CD (Continuous Integration / Continuous Deployment)

CI/CD automates the process of testing and deploying your code every time you push changes.

1. Push code to GitHub/GitLab.
2. CI pipeline runs: linting, tests, build.
3. CD pipeline deploys: if all checks pass, the new version goes live automatically.

Most hosting platforms (Vercel, Netlify) have built-in CI/CD — connect your Git repo and every push triggers a new deployment.

Version Control Reminder

Git is the foundation of all modern deployment workflows. If it’s not covered in this module, ensure you are comfortable with basic Git operations (init, add, commit, push, pull, branch, merge) and platforms like GitHub or GitLab.

References

• web.dev - Progressive Web Apps
• MDN - Web Components
• GraphQL Official
• MDN - Intl
• Figma for Developers
• Vercel Documentation