15 Outils essentiels pour les développeurs frontend

Vous êtes développeur frontend ?

Vous connaissez et utilisez plusieurs outils de développement actuellement, mais vous gagnez en expérience, et la vitesse à laquelle votre secteur évolue vous impose le devoir d’être plus efficient et plus productif à chaque mission.

Il vous faut découvrir de nouveaux outils. Voici présentés ici 15 outils qui devraient aider les développeurs frontend à réduire leur temps de travail et à décupler leur niveau de productivité.

[callout bg=”#E5E5E5″]

Développement front-end et back-end : Quelles différences ? Qu’est-ce que signifie front-end ou back-end lors d’un projet de conception web ou mobile ?

[/callout]

1 – Sublime Text, pour éditer vos textes

Sublime Text est un puissant éditeur de texte basé sur une interface graphique multiplateforme. Il intègre de précieuses fonctionnalités pour le développement frontend, effectue les tâches redondantes et permet au développeur qui passe du temps à coder, d’accroître sa productivité.

Parmi les fonctionnalités qu’il offre, on distingue :

• La saisie semi-automatique ;
• La fonctionnalité de recherche et remplacement ;
• La coloration syntaxique personnalisable ou la mise en surbrillance de texte ;
• La sauvegarde automatique ;
• Les raccourcis clavier personnalisés ;
• Les supports de macros ;
• Etc. 

Mais Sublime Text va bien plus loin que cela. Extensible, il offre la possibilité d’importer de nouvelles fonctionnalités, de nouveaux thèmes, d’ajouter de nouveaux langages, etc. Et en parlant de langage, l’éditeur peut prendre en charge environ 44 langages de programmation et est compatible avec Windows, Mac et Linux.

• Développement front-end et back-end : Quelles différences ?

2 – Bit (Github), pour le partage de composants

Bit (Github) est un outil de développement frontend qui permet d’améliorer la collaboration avec votre équipe, de maximiser la réutilisation du code, de créer du code plus évolutif et de conserver une interface utilisateur cohérente. Il permet par exemple de :

• Isoler les composants de différents référentiels, pour vous assurer que vous partagez des composants vraiment réutilisables et qui ne sont pas couplés à votre projet ;
• Partager lesdits composants avec d’autres membres de votre équipe ;
• Les utiliser dans n’importe quel autre projet ;
• Découvrir des blocs de construction partagés par d’autres membres de la communauté. 

Ainsi, Bit (Github) est un excellent outil pour créer progressivement une bibliothèque de composants modulaires. Vous et votre équipe pouvez parcourir la bibliothèque et importer un composant partagé à l’aide du « NPM Installer », modifier ledit composant dans votre environnement de développement local à l’aide du « Bit Import », et si possible placer la version modifiée du composant dans la bibliothèque.

3 – GitHub Desktop, pour contrôler la version du code source

GitHub Desktop est l’outil graphique de bureau de GitHub pour gérer les référentiels Git. Il ne prend en charge que les systèmes d’exploitation Windows et Mac. L’outil vous offre une alternative graphique aux architectures Git couramment utilisées.

GitHub Desktop s’intègre facilement à vos référentiels GitHub que vous pourrez alors gérer sans vous rendre sur le site Web. L’outil GUI vous sera particulièrement utile lors des révisions de code et de la navigation dans l’historique d’un projet. Atom aussi s’intègre assez bien avec GitHub Desktop.

4 – Chrome DevTools, pour le débogage en temps réel

Très important lors du test de votre produit final sur le navigateur, Chrome DevTools est un outil intégré à Google Chrome et à d’autres navigateurs basés sur Chromium. Il propose un environnement intégré qui permet de :

• Faire le débogage et de modifier une page Web en temps réel ;
• Modifier le CSS et le DOM en direct ;
• Exécuter du JavaScript personnalisé pour déboguer votre code à différents niveaux ;
• Analyser le temps d’exécution des fonctions afin d’optimiser la vitesse d’exécution de vos applications.

Tous les navigateurs basés sur Chromium sont équipés d’une version de Chrome DevTools, ce qui en fait l’un des outils les plus facilement disponibles pour le débogage en temps réel.

5 – D3.js, pour la visualisation des données

D3.js est une bibliothèque de visualisation de données populaire en JavaScript grâce à laquelle vous pouvez lire des données provenant de plusieurs sources, les manipuler en fonction de vos besoins et vous en servir pour créer des visuels adaptés rapidement. 

D3.js offre une grande flexibilité avec les graphiques vectoriels et permet l’ajout d’animations et d’interactivité aux graphiques. L’outil fournit un large éventail de fonctions comme Dimple qui permet de créer des graphiques plus rapidement.

6 – Codepen, pour Code Playground

CodePen est une plateforme de développement qui fonctionne avec le Cloud et grâce à laquelle vous pouvez développer et tester du code en HTML, en CSS et en Javascript en direct. Concrètement, elle permet de créer et de partager des démos de votre travail ou un extrait de code frontend sur plusieurs plateformes et/ou appareils.

Grâce à cet outil, vous pouvez par exemple partager des extraits ou un aperçu entièrement interactif de vos projets avec vos pairs pour obtenir des commentaires ou les intégrer dans des didacticiels, des guides, etc. Vous pouvez également utiliser des ressources hébergées en externe dans vos démos et projets CodePen.

7 – JAWS, pour la vérification de l’accessibilité

JAWS est un lecteur d’écran qui vérifie l’accessibilité de vos contenus web. L’outil lit vos contenus et évalue les vulnérabilités pouvant en limiter l’accès. L’accessibilité Web représente la possibilité des utilisateurs de toutes capacités et de tous handicaps à accéder adéquatement à votre contenu Web.

Concrètement, JAWS vérifiera par exemple si votre contenu est accessible aux utilisateurs ayant un problème visuel donné ou si le contenu respecte les lois sur l’accessibilité dans les pays dans lesquels vous comptez les promouvoir. Un tel outil vous sera d’une aide cruciale.

8 – PageSpeed Insights, pour surveiller la vitesse du site 

PageSpeed Insights est un outil gratuit de surveillance de la vitesse de chargement des pages de votre site sur Google, facteur très important pour l’optimisation SEO et pour la rétention. Il vous suffit de taper l’URL de la page pour effectuer le test.

Vous pouvez vérifier le fonctionnement du test sur téléphone mobile ou sur PC. PageSpeed Insights vous fera également des propositions d’action spécifiques pour améliorer la vitesse de votre site.

9 – Slack, pour la communication

Slack est une plateforme de messagerie instantanée basée sur le cloud qui permet la communication entre développeurs sur un seul support. Elle peut s’intégrer à divers services. Vous pouvez par exemple intégrer Slack à :

• GitHub, pour vous tenir au courant du dernier référentiel ;
• Votre outil de suivi de code pour alerter un membre spécifique de l’équipe au cas où un nouveau bug serait signalé. 

Vous pourrez même créer et configurer votre propre chatbot pour répondre aux commandes personnalisées.

10 – BrowserStack, pour un test multi-navigateur

Très apprécié des développeurs frontend, BrowserStack permet d’évaluer le fonctionnement des applications Web développées sur une large gamme d’appareils et de navigateurs. L’outil offre la possibilité de sélectionner des combinaisons « navigateur-appareil » et d’en tester l’utilisation.

BrowserStack utilise Selenium Server pour automatiser les tests sur de vrais appareils conservés dans des emplacements distants. Lors du déploiement de l’application, vous pouvez par exemple déclencher une série de tests sur une liste prédéterminée de périphériques. Une fois les tests terminés, vous pourrez obtenir des captures d’écran et des vidéos des tests effectués sur votre tableau de bord.

11 – Adobe Color, pour inspirer le designer

Autrefois appelé Kuler, Adobe Color est une application qui vous permet de créer, de parcourir et de partager des thèmes de couleur, que vous pourrez ensuite synchroniser avec d’autres applications Adobe.

L’utilisation de la couleur étant une composante cruciale du design, Adobe Color sera une très riche source d’inspiration pour le développeur frontend qui souhaite découvrir les couleurs qui fonctionnent bien ensemble sur son projet.

12 – Minify, pour des chargements plus rapides

Minify est un outil en ligne qui permet au développeur de réduire la taille totale du code de son application avant de l’envoyer à la production. Avec Minify, vous pourrez supprimer les espaces blancs, le code mort, etc.

La taille du code de l’application ainsi réduite, vous pourrez bénéficier d’un temps de chargement plus rapides sur les navigateurs.

13 – Babel REPL, pour « retroconvertir »

Babel est un transcompilateur JS gratuit et open-source utilisé pour convertir du code ES moderne (ECMAScript 2015+) en ancien JavaScript ES5 afin qu’il soit utilisable sur d’anciens appareils.

Il permettra d’essayer les ajouts récents apportés à ES ou certaines fonctionnalités qui sont à certains stades d’ajout à l’ECMA. Il peut également davantage affiner le code, limiter la taille des fichiers, etc.

14 – Prettier, pour plus de style

Prettier est un formateur de code JS avisé qui applique un style cohérent en analysant votre code et en le réimprimant avec les meilleures pratiques de codage JS.

Même s’il a été couramment utilisé dans notre environnement de développement, il dispose d’une plateforme en ligne où vous pouvez affiner votre code.

15 – BundlePhobia, pour optimiser votre stockage

BundlePhobia est un service web qui vous permettra de télécharger un fichier package.json et d’en afficher la taille totale, le temps de téléchargement et le nombre de dépendances qui seront installées à partir du package.json.

Si vous avez déjà douté de la taille de vos dossiers node_modules ou avez une fois éprouvé le besoin de connaître la taille d’un package.json qui sera installé dans votre appareil, c’est l’outil qu’il vous faut.

En résumé

Les différents outils pour développeurs frontend listés dans le présent article vous aideront à réduire votre temps de travail et à améliorer votre productivité. Ils répondent à des besoins majeurs en développement frontend.

Si vous utilisez un de ces 15 outils, dites ce que vous en pensez en commentaires ci-dessous. Si vous en utilisez d’autres, n’hésitez pas non plus à les partager en commentaires.