Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 le...
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 libr...
• 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
Test...
• Multitudes de librairies en JavaScript
• Mocha (visionmedia.github.io/mocha)
• Jasmine (jasmine.github.io)
12
Tests unit...
13
Tests unitaires
• Permets de tester une application de bout en bout
• Teste toutes les couches de l’application
• Peux être complexe à met...
• CasperJS (casperjs.org)
• WebKit (Safari, Chrome)
• Gecko (Firefox)
• Selenium (seleniumhq.org)
• Supporte tous les navi...
16
CasperJS
• Complexe à mettre en place
• Utilisation de librairies qui simplifie son usage
• WebDriver (webdriver.io)
• Nightwatch (n...
18
Selenium
Intégration continue
19
• Optimisation du code
• Validation du code
• Minification et concaténation du code
• Injection des dépendances
• Exécution...
• 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 ext...
23
Grunt
• Serveur d’intégration continue
(jenkins-ci.org)
• Lancement automatique du
build et des tests
• Affichage des métriques
•...
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
Fronte...
28
Frontend
Merci de votre attention
29
Upcoming SlideShare
Loading in …5
×

Solutions Linux 2014 – Alter Way : Industrialisation des développements en JavaScript

1,009 views

Published on

Industrialisation des développements JavaScript

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Solutions Linux 2014 – Alter Way : Industrialisation des développements en JavaScript

  1. 1. Industrialisation des développements en JavaScript Éric Bellemon @haklop Alter Way Solutions Linux 2014
  2. 2. • Écrire du code • Tester son code • Intégration continue • Déploiement 2 Industrialisation en JavaScript
  3. 3. Écrire du code 3
  4. 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. 5 Organiser son code
  6. 6. • AMD / CommonJS • Frontend • requirejs • browserify • Backend • nodejs 6 Organiser son code
  7. 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. 8. • Frontend : Bower (bower.io) • Backend : NPM (npmjs.org) 8 Gérer ses dépendances
  9. 9. 9 Gérer ses dépendances Bower NPM
  10. 10. Tester son code 10
  11. 11. • Garantie qu’une fonction répond à un contrat • Indispensable sur les fonctions publiques • Évite les régressions 11 Tests unitaires
  12. 12. • Multitudes de librairies en JavaScript • Mocha (visionmedia.github.io/mocha) • Jasmine (jasmine.github.io) 12 Tests unitaires
  13. 13. 13 Tests unitaires
  14. 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. 15. • CasperJS (casperjs.org) • WebKit (Safari, Chrome) • Gecko (Firefox) • Selenium (seleniumhq.org) • Supporte tous les navigateurs 15 Tests fonctionnels
  16. 16. 16 CasperJS
  17. 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. 18 Selenium
  19. 19. Intégration continue 19
  20. 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. 21. • Grunt (gruntjs.com) • Gulp (gulpjs.com) 21 “Builder” son JavaScript
  22. 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. 23 Grunt
  24. 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. 25. Déployer son code 25
  26. 26. 26 AUTOMATISEZ
  27. 27. • Attention au cache navigateur ! • Prévoir un système de rollback • Changer le nom des fichiers à chaque version 27 Frontend
  28. 28. 28 Frontend
  29. 29. Merci de votre attention 29

×