Développer avec plus de plaisir grâce à 7 astuces

Aujourd'hui, c'est la Journée des Développeurs. Non ? Si. La journée des développeurs - ou des programmeurs -, ça existe vraiment. Elle a été instaurée en Russie en 2009 et est fêtée tous les ans le 256e jour de l'année.
Comme on est un vendredi 13, c'est également votre jour de chance (à défaut d'être en congé). Notre équipe technique a réuni toutes ses meilleures astuces (back-end et front-end) pour rendre vos journées de travail plus agréables et ça, c'est valable toute l'année ! On commence ?

1. Faire de la veille quotidiennement

Faire de la veille peut paraître fastidieux mais contrairement aux apparences, c'est loin d'être une perte de temps. Réaliser quotidiennement (ou fréquemment) une veille technique permet d'être au fait de toutes les nouveautés techniques et des nouveaux outils permettant de gagner en productivité. Cela permet de confronter ses méthodes à celles d'autres experts afin de s'approprier les meilleures façons de procéder. Voici quelques exemples de sites et de méthodes de veille efficaces.

Pour la veille technique générale

• humancoders.com : Human Coders fédère une large communauté de développeurs qui proposent notamment leur veille technique en plus des Human Talks et des discussions sur le forum (en français).
• lafermeduweb.net : La Ferme du Web est une plateforme de veille technique quotidienne dédiée au partage de connaissances, astuces et outils tech, design, webmarketing... (français et anglais)
• dev.to : communauté d'entraide et d'échange d'idées, de débats, de discussions entre développeurs (en anglais).
• lobste.rs : recensement de tous les nouveaux articles sur des thématiques techniques (en anglais).
• news.ycombinator.com : considéré comme une référence pour la veille technique, il y a néanmoins énormément de contenu ce qui rend plus compliqué la recherche de sujets spécifiques.

Une bonne pratique de veille est d’utiliser ces sources pour repérer les blogs/magazines qui traitent de sujets qui nous intéressent le plus. 

Quelques autres outils à utiliser pour faire de la veille technique

• Feedly : un agrégateur de flux RSS. Possibilité de s'abonner à différents sites, de programmer des alertes en fonction des mots-clés suivis, etc.
• Google News / Alertes pour s'informer sur des thématiques spécifiques
• Reddit : beaucoup de sujets sont abordés sur Reddit, mais certains sous-forums sont sérieux et apportent énormément d'informations complémentaires (croisement des sources, avis d'experts, etc...)
• Twitter : Twitter est un outil très adapté pour suivre les experts tech et actualités autour du développement. Exemples de comptes à suivre sur Twitter pour la tech :
  • Matthias Noback, développeur logiciel, blogueur et speaker
  • Kévin Dunglas : développeur logiciel et expert Symfony
  • Jérémy Decool : ingénieur études et développeur back-end
  • Symfony : le compte officiel pour toutes les nouveautés sur Symfony

2. Enrichir son shell avec des infos GIT

Lorsque l’on développe en équipe avec GIT, il est important de savoir dans quel état notre code se trouve.

Entre les changements de branche, les différences entre les dépôts distants et locaux, les éléments non suivis (untracked), indexés pour validation (staged), engagés (committed) ou poussés (pushed), il est fréquent de ne pas savoir à un instant T dans quel état sont les fichiers.

Plutôt que de devoir vérifier à chaque fois l’état du code, il est possible de configurer son shell pour avoir ces informations de façon très visuelle, au premier coup d’œil à l’invite de commande (prompt).

L’idéal est de construire une configuration adaptée à votre façon de travailler. Comme base de travail, vous pouvez néanmoins trouver des configurations toutes prêtes :

• Pour Fish, il existe plusieurs prompts inclus de base, certains compatibles avec GIT et les autres VSC
• Pour ZSH, oh-my-zsh convient assez bien : GitHub - robbyrussell/oh-my-zsh
• Bash est un shell plus limité, mais c’est tout de même possible : GitHub - magicmonty/bash-git-prompt

3. Utiliser Fishshell

Si le shell par défaut fonctionne bien, il en existe d'autres, avec des options plus avancées. C'est notamment le cas de Fishshell. Celui-ci ne nécessite quasiment aucune configuration. De plus, il ajoute une simple fonctionnalité qui optimise réellement la productivité : l'autocomplétion basée sur l'historique.

Toute commande ayant déjà été tapée une fois dans un dossier particulier est retrouvable et autocompletée au fur et à mesure qu'on commence à l'écrire. Cette commande, que vous la tapiez 15 fois par jour ou 1 fois par mois, n'est maintenant plus qu'à quelques ctrl + flèche droite !

Il comporte néanmoins quelques subtilités, mais rien que le tutorial ne puisse indiquer.

