Menu

React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

React.js and Prepack

With the compiling JavaScript framework trend and the dawn of Web Assembly age in browsers the race is always on to keep relevant. Way back in 2013 when React was released the vDOM implementation was a revelation, but time goes by and progress is needed to stay relevant.

After the ginormous effort of the Fiber rewrite of React, the team has continued to to push the envelope with gradual improvements like fragments in React 16.2 and the async rendering looming in the future releases. Facebook is not only the worlds largest social media company, but a large software house as well.

The sheer size of Facebook and it's software prowess means the React team can leverage multiple in-house technologies. They've recently been investing in language level technologies like Hack as well as ReasonML, and they've had their Flow typechecker, an alternative to TypeScript for those wanting to bring type safety into JavaScript development.

A more recent addition to Facebooks open source software catalog is Prepack. Like optimisers and packagers Prepack works on the JavaScript source code level, optimising source for consumption by JavaScript engines. At the moment Prepack does not target Web Assembly, but just pure JavaScript.

As an example see the following code examples. First is the input code for Prepack:

(function () {
  function fibonacci(x) {
    return x <= 1 ? x : fibonacci(x - 1) + fibonacci(x - 2);
  }
  global.x = fibonacci(10);
})();

Prepack analyses the code and the the output in this case is startlingly simple:

x = 55;

The above is an extreme example, but is a good example of how a machine and interpret and optimise code in a routine manner. It won't get very creative, but can automatically optimise things that are missed by developers.

Prepack puts performance first

Prepack is similar to Google's Closure Compiler in that it optimises JavaScript code, but there is a key difference. Closure optimises for minimum code size, while Prepack puts runtime performance first. This could enable significant improvements for large Enterprise React applications dealing with large amounts of data as well as mobile apps that need to optimise for battery efficiency.

Prepack remains in early development phase, but it is already testable and there is even an online REPL environment for testing out the functionality. It is easy for large companies to be divided into silos where the other department does not know what the other department is doing, but thanks to the open source culture Facebook seems to have avoided this problem.

While this is not exactly the compiling framework approach, it is a similar technique. In addition to front end development, Node.js developers can also benefit from Prepack. And with the rising popularity of Universal Frameworks like Next.js Prepack can make a difference in React.js performance on the server as well as on the client.

It is worth noting that the React.js developers are already actively looking into Prepack and there is a sample of React code processed by Prepack yielding a 25% decrease in size as well as improved performance:

Written by Jorgé on Tuesday January 2, 2018

Permalink - Tags: javascript, react, prepack

« Compiling JavaScript frameworks is the trend for 2018 - Razzle enables Universal JavaScript apps decoupled from frameworks and libraries »