MIF38 - CM1 : Stack JS

Lionel Médini

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

Node.js

  • Plateforme d'exécution JS basée sur le moteur Chrome
  • S'appuie sur la spec CommonJS
    • infrastructure
    • ensemble d'outils / APIs
  • Fondé sur la notion d'event loop

Retour sur la modularité

Principes :

  • isolation
  • réutilisabilité
  • gestion des dépendances (nécessite un outil)

Retour sur la modularité

Différentes approches :

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

Node.js

Techniquement : Une VM “sandboxée” qui 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


➥ Un élément de solution :

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

Autres outils JS

Autres références JS