mozFR

Mozilla Francophone

Firefox OS arrive
en France !
En savoir plus »

ES6 en détails : les générateurs

Blog technique de MozFR

Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici.

Merci aux traducteurs et relecteurs :) Marine, Mentalo, Benjamin, Ilphrin et Goofy !


ES6 en détails est une série d’articles décrivant les nouvelles fonctionnalités ajoutées au langage de programmation JavaScript avec la sixième édition du standard ECMAScript (ES6 en abrégé).

Je suis vraiment excité par l’article d’aujourd’hui. Aujourd’hui, nous allons parler de la fonctionnalité la plus magique d’ES6.

Mais qu’entends-je par « magique » ? Pour les débutants, cette fonctionnalité est si différente de ce qui existait déjà en JavaScript que cela peut sembler un peu flou à première vue. D’une certaine façon, elle peut complètement renverser le comportement du langage ! Si ce n’est pas de la magie, je ne sais pas ce que c’est.

Mais ce n’est pas tout : cette fonctionnalité peut repousser les frontières de « l’enfer des callbacks » aux limites du surnaturel.

En fais-je suffisamment assez ? Allons-y et jugez-en par vous-même.

Introduction aux générateurs ES6

Que sont les générateurs?

Commençons par en observer un :

function* quips(nom) {
  yield "bonjour " + nom + " !";
  yield "j'espère que vous appréciez ces billets";
  if (nom.startsWith("X")) {
    yield "Tiens, votre nom commence par un X, " + nom;
  }
  yield "À la prochaine !";
}

Ceci est un morceau de code pour simuler un chat qui parle, probablement un type d’application crucial sur Internet aujourd’hui. (Essayez-la, cliquez sur le lien et jouez avec le chat. Quand vous serez perdu, revenez ici pour quelques explications.)

Cela ressemble à une fonction, n’est-ce pas ? C’est ce qu’on appelle une fonction génératrice (ou générateur) et ça possède beaucoup de liens avec les fonctions. Dès le premier coup d’œil, on peut toutefois observer deux différences :

  • Les fonctions classiques commencent par function. Les fonctions génératrices commencent par function*.
  • Dans une fonction génératrice, yield est un mot-clé, avec une syntaxe similaire à return. La différence est que, tandis qu’une fonction (même un générateur) ne peut utiliser return qu’une seule fois, un générateur peut utiliser yield plusieurs fois. L’expression yield suspend l’exécution du générateur, qui peut donc être reprise plus tard.

Voici donc la principale différence entre une fonction classique et une fonction génératrice. Les fonctions normales ne peuvent pas être mises en pause. Les générateurs peuvent être interrompus puis repris.

Ce que font les générateurs

Que se passe-t-il lorsqu’on appelle la fonction génératrice quips() ?

> var iter = quips("jorendorff");
  [object Generator]
> iter.next()
  { value: "bonjour jorendorff!", done: false }
> iter.next()
  { value: "j'espère que vous appréciez ces billets", done: false }
> iter.next()
  { value: "À la prochaine !", done: false }
> iter.next()
  { value: undefined, done: true }

Vous êtes sans doute familier des fonctions classiques et de leur comportement. Lorsqu’elles sont appelées, elles démarrent immédiatement et ne s’arrêtent que lorsqu’elles rencontrent le mot-clé return ou throw. Élémentaire pour tout programmeur en JavaScript.

Un appel à un générateur ressemble à un appel à une fonction classique : quips("jorendorff"). Cependant, quand on appelle un générateur, il ne démarre pas immédiatement. En fait, il renvoie un objet générateur en pause (nommé iter dans l’exemple ci-dessus). On peut considérer cet objet générateur comme un appel de fonction, gelé dans le temps. En particulier, il est mis en pause tout au début de la fonction génératrice, juste avant de démarrer la première ligne de code.

À chaque appel de la méthode .next() de l’objet générateur, l’appel de la fonction se remet en route jusqu’au yield suivant.

C’est pour cette raison qu’à chaque fois que nous avons appelé iter.next() dans l’exemple ci-dessus nous avons obtenu une valeur différente (sous la forme d’une chaîne de caractères).

Lors du dernier appel à iter.next(), nous avons finalement atteint la fin de la fonction génératrice, le champ .done vaut donc true. Atteindre la fin d’une fonction revient à renvoyer undefined, c’est pour cela que la propriété .value du résultat vaut undefined.

C’est sans doute le bon moment pour revenir à la page de démo du chat parlant et manipuler le code pour de bon. Essayez par exemple d’ajouter un yield dans une boucle, que se passe-t-il ?

D’un point de vue technique, chaque fois qu’un générateur utilise yield, le cadre de sa pile (stack frame) — qui contient les variables locales, les arguments, les valeurs temporaires ainsi que la position actuelle de l’exécution dans le générateur — est ôté de la pile. Cependant, le générateur conserve une référence vers ce cadre afin que le prochain appel à .next() puisse réutiliser ce cadre et continuer l’exécution du code.

Il est important de préciser que les générateurs ne sont pas des threads. Dans les langages utilisant des threads, on peut rencontrer plusieurs parties de code qui fonctionnent en même temps, entraînant habituellement des accès concurrents, un certain indéterminisme et de meilleures performances.

Les générateurs n’agissent pas du tout de cette façon. Quand un générateur fonctionne, il se situe dans le même thread que son appel. L’ordre des exécutions est séquentiel et déterministe, il n’y a pas d’accès concurrents. Contrairement aux systèmes utilisant des threads, un générateur est uniquement suspendu aux endroits correspondants aux yield contenus dans son code.

OK, nous savons maintenant ce que sont les générateurs. Nous avons vu un générateur fonctionner, s’arrêter puis reprendre. Arrive maintenant la grande question : en quoi cette chose bizarre pourrait-elle nous être utile ?

Les générateurs sont des itérateurs

La semaine dernière nous avons vu que les itérateurs ES6 ne sont pas seulement une classe native. Ils représentent une extension du langage dans son ensemble. Vous pouvez créer vos propres itérateurs, il suffit d’implémenter deux méthodes : [Symbol.iterator()] et next().

Malgré tout, implémenter une interface demande toujours un minimum de travail. Voyons à quoi ressemble réellement l’implémentation d’un itérateur. Par exemple, créons un itérateur basique qui compte d’un nombre à un autre, comme le ferait une bonne vieille boucle for(;;) en C.

// Cela devrait sonner 3 fois
for (var value of range(0, 3)) {
  alert("Ding ! à l'étage numéro " + value);
}

Voici une solution qui utilise une classe ES6 (si cette syntaxe vous semble un peu obscure, pas de panique, ce sera l’objet d’un prochain billet).

class RangeIterator {
  constructor(start, stop) {
    this.value = start;
    this.stop = stop;
  }

  [Symbol.iterator]() { return this; }

  next() {
    var value = this.value;
    if (value < this.stop) {
      this.value++;
      return {done: false, value: value};
    } else {
      return {done: true, value: undefined};
    }
  }
}

// On renvoie un nouvel itérateur qui compte de 'start' à 'stop'.
function range(start, stop) {
  return new RangeIterator(start, stop);
}

Essayez ce code.

Note : il est nécessaire d’utiliser Firefox Nightly ou Chrome avec une version supérieure ou égale à 42 pour que cet exemple fonctionne.

C’est pour cela qu’implémenter un itérateur se fait comme avec Java ou Swift, ce n’est pas si compliqué ! Mais ce n’est pas vraiment trivial non plus ! Est-ce que ce code contient des erreurs ? Pas facile à dire. Il ne ressemble pas du tout à la boucle for(;;) habituelle que l’on essaie de remplacer : le protocole des itérateurs nous oblige à démanteler la boucle.

À ce stade, vos sentiments concernant les itérateurs sont sans doute mitigés. Ils sont sûrement super à utiliser mais ils semblent difficiles à implémenter.

À tout hasard, n’auriez vous pas idée d’une toute nouvelle structure de contrôle du flux en JavaScript, fonctionnant étape par étape, et qui rendraient les itérateurs beaucoup plus simples à construire ? Puisque nous avons les générateurs, pourquoi ne pas les utiliser ici ?

Essayons :

function* range(start, stop) {
  for (var i = start; i < stop; i++)
    yield i;
}

Essayez ce code.

Les 4 lignes du générateur ci-dessus remplacent exactement les 23 lignes utilisées précédemment pour implémenter range(), y compris l’intégralité de la classe RangeIterator. Ceci est possible parce que les générateurs sont des itérateurs. Tous les générateurs possèdent une implémentation native de .next() et de [Symbol.iterator](). Il suffit simplement d’écrire le comportement de la boucle.

