React's real legacy. A follow-up to What is Virtual DOM?

Virtual DOM, 2 years later

I wrote What is virtual DOM? back in 2014 when I was learning React. I was attempting to see where virtual DOM (vdom) techniques would fit into the future of building user interfaces on the web. At the time, very few JavaScript frameworks or libraries utilized vdom as part of their core rendering approach. One exception was React, which pushed the concept front-and-center from day one.

Today, vdom is a mainstream concept. Implementations similar to or inspired by React’s have been incorporated into many popular frameworks and libraries. EmberJS has glimmer, Incremental DOM champions a lower-level concept of patching the DOM in-place, Elm has a core vdom library for HTML and SVG, Maquette focuses on dynamic UIs with performant animations, Preact is a React clone with a minimal footprint. There are many, many more.

Advanced DOM manipulation techniques are everywhere now and often shared and distilled and broken down beautifully by many smart people.

React’s real legacy (so far)

As important as vdom has been in overcoming performance issues, I don’t think it is the most important innovation that React has inspired or encouraged. Arguably more important than vdom are the other core aspects of React¹.

• Component-based development & Composition
  • Incredibly easy to build up a complete app view from components. See React’s homepage for the simplest example, another example with multiple components, and also the concept of higher-order components.
  • Note: Angular has become more and more component-based each release.
• Functional Programming concepts encouraged
  • FP vs. OOP
• Simple state
  • One-way data flow
  • Note: Angular added one-way data-binding in v1.5
• Universal / Isomorphic & ReactNative
  • Re-use your React components beyond the browser!
  • Note: Ember finally has a solid universal solution in FastBoot, Angular 1.x never could render without a full browser, and Angular 2’s universal rendering story is still quite early stages.

I’m a big fan of React and the influence it’s had on the way we build dynamic UIs. React enables many good things while staying conceptually simple. I’m excited to build more with React and push it further (react-storybook, react-server), and I think the team behind it is constantly improving it.

P.S. To some, React is not prescriptive enough beyond the view layer. Decisions on what routing, data flow, state management, event system, AJAX, Promises, etc. are up to the developer. The explosion of libraries supporting React in the JavaScript ecosystem and the subsequent JavaScript Fatigue that has ensued is partially due to React’s popularity combined with the limited core scope, but I wouldn’t fault React for that, there are many other factors at play². I think in time there will be a shorter list of libraries that are clear winners, but it’ll always depend on what your app is trying to do. If you don’t want to make those decisions, you probably want to use a framework.