Industrialisation des développements en

JavaScript

Éric Bellemon @haklop

Alter WaySolutions 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