Facebook Prepack, The Next Big Thing In The JavaScript World

Facebook Prepack, The Next Big Thing In The JavaScript World

Prepack rewrites a JavaScript bundle, resulting in JavaScript code that executes more efficiently

by Janeth Kent Date: 11-05-2017 facebook javascript node prepack react

In the last days, the social networks were crazy about Prepack. Probably you still haven’t heard about it. It’s reasonable! It has been an open source only a few days ago. Prepack has developed by Facebook and it is under active development. It’s experimental and still in very early stage, but it is awesome.

In this article we will introduce Prepack, cover what Facebook wants to solve, see some cool examples and understand the current state of Prepack.

What is PrePack?

Prepack is a tool that optimizes JavaScript source code

Computations that can be done at compile-time, instead of run-time, get eliminated. Prepack replaces the global code of a JavaScript bundle with equivalent code that is a simple sequence of assignments. This gets rid of most intermediate computations and object allocations.

Prepack is a partial evaluator for JavaScript. Prepack rewrites a JavaScript bundle, resulting in JavaScript code that executes more efficiently. For initialization-heavy code, Prepack works best in an environment where JavaScript parsing is effectively cached.

And What About The Closure Compiler?

Prepack focuses on runtime performance, while the Closure Compiler emphasizes JavaScript code size.

The Closure Compiler also optimizes JavaScript code. Prepack goes further by truly running the global code that initialization phase, unrolling loops and recursion.

A Piece of history

One year ago, at React-Europe 2016 conference, Sebastian McKenzie talked about how making JavaScript initialization faster.

So, now we know more about it. There are name and website and we can use it.

How To Start?

Prepack shipped as an npm package and you can use it by Prepack-CLI tool or by API calls to the Node.js module.

Prepack CLI

In order to install the Prepack-CLI, run

npm install -g prepack

And then to run compile a file

prepack script.js

Prepack API

In order to install in it a project, run

npm install --save-dev prepack

and then the js code looks like:

var Prepack = require("prepack");
// or import { prepack, prepackFileSync } from 'prepack';
// or import * as Prepack from 'prepack';

Prepack.prepack(codeString, options); // this function returns an object like this: { code: string, map: SourceMap }

prepack-webpack-plugin

There is a webpack plugin for using Prepack in a convenient way.

import PrepackPlugin from 'prepack-webpack-plugin';
 
const configuration = {
  //...
};
 
module.exports = {
  // ... 
  plugins: [
    new PrepackPlugin(configuration)
  ]
};

Let The Show Begin

Here are some cool examples. The left side in the examples contains the input and the right side contains the output of Prepack.

The first example is a traditional hello world example:

As you can see, Prepack compiled the code to the smallest version.

The next example contains two functions. Here is the code:

The compiled code is generated from the first function. Function func2 is useless and it is not contain any side effect code, so there is no compiled code associate with func2.

Pay attention, code that is not in an IIFE is not a fully optimized.

This example shows coding with a for loop. The loop was removed in the compiled code, but there are a lot of unused lines. With an IIFE it will be looks like:

Here you can see that there are only 5 lines of the log operation.

Playground

You can try it out by yourself in a special playground in Prepack website (see it in the references section). The playground is the better option for whom don’t want to install it or interest just in playing with Prepack.

Current State

Github Measures

Prepack code hosted (with ❤️) by Github and published via npm.

There is 15 contributors, about ~6500 stars, ~2000 downloads this week via npm and ~130 forks. This statistics are expected to leap in the upcoming period, since the interest by developers in the social networks.

There is a funny issue you really want to know about…

Converts 1 meaningless line to 1065 lines of code · Issue #543 · facebook/prepack
Looks like @bevacqua managed to break it. Tried running this modified example from the docs (function() { function fib…github.com

But it is OK. They will fix it in the near future.

Tests Coverage

The code coverage report for serialization tests is expose to all. Right now the coverage is 52.37%.

Code coverage

Prepack’s code coverage generated by istanbul.

Roadmap

Facebook has a roadmap for the development of Prepack. The roadmap divided into three parts: short, medium and long terms.

In the short term Facebook want to stabilizing existing feature set for Prepacking of React Native bundles. They also want to do an integration with React Native tool chain. In addition, they plan to build out optimizations based on assumptions of the module system used by React Native.

The long term vision is to leveraging Prepack as a platform.

Last Attention

Prepack doesn’t recognize document and window, so their value will be undefined. Therefore, we would have to do some preparations for handling with this issue. Maybe someone want to write some npm package for this purpose?

Facebook asks the developers to try Prepack, give feedback, and help them by bugs fixing and by contribution in the Github repository.

References

Here are some useful links for further reading:

Conclusion

Prepack can be a “life changer”. It is backed by a stable company like Facebook. They want to integrate this tool in React and they have been worked on that for a while. There are a lot to do. The vision of Facebook is to leveraging Prepack as a platform. It sounds promising. I will follow their advance. Prepack is awesome!

 
by Janeth Kent Date: 11-05-2017 facebook javascript node prepack react hits : 6035  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Related Posts

Small and medium enterprises can now earn money by holding online events on Facebook

Facebook has launched a new feature that allows small and medium enterprises, large companies, content creators, educators, media... to earn money by holding online events on the social network. Corporate…

Facebook, three questions to recognize fake news (and not share it)

Where's it coming from? What's missing? How do you feel? These are the three questions that Facebook recommends to all users to ask themselves before sharing news. The initiative is…

Is JavaScript good for machine learning?

One of the things you always hear when you are talking to someone related to the M.L. world is that, one must learn Python because the vast majority of the…

Facebook: how to remove hidden data and personal information

Facebook is a great social network that allows us to be always updated on all the news of our friends or family or even the most relevant news of the…

There are 470,000 WhatsApp groups indexed on Google and Facebook says it's not his fault

Want to find new WhatsApp groups? Google it. Reporter Jordan Wildon has discovered hundreds of thousands of private groups through the search engine thanks to public invitation links. Not all were…

React: 4 types of components to rule them all

If you have already worked with React, you will probably have found terms like "dumb components", "stateless components" or "high order components" which serve to describe different ways of defining…

Highlights from the JavaScript Style Guide of Google

For anyone who is not already acquainted with it, Google provides a style guide for writing JavaScript that gives the best stylistic practices for writing clean, understandable code (what Google…

Async/Await how they really work: an example

Promises give us an easier way to deal sequentially with asynchrony in our code. This is a welcome addition, given that our brains are not designed to deal efficiently with…

ES2019 JavaScript and its new features

ECMAScript 2019 has finished and rolled out new exciting features for developers. The proposals which have been accepted and reached stage 4 by the TC39 committee would be included in…

A roadmap to becoming a web developer in 2019

There are plenty of tutorials online, which won't cost you a cent. If you are sufficiently self-driven and interested, you have no difficulty training yourself. The point to learn coding…

Stunning React Boilerplates and Starter Kits for 2019

As React progresses and helps us build and compose the UI of our applications, more React applications are created every day. In the past few years, the community has indeed created…

Node.js Course in 90 Minutes

Node.js can be defined as a Google Chrome JavaScript V8 engine based on a dynamic, cross-platform and open-source JavaScript framework or runtime environment. Node.js was initially implemented as a client-side…

Clicky