AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[TASK] #144808 reasons why we adopt babel

Browse Source
This commit is contained in:
dennis.ludwig
2017-11-27 10:09:26 +01:00
parent 595889c3a7
commit cdbe971f40
2 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
radar/2017-03-01/babel.md
View File

@@ -7,28 +7,29 @@ quadrant: languages-and-frameworks
[Babel](https://babeljs.io/) gives you the possibility to use the latest features from JavaScript ([ECMAScript](https://en.wikipedia.org/wiki/ECMAScript)) in the browser of your choice.
Without Babel in the backbone; you had to use the feature set of your oldest browser or use feature detections such as [modernizr](https://modernizr.com/) or write polyfills on your own.
Without Babel you had to use the feature set of your oldest browser or use feature detections such as [modernizr](https://modernizr.com/) or write polyfills on your own.
In general, Babel is split in 2 ways to bring you the new goodies you want.
1. New syntax will be compiled to old EcmaScript 5 code e.g.:
1. New syntax will be compiled to old EcmaScript 5 code e.g.:
* [arrow-functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
* [generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)
* [destructing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
* [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
* [...](https://babeljs.io/learn-es2015/)
2. New globals and functions are provided by [babel-polyfill](http://babeljs.io/docs/usage/polyfill/) e.g.:
* [arrow-functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
* [generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)
* [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
* [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
* [...](https://babeljs.io/learn-es2015/)
* [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
* [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
* [Array.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
* [...](https://github.com/zloirock/core-js#index)
2. New globals and functions are provided by [babel-polyfill](http://babeljs.io/docs/usage/polyfill/) e.g.:
The configuration is really simple due to the [plugin system](http://babeljs.io/docs/plugins/). You can choose which ECMAScript version and [stage presets](http://babeljs.io/docs/plugins/) you want to use.
* [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
* [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
* [Array.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
* [...](https://github.com/zloirock/core-js#index)
* for the latest ECMAScript version use [babel-preset-latest](https://babeljs.io/docs/plugins/preset-latest/)
* for version 2015 only use [babel-preset-2015](https://babeljs.io/docs/plugins/preset-es2015/)
The configuration is really simple due to the [plugin system](http://babeljs.io/docs/plugins/). You can choose which ECMAScript version and [stage presets](http://babeljs.io/docs/plugins/#presets) you want to use.
* for the latest ECMAScript version use [babel-preset-env](https://babeljs.io/docs/plugins/preset-env/)
* for version 2015 only use [babel-preset-2015](https://babeljs.io/docs/plugins/preset-es2015/)
To know what you need you can practice ECMAScript 6 by doing it with [es6katas](http://es6katas.org/) and ask [caniuse](http://caniuse.com/).

4
radar/2017-10-01/babel.md
View File

@@ -4,4 +4,6 @@ ring: adopt
quadrant: languages-and-frameworks
---
TODO!
We are using babel for quite a while now and since then we don't have to struggle with unimplemented features of ECMAScript.
In this regard JavaScript is JavaScript, no matter what browser you are using and we stronly recommend to use babel or similar solutions (e.g.
TypeScript).