M1IF13 - CM1 : Stack JS

Lionel Médini

Master informatique - Université Claude Bernard Lyon 1

licence Creative Commons BY-NC-SA

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


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

Retour sur la modularité

Principes :

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

Différentes solutions

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

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

  • Le pattern Promesse :

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

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