Hé ! J'ai ce nouveau projet web à faire, mais pour être totalement honnête, je n'ai pas fait de développement web client depuis quelques années et j'ai entendu que ça avait pas mal bougé ses dernières temps. Tu es as jour sur toutes ces choses là pas vrai ?
- Le terme actuel est développement Front-end, mais oui, je suis ton homme. Visualisations temps réel, musique en ligne, drônes qui font du café, demande ! Je reviens justement de JSConf et VueConf, du coup, je suis à la page sur les dernières technologies pour créer des applications webs.
Cool. J'ai besoin de créer une page pour afficher les dernières activités de mes utilisateurs, donc, j'ai juste besoin de récupérer des informations depuis une source REST et de les afficher dans un tableau filtrable que je mettrais à jour à chaque changement côté serveur. Je pensais utiliser quelque chose comme jQuery pour récupérer les données à afficher ?
- Oh là, non ! Plus personne utilise jQuery maintenant. On se contente de Vanilla.js si on souhaite faire simplement du JavaScript.
Ha ? C'est quoi ça Vanilla.js ?
- C'est juste du JavaScript. C'est un petit nom sympa donné aux nouvelles fonctionnalités de l'API des navigateurs pour manipuler le DOM. Et comme c'est implémenté dans les navigateurs, il n'y a plus besoin d'inclure de bibliothèque maintenant.
Du coup on a abandonné les frameworks JavaScript ? Tout est plus simple !
- Non. Pas du tout. Il y en a d'autres des frameworks maintenant.
C'est ce qui me semblait. J'avais entendu parler de React ou Angular au lieu de jQuery ?
- Tu devrais utiliser React oui, c'était la superstar de 2016 en concurrence avec Angular ou encore Vue, mon chouchou. React est une bibliothèque MVVM.
React est une bibliothèque MVVM ?
- C'est une bibliothèque super cool faites par des gars de chez Facebook. Ça t'apporte un réel contrôle et des grandes performances sur tes applications en te permettant de gérer tes changements de vue vraiment facilement.
Ça a l'air pas mal. Je peux utiliser React pour afficher mes données alors ?
- Oui, mais d'abord, tu vas devoir ajouter React et ReactDOM comme bibliothèque dans ta page web.
Attend, pourquoi deux bibliothèques ?
- Et bien, il y en a une qui est la bibliothèque en elle-même, et une seconde pour manipuler le DOM, que tu vas maintenant pouvoir décrire en JSX.
JSX ? C'est quoi JSX ?
- JSX c'est juste une extension de la syntaxe JavaScript qui est aussi cool que du XML. C'est une autre façon de décrire le DOM. Voit le comme du HTML++.
Qu'est-ce qui ne va pas avec le HTML ?
- En 2020, personne ne code plus en HTML directement voyons.
Bien. Pourquoi pas. Si j'ajoute ces deux bibliothèques, ensuite je vais pouvoir utiliser React ?
- Non, pas encore. Tu vas avoir besoin de Babel, et ensuite tu pourras utiliser React.
Une autre bibliothèque ? Qu'est-ce que c'est Babel ?
- Oh, Babel est un transpileur, tout comme Traceur. Il te permet de choisir une version de JavaScript à produire en sortie sur tes sites alors que tu codes avec une autre version de JavaScript. Tu n'as pas besoin d'inclure Babel obligatoirement pour utiliser React, mais sans lui, tu vas rester bloquer avec une utilisation de JavaScript en ES5, et, soyons réaliste, en 2020, tu dois au moins coder en ES2016+ comme le reste des mecs cools.
ES5 ? ES2016+ ? Je suis un peu perdu. Qu'est-ce que c'est ES5 et ES2016+ ?
- ES5 signifie ECMAScript 5. C'est l'édition que la plupart des personnes utilisent car elle est implémentée dans la plupart des navigateurs de nos jours.
ECMAScript ?
- Oui, tu sais, le langage de script JavaScript s'est basé dessus en 1999 après sa création initiale en 1995. À l'époque le JavaScript était le LiveScript et tournait uniquement dans le navigateur Netscape. C'était un peu brouillon, mais maintenant heureusement c'est plus clair grâce à ses 7 éditions d'implémentation.
7 éditions. Vraiment ? Et ES5 et ES2016+ en sont donc ?
- Tu parles de ES6 ? En fait, chaque édition est une version supérieur de la précédente. Donc si tu utilises ES2016+, tu utilises toutes les fonctionnalités des versions précédentes.
Ok. Et pourquoi plus la ES2016+ que la ES6 exactement ?
- Et bien, tu peux utiliser ES6, mais tu ne pourras pas utiliser des fonctionnalités au top comme async ou await. Pour ça, tu as besoin de ES2016+. Sinon, tu vas te limité avec des générateurs ES6 histoire de bloquer les appels asynchrones pour un contrôle de flux plus facile.
Ok. J'ai pas tout compris. C'est un peu déroutant, mais bon. Écoute, je veux juste charger un groupe de données depuis un serveur. Pour ça j'ai juste besoin d'inclure jQuery depuis un CDN et de récupérer mes données avec des appels AJAX, pourquoi ne pas simplement faire ça ?
- On est en 2020 mec, plus personne utilise jQuery maintenant, ça fini toujours en un gros tas de code spaghetti immonde. Tout le monde sait ça.
Compris. Donc mon alternative est de charger ces trois bibliothèques pour récupérer mes données et afficher cela dans un tableau HTML.
- Oui, mais pour inclure ces trois bibliothèques, tu peux les empaqueter avec un gestionnaire de modules pour ne charger qu'un seul fichier.
Je vois. Et c'est quoi exactement un gestionnaire de modules ?
- La définition dépend de ton environnement, mais dans le monde du web, cela signifie habituellement de supporter les modules AMD et CommonJS.
Okkayy... et les modules AMD et modules CommonJS, c'est quoi ?
- Pour faire court : il y a plusieurs manières pour définir comment les bibliothèques JavaScript et les classes devraient intéragir. Tu sais, exports et require ? Tu peux écrire différents fichiers JavaScript définissant des API AMD ou CommonJS et tu peux les utiliser avec quelque chose comme Browserify pour les empaqueter ensemble.
Ok. Ça semble logique... je crois. C'est quoi Browserify ?
- C'est un outil cool pour te permettre d'empaqueter ensemble des descriptions de dépendance de fichier CommonJS pour les faire tourner dans un navigateur. Ça a été créé car beaucoup de gens publiaient des dépendances dans le registre npm.