Implémenter des itérateurs sans disposer de générateurs, c’est équivalent à devoir écrire un courrier en utilisant uniquement la voie passive. Lorsqu’il est impossible d’exprimer directement ce qu’on a besoin, on se retrouve à formuler des phrases de façon alambiquée. RangeIterator était long et étrange car on l’utilisait pour décrire une boucle sans pouvoir utiliser une syntaxe de boucle. Les générateurs permettent de répondre à ce problème.

Comment peut-on utiliser les générateurs comme des itérateurs ?

  • En rendant n’importe quel objet itérable. Il suffit d’écrire une fonction génératrice qui parcourt this, et qui utilise yield sur chaque valeur rencontrée. La fonction obtenue peut être définie comme la méthode [Symbol.iterator] de l’objet.

  • En simplifiant les fonctions de construction de tableaux. Si votre fonction retourne un tableau de résultats à chaque appel, comme ceci :

     
    // Divise un tableau à une dimension 'icons'
    // en tableaux de taille fixe 'rowLength'
    function splitIntoRows(icons, rowLength) {
      var rows = [];
      for (var i = 0; i < icons.length; i += rowLength) {
        rows.push(icons.slice(i, i + rowLength));
      }
      return rows;
    }
    

    Les générateurs permettent de faire la même chose de manière plus concise :

    function* splitIntoRows(icons, rowLength) {
      for (var i = 0; i < icons.length; i += rowLength) {
        yield icons.slice(i, i + rowLength);
      }
    }
    

    La seule différence de comportement est le fait qu’au lieu de travailler sur tous les résultats à la fois et de renvoyer un tableau les contenant, ceci renvoie un itérateur et les valeurs de retour sont calculées l’une après l’autre, à la demande.

  • Pour des résultats de grande taille, cela peut également être utile. Il est impossible de construire un tableau infini. Mais vous pouvez renvoyer un générateur qui produit une séquence sans fin, chaque appelant pourra récupérer autant de valeurs que nécessaire à partir de ce générateur.

  • Pour « refactorer » des boucles complexes : vous avez une fonction énorme et moche ? Vous souhaitez la scinder en éléments plus simples ? Les générateurs sont des couteaux que vous pouvez ajouter à votre boîte à outils. Lorsque vous êtes face à une boucle complexe, vous pouvez sortir la partie qui produit les données dans une fonction génératrice indépendante. Puis modifier la boucle en utilisant for(var toto of monNouveauGenerateur(args)).

  • Pour créer des outils afin de manipuler les itérables. ES6 ne fournit pas de bibliothèque complète pour filtrer, mapper et bidouiller les ensembles de données itérables. Cependant, les générateurs sont très bien adaptés à la création de ces outils dont vous pourriez avoir besoin, en écrivant simplement quelques lignes de code. Par exemple, supposons que vous ayez besoin d’un équivalent de Array.prototype.filter() qui fonctionne sur les NodeList du DOM et pas uniquement sur les objets Array. Facile !

    function* filter(test, iterable) {
      for (var item of iterable) {
        if (test(item))
          yield item;
      }
    }
    

Alors, est-ce que les générateurs sont utiles ? Évidemment. Ils représentent une façon étonnament simple d’implémenter des itérateurs personnalisés et les itérateurs représentent le nouveau standard pour les données et les boucles dans ES6.

Mais ce n’est pas la seule chose que peuvent faire les générateurs. Ce n’est peut-être même pas la plus importante chose qu’ils peuvent faire !

Générateurs et code asynchrone

Voici du code JS que j’ai écrit il y a quelque temps :

          };
        })
      });
    });
  });
});

Cela vous rappelle peut-être quelques lignes de votre code. Les API asynchrones demandent généralement une fonction de rappel (callback), ce qui signifie qu’il faut écrire une fonction anonyme supplémentaire chaque fois qu’on fait quelque chose. Ainsi, si vous avez un code qui fait 3 choses, plutôt que 3 lignes de code, vous aurez 3 niveaux d’indentation dans votre code.

Voici un autre fragment de code JS que j’ai écrit :

}).on('close', function () {
  done(undefined, undefined);
}).on('error', function (error) {
  done(error);
});

Les API asynchrones possèdent certaines conventions concernant la gestion des erreurs plutôt que d’utiliser des exceptions. Différentes API possèdent différentes conventions. Dans la plupart des cas, les erreurs sont ignorées par défaut. Dans certains cas, même les cas de terminaisons normales sont ignorés par défaut.

Jusqu’à maintenant, ces problèmes ont été le prix à payer pour utiliser la programmation asynchrone. Nous avons fini par accepter que le code asynchrone n’est pas aussi propre et simple que la version synchrone correspondante.

Les générateurs nous font espérer que ce ne soit plus le cas.

Q.async() est un tentative expérimentale pour utiliser les générateurs avec des promesses afin de produire du code asynchrone qui ressemble à du code synchrone. Par exemple :

// Code synchrone pour créer une fonction qui fait du bruit
function makeNoise() {
  shake();
  rattle();
  roll();
}

// Code asynchrone pour faire du bruit.
// Renvoie un objet Promise qui est résolu
// quand nous avons fini de faire du bruit.
function makeNoise_async() {
  return Q.async(function* () {
    yield shake_async();
    yield rattle_async();
    yield roll_async();
  });
}

La principale différence est que, dans la version asynchrone, il faut ajouter le mot-clé yield à chaque appel d’une fonction asynchrone.

Ajouter un détail comme une condition if ou un bloc try-catch dans la version Q.async se fait exactement de la même façon que dans la version synchrone. Comparé à d’autres façons d’écrire du code asynchrone, cela ressemble beaucoup moins à l’apprentissage d’un nouveau langage.

Si vous êtes arrivé jusqu’ici, vous apprécierez sans doute l’article très détaillé de James Long sur ce sujet.

Les générateurs illustrent donc un nouveau modèle de programmation asynchrone qui semble mieux adapté au cerveau humain. Les travaux autour de ces concepts sont toujours en cours. Entre autres choses, une meilleure syntaxe devrait aider. Pour la version ES7, il existe une proposition pour construire des fonctions asynchrones basées à la fois sur les promesses (promises) et les générateurs, inspirées de fonctionnalités similaires existant en C#.

Quand puis-je commencer à utiliser cette fonctionnalité ?

Côté serveur, vous pouvez utiliser les générateurs ES6 dès aujourd’hui avec io.js (et avec Node en utilisant l’option —harmony)

Côté navigateur, seuls Firefox 27+ et Chrome 39+ supportent les générateurs ES6 pour le moment. Pour les utiliser à travers le web, vous devrez utiliser un compilateur tel que Babel ou Traceur pour traduire votre code ES6 en code ES5, plus largement compatible avec les anciens navigateurs.

Quelques remerciements à qui de droit : les générateurs ont d’abord été implémentés dans JS par Brendan Eich ; sa conception suivait de près les générateurs Python, inspirés par Icon. Ils sont apparus dans Firefox 2.0 dès 2006. Le chemin vers la standardisation a été chaotique et la syntaxe ainsi que le comportement ont évolué au cours de cette période. Les générateurs d’ES6 ont été implémentés dans Firefox et Chrome par la même personne, Andy Wingo, un professionnel du compilateur. Ce travail a été sponsorisé par Bloomberg.

yield;

Il y a encore à dire sur les générateurs. Nous n’avons pas évoqué les méthodes .throw() et return(), les arguments optionnels de .next() ou encore la syntaxe de l’expression yield*. Cependant, je pense que ça suffira pour ce billet, déjà suffisamment déconcertant. Comme le font les générateurs, il vaut mieux faire une pause et reprendre une autre fois.

La semaine prochaine, nous changerons d’allure. Nous avons abordé deux sujets assez conséquents, l’un après l’autre. Ne pourrions-nous pas parler d’une fonctionnalité ES6 qui ne changera pas votre vie ? Quelque chose de simple et de manifestement utile ? Quelque chose qui vous fera sourire ? ES6 possède aussi quelques fonctionnalités de ce genre.

À venir : une fonctionnalité qui va immédiatement trouver sa place dans le code que vous écrivez tous les jours. Rejoignez-nous la semaine prochaine pour une explication détaillée sur les patrons de chaînes (template strings) d’ES6 !

Lire la suite »

Blog du groupe comm communautaire pour Firefox OS

BlogZiNet

Le week-end dernier les contenus du groupe comm pour Firefox OS ont été migrés du blog communautaire général vers un blog spécialisé de MozFr pour Firefox OS.

Pour le contexte, je reprendrai l’intro que j’ai rédigée en réponse au message de Pascal sur la liste communautaire générale :


Depuis le début des préparatifs du groupe comm, nous cherchons à avoir notre propre blog et avons commencé à publier à la demande de Mozilla sur le blog général. Nous nous désespérons depuis octobre 2014 de ne pas avoir notre propre espace de communication cohérent.

