Which JavaScript framework should I use next?

The slides for "Which JavaScript framework should I use next?" presented at BuzzJS NYC are at https://slides.com/bahmutov/buzzjs/. I have embedded them below for convenience.

The full video from the presentation

My conclusion: look for the following features in the web framework of the future

• DOM abstractions (virtual dom inside a separate web worker)
• Modular design for smaller size (ES6 modules for tree shaking)
• Hydration for quick start ups (via ServiceWorker)
• Offline support (via DB synch or via offline-supporting API)
• Reactive streams to handle multiple async events
• Functional purity (pays off in testability and reuse)
• Real time support (to be compatible with real time backends and Internet of Things devices)
• Simple to try (a framework should be simple to host inside another framework)

Finally, you should pick the framework that makes your entire team productive and happy.

Below are links to the additional information mentioned in the slides.

Comparing web frameworks

• JavaScript state of the union
• Angular 2 Vs. React
• Angular 2 versus React: There Will Be Blood
• JavaScript MV* Framework - Making the Right Choice
• Data binding code in 9 JavaScript frameworks
• Unidirectional data flow architectures
• Eating popcorn image
• component-check is a great resources. It explores in detail how components can be created in several frameworks.
• Front-end Hyperpolyglot
• Good video comparing Angular 1, Angular 2, Polymer, React, Aurelia and Ember.

Comparing X vs Y performance

• From a React point of Vue...
• A fairer Vue of React
• Angular + React = Speed by Dave Smith
• Angular plus React equals Speed revisited

Comparing performance to native DOM and vanilla JS

• No more JS frameworks
• Radar photo
• Comparing React.js performance vs. native DOM
• Different hammers

Framework user interface speed (Web Workers)

• Car speedometer image
• Web Workers presentation
• Browser database comparison
• Pokedex architecture
• React Custom Renderer using Web Workers
• Using Web Workers for more responsive apps – Jason Teplitz
• Running cheetah image

Size

• Picture of the planet sizes
• Pokedex bundle sizes
• The cost of frameworks
• The Website Obesity Crisis
• Feather app hosted at http://feather.surge.sh/
• Not tested - not included!
• Code coverage proxy was-tested
• Tree-shaking using tool Rollup
• JavaScript needs the compile step (on install)

Hydration

• Picture of water splash
• Hydration example source code and demo, hydrate librart code
  • Hydrate your apps blog post
  • Hydrate at build time blog post
• Hydration using ServiceWorker
  • demo video
  • Blog post Instant web application
  • Library bottle-service

Offline

• Signal unavailable image
• PouchDB - the JavaScript Database that Syncs! See the live replication doc, and read list of web apps using it
• CouchDB - database behind NPM registry
• What can PouchDB sync with?
• Hoodie is offline-first, no backend architecture for web apps.

Functional reactive programming

• Plastic tubes image
• MVC to FRP presentation
• RxJs is part of the Reactive extensions
• Example rewriting small page using jQuery as isolated Cycle.js

Purity

• Test if a function is pure
• Is framework pure or not?

Real time

• Chess image
• Data flow inside simple Cycle.js counter draw-cycle
• Real time backends
  • Feathers is a minimalist real-time framework for tomorrow's apps.
  • Horizon - the realtime JavaScript backend.

Simple to try

• Red apple image
• ng-services - Angular data services for applications that don't want to be Angular.