larlet-fr-david/david/blog/2015/formation-js-avance/index.md

title: Formation JS Avancé
slug: formation-js-avance
date: 2015-06-18
chapo: Plus je pratique JavaScript et plus je m’aperçois qu’il s’agit d’un langage flexible.

> Do you need to be an ES6/ES2015 expert? Probably not today, but you should know at least as much about it as your peers, and possibly more. It’s also worth at least entertaining the possibility of writing your next greenfield project using ES6; the future will be here before you know it.
>
> New language features aside, you should be able to speak fluently about the asynchronicity of JavaScript, and using callbacks and promises to manage it. You should have well-formed opinions about strategies for loading applications in the browser and communicating between pieces of an application. You should maybe have a favorite application development framework, but not at the expense of having a general understanding of how other frameworks operate, and the tradeoffs you accept when you choose one.
> 
> <cite>*[A Baseline for Front-End [JS] Developers: 2015](http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015/)* ([cache](/david/cache/c31b932c706d474b02d638c05d98bfca/))</cite>

J’ai eu l’occasion d’accompagner Vincent pour une formation sur JavaScript et ses concepts avancés. Il a été question de **technique** bien sûr avec ES6/Next/2015, les *IIFE*, les promesses, le scope, les objets, les *Web Workers*, les *Web Components*, *localStorage*, etc. Mais aussi de **culture**  avec les différents outils, *frameworks*, approches, *workflows*, etc.

Le plus important sur ces 2 jours a certainement été d’avoir autant de façons de faire que de participants (une dizaine) et de pouvoir confronter les stratégies et les expériences. On a essayé au maximum de mettre les mains dans le code et d’itérer en comparant ensuite les concepts mis en pratique. C’était vraiment très enrichissant, autant pour les stagiaires que pour [nous](http://scopyleft.fr/) :-).

**Plus je pratique JavaScript et plus je m’aperçois qu’il s’agit d’un langage flexible** que l’on peut adapter à sa façon de développer et de partager du code. C’est intéressant car cela invite à la discussion dans l’équipe : utilise-t-on des points-virgules ? comment définit-on un objet et une *IIFE* ? apprécie-t-on l’approche objet ou l’approche fonctionnelle ? veut-on utiliser des *polyfills* et produire des modules isomorphiques ? L’établissement de [conventions](/david/blog/2015/collaboration-technique/) [collectives](https://github.com/elierotenberg/coding-styles/blob/master/es6.md) et [évolutives](https://github.com/feross/standard/) [devient](https://github.com/bendc/frontend-guidelines) alors [obligatoire](https://github.com/rwaldron/idiomatic.js) (ou comment transformer une limitation en avantage).

Quelques liens pour la route :

* [The mind-boggling universe of JavaScript Module strategies](https://www.airpair.com/javascript/posts/the-mind-boggling-universe-of-javascript-modules) ([cache](/david/cache/85169542c2bb95c8424a3081ec0b90b1/))
* [Common Misconceptions About Inheritance in JavaScript](https://medium.com/javascript-scene/common-misconceptions-about-inheritance-in-javascript-d5d9bab29b0a) ([cache](/david/cache/96f3df2f689eb35d5e5e551ab63088f8/))
* [ES6 generators in depth](http://www.2ality.com/2015/03/es6-generators.html) ([cache](/david/cache/e826765f4c8c47da6b78aa2ad1343cc6/))
* [Eliminate JavaScript Code Smells](http://elijahmanor.com/talks/js-smells/)
* [Interviewing for a JavaScript Job](http://raganwald.com/2015/02/21/interviewing-for-a-front-end-job.html) ([cache](/david/cache/8b2231129eb55375d546f931b81c06f1/))
* [i18n with tagged template strings in ECMAScript 6](http://jaysoo.ca/2014/03/20/i18n-with-es6-template-strings/) ([cache](/david/cache/68f2d862066c644a50f929e8a787406b/))
* [Functional Mixins in ECMAScript 2015](http://raganwald.com/2015/06/17/functional-mixins.html) ([cache](/david/cache/0970affe827a4197de22a7ccbe4fb897/))

…et pour finir un bout de code qui me sert davantage de jalon dans ma pratique personnelle de JavaScript (dont j’espère rigoler dans 3 mois) :

    :::html
    <!doctype html>
    <html lang=en>
      <meta charset=utf-8>
      <title>Current JS</title>
      <a href=http://example.org>Link to example</a>
      <a href=http://httpbin.org>Link to HTTPbin</a>
      <script>
        'use strict'
        window.$ = document.querySelectorAll.bind(document)

        void function (elements) {
          ;[].forEach.call(elements, function(link) {
            link.addEventListener('click', (event) => {
              event.preventDefault()
              console.log(`${link.text} clicked!`)
            })
          })
        }($('a'))
      </script>
    </html>