Des essais avaient été menés pour avoir un blog WordPress mais les dev bénévoles d’alors n’avaient pu mener le projet à sa fin. Quand nous avions voulu reprendre le projet – avec des connaissances sur WordPress en interne pour ce CMS qui a les fonctions qu’il nous faut – il nous avais été pratiquement refusé pour des raisons de sécurité. Un blog Dotclear nous a été finalement proposé et le blog de test cité a été créé. Précisons que nous n’avons dessus que des droits limités.

Julien (qui a désormais les droits d’administrateur dessus) a accepté de le designer à l’image de Firefox OS avec les fonctions que nous avons demandées. Il a peu de temps et le blog n’a pas avancé malgré l’installation de plugins disponibles pour Dotclear et une recherche parmi les thèmes adaptés. Il est en vacances. Nous serions très heureux d’avoir une version qui ressemble un peu à quelque chose pour pouvoir mettre en avant notre propre objet de communication cohérent.


Concernant le refus de WordPress pour des raisons de sécurité, ce n’était pas un reproche aux admin de MozFr mais un état de fait à prendre en compte et qui rajoutait un obstacle sur notre chemin…

Migration

Nous en sommes venus à la conclusion qu’il fallait migrer le contenu se trouvant sur le blog général vers notre propre instance du Dotclear de MozFr avec un thème générique (nous avons retenu Ductile, l’ancien thème par défaut de Dotclear dans une version plus évoluée que celle du blog général, responsive aussi mais en HTML5)1.

Nous avons remplacé le site vitrine en espérant pouvoir créer un thème reprenant le concept des tuiles lui-même adapté en son temps du site de Mozilla.

Pascal a donc mis notre instance Dotclear à l’adresse https://firefoxos.mozfr.org (N. B. le S), migré les articles relatifs à Firefox OS (82 billets, 1 page et 85 commentaires) du blog général au blog Firefox OS et mis en place des redirections permanentes pour les articles déplacés afin de ne pas perdre le référencement et d’éviter les erreurs 404. Après quelques réglages, le blog semble OK2 avec son thème générique.

D’accord avec Pascal, nous avons laissé le dernier article sur Firefox OS en Afrique car il s’agit d’un billet qui s’adresse à la communauté et qu’il reprend des appels de membres de la communauté.

La communauté francophone qui blogue a aussi ses planètes : planete.mozfr.org et mozfr.org3. Le nouveau blog y est.

raccourcis en haut du blog Firefox OS frJ’ai fait quelques personnalisations à la marge. Pour les raccourcis en haut de page, j’ai créé une page Nos réseaux sociaux, comme nous n’avons pas encore mis en place de formulaire de contact ni décidé de la forme qu’il prendra, pour le « @ », et mis la page Assistance migrée sous le « ? ».

Le pied de page comporte désormais une description avec des liens :

Blog de la communauté francophone pour Firefox OS, le système d’exploitation mobile de Mozilla.
Apprenez-en davantage sur notre équipe de communication.

Licence

Lundi, nous avons confirmé que par défaut (donc sauf mentions explicites contraires), les textes seront en CC BY-SA 4.0 (Creative Commons – Attribution – partage dans les mêmes conditions 4.0 International). Nous avons écarté la restriction NC qui aurait interdit les réutilisations commerciales. Par contre, les « graphiques » (photos, dessins, images d’illustrations, logos, maquette, charte graphique, identité visuelle, vidéos, etc.) seront en « Tous droits réservés ». La complexité, l’entremêlement des droits et la non disponibilité de certains éléments du droit d’auteur sur les images nous font préférer de restreindre la licence libérale aux productions textuelles. Dans les deux cas, une mention spéciale pourra changer la donne pour un contenu précis. Nous faisons attention à mentionner nos sources et les crédits pour les illustrations.

La note de copyright renvoyée dans le code des pages est pour l’heure : Textes : CC BY-SA 4.0. Graphismes/images/photos/vidéos/visuels : Tous droits réservés.. Je n’ai pas trouvé de mention de pied de page qui me satisfasse.

Tout cela sera précisé dans de futures mentions légales et politique de données personnelles dont il faut reprendre l’étude abandonnée cette automne avec le blog sous WordPress.

Statistiques

Grâce à Anthony qui avait mis en place Piwik à l’automne, nous avons pu configurer le plugin ad hoc pour Dotclear4. Piwik avec un léger paramétrage permet de s’exonérer de la demande de consentement préalable au dépôt d’un cookie imposée par le droit européen et sa transposition que contrôle la CNIL en France.

Et maintenant ?

On peut dire que le blog est en bêta. Il reste encore pas mal à faire pour avoir un objet de communication en bonnet difforme. Comme signalé nous avons des pages de mentions légales, données personnelles, de crédit, etc. Si vous voulez participer même sans être juriste à l’élaboration d’instruments en accord avec les valeurs de Mozilla et de la communauté, rejoignez-nous.

Le gros truc va être le thème à l’image de Firefox OS et pensé pour répondre aux besoins d’un espace central de communication. Donc, si vous avez des compétences en Dotclear ou en webdesign (comme l’écrit désormais le dictionnaire), nous serions heureux et reconnaissants de bénéficier de votre aide.

Nous avons une liste publique sans approbation préalable. Y’a plein de gens sympa que seront heureux de vous lire, même juste pour un avis ponctuel, et d’ailleurs, en attendant, vous pouvez faire qu’observer.



Note 1 : Nous avions le choix entre les thèmes :

  • International que nous avions choisi avec une disposition magazine – démo – HTML5 mais pas responsive.
  • Berlin : thème par défaut de Dotclear 2.7 ; Démo : en HTML5 qui a l’air responsive.
  • Ductile : thème par défaut de Dotclear 2.4. La version installée est en HTML5 et responsive ; démo.
  • Ductile-mozfr basé sur une version de Ductile non HTML5 mais responsive. C’est le thème du blog général.

Pour être complet, ces thèmes sont installés mais ne répondent pas à nos exigences minimales :

  • Blowup : ancien thème de Dotclear – démo – en HTML5 mais pas responsive.
  • Blue Silence : l’ancien thème par défaut de Dotclear avant Blowup n’est ni HTML5 ni responsive.
  • Chestnut que nous avions choisi auparavant en disposition magazine mais qui n’est ni en HTML5 ni responsive et que nous avions donc abandonné ; démo.
  • Time Fliesdémo – HTML5 mais pas responsive.

Note 2 : Des « @ » semblent avoir disparus d’autres non.

Note 3 : aussi en HTTPS, ce qui pose un problème pour afficher les iframe (fichiers inclus) des sites eux restés en HTTP.

Note 4 : cf. Tutoriel : installer Piwik sous dotclear 2 par StandarTux.

© 2010-2014 Mozinet - Ce billet a été publié sur BlogZiNet.

Lire la suite »

ES6 en détails : les itérateurs et la boucle for-of

Blog technique de MozFR

Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici.

Merci aux traducteurs et relecteurs :) Marine, Mentalo, Benjamin, Amarok, Lucas, Ilphrin et Goofy !


ES6 en détails est une série d’articles décrivant les nouvelles fonctionnalités ajoutées au langage de programmation JavaScript avec la sixième édition du standard ECMAScript (ES6 en abrégé).

Comment itérer sur les éléments d’un tableau ? Lorsque JavaScript est apparu, il y a vingt ans de ça, on aurait fait ainsi :

for (var index = 0; index < monTableau.length; index++) {
  console.log(monTableau[index]);
}

Depuis ES5, on peut utiliser la méthode native forEach :

monTableau.forEach(function (value) {
  console.log(value);
});

C’est un petit peu plus court, mais il y a un léger inconvénient : il n’est pas possible de sortir de cette boucle avec une instruction break ou de faire retourner la fonction englobante avec une instruction return.

Ce serait effectivement agréable s’il y avait une syntaxe de boucle for itérant directement sur les éléments du tableau.

Quid d’une boucle for-in ?

for (var index in monTableau) {    
  // ne faites pas ceci
  console.log(monTableau[index]);
}

C’est une mauvaise idée pour plusieurs raisons :

  1. Les valeurs assignées pour l’index dans ce code sont les chaînes de caractères "0", "1", "2", et ainsi de suite : ce ne sont pas réellement des nombres. Étant donné qu’on ne souhaite sûrement pas manipuler des chaînes de façon arithmétique ("2" + 1 == "21"), c’est, a minima, peu pratique ;
  2. Le corps de la boucle ne va pas seulement s’exécuter pour chaque élément du tableau, mais également pour toutes les propriétés non-natives que l’on pourrait avoir ajoutées. Par exemple, si votre tableau possède une propriété énumérable monTableau.nom, alors cette boucle va s’exécuter une fois de plus, avec index == "nom". Même les propriétés présentes sur la chaîne de prototypes du tableau peuvent être visitées ;
  3. Le plus étonnant dans tout ça est que, dans certaines circonstances, ce code va boucler sur les éléments du tableau dans un ordre arbitraire.

