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
http://bit.ly/pw-legacy
https://github.com/octo-web-front-end-tribe/ka-ching
9
10
Les grandes étapes
Faire tourner l’application
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 !
…
Faire une analyse statique
Détection de code dupliqué
Calcul de la complexité cyclomatique
…
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
• 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
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
Avoir des diffs utiles
Comment faire
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
Linting
Objectif
Détecter des erreurs de code potentielles (ex: inner-declaration,…)
Mettre en place des règles de code en plus du formatage
Comment
Mettre en place ESLint
http://eslint.org/
Intégrer ESLint au build
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
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
20
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
21
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é
22
MERCI
Atelier Paris Web
2015

Contenu connexe

Tendances

Jenkins - Les jeudis de la découverte
Jenkins - Les jeudis de la découverteJenkins - Les jeudis de la découverte
Jenkins - Les jeudis de la découverte
Stephane Couzinier
 
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
 
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
 
L'integration continue pour tous
L'integration continue pour tousL'integration continue pour tous
L'integration continue pour tous
Aurelien Navarre
 
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
 
TDD for DevOps with Chef
TDD for DevOps with ChefTDD for DevOps with Chef
TDD for DevOps with Chef
Olivier BAZOUD
 
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
 
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
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipeline
Nicolas wallerand
 
Le développement web : tour d'horizon
Le développement web : tour d'horizonLe développement web : tour d'horizon
Le développement web : tour d'horizon
Microsoft
 
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
 
Intégration continue transco
Intégration continue transcoIntégration continue transco
Intégration continue transcolaurent_opnworks
 
Jenkins - perdre du temps pour en gagner
Jenkins - perdre du temps pour en gagnerJenkins - perdre du temps pour en gagner
Jenkins - perdre du temps pour en gagner
Geeks Anonymes
 
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
 
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIsPetit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
OCTO Technology
 
Comment écrire du code testable ?
Comment écrire du code testable ?Comment écrire du code testable ?
Comment écrire du code testable ?
Fou Cha
 
What's Next Replay - IC / Jenkins
What's Next Replay - IC / JenkinsWhat's Next Replay - IC / Jenkins
What's Next Replay - IC / Jenkins
ZenikaOuest
 
Industrialisation bar camp2010
Industrialisation bar camp2010Industrialisation bar camp2010
Industrialisation bar camp2010Lushkah911
 
XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...
XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...
XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...
Publicis Sapient Engineering
 
Introduction à Zend Framework
Introduction à Zend FrameworkIntroduction à Zend Framework
Introduction à Zend Framework
Gauthier Delamarre
 

Tendances (20)

Jenkins - Les jeudis de la découverte
Jenkins - Les jeudis de la découverteJenkins - Les jeudis de la découverte
Jenkins - Les jeudis de la découverte
 
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
 
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.
 
L'integration continue pour tous
L'integration continue pour tousL'integration continue pour tous
L'integration continue pour tous
 
BBL - TDD pour les DevOps - Puppet
BBL - TDD pour les DevOps - PuppetBBL - TDD pour les DevOps - Puppet
BBL - TDD pour les DevOps - Puppet
 
TDD for DevOps with Chef
TDD for DevOps with ChefTDD for DevOps with Chef
TDD for DevOps with Chef
 
Spring Batch - Julien Jakubowski - November 2010
Spring Batch - Julien Jakubowski - November 2010Spring Batch - Julien Jakubowski - November 2010
Spring Batch - Julien Jakubowski - November 2010
 
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
 
Chaine de production pipeline
Chaine de production   pipelineChaine de production   pipeline
Chaine de production pipeline
 
Le développement web : tour d'horizon
Le développement web : tour d'horizonLe développement web : tour d'horizon
Le développement web : tour d'horizon
 
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
 
Intégration continue transco
Intégration continue transcoIntégration continue transco
Intégration continue transco
 
Jenkins - perdre du temps pour en gagner
Jenkins - perdre du temps pour en gagnerJenkins - perdre du temps pour en gagner
Jenkins - perdre du temps pour en gagner
 
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...
 
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIsPetit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
 
Comment écrire du code testable ?
Comment écrire du code testable ?Comment écrire du code testable ?
Comment écrire du code testable ?
 
What's Next Replay - IC / Jenkins
What's Next Replay - IC / JenkinsWhat's Next Replay - IC / Jenkins
What's Next Replay - IC / Jenkins
 
Industrialisation bar camp2010
Industrialisation bar camp2010Industrialisation bar camp2010
Industrialisation bar camp2010
 
XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...
XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...
XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...
 
Introduction à Zend Framework
Introduction à Zend FrameworkIntroduction à Zend Framework
Introduction à Zend Framework
 

En vedette

Une Munite Pour Allah
Une Munite Pour AllahUne Munite Pour Allah
Une Munite Pour Allah
Islamiculture
 
