Discussion :

[vermine]

Babel 5.4.0 : test de la nouvelle syntaxe function bind
le transpilateur teste des propositions de ECMAScript 7

Babel est un transpileur ECMAScript 6. Il transforme votre code ES6 en code ES5. Ce qui signifie que vous pouvez commencer à utiliser dès maintenant les nouvelles fonctionnalités du langage sans devoir attendre leur support par les navigateurs.

Babel sait compiler et traduire les éléments suivants :

• les raccourcis de fonction ;
• les fonctions asynchrones ;
• les classes ;
• la destructuration ;
• les décorateurs ;
• let ;
• etc.

Mais Babel, c'est également une interaction avec d'autres outils JavaScript (ou non) comme React, NodeJS, Rails, Browserify. Etant compatible avec les principaux navigateurs, Babel peut également être étendu par divers plugins.

Au cours des derniers mois, Babel a été bien accueilli dans plusieurs grandes communautés. On parlait de NodeJS, Rails et React mais nous pouvons également citer Ember, Backbone, AngularJS et bien d'autres. De plus, un intérêt particulier a été montré par Yahoo!, Atom, CloudFlare, etc. Notons par exemple son utilsation par Mozilla et Neflix.

L'équipe a annoncé la sortie de la version 5.4.0.

Elle introduit la syntaxe expérimentale du function bind avec le nouvel opérateur :: qui exécute la liaison de fonction et l'extraction de méthode. C'est l'utilisation d'une bibliothèque d'itération implémentée en tant que méthodes virtuelles :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
/* ES7 */
// Create bindings for just the methods that we need
let { find, html } = jake;
 
// Find all the divs with class="myClass", then get all of the
// "p"s and replace their content.
document.querySelectorAll("div.myClass")::find("p")::html("hahaha");
 
/* ES6 */
let _val;
_val = document.querySelectorAll("div.myClass");
_val = find.call(_val, "p");
_val = html.call(_val, "hahaha");

C'est également l'affichage de la valeur éventuelle d'une promise sur la console :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
/* ES7 */
Promise.resolve(123).then(::console.log);
 
/* ES6 */
Promise.resolve(123).then(console.log.bind(console));

C'est aussi l'utilisation de l'extraction pour appeler une méthode d'objet lorsque survient un événement DOM :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
/* ES7 */
$(".some-link").on("click", ::view.reset);
 
/* ES6 */
$(".some-link").on("click", view.reset.bind(view));

Attention, cette syntaxe est expérimentale et ne doit pas être utilisée pour faire quelque chose d'important. Vous trouverez de plus amples informations ici.


D'après un article sur le blog officiel.

[Kaamo]

Quelqu'un utilise Babel au quotidien sur un projet (perso/pro) ? Des retours ?
Je pense l'utiliser sur le prochain projet perso, si quelqu'un a des conseils (quel process vous utilisez, quels outils, etc), je suis preneur !

[SylvainPV]

Je suis partagé sur ce nouvel opérateur ::. Ça simplifie énormément la syntaxe certes, mais j'ai le sentiment que ça ne résout pas le problème de fond : la gestion du contexte d'appel est toujours aussi perturbante. Ici, les fonctions find et html du namespace jake n'ont plus de sens si elles ne sont pas appelées via cet opérateur :: ou via une instruction call/apply. C'est en quelque sorte une nouvelle "classe" de fonctions, un peu comme les générateurs ou les fonctions asynchrones. Et je trouve qu'on commence à avoir un peu trop de classes de fonctions différentes avec ES6/7.

[yahiko]

Bon, même si pris isolément cette évolution de la norme ES7 est intéressante, j'ai quand même peur que JavaScript soit en train de prendre le chemin de l'élitisme (la hype du fonctionnel, après celle de POO fait aussi ses dégâts), ce qui est un comble pour un langage perclus d'inconsistances comme peut l'être JS... M'enfin, l'industrie IT n'en est plus à une contradiction près.

Il va bientôt falloir un doctorat en Computer Science pour développer (et surtout maintenir) des sites Web. Je me marre d'avance.

[TiranusKBX]

c'est sur que l'opérateur :: vas tellement foutre la merde que peut risque de l'utiliser de peur de tout foirer

[yahiko]

c'est sur que l'opérateur :: vas tellement foutre la merde que peut risque de l'utiliser de peur de tout foirer

Bon, même si pris isolément cette évolution de la norme ES7 est intéressante