Pour faire court, for-in a été pensé pour travailler avec de bons vieux objets (type Object) dont les clés sont des chaînes de caractères. Pour les tableaux (type Array), ce n’est pas génial.

La puissante boucle for-of

Vous souvenez-vous de la semaine dernière, lorsque j’ai promis qu’ES6 ne casserait pas le code JavaScript que vous avez déjà écrit ? En fait, il existe des millions de sites Web qui dépendent du comportement de for-in — oui, même de son comportement sur les tableaux. Il n’a donc jamais été question de « réparer » for-in afin qu’elle soit plus utile pour manipuler avec des tableaux. Le seul moyen pour ES6 d’améliorer les choses était d’ajouter une nouvelle forme de syntaxe de boucle.

La voilà :

for (var valeur of monTableau) {
  console.log(valeur);
}

Hmm. Après toute cette publicité, ça ne semble pas si impressionnant, n’est-ce pas ? Pourtant, nous allons voir que for-of a plus d’un tour dans son sac. Pour l’instant, notez simplement que :

  1. C’est la syntaxe la plus concise et la plus directe pour boucler sur les éléments d’un tableau ;
  2. Celle-ci permet d’éviter les pièges de for-in ;
  3. Contrairement à forEach(), elle est compatible avec les instructions break, continue et return.

La boucle for-in est faite pour boucler sur les propriétés d’un objet.

La boucle for-of est faite pour boucler sur des données — comme les valeurs d’un tableau.

Mais ce n’est pas tout.

for-of fonctionne également avec les autres collections

for-of n’est pas restreint aux tableaux. Cela fonctionne également avec la plupart des objets qui agissent comme des tableaux, telles que les NodeList du DOM. Cela fonctionne également sur les chaînes de caractères, en considérant que la chaîne est une séquence de caractères Unicode :

for (var chr of "♂ ♀"){
  alert(chr);
}

Cela fonctionne également avec les objets Map et Set.

Oh, désolé si vous n’avez jamais entendu parler des objets Map et Set, ceux-ci sont des nouveautés apportées par ES6. Nous en parlerons plus tard dans un article dédié. Si vous avez déjà utilisé des Maps (dictionnaires) et Sets (ensembles) dans d’autres langages, vous ne serez pas très surpris.

Par exemple, un objet Set peut être utilisé pour éliminer des doublons :

// créons un ensemble à partir d'un tableau de mots
var motsUniques = new Set(mots);

Une fois que l’on a un ensemble (Set), que se passe-t-il si on veut itérer sur son contenu ? Facile :

for (var mot of motsUniques) {
  console.log(mot);
}

Une Map est légèrement différente : les données que celle-ci contient sont des paires de clés-valeurs, il faudra donc utiliser l’affectation « destructurée » (destructuring) pour séparer la clé et la valeur en deux variables distinctes :

for (var [clé, valeur] of annuaireMap) {
  console.log("Le numéro de téléphone de "+clé +" est " + valeur);
}

La décomposition est une autre fonctionnalité, également apparue avec ES6 qui fera un sujet idéal pour un prochain article que j’écrirai.

Maintenant, vous avez une idée du tableau : JS possède déjà un certain nombre de structures de données pour des collections, et il y en a encore plus à venir. for-of a été pensé pour être l’instruction de boucle ultime à utiliser avec toutes ces structures.

for-of ne fonctionne pas avec des objets tout simples, mais si vous voulez itérer sur les propriétés d’un objet, vous pouvez soit utiliser for-in (c’est sa raison d’être), soit la fonction native Object.keys() :

// affiche toutes les propriétés propres énumérables 
// d'un objet dans la console
for (var clé of Object.keys(monObjet)) {
  console.log(clé + ": " + monObjet[clé]);
}

Sous le capot

« Les bons artistes copient, les très bons artistes volent » — Pablo Picasso

Un thème récurrent d’ES6 est le fait que les nouvelles fonctionnalités ajoutées au langage ne viennent pas de nulle part. La plupart ont été essayées et se sont avérées utiles dans d’autres langages.

La boucle for-of, par exemple, rappelle des instructions de boucle similaires en C++, Java, C#, et Python. Comme celles-ci, elle fonctionne avec des structures de données différentes, fournies par le langage et sa bibliothèque standard. Mais c’est également un ajout au langage.

De même qu’avec les instructions for ou forEach dans ces autres langages, for-of fonctionne entièrement à l’aide d’appels de fonctions. Ce que les tableaux (objets Array), dictionnaires (objets Map), ensembles (objets Set) et les autres objets ont en commun est le fait qu’ils ont chacun une méthode iterator (NdT : pour « itérateur »).

Il existe une autre catégorie d’objets qui peuvent aussi avoir une méthode iterator : n’importe quel objet.

De la même manière que lorsqu’on ajoute une méthode monObjet.toString() à n’importe quel objet, JS sait comment convertir cet objet en une chaîne de caractères, on peut ajouter la méthode monObjetSymbol.iterator() à n’importe quel objet, et, soudainement, JS sait comment itérer sur cet objet.

Par exemple, imaginons que vous utilisiez jQuery, et que, bien que vous soyez très fan de .each(), vous aimeriez que les objets jQuery fonctionnent également avec for-of. Voici la manière de procéder :

// Comme les objets jQuery se comportent comme des tableaux,
// donnons-leur la même méthode iterator que celle de l'objet Array
jQuery.prototype[Symbol.iterator] =
Array.prototype[Symbol.iterator];

OK, je sais ce que vous êtes en train de vous dire. Cette syntaxe Symbol.iterator est bizarre. Que se passe-t-il ici ? C’est en lien avec le nom de la méthode. Le comité de standardisation aurait pu appeler cette méthode .iterator(), or dans ce cas, votre code aurait déjà pu comporter des objets ayant une méthode .iterator(), et cela aurait pu être une source de confusion. C’est pourquoi le standard préfère utiliser un symbole plutôt qu’une chaine de caractères comme nom de la méthode.

Les symboles sont apparus avec ES6, et nous vous expliquerons tout sur eux — vous l’avez deviné — dans un prochain article de blog. Pour l’instant, tout ce que vous avez besoin de savoir, c’est que le standard peut définir un symbole entièrement nouveau, comme Symbol.iterator, et qu’il est garanti que cela ne créera pas de conflit avec du code existant. Le compromis que cela implique est une syntaxe un peu étrange. Mais c’est un petit prix à payer pour cette nouvelle fonctionnalité versatile et la garantie d’une excellente rétro-compatibilité.

Un objet qui possède une méthode Symbol.iterator() est appelé un itérable. Dans les semaines qui viennent, nous verrons que le concept d’objets itérables est utilisé à travers tout le langage, pas seulement avec for-of mais également avec les constructeurs des objets Map et Set, avec les affectations déstructurées et avec le nouvel opérateur « spread » (NdT : ou « opérateur de décomposition »).

Les objets itérateurs

Il est probable que vous n’ayez jamais à implémenter un itérateur de A à Z. On verra pourquoi la semaine prochaine. Cependant, pour être tout à fait complet, regardons de près à quoi ressemble un objet itérable (si vous sautez cette section, vous ne manquerez que quelques détails techniques).

Une boucle for-of commence par appeler la méthode Symbol.iterator() de la collection utilisée. Ceci renvoie un nouvel itérateur qui peut être n’importe quel objet possédant une méthode .next() ; la boucle for-of appellera cette méthode de façon répétitive, une fois pour chaque itération. Par exemple, voici l’itérateur le plus simple auquel je peux penser :

var itérateurPleinDeZéros = {
   [Symbol.iterator]: function () {
    return this;
  },
  next: function () {
    return {done: false, value: 0};
  }
};

À chaque appel de la méthode .next(), le même résultat sera renvoyé et communiquera les informations suivantes à la boucle for-of :

  1. nous n’avons pas encore terminé les itérations ;
  2. la prochaine valeur est 0.

Cela signifie que la boucle for (valeur of itérateurPleinDeZéros) {} sera une boucle infinie. Évidemment, un itérateur utilisé dans du code ne sera pas aussi trivial.

Ce concept d’itérateur, avec les propriétés .done et .value, est légèrement différente de celui utilisé dans les autres langages. En Java, les itérateurs possèdent des méthodes séparées .hasNext() et .next(). En Python, ils possèdent une seule méthode .next() qui appelle StopIteration lorsqu’il n’y a plus de valeur. Fondamentalement, ces trois conceptions renvoient les mêmes informations.

Un itérateur peut également implémenter les méthodes optionnelles .return() et .throw(exc). La boucle for-of appelle la méthode .return() si la boucle est interrompue de façon prématurée, à cause d’une exception, d’une instruction break ou return.

