babili

_posts/2016-08-26-babili.md

@@ -0,0 +1,246 @@
+---
+layout: post
+title:  "Babili (babel-minify)"
+author: Henry Zhu
+date:   2016-08-30 10:50:00
+categories: announcements
+share_text: "Babili (babel-minify)"
+---
+
+We released [Babili](https://github.com/babel/babili) as beta (0.0.1) a few days ago under an MIT license!
+
+> Try it out in the Babel [REPL](http://babeljs.io/repl/#?babili=true&evaluate=false) and report any bugs or potential optimizations we can make! There's also a [#minify](https://babeljs.slack.com/messages/minify/) slack room!
+
+There are a lot of (valid) questions about why a new minifier is a good idea, so this post should help with that.
+
+TL;DR: Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unncessary as people begin to ship ES2015 to clients. Babili is also modular/flexible (being a [Babel preset](http://babeljs.io/docs/plugins/#presets) means it supports user plugins) and can be used as a preset or CLI tool. Babili will also be able to make ES2015+ specific optimizations.
+
+## Pronunciation
+
+```bash
+# sounds like "bah billy" or "Babadi" (from DBZ)
+say Babili
+```
+
+Babili is Babylon in Akkadian.
+
+> If you can't remember the name, babel-minify works too (made [an issue](https://github.com/babel/babili/issues/124) for the name).
+
+## Why minify?
+
+At a basic level, [minification](https://en.wikipedia.org/wiki/Minification_(programming)) removes unnecessary characters from a program without changing its functionality -- things like comments, whitespace, newlines, and extra parentheses. Advanced minification may transform programs into smaller equivalents and remove redundant/unreachable code.
+
+Minification is primarily useful for decreasing the size of the JavaScript payload sent from the server to the client: users will download less code to use your website. Advanced minification can also result in shorter parse time (less code to parse) and in some cases faster runtime (e.g. advanced optimizations like function inlining).
+
+## Current minifiers
+
+Tools such as [Uglify](https://github.com/mishoo/UglifyJS2) don't currently support targeting the latest version of ECMAScript ([yet](https://github.com/mishoo/UglifyJS2/issues/448)).
+
+We currently use tools like Babel to compile ES2015 code down to ES5 code to support older browsers. Then we use something like Uglify to cut down on the bundle size.
+
+As browsers implement more ES2015 features and we drop support for older browser versions, there is a sliding window of the version of ECMAScript you write in and the target ECMAScript version you minify to. However since Uglify cannot parse ES2015+, you would still have to compile down to ES5 anyway.
+
+## Babili
+
+That's where Babili comes in.
+
+Babili is ES2015+ aware because it is built using the Babel toolchain.
+It is written as a set of Babel plugins, consumable with the [`babili` preset](https://github.com/babel/babili/tree/master/packages/babel-preset-babili).
+
+## Example
+
+Say we're targeting the latest versions of Chrome, Firefox and Safari -- all of which support [ES2015 classes](http://babeljs.io/docs/learn-es2015/#classes). Then, compiling ES2015 classes to a constructor function and prototype methods (ES5) results in more code (and potentially loses any optimizations browsers might have for classes).
+
+```js
+class Mangler {
+  constructor(program) {
+    this.program = program;
+  }
+}
+// need this since otherwise Mangler isn't used
+new Mangler(); 
+```
+
+Before, we might run Babel to transpile [the class into a function](http://babeljs.io/docs/plugins/transform-es2015-classes) and run Uglify on the compiled code to send to the browser.
+
+```js
+// ES2015 code -> Babel -> Uglify/Babili -> Minified ES5 Code
+var a=function a(b){_classCallCheck(this,a),this.program=b};a();
+```
+
+With Babili, you can just run the minifier which works on ES2015 code.
+
+```js
+// ES2015 code -> Babili -> Minified ES2015 Code
+class a{constructor(b){this.program=b}}new a;
+```
+
+Also it's important to note that this isn't specific to ES2015. Because Babel updates as ECMAScript updates (with [ES2015, ES2016, and now ES2017](http://babeljs.io/docs/plugins/#official-presets)) and follows the proposal process for experimental features (with our [stage-x presets](http://babeljs.io/docs/plugins/#stage-x-experimental-presets)), the minifier should be able to output whatever version of ECMAScript that is supported.
+
+In the future, we might make use of the ES2015+ syntax information we have at compile time (e.g. we know that given function is an arrow function or that a given binding is block-scoped etc) to do advanced optimizations. And we can make use of the knowledge that we're targeting an ES2015+ environment in creative ways.
+
+We're just getting started so let us know if you have any ideas!
+
+### [Some of the Plugins](https://github.com/babel/babili#plugins-in-babel-preset-babili)
+
+To give an idea of some of the transforms:
+
+[babel-plugin-minify-constant-folding](https://github.com/babel/babili/tree/master/packages/babel-plugin-minify-constant-folding):
+
+Tries to evaluate expressions and inline the result. For now only deals with numbers and strings.
+
+```js
+2 * 3;
+"b" + a + "c" + "d" + g + z + "f" + "h" + "z"
+```
+
+```js
+6;
+"b" + a + "cd" + g + z + "fhz";
+```
+
+[babel-plugin-minify-mangle-names](https://github.com/babel/babili/tree/master/packages/babel-plugin-minify-mangle-names):
+
+Context- and scope- aware variable renaming.
+
+```js
+var globalVariableName = 42;
+function foo() {
+  var longLocalVariableName = 1;
+  if (longLocalVariableName) {
+    console.log(longLocalVariableName);
+  }
+}
+```
+
+```js
+var globalVariableName = 42;
+function foo() {
+  var a = 1;
+  if (a) {
+    console.log(a);
+  }
+}
+```
+
+## Usage
+
+### Babel Preset
+
+If you already use Babel, you can just add the [`babili`](https://github.com/babel/babili#babel-preset) preset (`babel-preset-babili`) to your config.
+
+You will want to enable this only in production, so use the [env option](http://babeljs.io/docs/usage/babelrc/#env-option) which uses either `process.env.BABEL_ENV` or `process.env.NODE_ENV`
+
+```bash
+$ npm install babel-preset-babili --save-dev
+```
+
+```js
+// previous .babelrc
+{ "presets": ["es2015"] }
+// .babelrc
+{
+  "presets": ["es2015"],
+  "env": {
+    "production": {
+      "presets": ["babili"]
+    }
+  }
+}
+```
+
+### Babili CLI
+
+If you don't use Babel, you can use our standalone CLI tool [`babili`](https://github.com/babel/babili#cli). (Currently it's just a wrapper for `babel-cli` + the preset). You could run this after transpiling (or not) in place of Uglify.
+
+```bash
+$ npm install babili --save-dev
+```
+
+```bash
+$ babili src -d lib
+# equivalent to 
+# babel src -d lib --presets=babili --no-babelrc
+```
+
+### Webpack
+
+You can just use the preset with [`babel-loader`](https://github.com/babel/babel-loader).
+
+```bash
+$ npm install babel-core babel-loader babel-preset-babili
+```
+
+```js
+module: {
+  loaders: [
+    {
+      test: /\.js$/,
+      loader: 'babel',
+      query: {
+        presets: ['babili']
+      }
+    }
+  ]
+}
+```
+
+Or use it seperately with the [babili-webpack-plugin](https://github.com/boopathi/babili-webpack-plugin) (made by [@boopathi](https://github.com/boopathi/), who also works on Babili).
+
+```bash
+$ npm install babili-webpack-plugin --save-dev
+```
+
+```js
+// webpack.config.js
+const BabiliPlugin = require("babili-webpack-plugin");
+module.exports = {
+  entry: //...,
+  output: //...,
+  plugins: [
+    new BabiliPlugin(options)
+  ]
+}
+```
+
+We want to have a better story with integration with Webpack/bundlers in the near future! Also check out [#100](https://github.com/babel/babili/issues/100).
+
+## Pros/Cons
+
+**Uglify Pros**
+- No change to existing tooling if you are already minifying.
+- Battle-tested/production ready (been around for years, and has wide adoption so there's less bugs/issues).
+- It's fast and outputs small code already.
+
+**Uglify Cons**
+- Custom parser/tooling, so difficult to output/minify ES2015+ and more.
+- Not modular, no way to create own plugins/minification strategies.
+
+**Babili Pros:**
+- ES2015+ aware (nothing special needs to be done because we can use the babylon parser) and Babel will update as standards/browsers update.
+- Uses the existing Babel toolchain, can consume as a Babel preset or standalone.
+- Potential for custom smart transforms for React/Flow, etc.
+- Could use Flow/Typescript annotations to enable advanced minification.
+- Each minification step can be split into its own plugin, and there’s plenty of options for customization. This makes it easier to contribute and to find/submit issues for specific problems. It also means that people can independently create their own experimental plugins before upstreaming them into core.
+  - For example: [this](https://github.com/babel/babili/tree/master/packages/babel-plugin-transform-minify-booleans) just turns `true` into `!0` which is straightforward to write.
+- Should be an easy transition if people are familiar with transpiling with Babel already.
+
+**Babili Cons:**
+- We released it early, so there aren't many users yet. Early adopters will have to deal with a tool that isn't as battle-tested as Uglify at first.
+- Right now, the performance is worse/size is worse than Uglify on our benchmark tests. However, this is something we'll be focusing on improving.
+
+TL;DR: Babili should be able to keep up with the ECMAScript standard as new features get added as well as target the environments you need to support. It has a lot of potential: it may not be as production-ready as Uglify at the moment since it was just released but as we continue to optimize with more users it should be more than capable.
+
+## How to Help
+
+[Amjad](https://twitter.com/amasad) had been working on this project for a while but we decided to release it earlier as a beta to allow the community to test it out and both contribute through reporting bugs and patches.
+
+It's still early days for this project so there's a lot to help out with! Our next priority is to make Babili more stable/robust for a 1.0.0 release. 
+
+We will be working to get it as fast and produce code sizes as small as Uglify/[Closure Compiler](https://github.com/google/closure-compiler) in simple mode.
+
+- **Testing on more codebases**: This will help everyone greatly. Because a minifier runs on all code it has potential for a lot of edge cases/bugs not covered in our basic unit tests. Hopefully we can setup a way to report issues easily; now that the [repl](https://babeljs.io/repl/) supports the minifier it should be easier to reproduce/link bugs. In the future we want options to enable specific plugins so we can pinpoint minimal reproduction steps.
+- **Project infrastructure/maintenance**: We want to create more robust benchmarking, setup integration tests on popular open source projects (run the minifier, and then run all the project's unit tests).
+- **Check the output**: If something can be more simplified, it should be straightforward to create an issue and suggest a new transformation to an existing plugin or create a new one. We have the benefit of being modular so anyone can also make their own plugins and then we can figure out whether to include them in the core preset.
+
+Huge thanks to [Amjad (@amasad)](https://github.com/amasad) for starting this project and Facebook for allowing us to release this under the Babel organization as an MIT licensed project! [Sebastian (@kittens)](https://github.com/kittens) was obviously a big part of this given this wouldn't have been possible without Babel. Also thanks to [James (@thejameskyle)](https://github.com/thejameskyle), [Juriy (@kangax)](https://github.com/kangax) for helping see this through to release! Also want to give a shoutout to [Boopathi (@boopathi)](https://github.com/boopathi) who we invited to help us out after seeing the work on his own [babel-minify](https://github.com/boopathi/babel-minify) project!