Paris-Web 2015 : Retour sur le « Dev Front à Mach 1 »

LOGO-PARISWEB

J’ai eu la chance de participer cette année à la 10ème édition de Paris-Web. Le résumé de l’ensemble des conférences ainsi que les liens vers les slides sont disponibles dans le post de Sophie Drouvroy : Paris Web 2015 : la 10è édition.

Je vous propose dans cet article de revenir sur une des conférences que j’ai particulièrement appréciée et qui permet d’accélérer notre développement côté front : « Le dev front à Mach 1 au quotidien » de Christophe Porteneuve.

Aujourd’hui le cycle habituel SSRR (Save, Switch, Reload, Replay) est très consommateur de temps et donc d’argent. Beaucoup d’outils intégrés ou non dans les navigateurs actuels sont disponibles afin d’améliorer le confort et la rapidité de développement front. Ce sont ces différents éléments qui ont donc été abordés en plusieurs points par Christophe Porteneuve.

Point n°1 : Edition live dans le navigateur

Tout d’abord, il est possible aujourd’hui via le hot-swapping d’éditer en live dans les devtools des navigateurs le code HTML, CSS ou encore Javascript (Chrome uniquement pour le JS).

Afin d’optimiser ces modifications, ne pas avoir à les reporter dans votre IDE ou encore les perdre suite à un refresh, vous pouvez utiliser les “workspaces” existant dans les devtools de Chrome. Ils permettent de synchroniser les URLs de Chrome avec un emplacement physique sur votre disque et donc d’enregistrer directement les modifications effectuées dans Chrome.

Ce système de “workspace” est facilement configurable dans l’onglet Workspace des paramètres des devtools de Chrome. Vous pouvez aussi ensuite dans l’onglet  Sources en effectuant un clic droit sur le fichier, l’ajouter à un workspace existant.

Vous pouvez grâce à cela utiliser les devtools comme un IDE à part entière avec un aperçu instantané de vos modifications !

Ensuite, pour vos développements spécifiques, des plugins existent sur Chrome et Firefox. Il existe par exemple des devtools dédiés pour React ou Ember, ng-inspector pour Angular. Vous pouvez trouver plein d’autres plugins dans la catégorie Outils de développement sur le Chrome Web Store (https://chrome.google.com/webstore/category/ext/11-web-development)  ou Web Development sur le site Mozilla listant les extensions pour Firefox (https://addons.mozilla.org/en-US/firefox/extensions/web-development/).

Point n°2 : Feedback instantané sur des modifs extérieures

Ce second point consiste en la présentation des outils permettant d’avoir un retour instantané dans notre navigateur des modifications que l’on effectue au sein de notre IDE.

Les outils conseillés côté CSS et JS sont fb-flo uniquement sur Chrome et BrowserSync qui est, quant à lui, multi-navigateurs.

BrowserSync contient aussi un Ghost Mode qui répercute les modifications effectuées sur un navigateur vers tous les clients connectés au même serveur, que ce soit un autre navigateur, un mobile ou encore une télévision. BrowserSync est donc indispensable pour tester en parallèle une fonctionnalité si vous avez des contraintes pour le fonctionnement de votre application sur plusieurs plateformes ou navigateurs.

Point n°3 : Les sources maps

Les sources maps permettent de découpler le code source en dev (langage, découpage / enrobage, lisibilité…), de celui exécuté (bundle CSS/JS unique voire minifié).

Les sources maps existent depuis bientôt 5 ans et sont très bien prises en charge par l’ensemble des navigateurs actuels.

Point n°4 : Automatiser

Aujourd’hui, l’importance d’industrialiser certaines tâches d’un projet n’est plus à prouver, que ce soit côté back ou côté front.

Dans ce quatrième point, Christophe Porteneuve nous présente les outils permettant d’automatiser des tâches côté front.

L’outil qui a popularisé cette automatisation est Grunt mais ce n’est pas l’outil le plus adapté aujourd’hui. Les principaux outils à utiliser sont donc Gulp ou Webpack.

Point n°5 : Les modules

L’utilité des modules côté back n’est plus à démontrer non plus : modularité, découpage, dépendances explicites, chargement à la demande, etc. Christophe Porteneuve nous a donc présenté les outils permettant la modularisation côté front.

CommonJS est aujourd’hui l’outil qui domine (Browserify, Webpack, …), mais des modules natifs sont arrivés dans ES6. SystemJS est un outil permettant une transition facile car il est capable de lire tous les formats de modules.

Ensuite, des “packages manager” permettent de récupérer des modules existants comme Webpack ou JSPM.

Point n°6 : Les tests automatisés et parallèles

Dans le cadre d’une industrialisation côté front, les tests automatisés et parallèles représentent une partie importante. Et en JavaScript, l’écosystème de tests est sans doute le plus complet et le plus avancé.

Des solutions haut de gamme existent pour les assertions (Chai et ses plugins), le mocking (notamment SinonJS), les harnais (Mocha, Tape…), les runners (Karma, BrowserStack,Sauce), la mesure de couverture (Istanbul, Isparta).

Point n°7 : ES6+

Le futur du développement front se tourne maintenant vers ES6 (2015) et ES7 à venir qui permet d’énormes gains de productivité, de performance et de fiabilité.

En conclusion, Christophe Porteneuve nous présente de nombreux outils qui permettent de développer plus rapidement et plus proprement côté front.
N'hésitez pas à les tester et à les mettre en place car je suis certain que vous prendrez goût à ne pas attendre votre navigateur suite à une modification !

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.