Industrialisation des développements JavaScript

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

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

3. Écrire du code
3

4. • 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. 5
Organiser son code

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

7. • 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

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

9. 9
Gérer ses dépendances
Bower NPM

10. Tester son code
10

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

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

13. 13
Tests unitaires

14. • 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

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

16. 16
CasperJS

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

18. 18
Selenium

19. Intégration continue
19

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

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

22. • 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. 23
Grunt

24. • 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

25. Déployer son code
25

26. 26
AUTOMATISEZ

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

28. 28
Frontend

29. Merci de votre attention
29