SlideShare une entreprise Scribd logo
1
Tél : +33 (0)1 58 56 10 00
Fax : +33 (0)1 58 56 10 01
www.octo.com© OCTO 2015
50, avenue des Champs-Elysées
75008 Paris - FRANCE
Atelier Paris Web 2015
Michael AKBARALY
@Chehcheucheh
makbaraly@octo.com
François PETITIT
@francoispetitit
fpetitit@octo.com
2
Présentation
Michael AKBARALY
François PETITIT
OCTO Technology
Consultants chez Canal+,
FranceConnect…
Ref card « Tests sur tous les
fronts »
http://blog.octo.com
3
Quand on commence un projet de zéro…
Usine de Build
Build
Compiler
Déposer
Référentiel
binaires
Référentiel
de tâches
et anomalies
Documentation
& Indicateurs
Serveur
d’intégration
continue
BuildGestionnaire
de sources
Build
Local
Notifications
Exécuter les tests
Vérifier la qualité
du code
Documenter
Récupérer
les dépendances
Packager
4
Travailler sur du legacy : les livres de référence
5
Du code ‘legacy’, c’est quoi?
6
Eco-système Javascript: vous n’avez pas d’excuse!
7
Types de tests
8
https://github.com/octo-web-front-end-tribe/ka-ching
9
10
Les grandes étapes
Faire tourner l’application
Faire une analyse statique
Nombre de ligne de codes par fichiers
Couverture de code par les tests
Calcul de la complexité cyclomatique
…
Regarder le code à la main pour voir la tête du code
Code non formaté !
On n’a pas de test !
On n’a pas de gestion des ressources front-end !
…
Démarche pour un audit express
11
Objectif
Visualiser certaines métriques sur le code : couverture par les tests,
complexité cyclomatique, nombre de lignes de code…
Comment
Avec Plato.js :
https://github.com/es-analysis/plato
Npm install –g plato
Côté back-end :
plato -d report -x node_modules/ index.js
Côté front-end :
plato -r -d report -x node_modules/ app/scripts
Analyse statique de code
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
+ +
13
Modification Avantages Criticité Complexité
Mettre en place un
build automatisé Gulp
pour le front
• Mettre en place des tests unitaires côté front-
end
• Outillage JS dédié pour optimisation des
ressources
+++ ++
Automatiser les tests • maintenabilité +++ +
Améliorations – axe build
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
15
Formater le code
Mettre en place un outil de « linting » de code
Mettre en place une couverture de tests minimale
D’abord côté API
Puis côté front-end
Supprimer le code mort
Supprimer les duplications de code
En vérifiant la non-régression via des tests unitaires
Feuille de route
16
Objectif
Rendre le code plus facile à lire
Comment faire
La fonction de formatage de notre IDE (WebStorm + ESLint) ?
Un outil en ligne de commande : JS-Beautify :
https://www.npmjs.com/package/js-beautify
Npm install –g js-beautify
js-beautify -f ./app/modules/**/* -r
Formatage de code JavaScript
17
Comment le rendre pérenne
Intégration de ESLint au build
Linting
18
Objectif
Avoir un harnais de tests de non-régressions sur l’API pour pouvoir la
faire évoluer sereinement
Comment
Mettre en place des tests de non-regression HTTP avec SuperTest
(https://github.com/visionmedia/supertest )
Bouchonner les données de base
Ajouter ces tests au build (attention : nécessite de déployer
l’application)
Le code
Branche « api-integration-tests »
https://github.com/octo-web-front-end-tribe/ka-ching/tree/api-integration-
tests
Tester l’API en boîte noire
19
GET /api/friends/
Prends en entrée l’id de l’utilisateur courant
Renvoie la liste de ses amis
Les étapes :
Mettre en place un jeu de données significatif pour l’API à tester
Implémenter le test
Automatiser l’exécution du test à chaque build
Exemple : l’API à tester
Supertest Should
20
Objectifs
Mieux visualiser comment fonctionne l’application au runtime
Supprimer 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
21
Objectifs
Poser un harnais de test pour pouvoir ensuite modifier le code front-end
Comment
Avec PhantomCSS
https://github.com/Huddle/PhantomCSS
Exemple
https://github.com/octo-web-front-end-tribe/ka-ching-phantomcss
Ajouter de la non régression sur l’IHM en mode boîte noire
22
Objectif
Détecter le code dupliqué
Supprimer sans risque les duplications
Comment ?
JSInspect pour analyser le code et détecter les duplications
Mise en place de tests unitaires pour sécuriser les appels aux fonctions
dupliqués
Refactoring pour supprimer les doublons
S’assurer que les tests fonctionnent toujours
Supprimer le code dupliqué

Contenu connexe

Tendances

BBL - TDD pour les DevOps - Puppet
BBL - TDD pour les DevOps - PuppetBBL - TDD pour les DevOps - Puppet
BBL - TDD pour les DevOps - Puppet
Olivier BAZOUD
 
Intégration continue transco
Intégration continue transcoIntégration continue transco
Intégration continue transcolaurent_opnworks
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipeline
Nicolas wallerand
 
Intégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsIntégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsHugo Hamon
 
L'integration continue pour tous
L'integration continue pour tousL'integration continue pour tous
L'integration continue pour tous
Aurelien Navarre
 
XebiCon'17 : Kotlin, état de l'art - Benjamin Lacroix et Sergio Dos Santos
XebiCon'17 : Kotlin, état de l'art - Benjamin Lacroix et Sergio Dos SantosXebiCon'17 : Kotlin, état de l'art - Benjamin Lacroix et Sergio Dos Santos
XebiCon'17 : Kotlin, état de l'art - Benjamin Lacroix et Sergio Dos Santos
Publicis Sapient Engineering
 
Tests automatisés java script
Tests automatisés java scriptTests automatisés java script
Tests automatisés java script
Pascal Laurin
 
Integration continue et déploiement automatisé
Integration continue et déploiement automatiséIntegration continue et déploiement automatisé
Integration continue et déploiement automatisé
Jérémie Campari
 
Déploiement PHP : de l'âge de pierre à nos jours.
Déploiement PHP : de l'âge de pierre à nos jours.Déploiement PHP : de l'âge de pierre à nos jours.
Déploiement PHP : de l'âge de pierre à nos jours.
Amélie DUVERNET
 
Industrialisation PHP - Canal+
Industrialisation PHP - Canal+Industrialisation PHP - Canal+
Industrialisation PHP - Canal+
ekino
 
Integration continue - Introduction
Integration continue - IntroductionIntegration continue - Introduction
Integration continue - Introduction
Olivier ETIENNE
 
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc DivadXebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
Publicis Sapient Engineering
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
ekino
 
JCertif 2012 : Integration continue avec Jenkins
JCertif 2012 : Integration continue avec JenkinsJCertif 2012 : Integration continue avec Jenkins
JCertif 2012 : Integration continue avec Jenkins
Rossi Oddet
 
Spring Batch - Julien Jakubowski - November 2010
Spring Batch - Julien Jakubowski - November 2010Spring Batch - Julien Jakubowski - November 2010
Spring Batch - Julien Jakubowski - November 2010
JUG Lausanne
 
Release quotidienne
Release quotidienneRelease quotidienne
Release quotidienne
Alexandre RODIERE
 
Dev dev devs
Dev dev devsDev dev devs
Dev dev devs
Vincent Tollu
 
Symphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeureSymphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeure
Jonathan Bonzy
 
XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...
XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...
XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...
Publicis Sapient Engineering
 
CRaSH @ JUGSummerCamp 2012 - Quickie
CRaSH @ JUGSummerCamp 2012 - QuickieCRaSH @ JUGSummerCamp 2012 - Quickie
CRaSH @ JUGSummerCamp 2012 - Quickie
Arnaud Héritier
 

Tendances (20)

BBL - TDD pour les DevOps - Puppet
BBL - TDD pour les DevOps - PuppetBBL - TDD pour les DevOps - Puppet
BBL - TDD pour les DevOps - Puppet
 
Intégration continue transco
Intégration continue transcoIntégration continue transco
Intégration continue transco
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipeline
 
Intégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsIntégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec Jenkins
 
L'integration continue pour tous
L'integration continue pour tousL'integration continue pour tous
L'integration continue pour tous
 
XebiCon'17 : Kotlin, état de l'art - Benjamin Lacroix et Sergio Dos Santos
XebiCon'17 : Kotlin, état de l'art - Benjamin Lacroix et Sergio Dos SantosXebiCon'17 : Kotlin, état de l'art - Benjamin Lacroix et Sergio Dos Santos
XebiCon'17 : Kotlin, état de l'art - Benjamin Lacroix et Sergio Dos Santos
 
Tests automatisés java script
Tests automatisés java scriptTests automatisés java script
Tests automatisés java script
 
Integration continue et déploiement automatisé
Integration continue et déploiement automatiséIntegration continue et déploiement automatisé
Integration continue et déploiement automatisé
 
Déploiement PHP : de l'âge de pierre à nos jours.
Déploiement PHP : de l'âge de pierre à nos jours.Déploiement PHP : de l'âge de pierre à nos jours.
Déploiement PHP : de l'âge de pierre à nos jours.
 
Industrialisation PHP - Canal+
Industrialisation PHP - Canal+Industrialisation PHP - Canal+
Industrialisation PHP - Canal+
 
Integration continue - Introduction
Integration continue - IntroductionIntegration continue - Introduction
Integration continue - Introduction
 
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc DivadXebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
XebiCon'17 : Déploiement continu de modèle de Machine Learning - Loïc Divad
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
 
JCertif 2012 : Integration continue avec Jenkins
JCertif 2012 : Integration continue avec JenkinsJCertif 2012 : Integration continue avec Jenkins
JCertif 2012 : Integration continue avec Jenkins
 
Spring Batch - Julien Jakubowski - November 2010
Spring Batch - Julien Jakubowski - November 2010Spring Batch - Julien Jakubowski - November 2010
Spring Batch - Julien Jakubowski - November 2010
 
Release quotidienne
Release quotidienneRelease quotidienne
Release quotidienne
 
Dev dev devs
Dev dev devsDev dev devs
Dev dev devs
 
Symphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeureSymphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeure
 
XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...
XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...
XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...
 
CRaSH @ JUGSummerCamp 2012 - Quickie
CRaSH @ JUGSummerCamp 2012 - QuickieCRaSH @ JUGSummerCamp 2012 - Quickie
CRaSH @ JUGSummerCamp 2012 - Quickie
 

En vedette

Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-end
François Petitit
 
Human talks paris - OpenID Connect et FranceConnect - Francois Petitit - 7 ju...
Human talks paris - OpenID Connect et FranceConnect - Francois Petitit - 7 ju...Human talks paris - OpenID Connect et FranceConnect - Francois Petitit - 7 ju...
Human talks paris - OpenID Connect et FranceConnect - Francois Petitit - 7 ju...
François Petitit
 
Primer ejercicio Introducción a la Disciplina
Primer ejercicio Introducción a la DisciplinaPrimer ejercicio Introducción a la Disciplina
Primer ejercicio Introducción a la Disciplina
Miranchezka
 
Como crear y compartir un GoogleDoc
Como crear y compartir un GoogleDocComo crear y compartir un GoogleDoc
Como crear y compartir un GoogleDoc
Miranchezka
 
SomnathCity
SomnathCitySomnathCity
SomnathCity
shankypanky
 
Innovacion & Tecnología para Eventos Internacionales
Innovacion & Tecnología para Eventos Internacionales   Innovacion & Tecnología para Eventos Internacionales
Innovacion & Tecnología para Eventos Internacionales
alejandro saucedo
 
Why SMS Marketing?
Why SMS Marketing?Why SMS Marketing?
Why SMS Marketing?
Tina Goh
 
Museo mural diego_rivera
Museo mural diego_riveraMuseo mural diego_rivera
Museo mural diego_rivera
Miranchezka
 
Paris Web 2015 - France Connect et OpenId Connect
Paris Web 2015 - France Connect et OpenId ConnectParis Web 2015 - France Connect et OpenId Connect
Paris Web 2015 - France Connect et OpenId Connect
François Petitit
 
Ignite seoul 8회 12 천성권 혼나지 않는 남편으로 살기
Ignite seoul 8회 12 천성권 혼나지 않는 남편으로 살기Ignite seoul 8회 12 천성권 혼나지 않는 남편으로 살기
Ignite seoul 8회 12 천성권 혼나지 않는 남편으로 살기
Jinho Jung
 
서정대학교 애완동물학과 진로개발 수업 자료
서정대학교 애완동물학과 진로개발 수업 자료서정대학교 애완동물학과 진로개발 수업 자료
서정대학교 애완동물학과 진로개발 수업 자료
JaeUng Ha
 
L12 programmable+logic+devices+(pld)
L12 programmable+logic+devices+(pld)L12 programmable+logic+devices+(pld)
L12 programmable+logic+devices+(pld)
NAGASAI547
 
Oauth2 & OpenID Connect
Oauth2 & OpenID ConnectOauth2 & OpenID Connect
Oauth2 & OpenID Connect
Pascal Flamand
 
Código técnico de edificación
Código técnico de edificaciónCódigo técnico de edificación
Código técnico de edificación
thermor_spain
 
Viscosidad dinamica viscosidad cinematica
Viscosidad dinamica viscosidad cinematicaViscosidad dinamica viscosidad cinematica
Manejo de la disfagia
Manejo de la disfagiaManejo de la disfagia
Manejo de la disfagia
Guencho Diaz
 
Chickens & Eggs: Managing secrets in AWS with Hashicorp Vault
Chickens & Eggs: Managing secrets in AWS with Hashicorp VaultChickens & Eggs: Managing secrets in AWS with Hashicorp Vault
Chickens & Eggs: Managing secrets in AWS with Hashicorp Vault
Jeff Horwitz
 
Démystifions l'API-culture!
Démystifions l'API-culture!Démystifions l'API-culture!
Démystifions l'API-culture!
OCTO Technology Suisse
 
Architecture of the Hyperledger Blockchain Fabric - Christian Cachin - IBM Re...
Architecture of the Hyperledger Blockchain Fabric - Christian Cachin - IBM Re...Architecture of the Hyperledger Blockchain Fabric - Christian Cachin - IBM Re...
Architecture of the Hyperledger Blockchain Fabric - Christian Cachin - IBM Re...
Romeo Kienzler
 
Smart target - Cesim brošura
Smart target - Cesim brošuraSmart target - Cesim brošura
Smart target - Cesim brošura
Smart target
 

En vedette (20)

Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-end
 
Human talks paris - OpenID Connect et FranceConnect - Francois Petitit - 7 ju...
Human talks paris - OpenID Connect et FranceConnect - Francois Petitit - 7 ju...Human talks paris - OpenID Connect et FranceConnect - Francois Petitit - 7 ju...
Human talks paris - OpenID Connect et FranceConnect - Francois Petitit - 7 ju...
 
Primer ejercicio Introducción a la Disciplina
Primer ejercicio Introducción a la DisciplinaPrimer ejercicio Introducción a la Disciplina
Primer ejercicio Introducción a la Disciplina
 
Como crear y compartir un GoogleDoc
Como crear y compartir un GoogleDocComo crear y compartir un GoogleDoc
Como crear y compartir un GoogleDoc
 
SomnathCity
SomnathCitySomnathCity
SomnathCity
 
Innovacion & Tecnología para Eventos Internacionales
Innovacion & Tecnología para Eventos Internacionales   Innovacion & Tecnología para Eventos Internacionales
Innovacion & Tecnología para Eventos Internacionales
 
Why SMS Marketing?
Why SMS Marketing?Why SMS Marketing?
Why SMS Marketing?
 
Museo mural diego_rivera
Museo mural diego_riveraMuseo mural diego_rivera
Museo mural diego_rivera
 
Paris Web 2015 - France Connect et OpenId Connect
Paris Web 2015 - France Connect et OpenId ConnectParis Web 2015 - France Connect et OpenId Connect
Paris Web 2015 - France Connect et OpenId Connect
 
Ignite seoul 8회 12 천성권 혼나지 않는 남편으로 살기
Ignite seoul 8회 12 천성권 혼나지 않는 남편으로 살기Ignite seoul 8회 12 천성권 혼나지 않는 남편으로 살기
Ignite seoul 8회 12 천성권 혼나지 않는 남편으로 살기
 
서정대학교 애완동물학과 진로개발 수업 자료
서정대학교 애완동물학과 진로개발 수업 자료서정대학교 애완동물학과 진로개발 수업 자료
서정대학교 애완동물학과 진로개발 수업 자료
 
L12 programmable+logic+devices+(pld)
L12 programmable+logic+devices+(pld)L12 programmable+logic+devices+(pld)
L12 programmable+logic+devices+(pld)
 
Oauth2 & OpenID Connect
Oauth2 & OpenID ConnectOauth2 & OpenID Connect
Oauth2 & OpenID Connect
 
Código técnico de edificación
Código técnico de edificaciónCódigo técnico de edificación
Código técnico de edificación
 
Viscosidad dinamica viscosidad cinematica
Viscosidad dinamica viscosidad cinematicaViscosidad dinamica viscosidad cinematica
Viscosidad dinamica viscosidad cinematica
 
Manejo de la disfagia
Manejo de la disfagiaManejo de la disfagia
Manejo de la disfagia
 
Chickens & Eggs: Managing secrets in AWS with Hashicorp Vault
Chickens & Eggs: Managing secrets in AWS with Hashicorp VaultChickens & Eggs: Managing secrets in AWS with Hashicorp Vault
Chickens & Eggs: Managing secrets in AWS with Hashicorp Vault
 
Démystifions l'API-culture!
Démystifions l'API-culture!Démystifions l'API-culture!
Démystifions l'API-culture!
 
Architecture of the Hyperledger Blockchain Fabric - Christian Cachin - IBM Re...
Architecture of the Hyperledger Blockchain Fabric - Christian Cachin - IBM Re...Architecture of the Hyperledger Blockchain Fabric - Christian Cachin - IBM Re...
Architecture of the Hyperledger Blockchain Fabric - Christian Cachin - IBM Re...
 
Smart target - Cesim brošura
Smart target - Cesim brošuraSmart target - Cesim brošura
Smart target - Cesim brošura
 

Similaire à Paris Web 2015 - Atelier désendettement Javascript legacy

Industrialisation des développements logiciels
Industrialisation des développements logicielsIndustrialisation des développements logiciels
Industrialisation des développements logiciels
Sylvain Leroy
 
20081023 - Paris Vi Master STL TA - Initiation Maven
20081023 - Paris Vi Master STL TA - Initiation Maven20081023 - Paris Vi Master STL TA - Initiation Maven
20081023 - Paris Vi Master STL TA - Initiation Maven
Arnaud Héritier
 
Symphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeureSymphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeureMarc Nazarian
 
Industrialisez vos projets Php
Industrialisez vos projets Php Industrialisez vos projets Php
Industrialisez vos projets Php ALTER WAY
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
ENSIBS
 
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
vlabatut
 
20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven
Arnaud Héritier
 
La qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
La qualité logicielle et l'intégration continue - Cas concret du projet CytomineLa qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
La qualité logicielle et l'intégration continue - Cas concret du projet CytomineInterface ULg, LIEGE science park
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
Stéphane Liétard
 
Omnilog 2016 - Apéro techno : Rex Identicar sur l'intégration continue
Omnilog 2016 - Apéro techno : Rex Identicar sur l'intégration continueOmnilog 2016 - Apéro techno : Rex Identicar sur l'intégration continue
Omnilog 2016 - Apéro techno : Rex Identicar sur l'intégration continue
Xavier Callens
 
Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !
Cédric Leblond
 
Usine logicielle à Orange Labs
Usine logicielle à Orange LabsUsine logicielle à Orange Labs
Usine logicielle à Orange Labs
Emmanuel Hugonnet
 
Outils de gestion de projets
Outils de gestion de projetsOutils de gestion de projets
Outils de gestion de projets
ECAM Brussels Engineering School
 
20131024 qualité de code et sonar - mug lyon
20131024   qualité de code et sonar - mug lyon20131024   qualité de code et sonar - mug lyon
20131024 qualité de code et sonar - mug lyonClement Bouillier
 
La qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
La qualité logicielle et l'intégration continue - Cas concret du projet CytomineLa qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
La qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
Geeks Anonymes
 
Comment construire son laboratoire de tests mobiles avec HP Mobile Center
Comment construire son laboratoire de tests mobiles avec HP Mobile CenterComment construire son laboratoire de tests mobiles avec HP Mobile Center
Comment construire son laboratoire de tests mobiles avec HP Mobile Center
Guillaume Deshayes
 
Développer ou debugger ?
Développer ou debugger ? Développer ou debugger ?
Développer ou debugger ?
Microsoft
 
SharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerSharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerPhilippe Sentenac
 
Php sous Windows - webcamps Paris
Php sous Windows - webcamps ParisPhp sous Windows - webcamps Paris
Php sous Windows - webcamps ParisLeTesteur
 

Similaire à Paris Web 2015 - Atelier désendettement Javascript legacy (20)

Industrialisation des développements logiciels
Industrialisation des développements logicielsIndustrialisation des développements logiciels
Industrialisation des développements logiciels
 
20081023 - Paris Vi Master STL TA - Initiation Maven
20081023 - Paris Vi Master STL TA - Initiation Maven20081023 - Paris Vi Master STL TA - Initiation Maven
20081023 - Paris Vi Master STL TA - Initiation Maven
 
Symphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeureSymphonie pour PHP industrialisé en agilité majeure
Symphonie pour PHP industrialisé en agilité majeure
 
Industrialisez vos projets Php
Industrialisez vos projets Php Industrialisez vos projets Php
Industrialisez vos projets Php
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
Techdays 2011 : Développez en Java avec la plateforme Team Foundation Server ...
 
20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven
 
La qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
La qualité logicielle et l'intégration continue - Cas concret du projet CytomineLa qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
La qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
 
Normandy JUG integration Continue
Normandy JUG integration ContinueNormandy JUG integration Continue
Normandy JUG integration Continue
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
 
Omnilog 2016 - Apéro techno : Rex Identicar sur l'intégration continue
Omnilog 2016 - Apéro techno : Rex Identicar sur l'intégration continueOmnilog 2016 - Apéro techno : Rex Identicar sur l'intégration continue
Omnilog 2016 - Apéro techno : Rex Identicar sur l'intégration continue
 
Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !
 
Usine logicielle à Orange Labs
Usine logicielle à Orange LabsUsine logicielle à Orange Labs
Usine logicielle à Orange Labs
 
Outils de gestion de projets
Outils de gestion de projetsOutils de gestion de projets
Outils de gestion de projets
 
20131024 qualité de code et sonar - mug lyon
20131024   qualité de code et sonar - mug lyon20131024   qualité de code et sonar - mug lyon
20131024 qualité de code et sonar - mug lyon
 
La qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
La qualité logicielle et l'intégration continue - Cas concret du projet CytomineLa qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
La qualité logicielle et l'intégration continue - Cas concret du projet Cytomine
 
Comment construire son laboratoire de tests mobiles avec HP Mobile Center
Comment construire son laboratoire de tests mobiles avec HP Mobile CenterComment construire son laboratoire de tests mobiles avec HP Mobile Center
Comment construire son laboratoire de tests mobiles avec HP Mobile Center
 
Développer ou debugger ?
Développer ou debugger ? Développer ou debugger ?
Développer ou debugger ?
 
SharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerSharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation Server
 
Php sous Windows - webcamps Paris
Php sous Windows - webcamps ParisPhp sous Windows - webcamps Paris
Php sous Windows - webcamps Paris
 

Paris Web 2015 - Atelier désendettement Javascript legacy

  • 1. 1 Tél : +33 (0)1 58 56 10 00 Fax : +33 (0)1 58 56 10 01 www.octo.com© OCTO 2015 50, avenue des Champs-Elysées 75008 Paris - FRANCE Atelier Paris Web 2015 Michael AKBARALY @Chehcheucheh makbaraly@octo.com François PETITIT @francoispetitit fpetitit@octo.com
  • 2. 2 Présentation Michael AKBARALY François PETITIT OCTO Technology Consultants chez Canal+, FranceConnect… Ref card « Tests sur tous les fronts » http://blog.octo.com
  • 3. 3 Quand on commence un projet de zéro… Usine de Build Build Compiler Déposer Référentiel binaires Référentiel de tâches et anomalies Documentation & Indicateurs Serveur d’intégration continue BuildGestionnaire de sources Build Local Notifications Exécuter les tests Vérifier la qualité du code Documenter Récupérer les dépendances Packager
  • 4. 4 Travailler sur du legacy : les livres de référence
  • 5. 5 Du code ‘legacy’, c’est quoi?
  • 6. 6 Eco-système Javascript: vous n’avez pas d’excuse!
  • 9. 9
  • 10. 10 Les grandes étapes Faire tourner l’application Faire une analyse statique Nombre de ligne de codes par fichiers Couverture de code par les tests Calcul de la complexité cyclomatique … Regarder le code à la main pour voir la tête du code Code non formaté ! On n’a pas de test ! On n’a pas de gestion des ressources front-end ! … Démarche pour un audit express
  • 11. 11 Objectif Visualiser certaines métriques sur le code : couverture par les tests, complexité cyclomatique, nombre de lignes de code… Comment Avec Plato.js : https://github.com/es-analysis/plato Npm install –g plato Côté back-end : plato -d report -x node_modules/ index.js Côté front-end : plato -r -d report -x node_modules/ app/scripts Analyse statique de code
  • 12. 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 + +
  • 13. 13 Modification Avantages Criticité Complexité Mettre en place un build automatisé Gulp pour le front • Mettre en place des tests unitaires côté front- end • Outillage JS dédié pour optimisation des ressources +++ ++ Automatiser les tests • maintenabilité +++ + Améliorations – axe build
  • 14. 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
  • 15. 15 Formater le code Mettre en place un outil de « linting » de code Mettre en place une couverture de tests minimale D’abord côté API Puis côté front-end Supprimer le code mort Supprimer les duplications de code En vérifiant la non-régression via des tests unitaires Feuille de route
  • 16. 16 Objectif Rendre le code plus facile à lire Comment faire La fonction de formatage de notre IDE (WebStorm + ESLint) ? Un outil en ligne de commande : JS-Beautify : https://www.npmjs.com/package/js-beautify Npm install –g js-beautify js-beautify -f ./app/modules/**/* -r Formatage de code JavaScript
  • 17. 17 Comment le rendre pérenne Intégration de ESLint au build Linting
  • 18. 18 Objectif Avoir un harnais de tests de non-régressions sur l’API pour pouvoir la faire évoluer sereinement Comment Mettre en place des tests de non-regression HTTP avec SuperTest (https://github.com/visionmedia/supertest ) Bouchonner les données de base Ajouter ces tests au build (attention : nécessite de déployer l’application) Le code Branche « api-integration-tests » https://github.com/octo-web-front-end-tribe/ka-ching/tree/api-integration- tests Tester l’API en boîte noire
  • 19. 19 GET /api/friends/ Prends en entrée l’id de l’utilisateur courant Renvoie la liste de ses amis Les étapes : Mettre en place un jeu de données significatif pour l’API à tester Implémenter le test Automatiser l’exécution du test à chaque build Exemple : l’API à tester Supertest Should
  • 20. 20 Objectifs Mieux visualiser comment fonctionne l’application au runtime Supprimer 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
  • 21. 21 Objectifs Poser un harnais de test pour pouvoir ensuite modifier le code front-end Comment Avec PhantomCSS https://github.com/Huddle/PhantomCSS Exemple https://github.com/octo-web-front-end-tribe/ka-ching-phantomcss Ajouter de la non régression sur l’IHM en mode boîte noire
  • 22. 22 Objectif Détecter le code dupliqué Supprimer sans risque les duplications Comment ? JSInspect pour analyser le code et détecter les duplications Mise en place de tests unitaires pour sécuriser les appels aux fonctions dupliqués Refactoring pour supprimer les doublons S’assurer que les tests fonctionnent toujours Supprimer le code dupliqué