Un itérateur peut également implémenter la méthode return() s’il est nécessaire de procéder à un nettoyage ou de libérer des ressources utilisées. La plupart des objets itérateurs n’auront pas à implémenter cette méthode. La méthode throw(exc) est un cas encore plus spécifique : les boucles for-of ne les appellent jamais, on en parlera la semaine prochaine.

Maintenant que nous connaissons tous les détails, nous pouvons nous intéresser à une boucle for-of simple et la ré-écrire avec les appels des méthodes sous-jacentes.

Commençons avec la boucle for-of :

for (VAR of ITERABLE) {
  INSTRUCTIONS
}

Voici un équivalent, un peu brut, utilisant les méthodes sous-jacentes ainsi que quelques variables temporaires :

var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while (!result.done) {
  VAR = result.value;
  INSTRUCTIONS
  $result = $iterator.next();
}

Ce code n’illustre pas l’utilisation de la méthode .return(). On pourrait l’ajouter mais je pense que cela ajouterait plus de confusion. Les boucles for-of sont simples à utiliser, malgré cela, il se passe beaucoup de choses en arrière-plan.

Quand puis-je commencer à utiliser cette fonctionnalité ?

Les boucles for-of sont supportées par les versions actuelles de Firefox. Elles sont supportés dans Chrome sous réserve d’activer l’option « Activer la fonctionnalité expérimentale JavaScript » accessible via l’URL chrome://flags. Cela fonctionne également dans le prochain navigateur Edge (nom de code « Spartan ») de Microsoft. En revanche, cette fonctionnalité n’est pas disponible dans les différentes versions d’Internet Explorer. Si vous souhaitez utiliser cette nouvelle syntaxe et que devez prendre en compte IE et Safari, vous pouvez utiliser un compilateur tel que Babel ou Traceur de Google pour traduire votre code ES6 en code ES5, plus largement compatible avec les anciens navigateurs.

Côté serveur, pas besoin d’installer un compilateur - vous pouvez utiliser les boucles for-of dès aujourd’hui avec io.js (et avec Node en utilisant l’option --harmony)

(Mise à jour : j’ai oublié de mentionner que for-of est désactivé par défaut dans Chrome. Merci à Oleg d’avoir signalé cet oubli dans les les commentaires.) (NdT : voir ce commentaire).

{done: true}

Whaou !

Bon, c’est tout pour aujourd’hui, mais nous n’en n’avons toujours pas fini avec la boucle for-of.

Il y a encore une nouvelle sorte d’objet apparue avec ES6 et qui fonctionne très bien avec les boucles for-of. Je n’en ai pas parlé car c’est le sujet de l’article de la semaine prochaine. Je pense que cette nouvelle fonctionnalité est la plus magique d’ES6. Si vous ne l’avez jamais utilisé dans des langages comme Python et C#, vous serez vraisemblablement déstabilisé au début. Ce sera la manière la plus simple d’écrire un itérateur, un atout pour le refactoring et cela pourrait changer la façon d’écrire du code asynchrone tant au niveau du navigateur que du serveur.

Rejoignez-nous donc la semaine prochaine pour une étude approfondie des générateurs dans ES6.

Lire la suite »

Ah, les articles « putaclic » dont Mozilla Firefox est la victime idéale en ce mois de mai 2015.

Le Weblog de Frederic Bezies

Il est de bon ton sur certains webzines de faire des articles « putaclic » sur Mozilla Firefox. En ce mois de mai 2015, c’est la fête du slip

Nous avons eu droit à l’arrivée du support de la technologie EME (uniquement pour MS-Windows Vista et supérieur, en 32 bits), dixit la page de wiki de la technologie en question. Parfois en oubliant de préciser que des versions sans EME sont disponibles pour les versions MS-Windows.

Currently, Adobe Primetime is only available in Microsoft Windows Vista and above when using 32-bit versions of Firefox. Mac OS X, Linux, Windows XP and 64-bit versions of Firefox are currently not supported.

Ce qui donne traduit :

Actuellement, Adobe Primetime est disponible uniquement dans Microsoft Windows Vista avec l’utilisation des versions 32 bits de Firefox. Les versions Mac OS X, Linux, Windows XP et 64 bits de Firefox ne sont actuellement pas pris en charge.

Vu le magnifique support d’Adobe Flash sous Linux, je pense que le code de l’EME ne sera jamais activé sous les distribution GNU/Linux, ce qui n’empechera pas certaines personnes de hurler au fork.

Je ne reviendrais pas sur l’affaire dite « Pocket », n’utilisant pas de services de ce type, et n’en voyant pas l’utilité au quotidien.

Maintenant, c’est au tour des tuiles sponsorisées que certains webzines annonce l’arrivée sans préciser que la fonctionnalité est désactivable en… 2 clics !

Fonctionnalité dont il est question depuis au moins… novembre 2014. Vous parlez d’une nouveauté. Mais six mois sur internet, c’est parfois le bout du monde :)

J’ai fait une minuscule vidéo pour montrer la complexité de désactivation des dites tuiles qui nécessitent une énorme manipulation tellement difficile à faire qu’il faut sortir de Polytechnique pour y arriver.

Bon, j’ai eu tendance à utiliser un langage assez fleuri, mais cela est lié à mon niveau d’exaspération envers une partie de la communauté du logiciel libre.

Je sais très bien ce qui va se passer quand la fonctionnalité des tuiles « sponsorisées » va arriver. On va avoir droit aux mêmes vierges effarouchées qui vont vouer aux gémonies le navigateur de la Fondation Mozilla, et appeller à un nouveau fork. Ce qui ne fera qu’amoindrir encore la force de frappe du navigateur.

Car il faut être réaliste, dans le monde du libre, il n’y a que deux moteurs : Gecko (Mozilla Firefox, Seamonkey et ses « forks » que sont IceWeasel de Debian GNU/Linux et GNU IceCat) et les frères jumeaux Webkit/Blink (Chromium, Midori, Rekonq, Web, QupZilla et Opera depuis sa version 15).

Un vrai choix après tout… Ou pas !

Lire la suite »

Mamie Fox sera à Geekopolis le week-end prochain

Firefox OS

Bonjour à tous mes petits Fox,

Mon petit-fils le Fox m’avait dit que le mois de mai allait être très chargé et plus particulièrement les deux prochaines semaines. Mais comme je suis une super mamie, je vais découvrir plusieurs événements tous différents, dont mon petit-fils le Fox connait déjà l’ensemble des sujets sur le bout des doigts.

Cette semaine, je vais vous parler d’un événement appelé Geekopolis et la prochaine fois de deux événements où je serais aussi présente : l’Ubuntu Party et la Very Important Party.

Affiche de Geekopolis

Pour commencer, je vais accompagner mon petit-fils le Fox au festival des cultures de l’imaginaire appelé Geekopolis. Il s’agit de sa troisième édition. Elle se déroulera le 23 et 24 mai 2015 à la Paris Expo Porte de Versailles. Son thème principal est le coté obscur des univers Geek.

Mon petit-fils m’a expliqué que je vais y découvrir 5 quartiers qui représentent chacun un univers habillé autour du thème principal : Nautilus, Tokyo, Métropolis, Avalon et Teklab.

Les 5 quartiers de Geekopolis

Avalon : Médiéval Fantastique
L’univers Avalon va nous permettre de faire des jeux de plateaux et des jeux de rôles, voir et participer à l’escrime médiévale, participer aux différents ateliers…
Little Tokyo : Manga, Japon et Jeux vidéo
L’univers Little Tokyo va vous amener dans l’univers japonais et du manga. Ainsi, nous pourrons participer au karaoké et aux jeux musicaux, voir des concerts…
Metropolis : Science Fiction
Nous allons pouvoir nous entrainer au sabre laser, découvrir les véhicules de science-fiction, devenir aventurier galactique…
Nautilus : l’univers Steampunk (Jules Verne)
L’univers Nautilus nous amène dans un univers de fonds marins avec des défilés, des duels, le téléguide de poissons volants…
Teklab : Sciences et nouvelles technologies
L’univers Teklas nous amène dans la réalité augmentée et dans ce qui nous attend à l’avenir au niveau de la robotique du futur, des sciences et des nouvelles technologies…

Mon petit-fils m’a aussi expliqué qu’il ne s’agit pas d’une manifestation culturelle comme les autres où j’ai pu me rendre car c’est réellement « le festival dont vous êtes le héros ».

Cette phrase m’a surprise au départ car je n’ai pas l’habitude d’être une héroïne. Heureusement, mon petit-fils m’a expliqué qu’il s’agit d’un lieu avec de nombreuses activités, des ateliers, des conférences, des démonstrations et des spectacles. Je pourrai participer, jouer et être un personnage d’une série télé ou d’un jeu.

