M1IF13 - CM1 : Stack JS

Lionel Médini

Master informatique - Université Claude Bernard Lyon 1

But de ce cours

• Introduire les outils d'aide au développement En JS
• Vous rendre plus efficaces pour :
  • développer
  • débugger
  • packager une application Web

Contenu de ce cours

• Grands principes d'un outil
• Lien vers le site / la doc
• Remarques sur l'utilisation pratique

Préambule

Il y a beaucoup d'outils en JS disponibles

Source : Twitter

Node.js

• Plateforme d'exécution basée sur le moteur Chrome
• Permet de :
  • mettre en place de “grosses” applications
    • en JS
    • modulaires
  • programmer dans le même langage côté serveur et côté client

...Ou presque

• Pas de Browser Object Model (BOM)
• Paquets spécifiques
• Mode de gestion des modules : CommonJS

NPM

• Gestionnaire de paquets pour …
• S'utilise “à la” apt-get
  • localement : npm install <package>
  • globalement : npm install -g <package>
• Description de l'application dans un fichier package.json

Require.JS

• Chargement des dépendances dans les modules
• S'utilise côté browser et côté Node (même si Node vient avec sa propre commande require)
• Configuration en JSON : exemple

Bower

• Gestionnaire de paquets applicatif côté client
• Description de l'application dans un fichier bower.json
• Exécution : bower install
• Différence avec NPM :

Bower is optimized for the front-end. If multiple packages depend on a package - jQuery for example - Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.

Grunt

• Task manager / runner
• S'appuie sur un ensemble de plugins (cf. Maven)
• Configuration du projet : Gruntfile
• Utilisation : lancement des tâches via la Command Line Interface (CLI)

grunt build

Yeoman

• Outil de “Scaffolding” d'applications Web
• Permet de créer rapidement un projet avec de nombreux composants
• 2 possibilités
  • CLI
  • Bibliothèque de générateurs prêts à l'emploi

Autres outils JS

• Serveur HTTP : Express
• Tests : Karma
• Vérification de code : JSHint
• Compilation ES6 → ES5 : Babel

Retour sur la modularité

Principes :

• isolation
• réutilisabilité
• gestion des dépendances
• téléchargement

Différentes solutions

• Asynchronous Module Definition (AMD)
• CommonJS (CJS)
• Universal Module Definition (UMD)
• ES6 modules

Référence : http://addyosmani.com/writing-modular-js/

Différentes approches

• Approche serveur
  • un répertoire node_modules avec une arborescence de dépendances
  • chaque module peut avoir ses propres dépendances, avec des versions différentes
• Approche client
  • un répertoire - sans nom particulier - avec un ensemble de dépendances “à plat”
  • les dépendances partagées doivent avoir les mêmes versions
  • il faut un moyen de gérer les conflits

➥ Des éléments de solution

Référence : http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging

Autres références JS

• WebIDL

Le langage de spécifications d'API JS pour HTML5

• Le pattern Promesse :

Et en particulier PromiseJS : faire de l'asynchrone “proprement” en JS

• EcmaScript 6 (ou ES6 ou ES2015)

Le futur du JS, partiellement implémenté dans les navigateurs et dans NodeJS. Une comparaison ES5 et ES6.