Coupable de code legacy en JS: comment s'en sortir ?

[adrienjoly]

Objectif: permettre d'ouvrir la page suivante dans un nouvel onglet. (cf #221)

Exemple de profil utilisateur Openwhyd: https://openwhyd.org/adrien

Instructions pour lancer sur sa machine: README.md

Fichiers potentiellement impactés par le refactoring et les changements demandés:

• app/controllers/userLibrary.js (routing etc...)
• app/controllers/LibUser.js (to populate a user's profile and playlists)
• app/controllers/LibFriends.js (to populate a user's home/feed)
• app/controllers/LibAll.js (to populate the "all tracks" page)
• app/templates/feed.js (to render a paginated list of posted tracks)
• app/templates/posts.js (to render a list of posted tracks)
• app/templates/userProfileV2.html (to render a user profile page)
• public/css/common.css (styling)
• test/snapshots/approval.tests.js.md (approval test snapshots)

[adrienjoly]

Diagramme de séquence

[adrienjoly]

Cheatsheets

• Summary of 'Clean code' by Robert C. Martin
• Summary of "Refactoring: Improving the Design of Existing Code" by Martin Fowler

References

• 📖 "Working Effectively with Legacy Code", Michael Feathers
• 📖 "Clean Code", Robert C. Martin
• 📖 "Refactoring", Martin Fowler
• 🎦 "Improving Legacy", Carola Lilienthal
• 🎦 "Rewriting Legacy Code", Anna Filina
• 🗒 "Comment rendre un code legacy à nouveau maintenable", Adrien Joly

Outils

• code-complexity, Simon Renoult
• Arkit — JavaScript architecture diagrams and dependency graphs
• js-sequence-diagrams by bramp

[adrienjoly]

Pour redécouvrir le live-coding

• Slides: https://github.com/openwhyd/openwhyd/blob/4d37e560d5d501eddde9c114dcdcb652c74d52e0/slides/00.md
• PR #480: implémentation de la fonctionnalité demandée, avant refactoring 🥴
• PR #487: branche à partir de laquelle j'ai refactoré (commit parent: dae495f) 👈 le talk commence ici
• PR #491: changements apportés lors du refactoring
• PR 483 #494: implémentation de la fonctionnalité demandée, après refactoring 😌

[adrienjoly]

Enregistrement video du talk: https://www.youtube.com/watch?v=vJUl8SCf5Yg

[0:00] Intro
[1:52] Définitions: "legacy code", "code smells", "technical debt" et "refactoring"
[3:23] Problème, objectif, pièges et stratégie de refactoring à prévoir sur openwhyd.org
[9:30] Réduction de charge mentale: suppression du code commenté
[10:38] Rendre facile l'intégration de fonctionnalité: extraction de fonction
[15:05] Réduire les ramifications (branching) avec le pattern "stratégie"
[22:26] Extraction de fonction populatePaginationParameters()
[23:35] Extraction de fonctions prepareTemplate(), pour playlist et profil + échec et résolution des approval tests
[27:12] Standardisation du callback dans les implémentations de fetchAndRender()
[33:29] Rendre explicite la séquentialité des appels de fonctions, avec await
[39:00] Rendre explicite les mutations engendrées par les fonctions de récupération de données
[41:42] Résultats, conseils puis questions/réponses du public

[adrienjoly]

"Approval tests" écrits pour éviter les regressions pendant le refactoring: #472.