4. Harmoniser l'alias de base du Repository de Doctrine

Si vous utilisez Symfony, il y a de fortes chances pour que vous ayez déjà utilisé Doctrine. Vous avez probablement suivi la documentation et utilisé un alias particulier pour chaque type d'entité. De notre côté, nous préférons utiliser le même alias pour toutes les entités, (nous avons choisi le 'o', comme le fait Sylius).

Cela nous a permi de factoriser de nombreux comportements dans des traits sans avoir à se soucier de passer l'alias en paramètre. Cela permet également de ne pas avoir à réfléchir à quel est l'alias du Repository courant dans chaque méthode, puisque la réponse est invariablement 'o'.

En bonus, nous avons même pu automatiser l'harmonisation de cet alias, en créant un BaseRepository avec la méthode suivante :

abstract class BaseRepository extends ServiceEntityRepository
{
    public function createQueryBuilder($alias = 'o', $indexBy = null)
    {
        return parent::createQueryBuilder($alias, $indexBy);
    }
}

5. Prendre le temps de bien configurer son éditeur

Prendre le temps de bien configurer son éditeur, c'est un véritable gain de productivité pour un plaisir garanti !

Notre IDE - ou éditeur de code - fait partie de nos outils de travail principaux. Il est donc très important de prendre le temps de le configurer. Certains de nos développeurs utilisent VSCode depuis quelques années maintenant et voici ce qu'il apporte :

• du plaisir : toujours plaisant d'avoir un éditeur qui correspond spécifiquement à ses besoins
• du temps : autocomplete, import automatique, un CLI intégré, etc.
• debug simple : debuger du code client (ou React Native) est très simple et directement intégré depuis l'éditeur

Voici un top 5 des plugins que nous avons ajoutés (32 au total !) :

• Settings Sync : permet de synchroniser vos paramètres et vos modules (entre autres). Sympa si vous avez plusieurs PC ou votre SSD qui crashe
• Debugger for Chrome/Firefox : permet de déboguer votre app depuis VSCode
• Project Manager : un gestionnaire de projet très efficace qui permet de switcher d'un projet à l'autre très rapidement
• Peacock : ajoute de la couleur à votre éditeur. Ainsi, chaque projet peut avoir sa couleur
• Sublime Text Keymap and Settings Importer : module qui permet d'importer des raccourcis clavier de Sublime sans effort

Sans oublier les modules pour la partie validation de code, typage statique, etc. : Flow, ESLint, GraphQL for VSCode, Babel, Prettier ou encore EditorConfig.

6. Awesome React Hooks : une liste de ressources React autour des hooks

Les hooks sont devenus un standard dans le monde de React. La communauté y a adhéré très rapidement et a sortie des centaines de modules en quelques semaines seulement.

Cette communauté maintient à jour des dépôts type "Awesome". Ceux-ci listent les ressources les plus connues/utilisées sur la platforme concernée. On retrouve, par exemple, Awesome React-Native, Awesome React ou encore Awesome GraphQL. La même chose existe pour les hooks.

Il en existe d'autres, mais ce dépôt est le principal et regorge énormément de hooks. Voici une petite sélection bien croustillante :

• use-socket.io-client
• React Navigation Hooks
• @rehooks/local-storage
• @apollo/react-hooks
• react-i18next

Des centaines sont disponibles, n'hésitez pas faire une recherche sur Github et/ou npmjs.com !

7. Upgrader facilement votre app React Native grâce au React Native upgrade guide

Dernière astuce : voici comment upgrader votre application React Native, sans pleurer (ou presque) toutes les larmes de votre corps grâce au React Native Upgrade Guide.

React Native, c'est vraiment cool, on le sait tous. Par contre, quand il s'agit de mettre à niveau sa version de React Native (pour peu qu'il faille mettre à niveau plusieurs versions)... c'est déjà moins cool. Et pour cause, les changelogs sont souvent costaux lorsqu'il s'agit de maintenir les deux ogres que sont Android et iOS.

Pour palier ce problème, des développeurs ont créé le React Native Git Upgrade. Ce super outil nous a aidé à plusieurs reprises. Le dépôt est toujours activement maintenu pour le plaisir de toute la communauté.

Plus récemment, l'équipe de React Native a publié un outil en ligne qui permet de voir les différences entre deux versions : le React Native Upgrade Helper.

Avec cet outil, la mise à jour est manuelle. Il vous appartient donc de modifier chaque fichier, l'un après l'autre. Il y a évidemment du pour et du contre. De notre côté, nous avons une préférence pour RN Upgrade Helper, qui permet d'avoir la main sur la mise à jour et une meilleure visibilité.

Un grand merci aux co-rédacteurs de cet article : Stéphane, Jean-Pascal, Nicolas et Cédric.