A Todo-List Technology Review (2019 version)

A simple todo-list, implemented using jQuery (2010 version), React, and Svelte (2019 versions).

Take Aways

• 2008: life is good, our front-end is small and fast
• 2013: DOM updates are the bottleneck
• 2013: let's add virtual DOM and update only parts of the DOM that changed
• 2014: re-computing virtual DOM is super slow in bigger applications
• 2016: a compiler outputs JS that syncs the DOM efficiently like we did in 2010 2008

A Non-Virtual DOM Paint-Cycle

while (dataChange) {
  applyDataEffect(dataChange);
  queueDOMUpdates(dataChange);
}

raf(() => {
  if (domUpdates) {
    flushDOMUpdates(domUpdates);
  }
});

How Can a Compiler Help

• Bake change detection into the app
• Bake local, efficient updates into the app
• Bundle only the components that the app needs
• Be non-existent at run-time

Build

npm install
npm run build
npm start

Resources

• Frameworks Without the Framework
• Svelte: Building Front-End Applications Without Virtual DOM

License

MIT