Je 2009 prier devant le saint sacrement
Je 2009 prier devant le saint sacrementJe 2009 prier devant le saint sacrement
Je 2009 prier devant le saint sacrement
lefilsduforgeron
 
Les villages hakkaetles tulous (Chine)
Les villages hakkaetles tulous (Chine)Les villages hakkaetles tulous (Chine)
Les villages hakkaetles tulous (Chine)
SIBIOS
 
Los moocs
Los moocsLos moocs
LA EXPERIENCIA TUTORIAL EN LA FACULTAD DE INFORMÁTICA 2013
LA EXPERIENCIA TUTORIAL EN LA FACULTAD DE INFORMÁTICA 2013LA EXPERIENCIA TUTORIAL EN LA FACULTAD DE INFORMÁTICA 2013
LA EXPERIENCIA TUTORIAL EN LA FACULTAD DE INFORMÁTICA 2013
infounlp
 
Présentation boreales
Présentation borealesPrésentation boreales
Présentation borealesdsakhi
 
Talentys Webinar Rh2.0 19 Mai 7 Pouvoirs 2.0 Du Candidat
Talentys Webinar Rh2.0 19 Mai 7 Pouvoirs 2.0 Du CandidatTalentys Webinar Rh2.0 19 Mai 7 Pouvoirs 2.0 Du Candidat
Talentys Webinar Rh2.0 19 Mai 7 Pouvoirs 2.0 Du Candidat
Elise Carbone
 
Festin gastronomico 2014
Festin gastronomico 2014Festin gastronomico 2014
Festin gastronomico 2014
Le Grand Journal du Mexique
 
Resolution generale 97_congres
Resolution generale 97_congresResolution generale 97_congres
Resolution generale 97_congres
Hélène GARIDEL
 
Manual de conexion
Manual de conexionManual de conexion
Manual de conexion
Jorge Humberto Donato Monreal
 
HandiArty mag
HandiArty magHandiArty mag
HandiArty mag
handiarty
 
Convergence 84 serge_gauvin_photo
Convergence 84 serge_gauvin_photoConvergence 84 serge_gauvin_photo
Convergence 84 serge_gauvin_photo
sgauvin
 
Paris powerpoint
Paris powerpointParis powerpoint
Paris powerpoint
MissCairnsMFL
 
Nouveau présentation microsoft power point
Nouveau présentation microsoft power pointNouveau présentation microsoft power point
Nouveau présentation microsoft power pointMohamed Moussaid
 
Google x veut révolutionner la médecine
Google x veut révolutionner la médecine Google x veut révolutionner la médecine
Google x veut révolutionner la médecine
pierro69
 
Robles enriquez
Robles enriquezRobles enriquez
Comment récupérer des photos supprimées de canon eos rebel
Comment récupérer des photos supprimées de canon eos rebelComment récupérer des photos supprimées de canon eos rebel
Comment récupérer des photos supprimées de canon eos rebel
Robin
 
Genesis identificacion y uso de los suelos mexico4
Genesis identificacion y uso de los suelos mexico4Genesis identificacion y uso de los suelos mexico4
Genesis identificacion y uso de los suelos mexico4
Emanuel Flores
 

En vedette (20)

Une Munite Pour Allah
Une Munite Pour AllahUne Munite Pour Allah
Une Munite Pour Allah
 
Canada 2013
Canada  2013Canada  2013
Canada 2013
 
Je 2009 prier devant le saint sacrement
Je 2009 prier devant le saint sacrementJe 2009 prier devant le saint sacrement
Je 2009 prier devant le saint sacrement
 
Les villages hakkaetles tulous (Chine)
Les villages hakkaetles tulous (Chine)Les villages hakkaetles tulous (Chine)
Les villages hakkaetles tulous (Chine)
 
Los moocs
Los moocsLos moocs
Los moocs
 
LA EXPERIENCIA TUTORIAL EN LA FACULTAD DE INFORMÁTICA 2013
LA EXPERIENCIA TUTORIAL EN LA FACULTAD DE INFORMÁTICA 2013LA EXPERIENCIA TUTORIAL EN LA FACULTAD DE INFORMÁTICA 2013
LA EXPERIENCIA TUTORIAL EN LA FACULTAD DE INFORMÁTICA 2013
 
Présentation boreales
Présentation borealesPrésentation boreales
Présentation boreales
 
Talentys Webinar Rh2.0 19 Mai 7 Pouvoirs 2.0 Du Candidat
Talentys Webinar Rh2.0 19 Mai 7 Pouvoirs 2.0 Du CandidatTalentys Webinar Rh2.0 19 Mai 7 Pouvoirs 2.0 Du Candidat
Talentys Webinar Rh2.0 19 Mai 7 Pouvoirs 2.0 Du Candidat
 
