Kitaab

Frontend Engineering is Hard

dev web frontend

published 2024-10-25 18:51

updated 2024-10-25 18:51

The browser is a distributed system. The web ecosystem appears as a fractal of "Do It Your Way". It's built on backwards compatible standards and polyfills each no longer recommended. There's various bundlers, compilers, and build systems. At least 4 different package repositories. There's Javascript runtimes for the client, server, and embedded machines, each slightly incompatible with the last, and at least 3 in each category.

I say this for context, not to complain about bloat. It's incredible what the web has enabled, and how it still all works through collaboration, open protocols and determined people (at least on it's good days). The web truly is the largest scale governance victory the planet has ever seen.

But as someone who mostly finds himself on the infrastructure side of software engineering, it is very difficult to really understand the ecosystem, and why it is evolving the way it has.

Why does an interpreted language need a compiler, and what does it unlock? Why are web standards ignored by the industry, and how did we end up in this local minima trough? What even is a bundler?

I hope to answer some of these questions on my journey, to not just be capable of building web applications, but to understand the ecosystem on deep level, to cut through the frontend churn and see where the puck is going.

This endeavour is motivated by my experience building Mast, a local-first taskwarrior replacement, that can sync between a web app and a CLI app. I've previously built a CLI application using React, nbb-habits, and have some slight experience with React through Clojure at a previous job. Asides from that I've built a static website, and that's about all my frontend experience.

The Web Ecosystem

What I really want is "Front end for Infrastructure engineers". It ought to specifically avoid things that infra engineers manage: dns, servers, ports, http, apis, etc etc but it should also have a brief history of how the web evolved, and detail it's distributed nature.

  • Basic building blocks:
  • JS Runtimes:
    • Browsers
    • Browser extensions
    • Node / Bun / Deno
    • Wasm
    • "serverless" runtimes
  • the browser itself, this video by Lydia Hallie is good
  • ES modules:
    • what is mjs
    • how npm imports modules into client side code
      • whether client side code can run on node?
  • Tooling:
    • bundlers
    • transpilers
    • compilers
    • polyfills
  • service workers
  • CORS
  • (g/t) RPC