L’ensemble des informations est disponible sur la page d’actualité du site officiel Geekopolis.

Bien entendu, je vous attends sur notre stand Mozilla, avec les nombreux amis de mon petit Fox au village du Libre qui se trouve dans l’univers Teklab.

Pour couronner le tout, Geekopolis propose une bande annonce officielle que je vous conseille.

La bande annonce de Geekopolis sur YouTube (30 s)

Comme mon petit-fils le Fox était impatient de me faire découvrir les différents univers de Geekopolis, il m’a sorti de son placard quelques photos souvenirs de l’édition 2014 :

Tout d’abord, une harpe sans corde et elle fonctionne :

Geekopolis 2014 : harpe

Ensuite, un match de quitdiche – il s’agit d’un nouveau sport qui est mal connu chez nous, mais sur d’autres continents il est très répandu.

Geekopolis 2014 : match de quitdiche geekopolis_2014_match_quitdiche_2_perrot.jpg Geekopolis 2014 : match de quitdiche

Mais aussi une attaque de zombies :

Geekopolis 2014 : zombies Geekopolis 2014 : zombies Geekopolis 2014 : zombies

Et beaucoup d’autres choses que je garde en réserve.

Enfin, je vous donne rendez-vous après Geekopolis pour découvrir les autres événements qui se dérouleront le dernier week-end de mai.

En attendant, rendez-vous à Geekopolis, ça promet d’être fun !

Mamie Fox


@hellosct1

Précédent message de Mamie Fox : Mamie Fox revient des JDLL 2015

Crédit illustrations : nos 1, 2 et 3 Geekopolis. Tous droits réservés.

Photos nos 4 à 10 Christophe Perrot sous licence Creative Commons Attribution - pas d’utilisation commerciale - partage dans les mêmes conditions 2.0 générique (CC BY-NC-SA 2.0) sur Flickr

Lire la suite »

ES6 en détails : une introduction

Blog technique de MozFR

Ce billet est une traduction de cet article, écrit par Jason Orendorff qui participe au développement du moteur JavaScript de Firefox. Ce billet sera le premier d’une série de traductions, chaque billet décrivant une nouvelle fonctionnalité apportée par ECMAScript 6.

Merci à Marine, Mentalo, Lucas et Benjamin pour la traduction :)


Bienvenue dans cette série hebdomadaire que sera « ES6 en détails » ! Nous explorerons ECMAScript 6 (ES6), la nouvelle édition, imminente, du langage JavaScript. ES6 contient de nouvelles et nombreuses fonctionnalités qui feront de JavaScript (JS) un langage plus puissant et expressif. Chaque semaine, nous détaillerons une de ces fonctionnalités. Avant de commencer, arrêtons-nous quelques minutes sur ce qu’est ES6 et ce qu’on peut en attendre.

Quel est le champ d’application d’ECMAScript ?

Le langage de programmation JavaScript a été standardisé par l’organisation de standardisation ECMA sous le nom d’ECMAScript (ES). Entre autres choses, ECMAScript définit :

ECMAScript ne définit rien qui concerne HTML ou CSS ni même les API Web telles que le DOM (Document Object Model). Ces éléments sont définis dans des standards distincts. ECMAScript couvre les aspects de JavaScript qui interviennent dans un navigateur ou dans un autre environnement (par exemple node.js).

Le nouveau standard

La semaine dernière (NdT : le 16 avril 2015), la version finale de la spécification de la sixième édition du langage ECMAScript, a été proposée à l’Assemblée Générale ECMA pour relecture. Qu’est-ce que cela signifie ?

Cela signifie que cet été, nous aurons un nouveau standard pour le cœur du langage de programmation Javascript.

C’est une grande nouvelle. Un nouveau standard pour le langage JavaScript ne se fait pas en un jour. La dernière édition, ES5, est sortie en 2009. Le comité de standardisation travaille sur ES6 depuis cette date.

ES6 est une évolution majeure du langage. Votre code JS continuera à fonctionner. ES6 a été conçu pour apporter un maximum de compatibilité avec le code existant. En fait, de nombreux navigateurs supportent d’ores et déjà les fonctionnalités d’ES6, et les implémentent continuellement. Votre code JS est déjà exécuté par les navigateurs qui implémentent les fonctionnalités d’ES6. Si vous n’avez pas constaté de problèmes de compatibilité à ce jour, vous n’en verrez probablement jamais.

Compter jusqu’à 6

Les éditions précédentes du standard d’ECMAScript furent numérotées 1, 2, 3, et 5.

Qu’est-il arrivé à la quatrième édition ? Elle était planifiée — et le travail avait bien avancé — mais elle a été stoppée car considérée comme trop ambitieuse (elle proposait, par exemple, un système avancé de typage statique optionnel, doté de types génériques et d’une inférence de types).

ES4 a été un sujet controversé. Quand le comité de standardisation a finalement décidé d’arrêter ce projet, ses membres ont décidé de publier une version plus modeste d’ES5, puis ont commencé à travailler sur d’autres fonctionnalités. Ce travail a été appelé « Harmony », et c’est pourquoi la spécification ES5 contient ces deux phrases :

« ECMAScript est un langage passionnant et son évolution n’est pas figée. Une amélioration technique considérable se poursuivra dans les futures éditions de la spécification. »

Cette déclaration peut être lue comme une promesse faite pour ECMAScript 6.

Les promesses tenues

ES5, la version du langage datant de 2009, a introduit Object.create(), Object.defineProperty(), les accesseurs et les mutateurs (aussi respectivement appelés getters et setters), le mode strict et les objets JSON. J’ai déjà utilisé toutes ces fonctionnalités, et j’aime ce qu’ES5 a apporté à ce langage. Cependant, force est de constater que ces fonctionnalités eurent assez peu d’impact sur la façon d’écrire du code JS. Selon moi, l’innovation majeure a probablement été les nouvelles méthodes sur les tableaux : .map(), .filter(), et ainsi de suite.

Eh bien ES6 est différent. Il est le fruit d’années de travail harmonieux. Et il regorge de nouvelles fonctionnalités pour le langage et sa bibliothèque. C’est, à ce jour, la mise à jour la plus importante de JS. Les nouvelles fonctionnalités vont des fonctions basiques, comme les fonctions fléchées ou l’interpolation de chaînes de caractères, à de nouveaux concepts qui vont vous en mettre plein la vue comme les proxies et les générateurs. ES6 va changer la manière dont vous développez en JS.

Le but de cette série est de vous montrer comment, en examinant les nouvelles fonctionnalités qu’ES6 apporte aux développeurs JavaScript.

Nous démarrerons par la classique « fonctionnalité manquante » que j’attends impatiemment en Javascript depuis une décennie.

Rendez-vous la semaine prochaine pour découvrir les itérateurs et la boucle for-of d’ES6.

Lire la suite »

Ce qui a étonné AmarOk en rejoignant le groupe comm pour Firefox OS et Mozilla

Firefox OS

Nous nous étions promis de le faire plus souvent : donner la parole à un utilisateur de Firefox OS ou à un membre de l’écosystème de Firefox OS (développeur, développeur d’applications, communiquant, traducteur, membre de la communauté participant à la promotion, etc. bien sûr au féminin comme au masculin). Parmi ces Starfox, nous accueillons AmarOk qui a participé à sa première réunion du groupe de communication pour Firefox OS. Ce n’était cependant pas sa première contribution dans ce domaine. Nous lui avons demandé ce qui l’avait étonné dans le travail d’un groupe de comm et lors de son entrée dans l’univers Mozilla.

AmarOkPour me présenter vite fait, je contribue à Mozilla depuis maintenant un an et demi. Et cette expérience m’a permis de découvrir plein de choses. Au début, je cherchais à faire du code, mais le manque de temps (projets personnels, études, etc.) m’a poussé à voir d’autres choses pour me prendre moins de temps.

J’ai notamment pu faire un peu de traduction de MDN, réaliser quelques petits « patchs », et en fin d’année 2014 participer au lancement de Firefox OS en France (Leclerc de Nantes et de Vannes avec quelques autres Mozilliens). J’ai toujours suivi le projet, mais ma contribution a baissé durant ces derniers mois. Mes contributions les plus récentes pour MozFr sont le flyer pour la communauté, l’animation du stand Webmaker à la Maker Faire de Saint-Malo avec la Maison du Libre de Brest et un article paru sur Zeste de Savoir sur le Mozilla Science Lab justement intitulé : Le Mozilla Science Lab.

