Progressive Bundling

Replacing Webpack with 302 Redirect 👩🏽‍🔬

Brian LeRoux

CTO, Begin.com

  • Super webby open source hacker
  • Member of Apache and OpenJS foundations
  • 💘 JS but it might not seem like it

Key discoveries

  • Esmodules are the future

    and the future is now

  • Build steps can be slow

    Slow iteration speed is bad

  • Long live build steps!

    We need them for fingerprinting

This is important because we can write

standard modules and remain fast.

ES Modules

Initially claimed to possess better performance

because tree shaking and HTTP/2

Unfortunately implementation reality interfered with the paper specs and it was discovered to be MUCH slower due to waterfall downloading.

Solution 1: Bundle thy Modules 🦃

Slow builds, obfuscated prod, tools are deps and thus invite thrash

Solution 2: Manually Resolve the Graph 🤠

HTTP/2 will parallel download; requires discipline

There are only two hard things in Computer Science: cache invalidation and naming things.

Phil Karlton

Somewhere a reverse proxy will cache your module forever and you have zero control 🧦

Fingerprinting is a Requirement 🔎

Create a SHA of your module contents and add to the filename. This alone makes a build step non optional, alas.

Can we run the build step at the time of request inside a Lambda function?

HTTP

A quick refresher

HTTP is the open standard

Web servers (or HTTP functions) are implementations.

HTTP has verbs!

GET for reading stuff and POST for writes.

HTTP

Requests have useful context

  • protocols (https://, wss://, etc)
  • headers
  • query params
  • path parts
  • form variables

HTTP

Responses are very powerful

  • headers
  • body
  • statusCode *
* http.cat

Alice: our end user

Bob: anthropomorphized Lambda function

  • Alice requests GET /js/index.js
  • Bob the Lambda checks the cache and warms it if neccessary
  • Bob responds with a statusCode 302 and location header pointing to the cached bundle

what i like

  • markup doesn't have generated barfy guids
  • build step is not authortime penalty
  • dev waterfall still a param away

    • 💘 VIEW SOURCE 🔥

    what I do not like

  • a bit tricky to implement
  • requires owning the cache

    • Source: begin.com

    Sign up and score your username: Begin.com

    Demo source: github.com/brianleroux/jamstackconf2019

    🌟 Architect on Github! github.com/architect/architect