Facebook is working on an entirely new architecture based on the popular JavaScript framework React. The new design, called React Fiber, changes how and when changes are detected to improve the responsiveness of browsers and other rendering devices.

The new architecture, which was first unveiled publicly in July 2016, embodies the work Facebook has done over the years. The architecture is backward compatible, overwriting the React Reconciliation algorithm. This procedure can be used to determine exactly when a change occurs and to pass the change to the renderer.

In effect, the team built a prioritized collaborative task scheduler on top of a single-threaded JavaScript engine. In the original reconciliation algorithm, which has since been renamed Stack Reconciler, Virtual DOM Diff processed the entire component tree at once:

The key point is that the Stack Reconciler always synchronizes the entire component tree at once. The Stack Reconciler cannot be paused, so this is not optimal if updates are deeper and available CPU time is limited.

In contrast, Fiber Reconciler has very different aims:

  • Ability to break interruptible tasks into chunks.

  • Ability to prioritize, Rebase, and recover work in a process.

  • React Layout is supported by the ability to iterate back and forth between parent and child.

  • Ability to return multiple elements with render().

  • Better support for error boundaries.

Simply put, instead of waiting for changes to propagate through the component tree, React Fiber knows how to pause every now and then to check for other updates that are more important. This scheduling capability is based on the use of requestIdleCallback, a W3C candidate recommendation.

At React Conf 2017, Lin Clark gave a step-by-step introduction to the new coordinator called React Fiber.

For the most part, developers don’t have to worry about code adaptation, but a few applications rely on Lifecycle hooks in a specific order. Since the order is no longer guaranteed, you may encounter some problems.

“The Fiber team is working on a smoother upgrade path to make sure this doesn’t affect applications,” Clark said.

Dan Abramov writes that the React team doesn’t expect most React apps to encounter problems with version 16:

React 16 (in development) is an innovation, but uses the same public API. For the more than 30,000 (!) Components in which only a small number of changes are required, and these few components are mainly used by actions that are no longer supported or are not officially documented. Thus, 99.9% compatibility is guaranteed. This also convinces us that React 16 can be applied directly to your code, basically.

Fiber will make its debut in React 16, which not only includes a new coordination engine, but also new renderers that can be used in tandem (e.g., ReactDOM, React Native). Isfiberreadyyet.com also provides the latest results of the test suite. As of this writing, 92.2% of the tests have been successfully passed.

The React Fiber: A Closer Look at the New Engine of React:www.infoq.com/news/2017/0…

Today’s recommendation,

Click on the image below to read it

Front End Weekly List Issue 12: Development of Alipay front end building tools, LinkedIn using Brotli to speed up web page response, Ele. me PWA upgrade practice

GMTC 2017 will be held in Beijing from June 9 to 10. GMTC 2017 is the first “big Front end” conference for mobile, front-end, cross-platform and AI applications. Scan the following QR code or stamp to read the original article, go to the official website for details!

InfoQ is a vertical community focused on front-end technology. To join the InfoQ learning group, please follow the “Front-end top” public account and reply to “Add group”. To share or contribute, please send an email to [email protected], marked “Contribute to the top of the front”.