Festin gastronomico 2014
Festin gastronomico 2014Festin gastronomico 2014
Festin gastronomico 2014
 
Resolution generale 97_congres
Resolution generale 97_congresResolution generale 97_congres
Resolution generale 97_congres
 
Manual de conexion
Manual de conexionManual de conexion
Manual de conexion
 
HandiArty mag
HandiArty magHandiArty mag
HandiArty mag
 
Convergence 84 serge_gauvin_photo
Convergence 84 serge_gauvin_photoConvergence 84 serge_gauvin_photo
Convergence 84 serge_gauvin_photo
 
Cr 07052012
Cr 07052012Cr 07052012
Cr 07052012
 
Paris powerpoint
Paris powerpointParis powerpoint
Paris powerpoint
 
Nouveau présentation microsoft power point
Nouveau présentation microsoft power pointNouveau présentation microsoft power point
Nouveau présentation microsoft power point
 
Google x veut révolutionner la médecine
Google x veut révolutionner la médecine Google x veut révolutionner la médecine
Google x veut révolutionner la médecine
 
Robles enriquez
Robles enriquezRobles enriquez
Robles enriquez
 
Comment récupérer des photos supprimées de canon eos rebel
Comment récupérer des photos supprimées de canon eos rebelComment récupérer des photos supprimées de canon eos rebel
Comment récupérer des photos supprimées de canon eos rebel
 
Genesis identificacion y uso de los suelos mexico4
Genesis identificacion y uso de los suelos mexico4Genesis identificacion y uso de los suelos mexico4
Genesis identificacion y uso de los suelos mexico4
 

Similaire à Paris Web 2015 - Atelier desendettement javascript

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
 
Industrialisation des développements logiciels
Industrialisation des développements logicielsIndustrialisation des développements logiciels
Industrialisation des développements logiciels
Sylvain Leroy
 
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
 
Industrialisation PHP - Canal+
Industrialisation PHP - Canal+Industrialisation PHP - Canal+
Industrialisation PHP - Canal+
ekino
 
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
 
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
 
Industrialisez vos projets Php
Industrialisez vos projets Php Industrialisez vos projets Php
Industrialisez vos projets Php ALTER WAY
 
Usine logicielle à Orange Labs
Usine logicielle à Orange LabsUsine logicielle à Orange Labs
Usine logicielle à Orange Labs
Emmanuel Hugonnet
 
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
 
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
vincent aniort
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
Stéphane Liétard
 
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
 
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
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
Francois ANDRE
 
20081008 - Tours Jug - Apache Maven
20081008  - Tours Jug - Apache Maven20081008  - Tours Jug - Apache Maven
20081008 - Tours Jug - Apache Maven
Arnaud Héritier
 
ASP.NET MVC 6
ASP.NET MVC 6ASP.NET MVC 6
ASP.NET MVC 6
Microsoft
 
SharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerSharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerPhilippe Sentenac
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
Arnaud Héritier
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Cellenza
 

Similaire à Paris Web 2015 - Atelier desendettement javascript (20)

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
 
Industrialisation des développements logiciels
Industrialisation des développements logicielsIndustrialisation des développements logiciels
Industrialisation des développements logiciels
 
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
 
Industrialisation PHP - Canal+
Industrialisation PHP - Canal+Industrialisation PHP - Canal+
Industrialisation PHP - Canal+
 
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...
 
20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven
 
Industrialisez vos projets Php
Industrialisez vos projets Php Industrialisez vos projets Php
Industrialisez vos projets Php
 
Usine logicielle à Orange Labs
Usine logicielle à Orange LabsUsine logicielle à Orange Labs
Usine logicielle à Orange Labs
 
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
 
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
 
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 ...
 
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 !
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
 
Normandy JUG integration Continue
Normandy JUG integration ContinueNormandy JUG integration Continue
Normandy JUG integration Continue
 
20081008 - Tours Jug - Apache Maven
20081008  - Tours Jug - Apache Maven20081008  - Tours Jug - Apache Maven
20081008 - Tours Jug - Apache Maven
 
ASP.NET MVC 6
ASP.NET MVC 6ASP.NET MVC 6
ASP.NET MVC 6
 
SharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation ServerSharePoint 2010 & Team Foundation Server
SharePoint 2010 & Team Foundation Server
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1
 

Paris Web 2015 - Atelier desendettement javascript

  • 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 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 ! … Faire une analyse statique Détection de code dupliqué Calcul de la complexité cyclomatique … 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 • 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
  • 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 Avoir des diffs utiles Comment faire 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 Linting Objectif Détecter des erreurs de code potentielles (ex: inner-declaration,…) Mettre en place des règles de code en plus du formatage Comment Mettre en place ESLint http://eslint.org/ Intégrer ESLint au build
  • 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 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
  • 20. 20 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
  • 21. 21 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é