as light as a...
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.babelrc
.gitignore
README.md
package.json
webpack.config.js

README.md

feather

Feather is a proof of concept app demonstrating the following in 8.5kb of min/gzipped code.

Visit http://feather.surge.sh, open the network panel and see for yourself.

  • Initial render of clientside components to static HTML at build time. So the browser gets "pre-rendered" HTML.
  • JS "taking over" once loaded in the browser.
  • App state, logic, and virtual DOM rendering and diffing happens outside of main UI thread using a WebWorker.
  • WebWorker code is "inlined" and loaded as a data URI using Blob interface.
  • Worker code is written in ES2015 and import other modules and npm modules from inside worker.
  • Insanely light "router" (feels silly to even call it that). The current URL is simply treated as a part of application state. It then gets "rendered" to the URL bar with history.pushState if it's different than current.
  • Styles are pre-processed and live-reloaded during development without need for browser plugins.
  • npm run build && npm run deploy puts a fully static site with clean URLs on the Internet using Surge.sh.
  • Main UI thread has only three responsibilities:
    • sending "state of the world" to worker on start. This includes parsing real DOM into a virtual dom so the worker has a starting point for calculating diffs and sending in the current URL.
    • listening for and sending serializable actions back to the worker (this includes popstate events) for routing.
    • applying DOM patches when received from worker

credits

Huge thanks to @NolanLawson for his pioneering work on using WebWorkers for DOM diffing. Read his incredible post here: http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org

Very little of what enables this was created by me. I'm just pulling together awesome modules like: webpack, virtual-dom, babel, vdom-serialized-patch, vdom-to-html, vdom-virtualize to name a few.

Created by @HenrikJoreteg.