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
- Worker code is written in ES2015 and
importother 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.pushStateif it's different than current.
- Styles are pre-processed and live-reloaded during development without need for browser plugins.
npm run build && npm run deployputs 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
popstateevents) for routing.
- applying DOM patches when received from worker
Very little of what enables this was created by me. I'm just pulling together awesome modules like:
vdom-virtualize to name a few.
Created by @HenrikJoreteg.