À mon arrivée dans la communauté, je cherchais à m’investir plus dans des projets autour de l’open source. Il faut avouer que Mozilla possède énormément de sites pour les nouveaux contributeurs (des conférences filmées comme l’apéro des petits nouveaux, What can I do for Mozilla, Bugs Ahoy!) ainsi que de nombreux outils (Transifex, Bugzilla, MDN, etc.). Mais la communauté apporte une aide très précieuse et on arrive très vite à prendre les outils en main. Il existe de très nombreux projets Mozilla. Il est donc facile de trouver un projet dans lequel on peut aider. Le plus dur est de choisir parmi les projets qui nous plaisent.

Bref, je suis la liste du groupe de communication depuis sa création et j’ai enfin eu l’occasion d’assister à une de leur réunion, surtout en tant que curieux. Et comme d’habitude, je regrette que ce type de réunion se fasse via Vidyo (et je sais que je ne suis pas le seul).

Mais c’est à priori mon seul défaut ressenti. La réunion a été fluide, rapidement traitée vu le nombre d’informations qu’il y avait à dire. Une réunion hebdomadaire est un rythme dur à tenir pour des bénévoles n’ayant pas forcément le temps. Je suis donc heureux de recevoir un message m’y invitant chaque semaine. Je suis aussi heureux de voir le projet Firefox OS se développer et la synchronisation qu’il peut y avoir entre les différentes communautés francophones (qui fut un des thèmes abordés lors de la réunion pour l’intégration de Firefox OS en Afrique).


Pour finir, nous lui avons demandé s’il avait une actualité à nous faire partager ?

Une petite actualité : le POC21. Je trouve l’intention admirable, et j’espère que ça donnera vie à de nouveaux projets en septembre et que ça fera connaître ce genre d’initiative à un plus large public.


AmarOk


Le groupe est conscient des difficultés pratiques et éthiques posées par l’utilisation d’outils de travail fermés, privés et centralisés. Nous sommes à l’écoute et en recherche de solutions meilleures mais ne voulons pas épuiser toute notre énergie dans cette quête et dans l’installation et la maintenance de nouveaux outils. Voyez cette réponse à propos de l’utilisation de Google Docs.

Débuter

MozFr

Participer

S’inscrire sur la liste communautaire générale

Groupe comm pour Firefox OS

Guide du débutant

Petites choses à faire idéales pour débuter avec l’aide bienveillante d’un mentor


Notre précédent Starfox : Philippe

Le précédent rapport d’étonnement : Ce qui a étonné Pyves en rejoignant le groupe comm pour Firefox OS et Mozilla

Crédit illustrations : Avatar par AmarOk. WTFPL.

Mise en forme et laïus : Mozinet

Lire la suite »

Firefox OS réussira en Afrique avec nous

Mozilla Francophone

Orange Klif, un Alcatel Onetouch avec Firefox OSNous vous l’annoncions au lendemain du Mobile World Congress 2015 : Orange, Alcatel Onetouch et Mozilla vont lancer des smartphones Firefox OS en Afrique et au Moyen Orient (et même un peu plus loin). C’est aujourd’hui une réalité. Mozilla a annoncé sur son blog officiel qu’Orange avait mis en vente ses premiers smartphones au Sénégal et à Madagascar cette semaine. Andreas Gal, CTO et VP Mobile chez Mozilla, y déclare : « Je suis également ravi de voir comment l’arrivée imminente de Firefox OS a suscité un enthousiasme dans les communautés locales de Mozilla. »

Firefox OS est la première plateforme mobile véritablement ouverte entièrement construite sur des technologies web, apportant plus de choix et de contrôle à l’industrie du mobile. Avec ces lancements, Mozilla et Orange tiennent leur promesse de mettre le Web mobile à la portée de millions de nouvelles personnes à qui les offres mobiles ne s’adressaient pas jusqu’ici. L’offre d’Orange inclut le nouveau téléphone Firefox OS, l’Orange Klif. Ce smartphone Firefox OS 3G est une exclusivité d’Orange.

Au début du printemps, Firefox OS avait été lancé en Afrique du Sud. Mais cette fois-ci, beaucoup des nouveaux pays annoncés sont francophones et notre communauté peut faire la différence en aidant les communautés locales à réussir leur lancement de Firefox OS.

Nous avions déjà mi-avril relayé des appels à contribution en vue des lancements à venir. Depuis, d’autres tâches ont été proposées et vous pouvez faire la différence.

Fox tendant la main à un éléphant sur fond de dunes

Mobilisation générale

Sur la liste communautaire, Flore a sonné la mobilisation générale. Toute la communauté peut aider et nous pouvons « faire profiter toute la communauté francophone de l’expérience de la sortie de Firefox OS en France et du fait qu’on est bien nombreux en Europe et qu’on a un peu de temps pour aider (enfin ceux qui peuvent) ». Il y a bien des façons de « mettre la main à la pâte » et chacun selon ses compétences et ses envies peut trouver à se rendre utile.

Traductions

Vous pouvez aider à traduire et à relire les traductions en réponse aux appels à l’aide lancés sur la liste générale (comme celui-ci). Ça pourra donner des articles sur le nouveau blog Firefox OS Africa comme ceux-ci : « Firefox OS Betounsi », le projet original d’un Mozillien en langue tunisienne et Le lancement de Firefox OS en Afrique du Sud. Les articles et contenus produits pour la campagne de lancements africaine peuvent également être traduits en langue local.

Les articles de l’assistance officielle de Mozilla sont traduits par la communauté. Inscrivez-vous sur SUMO, consultez la documentation et commencez à traduire les articles en anglais ou leurs mises à jour pour Firefox OS en particulier.

Assistance directe aux utilisateurs

Nos ressources actuelles pour les utilisateurs : page Assistance de Firefox OS et présentation en détails : La communauté d’entraide pour Firefox OS : toutes les ressources utiles.

Vous pouvez aussi directement répondre aux nouveaux utilisateurs et les aider à résoudre leurs problèmes.

Un premier moyen est de rejoindre ce que Mozilla appelle son Army of Awesome. Elle est chargée de répondre sur Twitter aux questions dans chaque langue à propos de Firefox (OS aussi) et de Mozilla en général. Comme l’indique Mariot sur la liste générale, il y a besoin de bataillons de twittos francophones (l’expression est de moi) pour répondre aux nouveaux utilisateurs africains qui tweetent leur problème. Dattaz précise que c’est super simple à faire, et c’est super bien pour commencer à s’impliquer. En plus, ça ne prend généralement pas beaucoup de temps ;) Donc, à tous ceux qui voudraient s’impliquer mais qui ne savent pas par quoi/où commencer, allez-y !

L’autre moyen où vous pouvez doser votre contribution et n’y investir que le temps que vous avez c’est de répondre aux questions sur les forums communautaires francophones de Geckozone. Deux forums d’entraide sont spécialisés dans Firefox OS :

Vous pouvez aussi faire connaître ces moyens d’obtenir une assistance personnalisée dans leur langue aux nouveaux utilisateurs directement ou en reprenant la nouvelle sur vos canaux de communication.

Communication

Vous pouvez aussi faire passer la bonne nouvelle et relayer les lancements de Firefox OS sur vos blogs et sur vos propres réseaux sociaux créant ainsi une grande caisse de résonance.

Les réseaux sociaux en français sont aussi menés par la communauté. Vous pouvez donc participer à leur alimentation directement et relayer les messages sur vos propres réseaux.

Faisons un petit tour de réseaux en français ou qui postent en français :

Connaissez-vous les comptes tweetant sur Mozilla ?

Voici les comptes à suivre pour être au courant de tout ce qui se passe chez Mozilla et en français :

(*) compte officiel ou tenu par des employés de Mozilla

Nous avons aussi une sélection de comptes Mozilla anglophones dans notre article sur le client Twitter pour Firefox OS, Macaw.

Autres réseaux sociaux

Mozilla ne fait pas d’assistance organisée sur Facebook. Firefox OS en français y est présent, ainsi que sur d’autres réseaux plus spécialisés où votre aide sera vraiment bienvenue et décisive.

Il n’y a pas de compte Facebook de la communauté francophone, mais des communautés locales francophones ont le leur.

Le groupe communication francophone pour Firefox OS

De la même façon que la communauté MozFr n’est pas limitée à la France, le groupe de communication communautaire francophone monté avec l’aide de Mozilla vise toute la francophonie. C’est la communauté qui est aux manettes, mais nous bénéficions de l’aide d’une agence marketing, ReUP, la même que Mozilla a engagé pour la campagne de lancements africaine. Elle est là pour apprendre à la communauté à communiquer sur le Web et à travers les réseaux sociaux. Un des objectifs est de transmettre notre expérience à d’autres membres de la communauté et à d’autres communautés.

Nous avons essayé de réduire les barrières à la contribution et la courbe d’apprentissage. Un débutant à rédigé un guide du débutant illustré. Nous avons aussi identifié des petites tâches idéales pour un débutant (avec possibilité d’être guidé par un mentor), mais rien ne vous limite à ces contributions. Vous pouvez venir rédiger des articles pour la francophonie sur votre quotidien ou les sujets Firefox OS qui vous intéressent. Nous avons une liste MozFr publique pour en discuter. Pas d’approbation préalable.

