class: shadow, bottom, center, inverse, title-slide, first-slide background-image: url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/dnd-stairwell.jpg) # Du Sang Neuf dans des Vieux Pots ??? Votre groupe d'aventuriers avance, un pas après l'autre, dans les ruines d'anciennes civilisations. Soudain, vous entendez une voix qui vient des profondeurs. **Qui ose réveiller du vieux code qui sommeille ?** Je m'appelle Sunny et je vais vous parler de la meilleure façon de s'attaquer à du vieux code. --- class: large, inverse # Agence Cosmic ??? 8 ans à Agence Cosmic - Principalement du code qu'on ne reverrait plus - Certains projets revenaient quelques années plus tard et piquaient - Certains clients nous demandaient de reprendre la main sur un site qu'on avait pas fait nous-mêmes -- # KissKissBankBank ??? Un produit : on ne peut plus se permettre de mettre sous le tapis du code, on prends plus le temps de faire des choses qui durent. --- class: background-top background-image: url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/kisskissbankbank-2014.jpg) ??? En 2014 quand je suis arrivé c'était : * 3 développeurs qui avaient à peine touché à la base de code, car ils travaillaient sur deux autres sites * dans les logs les noms des devs que je croisais étaits tous partis * je découvrais des trucs très étranges toutes les semaines --- class: background-top background-image: url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/kisskiss.png) ??? Moins de fantômes dans les couloirs. 6 ans plus tard - 13 développeurs et développeuses - une fois par semaine on joue à DnD --- class: large, inverse # Agence Cosmic # KissKissBankBank # Cults. ??? J'ai quitté KissKissBankBank au début du confinement pour bosser sur un projet sur lequel je bosse sur mon temps libre. --- class: middle, center, background-top background-image: url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/cults.jpg) ??? - 6 ans - seul développeur à travailler sur cults3d.com - …donc il n'y a pas de code Legacy, évidemment --- class: shadow, middle, center, inverse, big background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .8)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/ancient-ruins.png) # “Legacy” ??? - La part des morts qui survit - Terme positif - Vieux code ? Écrit par les autres ? Difficile à lire ? Difficile à modifier ? - Tout le monde en souffre --- class: middle, big > Kipple is useless objects, like junk mail or match folders after you use the > last match [...] > > When nobody's around, kipple reproduces itself. For instance, if you go to bed > leaving any kipple around your apartment, when you wake up the next morning > there's twice as much of it. It always gets more and more. .copy[ Philip K. Dick — “Do Androids Dream of Electric Sheep” ] ??? **D'où vient** ce code legacy ? Cette citation provient du livre qui a donné le film “Blade Runner”. Dans ce livre l'auteur Philip K. Dick invente le terme de Kipple pour décrire **l'entropie qu'auraient les objets du quotidien** qui ne servent plus. D'après lui, si on ne fait rien contre ce chaos, en se réveillant le lendemain il aura doublé. D'après moi, tout comme le Kipple, le code legacy a cette propriété à se propager si on y fait par attention. --- class: middle, center, inverse, shadow background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/church-ruin.jpg) # Broken Windows Theory ??? Théorie **criminelle** qui dit que les petits signes de vandalisme comme une fenêtre cassée encouragent plus de crime. Pourquoi ? Parce que comme pour le code legacy, ça sous-etend que ça ne gène personne que ça soit dans cet état. On a l'impression que le code ne **vaut pas la peine d'être amélioré**. Qu'il **ne mérite pas notre temps**. Le problème ne vient pas de la première fenêtre cassée, mais du fait de **décider ou pas de la réparer**. --- class: middle, center, inverse, shadow background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/facing-ruins.jpg) # Dette technique ??? **Résultat** du code legacy c'est ce qu'on appelle dette technique : - Ralentissement de la vélocité - Complexité à estimer - Bugs - Démoralise l'équipe Idéalement quand on s'endette on un plan pour rembourser cette dette. Avec du code legacy c'est souvent une dette subie. Que fais-ton face à toutes ces ruines ? --- class: middle, center, inverse, shadow background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/flames.png) # Tout refaire --- class: big, middle, center > They did [...] the single worst strategic mistake that any software company can make: > > They decided to rewrite the code from scratch. .copy[ — Joel Spolsky, “Things you should never do” ] ??? Je vous invite à lire l'article **“Things you should never do”** du blog de Joel Spolsky. Il parle de la réécriture de Netscape 6 qui a duré 3 ans et comment dans ce laps de temps Netscape a perdu toutes ses parts de marché. (Ah oui, l'article date de l'an 2000, Netscape c'était un navigateur.) * Les gros chantiers sont très durs à estimer * Toujours plus compliqué que prévu * On ne connait plus toutes les règles métiers * Risquez de casser des parties que vous ne connaissez pas * Pourtant l'application actuelle fonctionne et apporte de la valeur * Pendant ce temps vous bloquez les développements * Besoin de maintenir deux versions * Perdre en compétitivité Et pire : * Vous allez probablement répéter les mêmes erreurs * Ça sera le code legacy de demain --- class: bottom, center, inverse, shadow background-image: url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/sewers.png) # D'où vient le legacy? ??? S'attaquer la source du problème. Quel contexte qui amène à produire du code qui soit difficile à lire et à modifier ? - il y a une deadline trop courte - on est trop fatigué - on est junior ou vient d'apprendre à se servir d'une nouvelle librairie - on connait mal l'application - on connait mal le métier - les spécifications changent pendant le développement On ne peut pas faire disparaître ces contextes. Mais on peut améliorer notre process pour faire face à ces situations. --- class: bottom, center, inverse, shadow background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .8)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/ice-dungeon.jpg) # Pour être rapide,<br/>il faut savoir ralentir ??? Ça paraît contradictoire, mais les plus grands chefs des grandes brigades le savent : en cuisine, prendre le temps de nettoyer au fur et à mesure fera gagner un temps fou. En développement il faut également réfléchir à comment faire en sorte que le code soit durable, maintenable et extensible pour éviter de se retrouver avec du nouveau code legacy. --- class: bottom, center, inverse, shadow background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .75)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/planning.jpg) # Revue de code ??? Comment on fait ça ? - Chez KissKissBankBank un des gros changements dans notre façon de travailler - Tout changement doit être systématiquement accepté par quelqu'un d'autre via des Pull-Requests (PRs) - Même pour les fixs urgents Ça nous impose un moment pour réfléchir à la qualité de ce qu'on produit : - Est-ce qu'il faut refactoriser ? - Est-ce qu'il faut manque des tests ? - Est-ce que c'est assez compréhensible pour tout le monde ? - Est-ce qu'on applique des bonnes pratiques de développement ? En bref, est-ce que ce changement contribue à augmenter le legacy ou est-ce qu'il aide à le résorber ? --- class: bottom, center, inverse, shadow background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/alchemist.jpg) # Tests ??? Pour Michael Feathers, l'auteur du livre “Working Effectively with Legacy Code”, le code legacy c'est du code sans tests - un filet de sécurité pour éviter les régressions - permets de modifier le code “Oui mais on a pas le temps d'écrire des tests !” Ce qui prend véritablement le plus de temps aux devs : - lire et comprendre du code - s'adapter au code existant - comprendre les règles métier implicites - réparer des bugs obscurs Et tout ça, c'est le legacy. Ce que permettent les tests c'est de refactoriser le code existant en toute sécurité et donc de résorber le legacy. # Intégration continue Avoir des tests c'est bien, les lancer systématiquement et automatiquement c'est mieux. --- class: bottom, center, inverse, shadow background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/monk-dragons.jpg) # Discipline ??? Concrètement qu'est-ce qu'on fait si aujourd'hui on a pas de tests et que le code est inmaintenable ? - Tirer un trait dans le sable - À partir de maintenant le code sera de qualité Sera : - expressif - testé - utilise les bons designs patterns - les bonnes pratiques du métier Y compris les anciennes lignes que l'on modifie. Ça ne veut pas dire que tout doit être parfait : on peut accepter de la dette tant qu'on la repaye plus tard. L'important est de réfléchir au Legacy qu'on introduit, d'ajouter de la friction. --- class: bottom, center, inverse, shadow background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/robot.jpg) # Automatiser ??? Rien de mieux qu'un robot en terme de discipline. Plein d'outils peuvent vous aider à adopter des bonnes pratiques pour éviter d'augmenter le legacy. Par exemple, à KissKissBankBank, en JavaScript, on utilise Prettier qui nous permet de reformatter le code. Lancé automatiquement à chaque commit, pour que tout le code adopte le même style. --- class: background-contain background-image: url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/kissbot-suggestion.png) ??? Un autre exemple d'automatisation qu'on a mis en place, c'est les suggestions automatiques sur nos Pull-Requests. Ici, c'est RuboCop, un linter Ruby, qui suggère une modification. L'outil qui nous permet de faire ces commentaires sur GitHub s'appelle Pronto. Je vous invite à lire l'article de mon collègue William sur le blog tech de KissKissBankBank qui en parle. J'ai même ajouté à Pronto une fonctionnalité qui permet d'appliquer la suggestion en un clic sur GitHub, ce qui nous fait gagner beaucoup de temps. --- class: background-contain background-image: url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/kissbot-combo.png) ??? On voit ici un exemple de trois autres super-pouvoirs qu'on a ajouté à kissbot. - Des labels automatiques - Un commentaire si la description de la pull request est vide - Et, surtout, il nous prévient si le code modifié n'est pas couvert par la suite de tests. Le résultat de toute cette automatisation est que chaque changement, même sur du vieux code, adoptera les bonnes pratiques qu'on s'est imposés pour résorber le legacy. --- class: center, inverse, middle, center, shadow, background-cover background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/phostine.png) # Changer d'architecture ??? Le legacy vient aussi des librairies qui ne sont pas à jour, pas maintenues, ou d'une architecture qui ne répond plus à vos besoins. Pour en changer on peut aussi y aller progressivement. Par exemple à KissKissBankBank on a décide d'introduire React en ne le faisant que sur un seul composant : le header. Faire coexister l'ancien avec le nouveau ça permets de faire du **design émergeant**. En travaillant par itérations on peut mettre à l'épreuve l'existant et de découvrir la bonne architecture petit à petit. Mitiger le risque en déployant souvent de petites choses. --- class: middle, center, inverse, shadow background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/numimur.jpg) # Profiter des nouvelles fonctionnalités ??? Profitez des nouvelles fonctionnalités pour faire évoluer votre architecture. C'est parce qu'on modifiait le menu qu'on a décidé de toucher au header du site. L'avantage c'est que le business vous a accordé du temps pour faire une fonctionnalité. Mais surtout vous avez du monde qui est disponible pour vous aider à réfléchir, à comprendre les règles métier et à tester les modifications. Ne touchez pas à l'ancien code qui dort si vous n'avez pas de besoin métier derrière. --- class: inverse, middle, center, shadow background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/party-with-map.jpg) # Partager les bonnes pratiques ??? Enfin, les bonnes pratiques que vous allez mettre en place pour réduire le legacy ne viennent pas de nulle part. - Recruter des gens **expérimentés** et pointilleux qui sont **de bons mentors** - Maintenir une culture de **partage de liens** vers des bonnes pratiques - Encourager à aller à des conférences et à des meetups --- class: inverse, middle, center background-image: url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/loot.jpg) ??? - Félicitations vous avez nettoyé ce donjon. - D'itération en itération vous allez récolter de plus en plus de code propre. --- background-image: url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/glenfyro.jpg) ??? **Maintenant, qu'est-ce que vous faites ?** Merci. --- class: title-slide, middle, inverse, center, shadow background-image: linear-gradient(rgb(0, 0, 0, .5), rgb(0, 0, 0, .8)), url(http://wtf.sunfox.org/images/slides/du-sang-neuf-dans-des-vieux-pots/glenfyro.jpg) .shadow[ # Merci ! ] - twitter.com/sunfox - sunfox.org - lafabrique.kisskissbankbank.com ??? N'hésitez pas à venir me parler : - de code legacy - de Ruby - de JavaScript - de financement participatif - d'impression 3D - de théâtre d'impro - de donjons et dragons <!-- http://edit.sunfox.org/du-sang-neuf-extra --> <link href="https://fonts.googleapis.com/css?family=MedievalSharp|Grenze" rel="stylesheet"> <style> .remark-container { background: black; } .remark-slide-content { font-family: Grenze, serif; background-size: cover; color: #444 } .remark-slide-content h1, .remark-slide-content h1 { font-size: 4em; line-height: .9; font-family: Grenze, serif; } .remark-slide-scaler { box-shadow: none; } .title-slide h1 { font-family: MedievalSharp, serif; font-size: 5em; } #du-sang-neuf-dans-des-vieux-pots { margin: 0 } .inverse { color: white; background-color: #000 } .inverse a { color: inherit } .shadow { text-shadow: 0.15em 0.15em 0 #000, 0 0 1em #000 } .remark-slide-number { display: none } .background-contain { background-size: contain } .background-top { background-position: top } .chapter-slide { } .bottom h1 { margin-bottom: 1em } .float-right { float: right} .big { font-size: 1.8em } .large { font-size: 1.6em } .copy { text-align: right; opacity: .6 } .copy ul { list-style-type: none } .center ul { margin: 0; padding: 0; list-style-type: none } </style>