The Browser Platform

Everything the language does not give you and the browser does: a live document tree to query and rewrite, an event system with three phases, self-validating forms, client-side storage, HTTP through fetch, observers instead of polling, canvas at sixty frames a second, and workers for a real second thread.

What you will be able to do

  • Read the document as a tree of nodes and explain how elements differ from other node types
  • Query with querySelector and querySelectorAll, and predict when a collection is live
  • Choose between attributes, properties, dataset and classList for the job in front of you
  • Build nodes off-document and attach them in one batch, without ever touching innerHTML
  • Trace an event through capture, target and bubble, and delegate from a stable ancestor
  • Handle a form submit without a page reload and report errors accessibly
  • Pick the right client-side storage and name what must never go in it
  • Use fetch correctly: res.ok, status classes, body types, CORS, credentials and retries
  • Reach for an observer instead of a polling timer, and animate with requestAnimationFrame
  • Drive a canvas game loop on delta time instead of frame count
  • Move real work into a worker, and say when the transfer cost is not worth it

Lessons

  1. The DOM — The DOM is not your HTML. It is a live tree of objects the browser built from your HTML, and every change you make to it is visible immediately. (16 min)
  2. Creating and Updating DOM — Build the nodes off-document, then attach them once. The browser only has to do expensive work when the tree the user can see changes. (15 min)