![Page 1: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/1.jpg)
1
Tél : +33 (0)1 58 56 10 00Fax : +33 (0)1 58 56 10 01www.octo.com© OCTO 2015
50, avenue des Champs-Elysées75008 Paris - FRANCE
Atelier Paris Web 2015
Michael AKBARALY @Chehcheucheh
François PETITIT@francoispetitit
![Page 2: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/2.jpg)
2
Présentation
Michael AKBARALYFrançois PETITIT
OCTO TechnologyConsultants chez Canal+, FranceConnect…Ref card « Tests sur tous les fronts »http://blog.octo.com
![Page 3: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/3.jpg)
3
Quand on commence un projet de zéro…
Usine de Build
Build
Compiler
Déposer
Référentielbinaires
Référentiel de tâches
et anomalies
Documentation& Indicateurs
Serveurd’intégration
continue
BuildGestionnaire de sources
BuildLocal
Notifications
Exécuter les tests
Vérifier la qualité du code
Documenter
Récupérer les dépendances
Packager
![Page 4: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/4.jpg)
4
Travailler sur du legacy : les livres de référence
![Page 5: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/5.jpg)
5
Du code ‘legacy’, c’est quoi?
![Page 6: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/6.jpg)
6
Eco-système Javascript: vous n’avez pas d’excuse!
![Page 7: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/7.jpg)
7
Types de tests
![Page 8: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/8.jpg)
8
http://bit.ly/pw-legacy
https://github.com/octo-web-front-end-tribe/ka-ching
![Page 9: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/9.jpg)
9
![Page 10: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/10.jpg)
10
Les grandes étapes
Faire tourner l’application
Regarder le code à la main pour voir la tête du codeCode non formaté !On n’a pas de test !On n’a pas de gestion des ressources front-end !…
Faire une analyse statiqueDétection de code dupliquéCalcul de la complexité cyclomatique…
Démarche pour un audit express
![Page 11: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/11.jpg)
11
ObjectifVisualiser certaines métriques sur le code : couverture par les tests, complexité cyclomatique, nombre de lignes de code…
CommentAvec Plato.js :
https://github.com/es-analysis/plato
Npm install –g platoCôté back-end :
plato -d report -x node_modules/ index.jsCôté front-end :
plato -r -d report -x node_modules/ app/scripts
Analyse statique de code
![Page 12: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/12.jpg)
12
Améliorations – axe qualité du code
Modification Avantages Criticité Complexité
Améliorer la couverture de tests côté API puis front-end
• Améliorer la maintenabilité
+++ +++
Mettre en place des normes de formatage
• Améliorer la lisibilité du code• Permettre d’avoir des diffs Git utiles +++ +
Mettre en place un outil de linting
• Eviter des erreurs de code détectables par des outils +++ +
Supprimer les duplications de code
• Eviter des régressions en oubliant de faire évoluer chaque version ++ ++
Supprimer le code mort
• Améliorer la lisibilité du code + +
![Page 13: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/13.jpg)
13
Modification Avantages Criticité Complexité
Mettre en place un build automatisé Gulp pour le front
• Possibilité d’utiliser des preprocesseurs CSS compilés (compass…)
• Live-reload sur le poste de dev• Outillage JS dédié pour optimisation des
ressources (plug-ins Grunt : https://github.com/yeoman/grunt-usemin, )
++ ++
Automatiser les tests • maintenabilité +++ +
Améliorations – axe build
![Page 14: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/14.jpg)
14
Modification Avantages Criticité Complexité
Optimiser les ressources statiques front-end
• Améliorer les performances++ ++
Déployer les ressources statiques en-dehors du serveur NodeJS (serveur HTTP, CDN…)
• Améliorer les performances• Décharger le serveur d’application
+ ++
Améliorations – axe run
![Page 15: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/15.jpg)
15
Formater le codeMettre en place un outil de « linting » de codeMettre en place une couverture de tests minimale
D’abord côté APIPuis côté front-end
Supprimer le code mortSupprimer les duplications de code
En vérifiant la non-régression via des tests unitaires
Feuille de route
![Page 16: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/16.jpg)
16
ObjectifRendre le code plus facile à lireAvoir des diffs utiles
Comment faireUn outil en ligne de commande : JS-Beautify : https://www.npmjs.com/package/js-beautify
Npm install –g js-beautifyjs-beautify -f ./app/modules/**/* -r
Formatage de code JavaScript
![Page 17: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/17.jpg)
17
Linting
ObjectifDétecter des erreurs de code potentielles (ex: inner-declaration,…) Mettre en place des règles de code en plus du formatage
CommentMettre en place ESLint
http://eslint.org/ Intégrer ESLint au build
![Page 18: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/18.jpg)
18
ObjectifAvoir un harnais de tests de non-régressions sur l’API pour pouvoir la faire évoluer sereinement
CommentMettre en place des tests de non-regression HTTP avec SuperTest (https://github.com/visionmedia/supertest )Bouchonner les données de baseAjouter ces tests au build (attention : nécessite de déployer l’application)
Le codeBranche « api-integration-tests »https://github.com/octo-web-front-end-tribe/ka-ching/tree/api-integration-tests
Tester l’API en boîte noire
![Page 19: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/19.jpg)
19
ObjectifsMieux visualiser comment fonctionne l’application au runtimeSupprimer le code non utiliséVisualiser le code non testé
Comment ?Istanbul pour visualiser la couverture par les tests :
https://github.com/gotwarlost/istanbul Istanbul-middleware pour instrumenter à l’exécution
https://github.com/gotwarlost/istanbul-middleware
Analyse dynamique : détecter le code mort côté back
![Page 20: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/20.jpg)
20
ObjectifsPoser un harnais de test pour pouvoir ensuite modifier le code front-end
Comment Avec PhantomCSS
https://github.com/Huddle/PhantomCSS
Exemplehttps://github.com/octo-web-front-end-tribe/ka-ching-phantomcss
Ajouter de la non régression sur l’IHM en mode boîte noire
![Page 21: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/21.jpg)
21
ObjectifDétecter le code dupliquéSupprimer sans risque les duplications
Comment ?JSInspect pour analyser le code et détecter les duplicationsMise en place de tests unitaires pour sécuriser les appels aux fonctions dupliquésRefactoring pour supprimer les doublonsS’assurer que les tests fonctionnent toujours
Supprimer le code dupliqué
![Page 22: Paris Web 2015 - Atelier desendettement javascript](https://reader035.vdocuments.mx/reader035/viewer/2022062900/58e59a2e1a28abdd148b6a8f/html5/thumbnails/22.jpg)
22
MERCI
Atelier Paris Web 2015