Module 3: JavaScript Everywhere

A fast, high-level tour of where else the same JavaScript skills from this course apply.

Mobile & Desktop Apps

// React Native — build real native mobile apps using React's component model
function App() {
  return (
    <View>
      <Text>Hello from React Native</Text>
    </View>
  );
}

Expo is a toolchain built around React Native that removes most native-build setup pain, especially for getting started. Ionic takes a different approach — building the UI with web technology (HTML/CSS/JS) wrapped in a native shell.

// Electron — wraps a web app in a native desktop window (Node.js + a browser engine)
const { app, BrowserWindow } = require("electron");
app.whenReady().then(() => {
  new BrowserWindow({ width: 800, height: 600 }).loadFile("index.html");
});

Tauri achieves the same desktop-app goal as Electron with a much smaller footprint, using a Rust backend instead of bundling a full Node.js + Chromium runtime.

Games & 3D

• Phaser — a 2D game framework (physics, sprites, animation) for browser games
• Three.js / Babylon.js — 3D graphics libraries built on WebGL, for browser-based 3D scenes and games
• PixiJS — a fast 2D rendering engine, often used for visually rich UI and game graphics

// A minimal Three.js scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight);
const renderer = new THREE.WebGLRenderer();
const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial());
scene.add(cube);
renderer.render(scene, camera);

WebGL is the lower-level browser API that Three.js/Babylon.js are built on; WebGPU is its modern successor, exposing more of the GPU directly for better performance.

Automation & Realtime

// Playwright / Puppeteer — control a real browser programmatically
const browser = await playwright.chromium.launch();
const page = await browser.newPage();
await page.goto("https://example.com");
await page.screenshot({ path: "screenshot.png" });

Used for E2E testing (previous chapter), web scraping, and automating repetitive browser tasks. Selenium is an older, still widely used cross-language alternative.

// Socket.IO — a popular library built on top of WebSockets (Module 2), adding
// automatic reconnection, rooms, and fallback support
io.on("connection", (socket) => {
  socket.on("chat message", (msg) => {
    io.emit("chat message", msg); // broadcast to everyone
  });
});

PWAs & Web Components

A Progressive Web App is a website that can be "installed" and behave like a native app — offline support via a Service Worker (Module 2), an installable icon via a manifest.json, and push notifications:

// manifest.json
{
  "name": "My App",
  "icons": [{ "src": "icon.png", "sizes": "512x512" }],
  "start_url": "/",
  "display": "standalone"
}

Web Components are a browser-native way to build reusable, encapsulated UI elements without any framework — Custom Elements let you define new HTML tags, and Shadow DOM gives them isolated, non-leaking styles:

class MyButton extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" }).innerHTML =
      `<button>${this.getAttribute("label")}</button>`;
  }
}
customElements.define("my-button", MyButton);
// Usage: <my-button label="Click me"></my-button>

Lit is a small library that makes writing Web Components like this much less verbose.

GraphQL, Web3 & WebAssembly

GraphQL is an alternative to REST (Module 3's Backend chapter) — instead of many fixed endpoints, the client sends a query describing exactly the data it needs, in one request:

query {
  user(id: 1) {
    name
    posts { title }
  }
}

Apollo is the most common client/server toolkit for GraphQL in JavaScript; graphql.js is the reference implementation of the spec itself.

// Web3 — interacting with blockchains from JavaScript
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const balance = await provider.getBalance(signer.address);

ethers.js and web3.js both let JavaScript talk to Ethereum-style blockchains and connect to browser wallets like MetaMask.

WebAssembly (WASM) lets code written in languages like C++, Rust, or Go run in the browser at near-native speed, alongside JavaScript — used when a task (video/audio processing, heavy computation, porting an existing native library) needs more raw performance than JavaScript can offer, with JavaScript still handling the DOM and orchestration around it.