Bob Walsh
If you’re not a React developer, you probably missed an important milestone that’s going to tilt development momentum towards the Facebook-originated library.
After two years of development, Facebook released React 16 on September 26th. It was the first production version of the DOM-replacing js library built on React Fiber. Fiber is a complete rewrite of React internals, focusing on performance and laying groundwork for features that bring the JavaScript library even closer to native OS performance.
React 16 has a more resilient error-handling strategy, called error boundaries, that developers use to prevent errors from breaking entire React apps. It also has the following features:
- Faster and better serverside rendering and streaming.
- 30% smaller file sizes (react + react-dom is 109 kb (34.8 kb gzipped) down from 161.7 kb (49.8 kb gzipped).
- Numerous other small fixes and features.
But in some ways the real news is how Facebook is avoiding the stumbles of competing Google-sponsored Angular. How are they doing it? By handling rewriting and releasing real new features. Unlike the breaking migration from Angular 1 to 2, developers using this version are reporting almost nothing but real performance improvements.
I commend Facebook for working hard to ensure this is a near-transparent upgrade. They did this by testing it internally in the development group, then in Messenger.com internally and externally, and finally with a piece of Facebook’s two billion users.
As development progressed, open-source developers tracked Fiber’s progress against two-thousand unit tests at isfiberreadyyet.com.
The Need for Speed
It’s clear that Fiber’s focus is to significantly improve the library’s speed in handling server-side rendering, animation, gestures, and layout. All are key issues users notice on desktop and mobile apps.
On the serverside render rewritten in 16, Facebook developers report it is three-times-faster against speed-test suites. Your mileage will vary but that’s an impressive performance bump.
To speed-up layout rendering, Facebook reached below React’s DOM and Native Renderers to improve the reconciler computing the parts of a UI that need to be updated at a given time. This adds data structures, called fibers, to more intelligently manage the work.
Another big win is async rendering. Where React periodically yields to the browser during rendering, for a smoother and faster experience for users, it is disabled in this version. Expect to hear more about async rendering as an opt-in feature in future versions.
Implementing React 16
While React 16 is almost a completely transparent reimplementation of the core React engine, there are a few edge cases and deprecations. React Add-ons, an early part of the React framework similar to Ruby gems, no longer work. Even the popular add-ons perf will fail now, though the Fiber team promises a Fiber replacement sometime down the road.
And there’s a handful of small breaking changes. One of them is the order ComponentWillMount, which happens when one component replaces another. As always, a robust test suite and digging into the docs sheds light on these relatively tiny incompatibilities.
Speaking of incompatibilities, React 16 uses ES6’s Map and Set functions. If you’re catering to a pre-IE 11/older browser audience, make sure you’ve got a global polyfill, such as core-js or babel-polyfill, bundled in your application.
A Legal Fix
While not a coding issue, Facebook’s old BSD + Patents license of React has in recent months become an issue. This is especially the case for open source devs and companies worried Facebook could someday exercise patent rights at their expense.
In a non-legal nutshell, a number of startups (or their lawyers), have worried that the BSC + Patents license of React, GraphQL and other Facebook “products” was incompatible with the standards of open source software. The Apache Software Foundation had gone as far as planning to remove React from its projects, such as CouchDB.
With React 16, Facebook is defusing the issue by switching React, GraphQL, and other open source projects to the far less restrictive and contentious MIT License. While there are undoubtedly attorneys out there who can find issues with that license, both Ruby on Rails and Bootstrap use the MIT license.
The Platform In Perspective
All in all, React Fiber’s smooth introduction as of React 16, both for it in the browser and Native promises a solid platform for developers. Unlike the Angular/Angular 2, Python 2 or Python 3 developer trainwrecks a few years back, Facebook seems determined to increase React’s gravity in the JavaScript world. Meaning it will not force developers to commit to one implementation or another.
With this update, it’s clear that the React ecosystem continues to grow at a phenomenal rate. Startups launch tools, services, buyable component libraries while mature software companies large and small increase their reach with React versions of their offerings.
While there are plenty of alternatives like Vue.js, this platform’s sheer momentum through implementing a new core architecture argues bodes well. Like its originator, it could soon be the only game in town.
