Paris Web 2015 - Atelier désendettement Javascript legacyFrançois Petitit
par Michael Akbaraly et François Petitit - OCTO Technology
Vous avez récupéré un projet JavaScript de plusieurs milliers de lignes, on vous demande des évolutions et des corrections de bugs, et rien ne va.
Code illisible, régressions en pagaille, structure des répertoires incompréhensibles : vous ne savez pas par où commencer !
Au long des 90 minutes de cet atelier, nous vous proposons de découvrir les techniques et les outils qui vont vous sauver la vie via des travaux pratiques de code JavaScript côté back-end avec NodeJS, et côté front-end avec AngularJS.
Débutants ou ayant déjà une connaissance de ces technologies sont les bienvenus. Les travaux pratiques seront disponibles si vous souhaitez coder vous-mêmes pendant l'atelier.
Intégration Continue PHP avec Jenkins CIHugo Hamon
Comment assurer le suivi qualite du code source d'une application web? Ce n'est pas une tache aisée ! C’est d’autant plus vrai que PHP est encore considéré aujourd'hui comme un langage peu professionnel. PHP est pourtant un langage dont l'outillage n'a rien a envier a l'ensemble de ses concurrents. L'objectif de cette conférence est de présenter les bonnes pratiques à adopter ainsi que les différents outils a mettre en oeuvre afin de contrôler la qualité d'un projet PHP au quotidien. Un focus particulier sera porté sur la plateforme d'intégration continue Jenkins, les tests unitaires ou bien encore la récupération et l'interprétation des métriques collectées.
Jenkins Workflow plugin lets you write Jenkins jobs as pipelines using the Groovy programming language
Talk given in french at the Lyon JUG - 15/12/2015
Paris Web 2015 - Atelier désendettement Javascript legacyFrançois Petitit
par Michael Akbaraly et François Petitit - OCTO Technology
Vous avez récupéré un projet JavaScript de plusieurs milliers de lignes, on vous demande des évolutions et des corrections de bugs, et rien ne va.
Code illisible, régressions en pagaille, structure des répertoires incompréhensibles : vous ne savez pas par où commencer !
Au long des 90 minutes de cet atelier, nous vous proposons de découvrir les techniques et les outils qui vont vous sauver la vie via des travaux pratiques de code JavaScript côté back-end avec NodeJS, et côté front-end avec AngularJS.
Débutants ou ayant déjà une connaissance de ces technologies sont les bienvenus. Les travaux pratiques seront disponibles si vous souhaitez coder vous-mêmes pendant l'atelier.
Intégration Continue PHP avec Jenkins CIHugo Hamon
Comment assurer le suivi qualite du code source d'une application web? Ce n'est pas une tache aisée ! C’est d’autant plus vrai que PHP est encore considéré aujourd'hui comme un langage peu professionnel. PHP est pourtant un langage dont l'outillage n'a rien a envier a l'ensemble de ses concurrents. L'objectif de cette conférence est de présenter les bonnes pratiques à adopter ainsi que les différents outils a mettre en oeuvre afin de contrôler la qualité d'un projet PHP au quotidien. Un focus particulier sera porté sur la plateforme d'intégration continue Jenkins, les tests unitaires ou bien encore la récupération et l'interprétation des métriques collectées.
Jenkins Workflow plugin lets you write Jenkins jobs as pipelines using the Groovy programming language
Talk given in french at the Lyon JUG - 15/12/2015
Android, Spring, Gradle et de nombreux autres projets apportent leur soutien au langage Kotlin. Fin 2017, Kotlin tient-il ses promesses ?
Retour d’expérience sur le langage, ses avantages et inconvénients sur un projet Mobile, un projet Back et bien plus.
Déploiement PHP : de l'âge de pierre à nos jours.Amélie DUVERNET
Aujourd'hui, le terme "déploiement" est un incontournable dans le métier des devOps. Comment en sommes-nous arrivés à intégrer au mieux les mises en prod ? Faisons un bref historique pour ensuite terminer sur les nouvelles techniques de déploiement de nos applications PHP et leur mise en place dans l'intégration continue.
Plutôt que de parler CI d'entreprise et de rentrer dans les détails de Jenkins et du workflow typique d'un équipe de dév, pourquoi ne pas déjà aborder toutes les bonnes pratiques et méthodologies à employer pour soi-même créer un produit testé et fiable ? Bienvenue dans l'intégration continue pour tous !
Le Test Driven Infrastructure, c'est un peu le TDD pour les projets DevOps. Il va vous permettre de tester votre infrastructure unitairement, de bout en bout et à chaque changement.
Le Test Driven Infrastructure, c'est un peu le TDD pour les projets DevOps. Il va vous permettre de tester votre infrastructure unitairement, de bout en bout et à chaque changement.
Lors de ce Hand's on Lab, nous mettrons en oeuvre une infrastructure avec Chef ainsi que les tests associés.
Github: https://github.com/obazoud/devoxx-tdd-for-devops
Symphonie pour PHP industrialisé en agilité majeureJonathan Bonzy
Présentation pour l'Agile Grenoble 2011
Avoir des millions d'amis, comparer des millions d'offres ou publier des millions de news sont autant d’exemples d’applications écrites en PHP. Ce langage de la “programmation pour les nuls”, qui permet tous les écarts, reste pourtant un choix privilégié pour les solutions web. Avec les bons outils et les bonnes pratiques, ce langage est modulable, testable et facilement livrable. Au travers d’une approche technique montrant par l’exemple quels instruments choisir, découvrez comment jouer la partition d’une symphonie pour PHP industrialisé en agilité majeure.
Au programme:
- Dégager un boilerplate d’un projet PHP ou comment ne pas tout jeter à l’arrivée
- Reprendre la main sur leur projet frontend et avoir une stratégie de refactoring par les tests
“Not only working software, but also well-crafted software” - Manifesto for Software Craftsmanship
"De nos jours, faire du développement web nécessite de connaître une quantité incroyable de technologies, frameworks et librairies.
Nous vous proposons de faire un tour d’horizon du web d’aujourd’hui. Nous parlerons backend, frontend et nous évoquerons aussi le futur.
Si vous voulez savoir où en est le web sans des heures de recherche, vous êtes au bon endroit ! "
De plus en plus d’initiatives Data Science sont rendues possibles grâce à la mise en place de DataLakes. Les modèles de Machine Learning inclus dans ces projets sont, comme toute application, sujets à évolutions. Le suivi de ces évolutions peut-il être automatisé ? Les standards de déploiement pour ces applications sont-ils toujours de rigueur ?
Lors de ce slot nous présenterons différentes pistes pour réconcilier Continuous Delivery et Machine Learning.
...par Dimitri Durieux (CETIC) le 23 septembre 2015.
Jenkins est un outil open source d'automatisation de tâches et d'intégration continue, relativement facile à mettre en oeuvre, et qui permet de gagner du temps sur toutes les étapes automatiques de la production de logiciel : build, lancement de tests unitaire, qualité de code...
Un bon outil à connaître et à installer tôt, pour gagner du temps ensuite !
Nous vous proposons un retour d’expérience sur nos choix d’organisation axés autour de la productivité. Notre challenge : rendre une start-up adaptable au changement. Nos objectifs : être efficace pour développer des services, les mettre en production, les faire évoluer et recommencer.
Cette présentation illustrera les moyens organisationnels et techniques qui permettent à chaque membre du projet d’être capable d’intervenir sur l’ensemble des services développés. Nous aborderons entre autres l’agilité, l’infra-as-code (Terraform, AWS), le JavaScript moderne (ES2017, typage statique avec Flow, react native), l’approche mono-repository et la sécurité.
Nous expliquerons pourquoi nous avons fait ces choix et les difficultés que nous avons rencontrées.
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIsOCTO Technology
Depuis deux ans, une nouvelle vague technologique submerge le paysage des applications Web : les architectures MV* côté client.
L’écosystème Web, enfin mature, offre l’opportunité d’avoir des interfaces riches et une meilleure expérience utilisateur grâce à la génération des écrans et la gestion des interactions côté client. En ne gérant plus l’affichage mais uniquement l’envoi des données brutes, le serveur se concentre sur des APIs métier mutualisables avec des applications mobiles notamment.
Venez découvrir au travers d’un retour d’expérience commun entre OCTO et ING Direct, acteur majeur de la banque en ligne en France, la réalisation d’une des toutes premières WebApp mobile multi-plateformes dans le milieu bancaire reposant sur ces nouvelles architectures Web.
Compte-rendu du petit-déjeuner : http://bit.ly/1g2nEnU
(Slides de la présentation à la conférence Agile France 2010)
Vous avez lu la cheatsheet de JMock, la documentation d’EasyMock, la FAQ de Mockito et pourtant, la moitié de votre code n’est toujours pas couvert. Vous n’arrivez juste pas à poser de tests dessus.
Votre code est intestable.
L’objectif de la session est de montrer pourquoi certains codes ne peuvent pas être testés et ce qui peut être fait pour y remédier. Nous verrons ainsi pourquoi il vaut mieux respecter la loi de Demeter et faire de l’injection de dépendances. Nous aborderons également les problèmes des classes avec trop de responsabilités et des états globaux.
Le Zend Framework s'est rapidement imposé comme un framework majeur de l'écosystème PHP. Sa prise en main peut sembler parfois intimidante, et pourtant démarrer un projet dans les règles de l'art ne prend que quelques minutes.
Cette présentation vous permettra de vous familiariser avec les concepts clé de Zend Framework, et vous guidera pour vos tous premiers pas avec cet excellent framework !
Android, Spring, Gradle et de nombreux autres projets apportent leur soutien au langage Kotlin. Fin 2017, Kotlin tient-il ses promesses ?
Retour d’expérience sur le langage, ses avantages et inconvénients sur un projet Mobile, un projet Back et bien plus.
Déploiement PHP : de l'âge de pierre à nos jours.Amélie DUVERNET
Aujourd'hui, le terme "déploiement" est un incontournable dans le métier des devOps. Comment en sommes-nous arrivés à intégrer au mieux les mises en prod ? Faisons un bref historique pour ensuite terminer sur les nouvelles techniques de déploiement de nos applications PHP et leur mise en place dans l'intégration continue.
Plutôt que de parler CI d'entreprise et de rentrer dans les détails de Jenkins et du workflow typique d'un équipe de dév, pourquoi ne pas déjà aborder toutes les bonnes pratiques et méthodologies à employer pour soi-même créer un produit testé et fiable ? Bienvenue dans l'intégration continue pour tous !
Le Test Driven Infrastructure, c'est un peu le TDD pour les projets DevOps. Il va vous permettre de tester votre infrastructure unitairement, de bout en bout et à chaque changement.
Le Test Driven Infrastructure, c'est un peu le TDD pour les projets DevOps. Il va vous permettre de tester votre infrastructure unitairement, de bout en bout et à chaque changement.
Lors de ce Hand's on Lab, nous mettrons en oeuvre une infrastructure avec Chef ainsi que les tests associés.
Github: https://github.com/obazoud/devoxx-tdd-for-devops
Symphonie pour PHP industrialisé en agilité majeureJonathan Bonzy
Présentation pour l'Agile Grenoble 2011
Avoir des millions d'amis, comparer des millions d'offres ou publier des millions de news sont autant d’exemples d’applications écrites en PHP. Ce langage de la “programmation pour les nuls”, qui permet tous les écarts, reste pourtant un choix privilégié pour les solutions web. Avec les bons outils et les bonnes pratiques, ce langage est modulable, testable et facilement livrable. Au travers d’une approche technique montrant par l’exemple quels instruments choisir, découvrez comment jouer la partition d’une symphonie pour PHP industrialisé en agilité majeure.
Au programme:
- Dégager un boilerplate d’un projet PHP ou comment ne pas tout jeter à l’arrivée
- Reprendre la main sur leur projet frontend et avoir une stratégie de refactoring par les tests
“Not only working software, but also well-crafted software” - Manifesto for Software Craftsmanship
"De nos jours, faire du développement web nécessite de connaître une quantité incroyable de technologies, frameworks et librairies.
Nous vous proposons de faire un tour d’horizon du web d’aujourd’hui. Nous parlerons backend, frontend et nous évoquerons aussi le futur.
Si vous voulez savoir où en est le web sans des heures de recherche, vous êtes au bon endroit ! "
De plus en plus d’initiatives Data Science sont rendues possibles grâce à la mise en place de DataLakes. Les modèles de Machine Learning inclus dans ces projets sont, comme toute application, sujets à évolutions. Le suivi de ces évolutions peut-il être automatisé ? Les standards de déploiement pour ces applications sont-ils toujours de rigueur ?
Lors de ce slot nous présenterons différentes pistes pour réconcilier Continuous Delivery et Machine Learning.
...par Dimitri Durieux (CETIC) le 23 septembre 2015.
Jenkins est un outil open source d'automatisation de tâches et d'intégration continue, relativement facile à mettre en oeuvre, et qui permet de gagner du temps sur toutes les étapes automatiques de la production de logiciel : build, lancement de tests unitaire, qualité de code...
Un bon outil à connaître et à installer tôt, pour gagner du temps ensuite !
Nous vous proposons un retour d’expérience sur nos choix d’organisation axés autour de la productivité. Notre challenge : rendre une start-up adaptable au changement. Nos objectifs : être efficace pour développer des services, les mettre en production, les faire évoluer et recommencer.
Cette présentation illustrera les moyens organisationnels et techniques qui permettent à chaque membre du projet d’être capable d’intervenir sur l’ensemble des services développés. Nous aborderons entre autres l’agilité, l’infra-as-code (Terraform, AWS), le JavaScript moderne (ES2017, typage statique avec Flow, react native), l’approche mono-repository et la sécurité.
Nous expliquerons pourquoi nous avons fait ces choix et les difficultés que nous avons rencontrées.
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIsOCTO Technology
Depuis deux ans, une nouvelle vague technologique submerge le paysage des applications Web : les architectures MV* côté client.
L’écosystème Web, enfin mature, offre l’opportunité d’avoir des interfaces riches et une meilleure expérience utilisateur grâce à la génération des écrans et la gestion des interactions côté client. En ne gérant plus l’affichage mais uniquement l’envoi des données brutes, le serveur se concentre sur des APIs métier mutualisables avec des applications mobiles notamment.
Venez découvrir au travers d’un retour d’expérience commun entre OCTO et ING Direct, acteur majeur de la banque en ligne en France, la réalisation d’une des toutes premières WebApp mobile multi-plateformes dans le milieu bancaire reposant sur ces nouvelles architectures Web.
Compte-rendu du petit-déjeuner : http://bit.ly/1g2nEnU
(Slides de la présentation à la conférence Agile France 2010)
Vous avez lu la cheatsheet de JMock, la documentation d’EasyMock, la FAQ de Mockito et pourtant, la moitié de votre code n’est toujours pas couvert. Vous n’arrivez juste pas à poser de tests dessus.
Votre code est intestable.
L’objectif de la session est de montrer pourquoi certains codes ne peuvent pas être testés et ce qui peut être fait pour y remédier. Nous verrons ainsi pourquoi il vaut mieux respecter la loi de Demeter et faire de l’injection de dépendances. Nous aborderons également les problèmes des classes avec trop de responsabilités et des états globaux.
Le Zend Framework s'est rapidement imposé comme un framework majeur de l'écosystème PHP. Sa prise en main peut sembler parfois intimidante, et pourtant démarrer un projet dans les règles de l'art ne prend que quelques minutes.
Cette présentation vous permettra de vous familiariser avec les concepts clé de Zend Framework, et vous guidera pour vos tous premiers pas avec cet excellent framework !
LA EXPERIENCIA TUTORIAL EN LA FACULTAD DE INFORMÁTICA 2013infounlp
Primer Encuentro Institucional de Tutores y Equipos de Orientación Académica de la UNLP.
Javier Díaz, Claudia Queiruga, Diego Vilches Antao, Ana Ungaro, Celeste Felipe, Soledad Gómez, Isabel Kimura.
Présentation de Maven et de son utilisation en entreprise dans le cadre du Ch'ti JUG, le 15 juin 2009.
Pourquoi Maven ? Pourquoi l'adopter ? Les bonnes et mauvaise pratiques. Son avenir ...
Ma stack d'outils agiles, tout un programme !Cédric Leblond
Pour le développement, nous utilisons tous des outils. Leur nombre et surtout leur intégration peuvent même devenir un vrai casse tête. Surtout s'il vous faut supporter des technologies parfois très distinctes ... Je vous propose de monter une plateforme entièrement intégrée et flexible avec Visual Studio Online. Intégrée car toutes les données y sont disponibles. Flexible car ses API permettent de l'étendre avec vos outils agiles préférés (Trello, Zendesk, Jenkins, Jira, ...) et de l’adapter ainsi à vos besoins
ASP.NET MVC 6 est la prochaine version du Framework MVC de .NET. Il a pour vocation de tirer partie de la puissance de .NET tout en mettant de côté l'historique parfois pesant d'ASP.NET. Venez découvrir en quoi ASP.NET MVC 6 est un framework MVC moderne et les principales nouveautés de cette nouvelle version majeure.
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
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é