Industrialisation des
développements en
JavaScript
Éric Bellemon
@haklop
Alter Way
Solutions Linux 2014

• Écrire du code
• Tester son code
• Intégration continue
• Déploiement
2
Industrialisation en JavaScript

Écrire du code
3

• Normes d’écriture commune à
toute l’équipe
• indentation
• accolade
• encodage / terminaison de
lignes
• …
• Détecter les bugs et les erreurs
classiques au plus tôt
• JSHint
• JSLint
4
Écrire du code de qualité

5
Organiser son code

• AMD / CommonJS
• Frontend
• requirejs
• browserify
• Backend
• nodejs
6
Organiser son code

• Utilisation des patterns
• Séparation des concepts
• Injection de dépendances
• Observateur
• …
• Réutilisation des librairies et bibliothèques existantes
• Ember, AngularJS
• Handlebars, Moustache
• …
7
Ne pas réinventer la roue

• Frontend : Bower (bower.io)
• Backend : NPM (npmjs.org)
8
Gérer ses dépendances

9
Gérer ses dépendances
Bower NPM

Tester son code
10

• Garantie qu’une fonction répond à un contrat
• Indispensable sur les fonctions publiques
• Évite les régressions
11
Tests unitaires

• Multitudes de librairies en JavaScript
• Mocha (visionmedia.github.io/mocha)
• Jasmine (jasmine.github.io)
12
Tests unitaires

13
Tests unitaires

• Permets de tester une application de bout en bout
• Teste toutes les couches de l’application
• Peux être complexe à mettre en place
14
Tests fonctionnels

• CasperJS (casperjs.org)
• WebKit (Safari, Chrome)
• Gecko (Firefox)
• Selenium (seleniumhq.org)
• Supporte tous les navigateurs
15
Tests fonctionnels

16
CasperJS

• Complexe à mettre en place
• Utilisation de librairies qui simplifie son usage
• WebDriver (webdriver.io)
• Nightwatch (nightwatchjs.org)
• WD (admc.io/wd)
17
Selenium

18
Selenium

Intégration continue
19

• Optimisation du code
• Validation du code
• Minification et concaténation du code
• Injection des dépendances
• Exécutions des tests
20
“Builder” son JavaScript

• Grunt (gruntjs.com)
• Gulp (gulpjs.com)
21
“Builder” son JavaScript

• Permet d’automatiser tout et n’importe quoi
• Équivalent de Ant et de Make
• Configuration en JavaScript
• Écosystème extrêmement riche
• Communauté très active
22
Grunt

23
Grunt

• Serveur d’intégration continue
(jenkins-ci.org)
• Lancement automatique du
build et des tests
• Affichage des métriques
• Déploiement des applications
24
Jenkins

Déployer son code
25

26
AUTOMATISEZ

• Attention au cache navigateur !
• Prévoir un système de rollback
• Changer le nom des fichiers à chaque version
27
Frontend

28
Frontend

Merci de votre attention
29