L’outillage du développeur front moderne

Les développeurs Web – par cela j’entends les développeurs front – ont toujours désiré avoir des outils de développement similaires à ceux de leurs camarades développeurs Java, .Net, C++ …etc. Ces derniers ont en effet toujours bénéficié d’IDE puissants et d’outils d’analyses et de débogage efficaces. Là où les développeurs Web devaient se contenter d’un simple éditeur de texte basique offrant à peine de la coloration syntaxique, et du alert() pour le débogage.

Laissez-moi donc vous dire que ce temps est révolu. Et ce, grâce à l’avènement d’HTML5 (sans espace) et par conséquence, à l’évolution du langage JavaScript qui est passé d’un banal langage de script permettant de valider des formulaires à un langage puissant au cœur même de cette (r)évolution!

En effet, depuis quelques années maintenant et pour s’adapter à l’évolution de JavaScript, on voit apparaître de nouveaux outils dédiés aux développement Web ; que ce soit des IDE historiques embarquant des modules HTML, CSS et JS ou des éditeurs simples mais puissants, voire même des outils de débogage et d’analyse de code, sans oublier les outils de build et de test.

Dans cet article, nous allons présenter brièvement une sélection d’outils utiles (voire nécessaires) pour tout développeur Web moderne. Certains de ces outils sont encore jeunes mais ils ont déjà su montrer leur efficacité et simplicité.

Éditeur de texte : Sublime Text 2

Quand il est question d’éditeur de code, chacun a ses préférences et ses références ainsi que ses habitudes auxquels il tient tant, quitte à perdre en productivité! Eh bien oui, est-il judicieux de sortir un marteau-piqueur pour enfoncer un clou ? Vous voyez ce que je veux dire.

Note: Si vous êtes ce genre de développeur, sachez que la plupart des éditeurs d’IDE ont un support (plus ou moins satisfaisant) pour les technologies front : HTML5, CSS3 et JavaScript. Certains ont même ajouté du support pour NodeJS.

Cependant,  un des éditeurs de texte qui a su se distinguer durant ces derniers mois est Sublime Text 2 (la version 3 est en bêta test en ce moment). C’est un éditeur de texte simple d’utilisation une fois quand on a mémorisé les quelques raccourcis importants. Il a aussi une interface  sobre et minimaliste (d’où l’importance de connaitre les raccourcis).  Et le plus important (à mes yeux) c’est qu’il est extrêmement rapide – j’ai personnellement réussi à charger environ 1600 fichiers JS lors d’un rechercher/remplacer. Au-delà de ses qualités de performances, Sublime Text 2 (ou ST2 pour les intimes) est aussi très configurable grâce à son système de plugin (écrits en Python). Évidemment, il est tout aussi fonctionnel de base pour ceux qui recherche la simplicité.

En tant que développeurs, nous avons souvent besoin de monter un environnement de développement rapidement afin d’être opérationnel de suite. Avoir un tel éditeur capable de démarrer en quelques secondes est un sacré plus.

Croyez-moi, une fois pris en main, vous ne pourrez plus le quitter ^^. Voici d’ailleurs des GIF illustrant quelques points de ST2.

Un prochain tutoriel sera consacré à ST2 afin de présenter en détails tout le potentiel de cet éditeur.

Workflow : Yeoman, Grunt et Bower

Ce trio gagnant représente le nouveau flux de travail (workflow) que chaque développeur front moderne se doit d’adopter. Et voici pourquoi…

Tout d’abord, parce que Yeoman est plus qu’un simple outil, c’est une collection d’outils (en ligne de commande) et de bonnes pratiques qui vont rendre nos développements Web encore plus simple, efficace et surtout plus fun!

Veuillez noter que vous devez avoir NodeJS et surtout NPM installés sur votre machine pour pouvoir utiliser ces outils. Mais ça je pense que c’est déjà fait, n’est-ce pas ? ^^

Yo

Yo est un outil d’échafaudage (scaffolding en anglais) qui permet de générer toute une arborescence de projet, gâce à des « generators ». Il permet également de générer des templates de contrôleurs, modèles…(voire mêmes de tests et specs ^^) suivant le type de générateur utilisé.

Pour plus de détails, je vous conseille vivement de lire la documentation d’utilisation officielle.

Grunt

Grunt est utilisé pour le build et le packaging de l’application. J’ai souvent tendance à le décrire comme l’équivalent de « Maven ». Il permet en plus de lancer un serveur de dev afin de voir les modifications CSS, HTML ou JS en même temps que vous les coder ; fini donc les F5 répétitifs dans le navigateur pour visualiser vos modifications.

Alors sans attendre, voici la documentation d’utilisation.

Bower

Si Grunt est l’équivalent de « Maven », alors Bower est (pour moi) l’équivalent de « Nexus », c’est un gestionnaire de dépendances. Plus besoin donc de gérer manuellement vos librairies JavaScript, Bower s’occupe de tout.

Voici le github officiel de Bower avec le guide d’installation et d’utilisation.

Débogage et profiling JavaScript : Chrome Dev Tools.

Lors de vos développements vous aurez surement besoin de déboguer et profiler votre application, pour cela vous trouverez des outils de développement intégré dans les navigateurs modernes. En bon développeur Web, vous avez probablement utilisé Firebug,  l’extension fare de Firefox (à l’époque). Mais ça, c’était avant, avant la sortie de Google Chrome.

En effet, depuis la sortie de Google Chrome, la donne a changé. Ce navigateur embarque l’outil de débogage le plus abouti (à mon avis). Tellement aboutit que vous n’aurez bientôt plus besoin d’éditeur de code, puisque le Chrome Dev Tools viendra avec un éditeur intégré (cette version est déjà déployé sur la version canary de Chrome).

Le Chrome Dev Tools inclut :

  • un inspecteur de DOM et de styles CSS puissant et sophistiqué vous offrant un contrôle total sur le DOM ;
  • une gestion des ressources CSS, HTML, JS, Image, Polices…
  • un interpréteur interactif JavaScript ;
  • un débogueur JavaScript complet ;
  • un inspecteur du trafic réseau détaillé ;
  • un composant d’audit capable d’analyser vos pages Web et de vous suggérer des améliorations ;
  •  un analyseur de performance vous indiquant tout ce qui se passe « sous le capot » ;
  • un profiler de CSS et JavaScript vous donnant toutes les informations nécessaires sur la consommation mémoire et CPU de vos scripts.
  • un inspecteur de stockage : Base de données HTML5, Local Storage, Cookies, AppCache, etc.

J’espère que je vous ai mis l’eau à la bouche et vous ai donné envie de switcher ^^

Un prochain tutoriel sera consacré à l’utilisation du Dev Tools.

Pour conclure…

Si vous êtes un développeur Web passionné et que vous avez envie (ou besoin) d’améliorer votre workflow, alors mettez toutes les chances de votre côté et commencez dès à présent : adoptez l’outillage du développeur moderne.

Laisser un commentaire

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

un + 11 =