Marketplace

Identifier les contenus pertinents localement

Le conseil communautaire de curation du Marketplace, la boutique d’applications pour Firefox OS (et plus) gérée par Mozilla, a publié les opportunités de contribution pour mai 2015. Une tâche prenant entre 15 et 30 minutes seulement y est proposée pour faire la différence. Vous pouvez fournir de l’expertise sur l’endroit que vous connaissez en aidant à identifier les contenus pertinents localement pour le Marketplace dans les pays où le lancement de Firefox OS est imminent (ou déjà fait). Voir Mozilla One and Done. Les pays cités :

  • Mali
  • Madagascar
  • Maurice
  • Niger
  • Botswana

Des reviewers francophones pour le Marketplace

Flore sur la liste communautaire a indiqué que le Marketplace s’attend à une augmentation des soumissions des applis en français. Actuellement, il n’y a pas assez de reviewers, ce qui rallonge l’attente pour l’approbation des nouvelles applications ou de leurs nouvelles versions. Lors de cet appel, il n’y avait qu’un examinateur francophone sur le Marketplace. Cette tâche est plus exigeante en compétences techniques et en matériel que pour les simples traductions pour lesquelles votre aide est habituellement demandée sur la liste.


Les possibilités sont déjà nombreuses et chacun peut aider selon ses compétences, ses centres d’intérêt et le temps dont il dispose. Tout ne dépend pas de nous mais nous pouvons faire la différence pour réussir cette campagne de lancements dans la francophonie.


@Mozinet

Crédits illustrations : Photo du téléphone Alcatel Onetouch

Dessin : rendleflow. Tous droits réservés.

Lire la suite »

Des outils de travail centralisés, fermés… du groupe de communication communautaire pour Firefox OS

BlogZiNet

My PadsAu groupe comm pour Firefox OS, nous avons régulièrement des critiques de personnes extérieures au groupe ou des questions de nouveaux membres sur l’utilisation d’outils non libres, fermés ou centralisés sur les serveurs des aspirateurs à données personnelles souvent américains, en particulier à propos des Google Docs et de Vidyo. Pour faire avancer le débat et inscrire dans le marbre avec un lien à indiquer aux futurs critiques, j’ai ajouté un commentaire sous l’article du blog communautaire qui l’évoquait. Dans la même optique, je le reposte ici :


Nous fondons de grands espoirs sur le développement par Framasoft du plugin MyPads* pour Etherpad issu du financement participatif. Actuellement, les pads n’offrent pas pour le travail en groupe sur des articles les fonctionnalités qui nous ont fait choisir les Google Docs. Nous utilisons cependant Etherpad quand c’est pratique pour d’autres types de contenus.

Nous sommes conscients des réticences de certains à entrer dans le système Google. Cependant, nos documents de travail chez Google – juste nos documents de travail – sont publics et archivés (notre démarche reste documentée). Nous faisons en sorte d’indiquer les liens dans nos outils (mailing list publique et ouverte à tous sans approbation préalable, Trello public) permettant à chacun suivant le lien de les modifier même anonymement. Ce serait bien différent si nous étions dans un contexte de secret professionnel, médical, des affaires, de fabrication, bancaire, d’État, de polichinelle…

Notre travail étant ouvert, se déroulant en très grande majorité sur des canaux publics et son résultat étant d’être publié, nous avons moins de scrupules à le livrer un peu à l’avance à Google.

Notez aussi qu’une partie des participants échangeant les contenus ou leurs avis avec Gmail, Google est au courant de nombre de discussions qu’on aimerait mieux voir restées circonscrites dans le cercle des confidents. Nous (et les autres) n’avons donc déjà pas toutes les cartes entre les mains.

Nous sommes un petit groupe, loin d’être tous techniciens du logiciel et des serveurs. Nous n’avons pas d’énergie à dépenser à essayer d’installer des solutions libres et décentralisées. On nous critique souvent là-dessus sans nous proposer de meilleure solution. Même pour un groupe qui évolue dans le milieu du logiciel et de la high tech, la chemin vers la décentralisation et le contrôle des données personnelles (que nous défendons) est rude…

Un jour, je vous parlerai de Vidyo et de Trello…


Note (*) : L’objectif poursuivi est l’obtention d’une version stable dans la première quinzaine du mois de mai. in MyPads : développement, point numéro 3 sur le Framablog (16 avril 2015).


Illustration : Framasoft, sous licence Creative Commons Attribution - partage dans les mêmes conditions 4.0 international (CC BY-SA 4.0).

© 2010-2014 Mozinet - Ce billet a été publié sur BlogZiNet.

Lire la suite »

1er Brainstorming Café Firefox OS du groupe comm

BlogZiNet

1er Brainstorming Cafe Firefox OS présenté par son inventeurQuentin, Rep, a organisé mi-mars l’événement qu’il a appelé Brainstorming Café Firefox OS qui est censé être le premier d’une série de rencontres chez Mozilla Paris.

En principe, c’était l’occasion de discuter de sa communication avec le groupe comm pour Firefox OS, mais la grande majorité des questions ont porté sur Firefox OS. Concernant la communication, Mamie Fox a suscité de l’intérêt et la question du Fox ou du panda roux posée a été une vraie question de communication et pas le troll habituel.

Une partie du public du 1er Brainstorming Cafe Firefox OS chez Mozilla Paris

Panda roux/renard/Fox

J’ai retracé l’histoire du nom « Firefox » chez Mozilla qui a été identifié dès son choix au petit panda. Les choses se sont gâtées lors de la création du logo. Pour le designer (nord-américain), le renard lui parlait plus que le panda roux et l’image de la traduction littérale de renard de feu avait un réel impact visuel.

Lors du lancement de Firefox OS (qui a adopté le logo de Firefox), les créateurs des visuels ont repris l’idée du renard de feu ou plutôt du renard en feu. Dans nos pays occidentaux, le renard est associé à la ruse, ce qui est exploitable aisément au niveau de la communication et du marketing.

Le groupe a suivi l’image du Fox associé à Firefox OS et qui peut aussi être un diminutif de Firefox. C’est un mot court avec une bonne force auditive. Ainsi, Mamie Fox sonne bien.

Mamie Fox

Le format des articles Mamie Fox peut se résumer en une grand-mère cool et un peu geek grâce à son petit-fils qui est le technicien qui lui explique les concepts techniques obscurs pour les non-initiés. Elle est curieuse, bavarde et connectée. Elle n’hésite pas à chercher seule sur le Net ni à voyager pour passer du temps avec son petit-fils.

Son petits-fils, c’est le Fox qui est au courant et initié à Firefox OS, Mozilla, à la technique et au logiciel libre. Il est membre de la communauté, les petits fox sont ses amis mozilliens et ils participent ensemble aux événements communautaires. Elle est la narratrice de ses aventures et s’adresse directement au lecteur.

Mamie Fox est un concept de communication décalée que ne peuvent pas se permettre les concurrents « corporate » de Firefox OS dans leur communication. C’est une invention de la communauté qui a pris forme dès les premières réunions du groupe à l’automne. Au début, on a recherché dans les proches des participants et de la communauté une vraie mamie pour l’incarner. Le format a évolué en restant fidèle aux principes de base.

Mamie FoxDans le compte rendu de la réunion du 20 octobre 2014, on peut lire à propos de Mamie Fox :

Création d’un etherpad Mamie Fox : https://etherpad.mozilla.org/mamiefox Kant1 prend contact avec un designer pour réaliser l’illustration sur la tuile « Mamie Fox ».

Comment imagine-t-on Mamie Fox ?

Retraitée, elle utilise son ordinateur pour aller sur les blogs, les recettes de cuisine, la broderie, le DIY, parler avec ses petits-enfants et commander ses achats sur Internet. Flore propose de mettre une silhouette de renard au lieu d’une pomme sur son ordi portable.

Rôle à contre-emploi : Mamie Fox est futée/rusée, avec un rôle décrypteur, qui fait le lien entre les dev et le grand public.

Mamie Fox est un canal de communication qui s’adresse à nos publics cibles mais pas aux développeurs et Mozilliens, mais qui présente leur travail et leurs contributions, et explicite les valeurs et principes pour lesquels ils se battent.

Notre égérie, Mamie Fox, est donc un vecteur communautaire de communication assumé et réfléchi.


Pour la suite : Quentin, si tu me lis !?


Photos prises par Mozinet et placées sur Flickr sous licence Creative Commons Attribution - partage dans les mêmes conditions 2.0 générique (CC BY-SA 2.0).

Sources et références

© 2010-2014 Mozinet - Ce billet a été publié sur BlogZiNet.

Lire la suite »