Formation JavaScript full-stack (JS, jQuery, Node.js...)

Formation « Web Avancé »
JavaScript full-stack – Node.js – Meteor
Février 2016 – Formation ORT 3CSi spécialité développement web
Guillaume MOREL-BAILLY

|
Copyright
Cette présentation est mis à disposition selon les termes de la Licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0
International (CC BY-NC-SA 4.0). http://creativecommons.org/licenses/by-nc-sa/4.0/
Vous êtes autorisé à partager et adapter ce document, selon les conditions suivantes :
Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 2
Attribution — Vous devez créditer l’œuvre, intégrer un lien vers la licence et indiquer si des
modifications ont été effectuées à l’œuvre.
Pas d’Utilisation Commerciale — Vous n'êtes pas autorisé à faire un usage commercial de cette
œuvre, tout ou partie du matériel la composant.
Partage dans les mêmes conditions — Dans le cas où vous reprenez ou effectuez une modification
de cette œuvre, vous devez la diffuser dans les même conditions, c'est à dire avec la même licence
d’utilisation.

|
Présentation
• Guillaume MOREL-BAILLY
• Développeur web et mobile freelance depuis +5 ans
• Ingénieur en sécurité informatique depuis 1 an pour une
SSII. Sécurisation et maintenance d’une application de BI
pour un acteur mondial de l'acier inoxydable.
• Me contacter :
Qui suis-je ?
linkedin.com/in/guillaumemorelbailly

|
Présentation
• Tour de table pour mieux vous connaitre, cerner vos
attentes et besoins.
• Cursus / formation; expérience(s) professionnelle(s);
technos abordées ou maitrisées; projets futurs, etc. ?
• Qu’attendez-vous de cette formation ?
Qui êtes-vous ?

|
Présentation du cours
• Objectif : vous apporter une culture sur les techniques de développement web modernes
orientées JavaScript. Découverte d’architectures et de frameworks client / serveur utilisés en
entreprise.
• Volume horaire : mois de février
• Cours théorique (slides) et pratiques (exercices, TP)
• Documents de cours
• Evaluations : contrôles de connaissance (QCM + devoir sur feuille) + 1 application à développer
de A à Z (mise en situation)

|
Technologies, frameworks, outils… abordés

|
Plan de formation
1) Introduction à JavaScript
2) Développer avec jQuery
3) L’architecture MEAN
4) Node.js
5) Déploiement cloud sur Heroku (aparté)
6) Socket.io
7) Express
8) MongoDB
9) Angular
10) MEAN.JS
11) METEOR

Partie 1
Introduction à JavaScript
Eléments de base du langage et concepts avancés

|
JavaScript Histoire

|
JavaScript – Pourquoi ?

|
JavaScript – Histoire
• 1993 : apparition du navigateur web NCSA Mosaic qui a rendu le World Wide Web populaire.
Distribué gratuitement par le NCSA (National Center for Supercomputing Applications).
• NCSA : un centre de recherche universitaire américain précurseur sur les technologies web.
Développement par exemple du serveur web HTTPd (qui servira de base à Apache).
• 1994 : création de la Netscape Communications Corporation, puis apparition
de Netscape Navigator un an plus tard, suite au débauchage des
développeurs de Mosaic.
• 1995 : Netscape détient plus de 90 % de part de marché, Microsoft lance
Internet Explorer 1.0.

|
• Netscape voulait que le langage de programmation Scheme soit
intégré au sein de son navigateur. Scheme est un langage de script très
épuré créé dans les années 70.
• Brendan Eich est embauché par Netscape pour cette mission, mais
finalement on lui demande de créer un nouveau langage de
programmation.
• Le cahier des charges était strict : il devait créer ce langage en 10 jours
pour respecter la date de sortie de la version beta 2.0 de Netscape
Navigator. Il fallait aussi s’inspirer de Java.

|
"There was some pressure from management to make the syntax look like
Java. There was also some pressure to make it not too big, because after all,
people should use Java if they're doing any real programming.
This is just Java's dumb little brother. But if I put classes in, I’d be in big
trouble.“
Brendan Eich

|
• Brendan Eich s’est alors inspiré du langage de
programmation Self, basé sur le concept de prototypes.
• Le langage Mocha est créé, renommé ensuite en LiveScript.
Quelques mois plus tard, en septembre 1995, Netscape
opte pour un nom plus vendeur, JavaScript, après un
partenariat signé avec Sun Microsystems.
• Attention, malgré son nom et quelques similarités
syntaxiques superficielles, JavaScript n’est pas Java !

|
• 1996 : JavaScript est rapidement adopté pour le développement web orienté client. Netscape
soumet JavaScript à l’organisme de standardisation ECMA International.
• Microsoft réagit en développant JScript inclus dans Internet Explorer 3.
• 1997 : adoption du nouveau standard ECMAScript. Les spécifications sont rédigées dans le
document Standard ECMA-262.

|
ECMAScript
Tout est histoire de
standardisation

|
JavaScript – ECMAScript
• Ecma International est une organisation européenne de standardisation informatique (au sens
large). On pourrait le comparer au consortium W3C, mais qui est chargé uniquement des
technologies du World Wide Web.
• JavaScript est standardisé par Ecma International.
• Le nom ECMAScript réfère au langage de programmation de type script standardisé. Le standard
ECMAScript est documenté avec la spécification ECMA-262.
• ECMAScript ne décrit pas le Document Object Model (DOM) qui est standardisé par le W3C.
• Les spécifications du standard sont mises en œuvre dans différents langages de script. Les
implémentations les plus connus étant JavaScript, Jscript et ActionScript.

|

|
• ECMAScript Edition 5 (ES5) : version actuellement intégrée dans les moteurs de scripts des
navigateurs web  version qu’on utilisera dans le reste de ce cours
• ECMAScript Edition 6 (ES6) : publié en juin 2015, ES6 (appelé aussi ES2015) n’est pas encore
pleinement supporté par les navigateurs. On peut utiliser un transcompilateur comme Babel ou
Traceur vers ES5 pour développer dés maintenant en ES6.
Dernières versions d’ECMAScript :
Tester la compatibilité ES6 de votre navigateur
sur : kangax.github.io/compat-table/es6/

|
• JavaScript, implémentation du standard ECMAScript n’a pas évolué depuis 2009. Depuis, de plus
en plus d’applications web utilisent massivement JavaScript côté client. Le développement natif en
JavaScript devient complexe et des manques se font sentir.
• ECMAScript 6 est une mise à jour majeure du langage de script standardisé (liste complète des
nouveautés sur : https://github.com/lukehoban/es6features/blob/master/README.md,
comparaison de code ES5 vs ES6 sur http://es6-features.org/).
• Le langage de programmation TypeScript est publié en 2012 par Microsoft. C’est un langage à
part entière de JavaScript mais qui permet de transpiler le code TypeScript en JavaScript. Il a été
créé pour apporter une réponse aux manques de ECMAScript 5.
ECMAScript 6 (ES2015)

|
ECMAScript 6 (ES2015)
class Shape {
constructor (id, x, y) {
this.id = id;
this.move(x, y);
}
move (x, y) {
this.x = x;
this.y = y;
}
}
ECMAScript 5
var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
};
Shape.prototype.move = function (x, y) {
this.x = x;
this.y = y;
};

|
• Langage de programmation open-source développé en 2012 par Microsoft, comme un sur-
ensemble de JavaScript (tout code JavaScript peut être utilisé dans TypeScript).
• Développé dans le but d’améliorer le code JavaScript (face aux manquements d’ECMAScript 5) :
typage, interfaces, classes, modules, mixin, etc.
• Le code TypeScript est transcompilé / transpiler vers JavaScript.
• TypeScript supporte la spécification ECMAScript 6. Son intérêt est limité depuis l’arrivée
d’ECMAScript 6.
TypeScript

|
Moteurs de
script et de
rendu
Comprendre le fonctionnement et
les composants de nos
navigateurs web.

|
JavaScript – Moteurs de script

|
Moteur de rendu
(HTML + CSS)
Moteur de script
(JavaScript)
Plugins
(Flash, Silverlight,
Applets Java, etc.)

|

|
Moteur de rendu
(HTML + CSS)
Moteur de script
(JavaScript)

|
Firefox
Moteur de rendu : Gecko
Moteur de script : SpiderMonkey
Google Chrome
Moteur de rendu : Blink
Moteur de script : V8
Internet Explorer
Moteur de rendu : Trident
Moteur de script : Chakra
Safari
Moteur de rendu : WebKit
Moteur de script : Nitro
Opera
Moteur de rendu : Blink
Moteur de script : V8

|
• Projet open-source développé par Google et écrit en C++.
• Développé à l’origine pour Google Chrome, mais utilisé dans de nombreux autres
projets, dont Node.js (cette technologie sera abordée dans un prochain chapitre).
• Un moteur JavaScript très moderne sur plusieurs aspects.
• V8 compile directement le JavaScript en langage machine (langage natif du
processeur) avant de l’exécuter. Alors que les autres moteurs de script interprètent
du bytecode, ou compilent le code en langage machine avant de l’exécuter.
V8 : le moteur de script « next gen » de Google

|Février 2016 Formation ORT 3CSi - Guillaume MOREL-BAILLY 31
JavaScript – Chargement d’une page par le navigateur

|
Le langage
JavaScript
Présentation

|
JavaScript – Présentation

|
• JavaScript est un langage de script, multi-plateforme et orienté web, piloté par les évènements.
• Il fait partie d’un environnement hôte, le plus souvent un navigateur web, pour qu’il puisse être utilisé
sur les objets de cet environnement.
• Fonctionnalités centrales et native de JavaScript :
• Bibliothèque standard d’objets (Array, Date, Math, etc.)
• Eléments de langage : opérateurs, structures de contrôles, instructions, etc.
• Fonctionnalités étendues (côté client) : contrôle du navigateur et du DOM. Le DOM définit la façon dont
les documents HTML sont exposés aux scripts.
JavaScript, c’est quoi ?

|
• Notion de « first-class functions » (objet de première classe).
• Les fonctions JavaScript sont des objets de première classe, ce qui veut dire que les fonctions et les objets sont
traités exactement de la même manière. Toute opération faite sur un entier, un string, un array ou un objet
générique peut être fait sur une fonction. A l’inverse seule une fonction peut être appelée.
• De manière concrète :
• Une fonction peut avoir des propriétés
• On peut affecter une fonction à une variable : var foo = function() {…};
• On peut passer une fonction comme paramètre à une autre fonction
• Une fonction peut retourner une autre fonction

|
var square = function(x) {
return x * x;
},
mult = function (f1, f2) {
return function(n) {
return f1(n) * f2(n);
}
},
foo = mult(square, square),
value = foo(2);
console.log(value); // 16

|
JavaScript vs Java (ou tout autre langage comparable : C#, C++, etc.)
• JavaScript est interprété : le code est traité
par le moteur de script du navigateur lors de
l’exécution (ce qui le rend indépendant de
toute plate-forme).
Cas particulier : le moteur de script V8 de
Google (inclus dans Chrome, Opera) qui
compile JavaScript en code machine natif
avant de l’exécuter.
• Java est un langage compilé et interprété (le
code source est compilé vers un bytecode, la
machine virtuelle Java interprète ce bytecode).

|
• JavaScript est un langage de programmation
objet orienté prototype. Les prototypes sont
utilisés pour représenter les liens entre les
objets.
Les prototypes permettent d'avoir un
héritage dynamique. Ainsi, les
caractéristiques héritées par un objet
peuvent varier dans le temps.
• Java est un langage de programmation objet
orienté classe. Il est entièrement basé sur
l’utilisation de classes et de méthodes.

|
• JavaScript est faiblement typé (typage
dynamique). Seul le type var existe.
NB : Avec ECMAScript 6, les types let et const sont
introduits. TypeScript permet d’avoir un typage fort.
• Java est fortement typé (typage statique) :
char, byte, short, int, long, float,
double, boolean et string.
var name = "John";
var now = new Date();
var p = new Person(name, now);
String name = "John";
Date now = new Date();
Person p = new Person(name, now);
Person p = "Jake";
// throws ClassCastException

|
JavaScript – Ecrire du code côté client
• La balise script permet d’intégrer du code JavaScript dans une page.
• Attributs de script :
• type : indique le type MIME du contenu  "text/javascript" . Note : depuis HTM5 il n’est
plus nécessaire de spécifier le type.
• src : indique que le code se situe dans un fichier externe
Balise HTML script

|
Code JavaScript « inline »
<script type="text/javascript">
function helloWorld() {
alert("Hello World");
}
</script>
• Conseil : déplacer le code JavaScript dans un fichier externe et utiliser le moins possible du code
inline dans un fichier HTML pour favoriser la maintenabilité et séparer clairement les
responsabilités (l’affichage des traitements).

|
Fichier externe
<!DOCTYPE html>
<html lang="fr">
<head>...</head>
<body>
...
<script src="main.js"></script>
</body>
</html>
• Conseil : charger les fichiers externes JavaScript en bas de page (juste avant la balise fermante
body). Le navigateur web interprète la page reçue ligne par ligne : le chargement d’une ressource
JavaScript est bloquante.

|
• Sur la majorité des navigateurs web : touche F12
• Firefox intègre même une console avancée : Développement > Ardoise JavaScript (Maj + F4)
Console du navigateur

|
Le langage
JavaScript
Eléments de base

|
JavaScript

|
JavaScript – Les opérateurs
Types d’opérateurs Code d’exemple
var var foo;
new new Foo;
Assignation foo = {bar: "a value"}
foo.bar = "value";
delete delete foo.bar;
Membres foo.bar;
foo[‘bar’];
Appel bar();
foo.bar();
Comparaison == ou ===

|
JavaScript – Les variables
Déclarations
Type de déclaration ECMAScript
var ES5 On déclare une variable, éventuellement en initialisant sa valeur.
let
ES6
On déclare une variable dont la portée est celle du bloc courant,
éventuellement en initialisant sa valeur.
const ES6 On déclare une constante nommée, accessible en lecture seule.
var x;
var y = 42;
var foo = "hello";
bar = "world";

|
• Une variable déclarée grâce à l'instruction var ou let sans valeur initiale définie vaudra undefined.
• Tenter d'accéder à une variable qui n'a pas été déclarée lèvera l’exception ReferenceError.
• On utilise undefined pour déterminer si une variable possède une valeur : if (foo === undefined)…
Evaluation des variables
var a;
console.log("La valeur de a est " + a); // le log contient "La valeur de a est undefined"
console.log("La valeur de b est " + b); // signale une exception ReferenceError

|
• Valeur undefined dans un contexte booléen : convertie en false
• Valeur undefined dans un contexte numérique : convertie en NaN
var monTableau = new Array();
if (!monTableau[0]){ // false
maFunction();
}
var a;
a + 2; // NaN

|
• Valeur null dans un contexte numérique : convertie en 0 (zéro)
• Valeur null dans un contexte booléen : convertie en false
var n = null;
console.log(n * 32); // Le log affichera 0

|
JavaScript – Types de données
• 6 types de données primitifs en ECMAScript 5:
• Type booléen : Boolean (avec les valeurs true ou false)
• Type nul : null
• Type pour les valeurs indéfinies : undefined
• Type pour les nombres : Number (par exemple 42 ou 3.14159)
• Type pour les chaines de caractère : String (par exemple "Hello World")
• 5 type pour les objets : Object, Array, Date, RegExp, Function

|
JavaScript – L’instruction typeof
• Comme JS est faiblement typé, on a parfois le besoin de savoir avec qu’elle type de valeur on
travaille.

|
JavaScript – Conversion de types de données
• D’après vous, le code suivant lève t’il une erreur ?
var answer = 42;
answer = "Thanks for all the fish...";
JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.

|
JavaScript – Conversion de types de données
• Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi
que l'opérateur "+", JavaScript convertit les nombres en chaînes de caractères :
• Attention, avec des instructions impliquant d'autres opérateurs (comme le signe "-", JavaScript ne
convertit pas nécessairement les valeurs numériques en chaînes de caractères. Ainsi, on aura :
x = "La réponse est " + 42; // "La réponse est 42"
y = 42 + " est la réponse"; // "42 est la réponse"
foo = "37" - 7; // 30
bar = "37" + 7; // "377"

|
JavaScript – Conversion de chaînes en nombres
• parseInt effectue une conversion en valeur entière
• Number effectue une conversion numérique plus stricte
parseInt(""); // NaN
parseInt(42.5); // 42
parseInt("42"); // 42
parseInt("077"); // 63 (= 7 + 7*8)
parseInt("123foo"); // 123
parseInt("0xF", 16); // 15 car on est en base hexa
Number("foo"); // NaN
Number("001"); // 1

|
JavaScript – Conversion de chaînes en nombres
• parseFloat effectue une conversion d’une chaine de caractère en nombre flottant
parseFloat("42.5"); // 42.5
parseFloat("1.45kg"); // 1.45
parseFloat("77.3"); // 77.3
parseFloat("077.3"): // 77.3
parseFloat("0x77.3"): // 0
parseFloat(".3"); // 0.3
parseFloat("0.1e6"); // 100000

|
JavaScript – Opérateur de comparaison

|
JavaScript - Commentaires
// un commentaire sur une ligne
/* un commentaire plus
long sur plusieurs lignes
*/
/* Par contre on ne peut pas /* imbriquer des commentaires */ SyntaxError */

|
JavaScript - Objets
• Liste d’une ou plusieurs paires de propriétés nom / valeur
• Ces paires sont délimitées par des accolades : { }
• On peut également pour imbriquer un objet dans un autre
var person = {
firstName: "John",
lastName: "Honda",
age: 29,
foo: {
bar: "test"
}
};

|
JavaScript - Objets
var sales = "Toyota";
function carTypes(name) {
if (name === "Honda") {
return name;
} else {
return "Sorry, we don't sell " + name + ".";
}
}
var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales };
console.log(car.myCar); // Saturn
console.log(car.getCar); // Honda
console.log(car.special); // Toyota

|
JavaScript – Tableaux (Arrays)
• Les tableaux JavaScript sont des objets semblables à une liste
• Ils possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de
modification.
• Syntaxes pour créer un array :
Description et syntaxe
[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)
var fruits = ["Apple", "Banana"];

|
• Le premier élément d'un tableau a 0 pour indice
• La position du dernier élément est donnée par length moins 1.
Accéder aux éléments d’un tableau
var arr = ["this is the first element", "this is the second element"];
console.log(arr[0]); // logs 'this is the first element'
console.log(arr[1]); // logs 'this is the second element'
console.log(arr[arr.length - 1]); // logs 'this is the second element‘
var fish = ["Lion", , "Angel"];
console.log(fish[0]); // logs ‘Lion'
console.log(fish[1]); // logs ‘undefined'
console.log(fish[2]); // logs ‘Angel ‘

|
• Les éléments d'un tableau sont simplement des propriétés d'objets.
• Normalement on accède à une propriété d’objet avec la notation en point (object.property)
• Cependant il n’est pas possible d’accéder aux propriétés dont le nom commence par un chiffre. Il
est nécessaire d'utiliser la syntaxe avec les crochets.
Accéder aux éléments d’un tableau
var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0); // a syntax error
console.log(years[0]); // works properly

|
• De façon semblable, les propriétés nommées avec des mots-clés réservés ne peuvent être
consultées qu'en utilisant la syntaxe avec crochets :
Accéder aux éléments d’un tableau (aparté)
// An object
var promise = {
'var' : 'text',
'array': [1, 2, 3, 4]
};
Console.log(promise.array); // syntax error
console.log(promise['array']); // works properly

|
JavaScript – Objet natif : exemple de Math
• L’objet Math est un objet natif dont les méthodes et propriétés permettent l'utilisation de
constantes et fonctions mathématiques.
• Cet objet n'est pas une fonction !
• Toutes les propriétés et les méthodes de Math sont statiques.
console.log(Math.e); // 2.718 (nombre d’Euler)
Console.log(Math.PI); // 3.14159…
Console.log(Math.min(2, 58)); // 2
Console.log(Math.ceil(42.3)); // 43 : plus petit entier supérieur
Console.log(Math.floor(42.8)); // 42 : plus petit entier inférieur

|
JavaScript - Instructions conditionnelles
Instruction if...else
if (condition_1) {
statement_1;
} else if (condition_2) {
statement_2;
} else if (condition_n) {
statement_n;
} else {
statement_last;
}

|
• Lors d'un test, les valeurs suivantes seront considérées comme équivalentes à false :
• False
• Undefined
• Null
• 0
• NaN
• La chaine de caractère vide ("")

|
• Attention à ne pas confondre les valeurs booléennes « primitives » true et false avec les valeurs
crées grâce à un objet Boolean. Par exemple, on aura :
var b = new Boolean(false);
if (b) // this condition evaluates to true
if (b == true) // this condition evaluates to false

|
Instruction switch
switch (fruittype) {
case "Oranges":
console.log("Oranges are $0.59 a pound.");
break;
case "Apples":
console.log("Apples are $0.32 a pound.");
break;
case "Bananas":
console.log("Bananas are $0.48 a pound.");
break;
default:
console.log("Sorry, we are out of " + fruittype + ".");
}
console.log("Is there anything else you'd like?");

|
JavaScript – Boucles et itérations
Instruction for
for (var i = 0; i < 9; i++) {
console.log(i);
// more statements
}
var i = 0;
for (;;) {
if (i > 3) break;
console.log(i);
i++;
}

|
• Permet d'itérer sur l'ensemble des propriétés énumérables d'un objet, dans un ordre arbitraire.
• Ne doit pas être utilisée pour parcourir un Array lorsque l'ordre des éléments est important !
Instruction for…in
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

|
• Permet d'exécuter une instruction tant qu'une condition donnée est vérifiée.
Instruction while
while (i < 10) {
text += "The number is " + i;
i++;
}

|
• Permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée.
Instruction do…while
do {
i += 1;
console.log(i);
} while (i < 5);

|
JavaScript – Concepts avancés
• Il est possible de lever (c’est-à-dire signaler) des exceptions avec l'instruction throw et de les
gérer (les intercepter) avec des instructions try...catch.
• En JavaScript, n'importe quel objet peut être signalé comme une exception : throw "Erreur2";
• Cependant, afin de respecter certaines conventions et de bénéficier de certaines informations, on
préférera les exceptions de base ECMAScript ou DOMException / DOMError si on manipule le
DOM.
Gestion des exceptions
Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError

|
// Lever une erreur générique
try {
throw new Error("Ouups !");
} catch (e) {
console.log(e.name + ": " + e.message);
}

|
// Gérer une erreur spécifique
try {
foo.bar();
} catch (e) {
if (e instanceof EvalError) {
} else if (e instanceof RangeError) {
}
// ... etc
}

|
// On crée un nouvel objet, héritage par prototype depuis le constructeur de type Error
function MyError(message) {
this.name = 'MyError';
this.message = message || 'Default Message';
this.stack = (new Error()).stack;
}
MyError.prototype = Object.create(Error.prototype);
MyError.prototype.constructor = MyError;
try {
throw new MyError('custom message');
} catch (e) {
console.log(e.name); // 'MyError'
console.log(e.message); // 'custom message'
}

|
JavaScript – Fonctions
• Les fonctions font partie des briques fondamentales de JavaScript.
• Rappel de la partie « Présentation » : les fonctions sont des objets de première classe. Cela
signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et
des méthodes, comme tous les autres objets JavaScript.
• Une fonction est une procédure JavaScript, un ensemble d'instructions effectuant une tâche ou
calculant une valeur.
var x = myFunction(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}

|
• Déclaration d’une fonction
function add(a, b) {
var c = a+b;
return c;
}
var add = function (a, b) {
var c = a+b;
return c;
};
• On peut également assigner une fonction à une variable

|
• On peut aussi rendre une fonction auto exécutable :
(function() {
console.log('Hello World!');
})();
// Affichera Hello World! à l’ouverture de la page

|
• Les paramètres donnés lors de l'appel d'une fonction sont appelés les arguments de la fonction.
• Les arguments sont passés par valeur. Si la fonction modifie la valeur d'un argument, ce
changement ne se répercute pas en dehors de la fonction.
• Cas spécifique : passage par référence d’un objet. Si la fonction modifie les propriété de l'objet
de la référence, ce(s) changement(s) seront perceptibles en dehors de la fonction.
NB: Les notions de porté, passage par valeur et référence seront étudiées plus en détail dans le chapitre suivant.

|
// Declare the function 'myFunc'
function myFunc(theObject) {
theObject.brand = "Toyota";
}
var mycar = {
brand: "Honda",
model: "Accord",
year: 1998
};
console.log(mycar.brand); // Log 'Honda‘
myFunc(mycar); // Pass object reference to the function
// Logs 'Toyota' as the value of the 'brand' property of the object, as changed to by the function
console.log(mycar.brand);

|
Le langage
JavaScript
Manipulation du DOM

|
JavaScript – Manipulation du DOM
• JavaScript contient une bibliothèque standard d'objets tels que Array, Date, et Math, ainsi qu'un
ensemble d'éléments de langage (on vient de les voir).
• Ces fonctionnalités centrales et natives de JavaScript peuvent être étendues de plusieurs façons
en fournissant d'autres objets.
• JavaScript côté client étend ces éléments de base en fournissant des objets pour contrôler le
navigateur et le Document Object Model (DOM).
• Le DOM définit la façon dont les documents HTML sont exposés aux scripts. C’est une API,
standardisée par le W3C et exploitée par les navigateurs web (entre autre).

|
• De manière simplifiée, le DOM :
• fournit une représentation structurée d’un document HTML ou XML;
• codifie la manière dont un script peut accéder à cette structure.
• Le DOM parcourt une hiérarchie d’éléments.

|

|
• L’API DOM est accessible par JavaScript via l’objet « document »
• Plusieurs méthodes :
• document.createElement()
• document.getElementById()
• document.getElementByTagName()
• document.getElementByName()
• Plusieurs propriétés :
• innerHTML
• innerText

|
• Créer une page HTML composée des éléments suivantes :
• Un titre de niveau h1
• Un paragraphe contenant du texte (contenant des mots en « strong », un lien, etc.)
• Une liste de type ul ou ol
• Le tout englobé dans un div
• Utiliser document pour mettre en couleur le paragraphe
• Créer un bouton permettant d’afficher une popup contenant l’attribut href du lien contenu dans le paragraphe.
Exercice n°1 : objectif

|
Exercice n°1 : correction
<div id="wrapper">
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit,
metus et aliquam convallis, orci est blandit metus, vel fringilla erat ex
sit amet odio. Nunc consectetur aliquet odio, sit amet suscipit orci.
Maecenas <a href="http://www.google.fr" title="Google" id="link">finibus</a> ipsum.</p>
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Foo bar</li>
</ul>
<button id="myButton">Get href</button>
</div>

|
<script>
var elements = document.getElementsByTagName("p");
var length = elements.length;
for (var i = 0; i < length; i++)
{
elements[i].style.color= "red";
}
var myLink = document.getElementById("link");
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function(event) {
alert(myLink.getAttribute("href"));
});
</script>

|
• Créer une fonction JavaScript qui permette d’ajouter une ligne à un tableau au clic sur un bouton.
<table id="myTable" border="1">
<tr>
<td>Ligne1 cellule1</td>
</tr>
<tr>
</tr>
</table>

|
function insertRow() {
var foo = document.getElementById('myTable').insertRow(0);
var cell1 = foo.insertCell(0);
var cell2 = foo.insertCell(1);
cell1.innerHTML = "NvllLigne Cellule1";
cell2.innerHTML = "NvllLigne Cellule2";
}
<button id="insertNewRow" onclick="insertRow">Ajouter une nouvelle ligne</button>

|
• Créer une page contenant un bouton qui permette de de
générer un nombre aléatoire compris entre 1 et 12.
• Afficher le résultat dans un champ input de type text.
• Le bouton doit changer d’état : au premier chargement,
afficher « Jouer » puis afficher « Rejouer ».
• Astuce : vous pouvez utiliser l’objet Math pour générer un
nombre aléatoire.
Exercice n°3 – « Tirage au sort » : objectif

|
Exercice n°3 – « Tirage au sort » : correction
Pour générer le nombre aléatoire entre 1 et 12 :
// Valeur min inclue, max inclue
Math.floor(Math.random() * (max - min + 1)) + min;
-> Math.random : nbr entre 0 et 1
-> (max - min + 1) : 12 - 1 + 1
-> Math.floor = plus grand entier qui est <= à un nbr x

|
• Créer une fonction JavaScript qui, au clic sur un bouton :
• Demande à l’utilisateur de saisir le nombre de colonnes et le nombre de lignes.
• Créée dynamiquement un tableau en fonction des entrées récupérées (et modifier le nom
de chaque cellule créée).
• Astuce : utiliser window.prompt()

|
<table id="theTable" border="1"></table>
<button onclick="create">Créer un tableau</button> // ou via fonction anonyme
function create() {
nbRow = window.prompt("Nombre de ligne", 1);
nbCell = window.prompt("Nombre de colonnes", 1);
for (var r = 0; r < parseInt(nbRow, 10); r++) {
var x = document.getElementById(‘theTable').insertRow(r);
for (var c = 0; c < parseInt(nbCell, 10); c++) {
var y = x.insertCell(c);
y.innerHTML=« Ligne "+ r +« , colonne "+ c;
}
}
}

|
• Créer une liste HTML (select) puis ajouter quelques éléments à cette liste (option).
• Ajouter un bouton qui permettre de supprimer l’élément sélectionné de la liste.
• Astuce : selectedIndex permet de récupérer l’élément sélectionné d’une liste HTML

|
<select id="fruits">
<option>Orange</option>
<option>Mandarine</option>
<option>Banane</option>
<option>Kiwi</option>
</select>
<input type="button" id="myButton" value="Supprimer ce fruit">
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function(event) {
var fruitsList = document.getElementById("fruits");
fruitsList.remove(fruitsList.selectedIndex);
});

|
• Ecrire un programme qui permette d’afficher une image aléatoire après un clic sur un bouton. Attention : ces images
doivent être préchargées lors du premier clic (pour améliorer l’UI).
• Pour vous aider, voici quelques étapes :
• Créer un objet contenant vos images avec quelques propriétés, ex : url, hauteur, largeur.
• Précharger les images avec new Image(), les stocker dans un tableau.
• Créer une fonction permettant de générer un nombre aléatoire (pour charger l’image aléatoirement dans votre
objet) compris entre 0 et la taille de votre tableau de buffer. Vous pouvez vous baser sur l’exercice précédent.
• Retourner l’élément correspondant à ce nombre aléatoire à partir du tableau de buffer (on reçoit une « instance »
de Image).
• Afficher l’image (en remplaçant la précédente).
Exercice n°6 – « Chargement d’images » : objectif

|
Exercice n°6 – « Chargement d’images » : correction
// Tableau de nos images
var imgs = [{
src: "file:///C:/Users/user/Desktop/image1.jpeg",
width: "256",
height: "256"
},{
src: "file:///C:/Users/user/Desktop/image2.jpg",
width: "435",
height: "474"
},{
width: "330",
height: "330"
},{
width: "320",
height: "330"
}
];

|
Exercice n°6 – « Chargement d’images » : correction
// L’instanciation de Image, va automatiquement lancée une requête HTTP GET
var imgBuffer = [];
for (var i = 0, j = imgs.length; i < j; i++) {
imgBuffer[i] = new Image();
imgBuffer[i].src = imgs[i].src;
imgBuffer[i].width = imgs[i].width;
imgBuffer[i].height = imgs[i].height;
}
// getRandNb retourne un objet Image
// attribut de la méthode : valeur min, max => voir exercice précédent (compteur)
var randomImg = getRandNb(0, preBuffer.length - 1);
// Remplacer l’image existante
var newImage = getRandomInt(0, imgBuffer.length - 1);
var container = document.getElementById('container');
container.innerHTML = '';
container.appendChild(newImage);

|
• Analyser et comprendre le code existant (dispo sur l’espace partagé).
• Améliorer l'interface utilisateur : par exemple, modifier l'état du bouton
"Démarrer le jeu" après avoir démarrer une partie.
• Le jeu devra gérer trois niveaux différents. Chaque niveau augmentant la
complexité du puzzle et modifiant l'image de fond.
• Le jeu devra garder les scores ainsi que les noms des joueurs par rapport
au temps mis pour faire le puzzle et au nombre de mouvements réalisés.
Il affichera les cinq meilleurs scores à la fin d'une partie, pour le niveau
joué, dans un canevas (même principe que le texte de départ). Si les
niveaux sont tous passés, afficher le classement global.
• Soyez force de proposition !
Exercice n°7 – « Puzzle glissant » : objectif Exercice noté
Basé sur l’application de Brad
Manderscheid développée pour
TutsPlus.com

|
Le langage
JavaScript
AJAX

|
JavaScript – AJAX
Asynchronous JavaScript And XML
Format d’échange de données en le client
et le serveur. Historiquement du XML, puis
progressivement remplacé par du JSON.
On peut également échanger du texte brut.
Une requête AJAX est
asynchrone (non bloquante
côté client).
Le client écoute en
parallèle une éventuelle
réponse du serveur.
Langage de script utilisé côté client pour initier les
requêtes AJAX et éventuellement traiter la
réponse du serveur. Manipulation du DOM pour
mettre à jour le contenu.
1/
2/
3/

|
JavaScript – AJAX
• AJAX n’est pas un langage mais une architecture qui fait appel à plusieurs technologies.
• Permet de dynamiser tout ou partie d’une page web pour enrichir l’expérience utilisateur en ne
forçant plus le rechargement complet d’une page.
• Première apparition du terme « AJAX » en 2005 dans un article du Web Adaptive Path rédigé par
l’architecte Jesse James Garrett. Depuis, AJAX a rapidement été adopté par les développeurs.
• Le concept de rechargement dynamique d’une page web est apparu dés 1996 via l’utilisation d’iframe
et de l’élément HTML layer (abandonné depuis) : souvent regroupé sous le terme DHTML.
• Une solution plus élégante a été introduite par Microsoft en 1998 : MSRS (pour Microsoft Remote
Scripting) qui fonctionnait via un applet Java auquel on pouvait donner dynamiquement des données
par le biais d'un module JavaScript.

|
JavaScript – AJAX
• Microsoft a ensuite introduit l’objet XMLHttpRequest dans Internet Explorer 5 et dans Outlook
Web Access (une sorte de webmail disponible avec Microsoft Exchange Server).
• L’utilisation d’un applet Java dans MSRS a été remplacé par celui de l’objet XMLHttpRequest dans
les années 2000.
• Entre 2002 et 2005, l’objet XMLHttpRequest a été introduit dans le standard ECMAScript, le
rendant utilisable par l’ensemble des navigateurs web du marché.

|
JavaScript – AJAX
Modèle d’application web classique

|
JavaScript – AJAX
Modèle d’application web dynamique

|
JavaScript – AJAX
Modèle d’application web dynamique
(or JSON)

|
JavaScript – AJAX
• Objet natif de JavaScript pouvant être utilisé par l’ensemble des moteurs de script (car
standardisé dans l’ECMAScript).
• Cependant, il y a quelques différences d’implémentation selon le moteur et la version du
navigateur de l’utilisateur. AJAX étant très demandé, c’est l’une des raisons pour laquelle jQuery a
rapidement gagné en popularité.
• XMLHttpRequest permet d'envoyer des requêtes synchrones ou asynchrones en HTTP. Mais il est
généralement utilisé que pour l’envoi de requêtes asynchrones (c’est là tout son intérêt).
• Donc l’objet XMLHttpRequest != AJAX (qui est une architecture, un semble de technologies).
L’objet XMLHttpRequest

|
JavaScript – AJAX
• XMLHttpRequest permet d'envoyer des requêtes HTTP (GET, POST, PUT, etc.) de manière très
simple. Il suffit de créer une instance de l'objet, d’attacher éventuellement une fonction de
callback, de lier une URL, et d'envoyer la requête.
• Il existe plusieurs fonctions natives que nous allons voir dans les slides suivants.
L’objet XMLHttpRequest

|
JavaScript – AJAX
• Les navigateurs modernes (Chrome, IE 7+, Firefox, etc.) supportent l’objet XMLHttpRequest. On
abordera pas la gestion de l’AJAX pour les anciennes versions de ces navigateurs.
• La syntaxe pour créer un objet XMLHttpRequest est la suivante :
• A partir de cette instance, on peut utiliser les fonctions de XMLHttpRequest.
L’objet XMLHttpRequest – Création d’un objet
var xhttp = new XMLHttpRequest();

|
JavaScript – AJAX
• Pour envoyer une requête HTTP à un serveur, on utilise les fonctions open() et send().
L’objet XMLHttpRequest – Envoyer une requête à un serveur
xhttp.open('POST', 'foo.php', true);
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // Optionnel
Xhttp.send('firstName=John&lastName=Doe');
Fonction Description
open(method, url, async) Spécifie le type de requête HTTP.
send() Envoi la requête à un serveur.
send(string) Envoi la requête à un serveur et transmet des données (typiquement, pour une
requête HTTP de type POST).

|
JavaScript – AJAX
• Si une requête asynchrone (c’est-à-dire non bloquante) a été initiée, il faut spécifier la fonction
JavaScript qui sera appelée lors de la réponse du serveur. C’est ce qu’on appelle une fonction de
callback.
• On utilisera l’évènement onreadystatechange de l’objet XMLHttpRequest
L’objet XMLHttpRequest – Recevoir une requête du serveur
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var response = xhttp.responseText;
}
};
xhttp.open("GET", "foo.php", true);
xhttp.send();
Réponse retournée par le serveur
Utiliser xhttp.responseXML si du XML est retourné par le serveur.

|
JavaScript – AJAX
Propriété Description / valeurs
onreadystatechange Enregistre une fonction qui devra être appelée automatiquement à chaque
fois que la propriété readyState change. Généralement on passe une fonction
anonyme.
readyState Statut de la requête XMLHttpRequest :
0 : request not initialized
1 : server connection established
2 : request received
3 : processing request
4 : request finished and response is ready
status 200 : « OK »
404 : Page non trouvée

|
JavaScript – AJAX
• On a vu qu’on pouvait utiliser l’évènement onreadystatechange ainsi que la propriété readyState
pour surveiller la progression d’une requête asynchrone.
• Une évolution de l’API permet maintenant d’utiliser la fonction addEventListener (implémentant
l’interface ProgressEvent) pour intercepter les notifications de progression périodiques, de
notifications d’erreur, etc.
oReq.addEventListener("progress", updateProgress, false);
oReq.addEventListener("load", transferComplete, false);
oReq.addEventListener("error", transferFailed, false);
oReq.addEventListener("abort", transferCanceled, false);
oReq.open();

|
JavaScript – AJAX
• Historiquement le format XML était utilisé pour échanger des données entre le client et le serveur.
• Cependant ce format est lourd et difficile à parser en JavaScript.
• JSON (JavaScript Object Notation) est un format de données léger destiné à la transmission de
données. Il est indépendant de tout langage, bien qu’il se rapproche de la syntaxe objet de
JavaScript.
XML ou JSON ?

|
JavaScript – AJAX
XML ou JSON ?
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>

|
JavaScript – AJAX
• L'objet natif JSON contient des méthodes pour convertir des valeurs en JSON et pour convertir
des données JSON en valeurs JavaScript.
• La méthode JSON.stringify() permet de convertir une valeur en JSON, et éventuellement de
remplacer des valeurs grâce à une fonction de remplacement ou en ne filtrant que certaines
propriétés données.
XML ou JSON ?
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("toto"); // '"toto"'
JSON.stringify({x: 5, y: 6}); // '{"x":5,"y":6}'

|
JavaScript – AJAX
• La méthode JSON.parse() interprète une chaîne de caractères comme du JSON, transformant de
façon optionnelle la valeur produite et ses propriétés, puis retourne la valeur.
XML ou JSON ?
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;

|
JavaScript – AJAX
• L’architecture AJAX est utilisée massivement dans les sites et applications web. Généralement
utilisée pour dynamiser quelques éléments comme la validation et l’envoi d’un formulaire, la
pagination d’éléments, etc.
• On développe également des applications « full-ajax » : le code peut devenir vite complexe, lourd,
difficile à maintenir.
• D’autres technologies ont émergées en remplacement ou complément de Ajax, par exemple les
WebSocket ou le concept de « binding » (pour lier de manière automatique un élément du DOM
à une source de données) utilisé par exemple par AngularJS ou EmberJS.
AJAX : Aujourd’hui et demain

|
Le langage
JavaScript
Concepts avancés

|
• La portée est un des éléments fondamentaux de JavaScript, et peut être le plus difficile à maitriser
car il diffère beaucoup des autres langages de programmation. La portée s’applique aux variables
comme aux fonctions.
• Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein de la portée dans
laquelle on souhaite l'appeler.
• On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces
variables n'existent que dans la portée de la fonction.
Fonctions : portée

|
• En revanche, une fonction peut accéder aux différentes variables et fonctions qui appartiennent à
la portée dans laquelle elle est définie.
• Une fonction définie dans une autre fonction peut également accéder à toutes les variables de la
fonction « parente » et à toute autre variable accessible depuis la fonction « parente ».
Fonctions : portée

|
Fonctions : portée
// The following variables are defined in
// the global scope
var num1 = 20,
num2 = 3,
name = "Licorne";
// This function is defined in the global scope
function multiply() {
return num1 * num2;
}
multiply(); // Returns 60
// A nested function example
function getScore () {
var num1 = 2,
num2 = 3;
function add() {
return name + " scored " + (num1 + num2);
}
return add();
}
getScore(); // Returns "Chamahk scored 5"

|
• Comme on l’a vu, JavaScript permet d'imbriquer des fonctions et la fonction interne aura accès
aux variables et paramètres de la fonction parente. À l'inverse, la fonction parente ne pourra pas
accéder aux variables liées à la fonction interne.
• On crée ce qu’on appelle une closure (fermeture en français) lorsque la fonction interne est
disponible en dehors de la fonction parente.
• Une closure est un objet spécial qui combine : une fonction + l’environnement dans lequel la
fonction a été créée.
Fonctions : closures

|
var animal = function(nom) { // La fonction externe utilise un paramètre "nom"
var getNom = function () {
// La fonction interne accède à la variable "nom" de la fonction externe
return nom;
}
// Renvoie la fonction interne pour la rendre disponible
// en dehors de la portée de la fonction parente
return getNom;
}
monAnimal = animal("Licorne");
monAnimal(); // Renvoie "Licorne"
Exemple 1 :

|
function createFunction() {
var name = "Hello";
function displayName() {
alert(name);
}
return displayName;
};
var myFunction = createFunction();
myFunction();
Exemple 2 :
• L'intérêt de ce code est que la fonction displayName()
a été renvoyée depuis la fonction parente avant d'être
exécutée.
• Normalement, les variables locales d'une fonction
n'existent que pendant l'exécution d'une fonction. Une
fois que createFunction() aura fini son exécution, on
peut penser que la variable name ne sera plus
accessible.

|
var name = "Hello";
alert(name);
}
return displayName;
};
myFunction();
• Cependant, le code continue à fonctionner : la variable
est donc accessible d'une certaine façon.
• La solution est la suivante : createFunction est
devenue une closure.

|
var name = "Hello";
alert(name);
}
return displayName;
};
myFunction();
• Pour rappel : closure = fonction + environnement dans
lequel la fonction a été créée.
• L'environnement est composé de toutes les variables
locales de la portée présente lorsque la fermeture a été
créée.
• Ici myFunction est une fermeture qui contient la
fonction displayName et la chaîne de caractères "Hello"
qui existait lorsque la closure a été créée.

|
function faireAddition(x) {
return function(y) {
return x + y;
};
};
var ajout5 = faireAddition(5);
var ajout10 = faireAddition(10);
console.log(ajout5(2)); // 7
console.log(ajout10(2)); // 12
Exemple 3 :
• faireAddition permet de créer d'autres fonctions (qui
font la somme de leur argument et d'un nombre fixe).
• On crée deux fonctions, la première qui ajoute 5 à
l'argument et la deuxième qui ajoute 10.
• ajout5 et ajout10 sont des closures. Ils partagent la même
définition de fonction mais des environnements différents.
• Dans l'environnement de ajout5, x vaut 5. Pour ajout10, x
vaut10.

|
function getCounter() {
var i = 0;
return function () {
return i++;
}
}
var counter1 = getCounter();
var counter2 = getCounter();
console.log(counter1()); // 1
Exemple 4 :

|
var sayHello = function (name) {
var text = 'Hello, ' + name;
console.log(text);
};
};
sayHello('Todd');
Exemple 5 : que fait ce code ?

|
var sayHello = function (name) {
var text = 'Hello, ' + name;
console.log(text);
};
};
var helloTodd = sayHello('Todd');
helloTodd(); // will call the closure and log 'Hello, Todd'
Exemple 5 : que fait ce code ?

|
Exercice d’application :
• Soit le code HTML suivant :
• Créer un script qui permette de changer le texte d’aide (par défaut « Des aides seront affichées
ici ») au clic sur un champ input.
<span id="helper">Des aides seront affichées ici</span>
<p>Email : <input type="text" id="email" /></p>
<p>Nom : <input type="text" id="name" /></p>
<p>Âge : <input type="text" id="age" /></p>

|
• Dans une fonction JavaScript on aura l’objet suivant :
var helpers = [
{'id': 'email', 'helper': 'Votre adresse e-mail'},
{'id': 'name', 'helper': 'Votre prénom et nom'},
{'id': 'age', 'helper': 'Votre age (vous devez avoir au moins 18 ans)'}
];
• Aide : faire une boucle sur cet objet et manipuler le DOM avec la fonctions
document.getElementById() pour sélectionner un élément HTML via son id. Utiliser « innerHTML »
pour modifier le contenu d’un élément, et onfocus pour créer un évènement au focus.

|
function showHelp(help) {
document.getElementById('helper').innerHTML = help;
}
function setupHelp() {
var helpText = [
{'id': 'email', 'helper': 'Votre adresse e-mail'},
{'id': 'name', 'helper': 'Votre prénom et nom'},
{'id': 'age', 'helper': 'Votre age (vous devez avoir au moins 18 ans)'}
];
for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.helper);
}
}
}
setupHelp();

|
• Problème : le code précédent ne fonctionne pas. Quelque soit le champ sur lequel on se situe, le
message d'aide concernant l'âge est le seul qui s'affiche.

|
• Explications : les fonctions attachées aux gestionnaires d'événements sont des closures et que
l'environnement qui leur est rattaché est le même pour les trois : il provient de la portée de la
fonction setupHelp.
...
for (var i = 0; i < texteAide.length; i++) {
document.getElementById(item.id).onfocus = function() {
showHelp(item.helper);
}
}
}
Closure

|
function makeHelpCallback(help) {
return function() {
showHelp(help);
};
}
...
for (var i = 0; i < helpText.length; i++) {
document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
}
}

|
• On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces
variables n'existent que dans la portée de la fonction.
Portée des fonctions et variables
// code here can not use carName
function myFunction() {
var carName = "Volvo";
// code here can use carName
console.log(carName); // Volvo
}
console.log(carName); // Uncaught ReferenceError: carName is not defined

|
• Si on assigne une valeur à une variable qui n’a pas été déclarée (avec var), cette variable aura
automatiquement une portée globale.
carName = "Volvo";
}

|
• Une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée
dans laquelle elle est définie.
• Une variable déclarée en dehors d’une fonction a une portée globale.
var carName = "Volvo";
}

|
• Une fonction définie dans une autre fonction (= closure) peut également accéder à toutes les
variables de la fonction « parente » et à toute autre variable accessible depuis la fonction «
parente ».

|
// Variables globales
var num1 = 20,
num2 = 3,
nom = "Licorne";
// Fonction définie dans la portée globale
function multiplier() {
return num1 * num2;
}
multiplier(); // Renvoie 60
function getScore () {
var num1 = 2,
num2 = 3;
function ajoute() {
return nom + " a marqué " + (num1 + num2);
}
return ajoute();
}
getScore(); // "Licorne a marqué 5"

|
Portée et this
var myFunction = function () {
console.log(this); // this = global, [object Window]
};
myFunction();
var myObject = {};
myObject.myMethod = function () {
console.log(this); // this = Object { myObject }
};
var nav = document.querySelector('.nav'); // <nav class="nav">
var toggleNav = function () {
console.log(this); // this = <nav> element
};
nav.addEventListener('click', toggleNav, false);

|
Portée et this
console.log(this); // <nav> element
setTimeout(function () {
console.log(this); // [object Window]
}, 1000);
};
• Même au sein de la même fonction, le scope peut être changé et la valeur de this peut l’être
également.

|
Portée et this
var that = this;
console.log(that); // <nav> element
setTimeout(function () {
console.log(that); // <nav> element
}, 1000);
};
• Même au sein de la même fonction, le scope peut être changé et la valeur de this peut l’être
également.

|
Créer un scope privé
(function () {
var myFunction = function () {
// do some stuff here
};
})();
myFunction(); // Uncaught ReferenceError: myFunction is not defined

|
Module Pattern : namespace + scope privé et public
// Définition du module
var Module = (function () {
var privateMethod = function () {
...
};
return {
myMethod: function () {
console.log('myMethod has been called.');
},
someOtherMethod: function () { ... }
};
})();
// call module + methods
Module.myMethod();

|
• L'élévation est peut-être l'élément le plus surprenant et celui qui peut causer le plus de soucis en
termes de portée. Le hoisting est fait de manière transparente par JavaScript.
• La principale chose à garder en mémoire est la suivante (pour ECMAScript 5) : pour toute
définition d'une variable, il y a une déclaration de cette variable au début de sa portée et
une affectation à l'endroit de sa définition.
• Les déclarations de fonctions sont également remontées dans le code. Par contre ce n’est pas le
cas des expression de fonctions.
Hoisting (élévation)

|
var state; // variable declaration
state = "ready"; // variable definition (assignment)
var state = "ready"; // declaration plus definition
• Il faut toujours visualiser une variable comme étant constituée de deux parties : la déclaration puis
la définition.

|
• On a vu qu’une variable déclarée dans un scope appartient à ce scope (cette portée).
• Mais ce qu’on a pas encore vu, c’est que peut importe où la variable est déclarée dans ce scope,
toutes les déclarations de variables sont remontées en haut de leur scope (global ou local). C’est
ce qu’on appel l’élévation.
• Note : l’élévation déplace seulement la déclaration de la variable. L’assignement n’est pas déplacé.
console.log(state); // output: undefined
var state = "ready";
var state; // moved to the top
console.log(state);
state = "ready"; // left in place

|
• JavaScript peut parfois se révéler déroutant, notamment pour les développeurs habitués à des
langages fonctionnant avec des classes.
• JavaScript ne fournit pas d'implémentation de classe.
• Le mot-clé class a été introduit avec ECMAScript 6 mais ne fournit qu'un sucre syntaxique, JavaScript
continue d'avoir un modèle d'héritage basé sur les prototypes.
Prototypes : présentation

|
• Mais alors, quid de l’héritage ?
• Dès lors qu'on aborde l'héritage, JavaScript n'utilise qu'un seul concept : les objets (souvenez-
vous, tout est objet en JavaScript !).
• Chaque objet possède un lien, interne, vers un autre objet, appelé prototype.
• Cet objet prototype possède lui aussi un prototype et ainsi de suite, jusqu'à ce que l'on aboutisse
à un prototype null. null, n'a, par définition, aucun prototype et forme donc le dernier maillon de
la chaîne des prototypes.
Prototypes : présentation

|
• On sait déjà que les objets JavaScript sont des conteneurs de propriétés. On vient de voir que
chaque objet possède un lien vers un objet prototype.
• Lorsqu'on souhaite accéder à une propriété d'un objet, on recherche :
• d'abord parmi les propriétés propres de l'objet,
• puis parmi celles de son prototype,
• puis parmi celle du prototype du prototype,
• et ainsi de suite jusqu'à ce qu'une propriété correspondante soit trouvée ou qu'on ait
atteint la fin de la chaîne de prototypes.
Prototypes : héritage de propriété

|
• En JavaScript, toute fonction peut être rattachée à un objet en tant que propriété.
• Une fonction héritée agit comme n'importe quelle autre propriété (voir slide précédent).
Prototypes : héritage de fonctions

|
• Le but est de créer la chaine de prototypes suivante :

|
Animal = function(name) { this.name = name; }
Animal.prototype.eats = function() {
return this.name + " is eating";
}
Chordate = function(name) { this.name = name; }
Chordate.prototype = new Animal();
Chordate.prototype.has_spine = true;
Mammal = function(name) { this.name = name; }
Mammal.prototype = new Chordate();
Mammal.prototype.has_hair = true;
m = new Mammal('cat');

|
• Remarque : lorsqu'une fonction héritée est exécutée, la valeur de this pointe vers l'objet qui hérite.
Prototypes : héritage de fonctions (et portée)
var o = {
a: 2,
m: function(b){
return this.a + 1;
}
};
console.log(o.m()); // 3
// Appelle de o.m : 'this' fait référence à o
var p = Object.create(o);
// p est un objet héritant de o
p.a = 12; // crée une propriété 'a' pour p
console.log(p.m()); // 13
// lorsque p.m est appelé, 'this' fait référence
à p.

|
JavaScript – Concepts avancés (mémoire)
Références
var me = {
name: {
first: "John"
}
};
var foo = me.name;
foo = {first: "Alexis"};
console.log(me.name.first);

|
• var str : on déclare simplement un
pointeur. La valeur de str est pour
l’instant sur undefined
• str = "hi" : on prend un pointeur
et on lui assigne une adresse sur cette
variable en mémoire
Références

|
Références
var obj = {};
obj.txt = "hi";

|
L’opérateur delete
var me = {
name: {
first: "Justin"
}
},
foo = me.name;
delete me.name;
console.log(foo.first);
window
me
name
first
"justin"

|
var me = {
name: {
first: "Justin"
}
},
foo = me.name;
delete me.name;
window
me
name
first
"justin"
foo

|
var me = {
name: {
first: "Justin"
}
},
foo = me.name;
delete me.name;
window
me
first
"justin"
foo

|
• L'opérateur delete permet de retirer une propriété d'un objet.
• Contrairement à ce qu'on pourrait croire, l'opérateur delete n'a strictement rien à voir avec de la
libération de mémoire directe  il ne libère la mémoire qu'indirectement, en supprimant des
références.
• Si l'opération de delete est bien effectuée, la propriété sera retirée de l'objet.
• Remarque : delete fonctionne uniquement pour les propriétés d'un objet. Il n'a aucun effet sur les
variables ou les noms de fonctions.

|
Références (suite)
var me = {
name: {
first: "Justin"
}
},
foo = me.name;
window
me
name
first
"Justin"
foo

|
Références (suite)
var me = {
name: {
first: "Justin"
}
},
foo = me.name;
foo = {
first: “Alexis"
}
window
me
name
first
"Justin"
foo
first
"Alexis"

|
21
undefined
undefined
21
{}
NaN
true
Les opérateurs de comparaison expliqués
"21"
null
null
21
{}
NaN
{valueOf: function() {return "1"}}
==
==
===
===
===
===
==
vrai
vrai
faux
vrai
faux
faux
vrai

|
• Opérateur === avec des types primitifs.
• Ce code va rechercher ces deux primitifs en
mémoire et va chercher à comparer leurs valeurs.
var str1 = "hi";
var str2 = "hi";
str1 === str2 vrai
Adresse Valeur
… …
x1001 call-object
x1002 str1
x1003 x2001
x1004 str2
x1005 x2101
… …
x2001 STRING
x2002 hi
… …
x2101 STRING
x2102 hi

|
• Opérateur === avec des objets.
• Ce code va rechercher ces deux objets en mémoire
et va comparer leurs pointeurs (car ce ne sont pas
des primitifs). C’est une comparaison « par
référence ».
var obj1 = {};
var obj2 = {};
obj1 === obj2 faux
Adresse Valeur
… …
x1001 call-object
x1002 obj1
x1003 x2001
x1004 obj2
x1005 x2101
… …
x2001 OBJECT
x2002 0
… …
x2101 OBJECT
x2102 0

|
Les opérateurs de comparaison expliqués – x == y
Types identiques ?
Tous les deux null ou undefined ?
string == number ?
boolean == anything ?
Object == string ou Number ?
===
true
==
==
false

|
true == ({toString: function() {return "1"}})
Types identiques ?
string == number ?
===
true
1 == ({toString: function(){return "1"}})
==
false

|
1 == ({toString: function() {return "1"}})
Types identiques ?
string == number ?
===
true
false
1 == "1"
==

|
1 == "1"
Types identiques ?
string == number ?
===
true
1 == 1
==
false

|
1 == 1
Types identiques ?
string == number ?
true
==
false
===
==
C’est pour ça que le
comparateur == est
gourmand en performance !
Il faut plutôt privilégier
l’opérateur ===.

Partie 2
Développer avec jQuery
Write less, do more

|
jQuery – Présentation
• jQuery est une bibliothèque JavaScript open-source et multi-plateforme créée
entre autre pour faciliter la manipulation du DOM, la gestion des
évènements et l’utilisation de l’Ajax.
• On peut étendre les fonctionnalités de jQuery par l’ajout du plugins. Il existe
par exemple plusieurs centaines de plugins permettant d’implémenter une
galerie d’image.
• Première version lancée par John Resig en 2006.
• On distingue 2 branches en production :
• version 1.x (dernière en date 1.12.0) : support anciennes version IE
• version 2.x (dernière en date 2.2.0) : plus légère

|
Avantages
• Facilite grandement la manipulation du DOM
(l’utilisation de l’API document par JavaScript
reste compliquée dés qu’il s’agit de manipuler
des éléments précis du DOM).
• On écrit souvent 2x moins de lignes de codes
avec jQuery qu’en JavaScript natif. Gain de
temps; maintenabilité accrue; etc.
• Plugins : éviter de réinventer la roue !
Inconvénients
• jQuery est une couche d’abstraction à
JavaScript, si bien que certains développeurs
« développent » en jQuery sans même
connaitre JavaScript.  peut être
problématique.
• Nécessite de charger la bibliothèque (qui est
de plus en plus lourde au fil du temps…).
• Passer par les fonctions natives du langages
JavaScript sera toujours plus rapide (en terme
de charge / temps d’exécution).

|
• jQuery UI : collection d'éléments utiles dans le développement d'une interface utilisateur riche et
interactive. La bibliothèque est découpée en 4 parties complémentaires : interactions (par
exemple gestion du drag’n’drop), widgets (Datepicker, ProgressBar, Slider…), effets et les thèmes.
jQuery UI a passé son âge d’or… il est en perte de vitesse depuis. On recommandera plutôt
d’utiliser des fameworks UI en HTML5 (comme Bootstrap).
• jQuery Mobile : première version sortie en octobre 2010, permet de développer facilement des
interfaces mobiles. La bibliothèque a perdu de son intérêt depuis l’apparition de frameworks
mobiles « modernes » plus performants. PhoneGap le maintien en vie.
Projets connexes

|
• En fonction du projet sur lequel vous travaillez et des impératifs du cahier
des charges (support des anciens navigateurs, ou utilisation d’un plugin
jQuery basé sur une ancienne version, etc. ?), choisissez la version de jQuery
correspondante.
• Pour de nouveaux projets « from scratch », on conseillera la branche 2.x.
• Chargement de la bibliothèque (version minifiée) en local ou via un CDN.
Chargement de la bibliothèque
<script src="jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

|
jQuery – Sélecteurs
• Les sélecteurs jQuery permettent de sélectionner des éléments du DOM sur lesquels on souhaite
effectuer des opérations (par exemple récupérer la valeur d’un champ input, ou changer l’opacité
d’un div).
• En JavaScript natif on passe par l’API document qui permet l’accès et la manipulation directe du
DOM. Cette API fournit des méthodes comme getElementById() ou getElementsByTagName() qui
sont pratiques pour sélectionner des éléments simples et précis. Pour des usages plus poussés,
ces méthodes montrent vite leurs limites.
• jQuery permet de sélectionner très facilement des éléments du DOM en utilisant la fonction $().

|
• La fonction $() n’est en fait qu’un alias vers la fonction jQuery().
• La fonction $() créé un nouveau objet jQuery qui référence le(s) élément(s) sélectionné(s).
• Note : on peut également utiliser des fonctions de jQuery sans forcément sélectionner un
élément du DOM en amont. C’est par exemple le cas de $.ajax().
• Syntaxe de base : $(selector).action();
• Le sélecteur peut être vue comme une requête de sélection permettant d’identifier le ou les
éléments HTML à manipuler.

|
• Tout est question de contexte.
• Par défaut, les sélecteurs effectuent leurs recherchent dans le DOM à partir de la racine du
document (la page web). Toutefois, un contexte alternatif peut être donné en utilisant le second
attribut optionnel de la fonction $().
$("div.foo").click(function() {
$("span").addClass("bar");
});
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
Recherche d’un élément « span » dans le DOM à partir de
la racine du document.
Recherche d’un élément « span » dans le DOM à partir du
nœud div.foo. C’est-à-dire que seul les éléments span
enfants de .foo seront sélectionnés.

|
• En interne, la sélection d’un contexte différent est implémenté avec la fonction .find().
• Donc $("span", this) est équivalent à $(this).find("span").
• De la même manière, on peut passer un sélecteur en 2nd argument :
// Sélectionner tous les éléments p enfant de #bar
$("p", "#bar");
// Equivalent à :
$("#bar").find("p");

|
Sélecteur Exemple Sélectionnera…
this $(this) L’élément courant
* $("*") Tous les éléments de la page
#id $("#foo") Les éléments avec l’id “foo"
.class $(".foo") Les éléments avec la classe “foo"
.class,.class $(".foo, .bar") Tous les éléments avec la classe “foo" ou “bar"
element $("p") Tous les éléments <p>
el1,el2,el3 $("h1, div, p") Tous les éléments <h1>, <div> et <p>
:first $("p:first") Le premier élément <p>
:last $("p:last") Le dernier élément <p>
:even $("tr:even") Tous les éléments <tr> pairs (even)

|
parent > child $("div > p") Tous les éléments <p> qui sont enfant direct d’un élément <div>
parent descendant $("div p") Tous les éléments <p> qui sont descendant d’un élément <div>
element + next $("div + p") Le premier élément <p> qui sera à la suite d’éléments <div>
:focus $(":focus") L’élément qui a actuellement le focus
:contains(text) $(":contains('Hello')") Tous les éléments qui contiennent le texte « Hello »
:has(selector) $("div:has(p)") Tous les éléments <div> qui ont un élément <p>
:empty $(":empty") Tous les éléments vides
:parent $(":parent") Tous les éléments qui sont parents d’un autre élément
:hidden $("p:hidden") Tous les éléments <p> qui sont cachés (visibilité)
:visible $("table:visible") Tous les éléments <table> qui sont visibles

|
[attribute] $("[href]") Tous les éléments avec un attribut href
[attribute=value] $("[href=‘foo.htm']") Tous les élements avec un attribut href égal à “foo.htm"
[attribute!=value] $("[href!=‘foo.htm']") Tous les éléments avec un attribut href different de “foo.htm"
[attribute$=value] $("[href$='.jpg']") Tous les éléments avec un attribut href finissant par ".jpg"
[attribute^=value] $("[title^='Tom']") Tous les éléments avec un attribut titre commençant par "Tom"
[attribute*=value] $("[title*=‘foo']") Tous les éléments avec un attribute titre contenant le mot “foo"

|
:input $(":input") Tous les éléments input
:text $(":text") Tous les éléments input de type "text"
:checkbox $(":checkbox") Tous les éléments input de type "checkbox"
:submit $(":submit") Tous les éléments input de type "submit"
:enabled $(":enabled") Tous les éléments input activés
:disabled $(":disabled") Tous les éléments input désactivés
:selected $(":selected") Tous les éléments input sélectionnés
:checked $(":checked") Tous les éléments input cochés

|
• Soit le code HTML ci-dessous, sélectionner en jQuery le titre de niveau h1 et passer le texte en
majuscule (vous pouvez utiliser la fonction css() pour manipuler les styles). Sélectionner le premier
élément li de la liste et passer le texte en rouge.
Exercice d’application rapide
<div id=wrapper>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Un paragraphe de test</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>

|
Exercice d’application rapide
<div id="wrapper">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Un paragraphe de test</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
<script>
$(function() { // ou $(document).ready(function() {
$('h1').css('text-transform', 'uppercase');
$('li:first-child').css('color', 'red');
});
</script>
Bien penser à charger
jQuery dans vote page !

|
jQuery – La fonction $() (notion avancée)
• Nous avons vu que la fonction $() permet de sélectionner un ou des éléments du DOM en fonction
d’une requête.
• On peut aussi utiliser la fonction $() avec les objets JavaScript natifs.
• Dans ce cas, seules les fonctions jQuery data(), prop(), on() et trigger() sont disponibles.
// Define a plain object
var foo = { foo: "bar", hello: "world" };
// Pass it to the jQuery function
var $foo = $(foo);
// Test accessing property values
var test1 = $foo.prop("foo"); // bar

|
// Execute la fonction quand le DOM est prêt à être utilisé
// C’est-à-dire quand la page sera entièrement chargée
$(function() {
// Document is ready
});
• Dernier usage de la fonction $() : l’utilisation d’une fonction de callback.
// Utilisation d’un alias (exemple d’utilisation: utilise lorsqu’on travaille avec WordPress, ou seul
// le mot clé jQuery est disponible
jQuery(function( $ ) {
// On peut maintenant utiliser le signe $ comme alias à la function "jQuery"
});

|
$(document).ready(function(){
// Document is ready
});
• La fonction $(function() { ... }); est équivalente à la notation :

|
jQuery – L’objet jQuery (notion avancée)
• Quand la fonction jQuery (ou l’alias $) est invoquée avec une sélecteur CSS, elle retournera un
objet jQuery enveloppant tout élément(s) correspondant à ce sélecteur. Une « collection » est
retournée. Attention, ce n’est pas un array JavaScript !
• Par exemple, en écrivant :
var headings = $("h1");
• La variable headings est maintenant un élement jQuery contenant tous les éléments <h1> de la
page au moment où la ligne a été interprétée par JavaScript. On peut vérifier ça en appelant la
propriété length :
alert(headings.length);

|
• La fonction eq() permet de retourner un élément précis de la collection jQuery :
var firstHeading = headings.eq( 0 );
• La fonction get() permet de retourner un élément DOM précis de la collection jQuery. Donc au
lieu de retourner un élément du DOM « jQuerisé », on retourne l’élement DOM lui-même (comme
on l’aurait fait avec les fonctions de sélection natives de JavaScript) :
var firstHeadingElem = $( "h1" ).get( 0 );
• Par contre on ne peut plus utiliser les fonctions natives de jQuery sur cette variable.

|
• Détail important : à chaque sélection d’un élément, un objet jQuery différent est retourné (même
si cet objet fait référence au même élément du DOM).
// Créé 2 objets jQuery totalement distinct pour le même élément
var logo1 = $("#logo");
var logo2 = $("#logo");
// Pour s’en assurer, on peut comparer ces objets :
console.log(logo1 === logo2); // false
• Par contre, ils contiennent (référencent) le même élément DOM :
var logo1Elem = logo1.get(0);
var logo2Elem = logo2.get(0);
console.log(logo1Elem === logo2Elem); // true

|
• Pour bien distinguer un objet jQuery d’un élément du DOM, il est d’usage de préfixer les variables
référant à un objet jQuery avec le signe « $ ».
• Il n’y a aucune magie derrière cette pratique : c’est juste une convention de nommage (à suivre ou
non… mais soyez constant dans l’écriture de votre code).
// Comparaison d’éléments du DOM (mais avec des nom de variable plus explicites)
var $logo1 = $("#logo");
var logo1 = $logo1.get(0);
var $logo2 = $("#logo");
var logo2 = $logo2.get(0);
console.log(logo1 === logo2); // true

|
• Les objets jQuery ne sont pas dynamique : dans le sens ou la collection retournée par un sélecteur
ne changera pas, même si des éléments correspondant au sélecteur son supprimés ou ajoutés
dans le DOM.
• Si le document a peut-être changé depuis la création initiale de l'objet jQuery, la collection doit
être mise à jour en créant un nouveau objet jQuery. Tout simplement en ré-exécutant le même
sélecteur :
var allParagraphs = $("p");
// On ajoute un nouveau paragraphe dans le DOM pour un raison X ou Y. allParagraphs n’est pas MAJ.
// On doit mettre à jour manuellement la sélection précédente :
allParagraphs = $("p");

|
jQuery – Fonctions
• Une fois qu’un élément a été identifié (c’est-à-dire sélectionné), on peut utiliser des fonctions
jQuery sur cet élément. La plupart de ces fonctions sont dites « utilitaires » dans le sens où elles
permettent de simplifier leur manipulation.
• Les fonctions jQuery ne concernent pas uniquement la manipulation du DOM ou la mise en
forme CSS.
• Syntaxe : $(selector).action();
• On peut « chainer » la plupart des fonctions : $(selector).action().action2().action3();

|
• addClass() : ajoute une ou plusieurs classes aux éléments sélectionnés
• removeClass(): retire une ou plusieurs classes aux éléments sélectionnés
• toggleClass() : ajoute la classe si elle n’existe pas, sinon retire cette classe (toggle = bascule)
• hasClass() : vérifie si l’un des éléments sélectionné contient cette classe
Manipulation des classes CSS
$("p:first").addClass("intro");
if ($("p:first").hasClass("intro")) {
$("#result").append(“Le paragraphe a la classe CSS intro");
}

|
• append() : insert du contenu à la fin des éléments sélectionnés
• appendTo() : insert un élément HTML à la fin / suite des éléments sélectionnés
• before() : insert du contenu avant les éléments sélectionnés
• insertAfter() : insert un élément HTML après les éléments sélectionnés
• insertBefore() : insert un élément HTML avant les éléments sélectionnés
• prepend() : insert un contenu au début des éléments sélectionnés (en leur sein)
• prependTo() : insert un élément HTML au début des éléments sélectionnés (en leur sein)
Insertion

|
Insertion : exemple de prependTo()
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$("<p>Test</p>").prependTo(".inner");
<h2>Greetings</h2>
<div class="inner">
<p>Test</p>Hello
</div>
<div class="inner">
<p>Test</p>Goodbye
</div>
</div>

|
• attr() : définit un attribut, ou retourne des attributs de l’élément sélectionné
D’autres fonctions…
$("img").attr("width", "500");
• clone() : fait une copie de l’élément sélectionné
$("p").clone().appendTo("body");
• css() : définit ou retourne un ou plusieurs styles CSS pour l’élément sélectionné
$("p").css("color", "red");
$("p").css({"background-color": "yellow", "font-size": "200%"}); // multiples propriétés

|
• empty() : supprime les éléments enfant (du nœud DOM) de l’élément sélectionné
$("div").empty();
• height() : définit ou retourne la hauteur de l’élément sélectionné
$("div").height(); … $("#foo").height(30);
• offset() : retourne la position (x/y) de l’élément à l’écran. Utiliser offsetParent() pour la position par
rapport à l’élément parent.
var positions = $(".bar").offset(); // Accès aux propriétés : positions.left et positions.top;

|
• text() : définit ou retourne le contenu texte de l’élément sélectionné
$("p").text("Hello world!"); // <p>Hello world!</p>
• val() : définit ou retourne la valeur de l’élément sélectionné
$("input:text").val("Hello World");
• find() : recherche un élément correspond au contexte de l’élément sélectionné
$(this).find("p");

|
jQuery – Evènements
• Il existe plus de 30 évènements en jQuery…
• Par exemple pour intercepter un clic sur un élément :
$("#foo").click(function(){
console.log(“foo clicked”);
});
• On passe une fonction anonyme à la fonction click() de jQuery. Le sélecteur $("#foo") fait que
l’évènement click sera attaché à cet élément du DOM.
• L’équivalent en JavaScript serait :
document.getElementById(‘#foo’).addEventListener(‘click’, function() {…})

|
• Cependant la fonction click() pose problème si notre DOM est susceptible de changer dans le futur.
L’évènement click sera attaché uniquement au éléments du DOM existant lors de l’appel de click().
• Pour lever cette limitation, la fonction live() a été introduite en jQuery 1.6 : déprécié en 1.7 et
supprimée en 1.9. ATTENTION : ne plus l’utiliser !
• On passera plutôt par la fonction on() :
• Utilise moins de mémoire (car délégation)
• Fonctionne avec des éléments ajoutés dynamiquement
NB : click() est un alias vers trigger(‘click’), tandis que click(data, fn) est un alias vers on(‘click’, null, data, fn).

|
• Avec la syntaxe « on » dynamique :
$("#foo").on("click", function(){
console.log("foo clicked");
});

|
• Exercice d’application : attacher un évènement « click » pour chaque paragraphe du div parent.
Dans la méthode de callback, modifier la couleur du texte en rouge. Commencer par utiliser click()
puis on().
• Attacher un second évènement « click » pour le bouton « create_element ». L’action sur ce bouton
doit ajouter un nouveau paragraphe dans le div parent (vous pouvez utiliser la méthode
append()).
<div id="wrapper">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<button id="create_element">Create new paragraph</button>

|
$(function() {
// Evènement non dynamique (à ne pas utiliser…)
/*$('#wrapper p').click(function() {
$(this).css('color', 'red');
});*/
$('#wrapper').on('click', 'p', function() {
$(this).css('color', 'red');
});
$('#create_element').click(function() {
$('#wrapper').append("<p>New element</p>");
});
});
• Exercice d’application : correction

|
• A savoir qu’on peut également déclencher manuellement la soumission d’un formulaire en lever
l’évènement submit :
L’évènement submit() pour l’envoi d’un formulaire
$("#myForm").submit(function(e) {
e.preventDefault();
console.log("Le formuaire myForm a été envoyé");
});
$("#foo").click(function() {
$("#myForm").submit();
});

|
L’évènement resize() pour surveiller la redimension d’une fenêtre
$(window).resize(function() {
console.log("La fenêtre a été redimensionnée par l’utilisateur");
});
• Attention, cet évènement est envoyé à l’élement « window ».
• On devra donc attacher l’évènement resize sur un sélecteur de window :

|
jQuery – AJAX
• L’utilisation de l’architecture AJAX en jQuery est plus simple qu’en JavaScript natif, surtout quand il
s’agit de supporter les navigateurs d’ancienne génération.
• Si on veut avoir un contrôle maximum sur la requête jQuery et la gestion des évènements, on
passera par la fonction / l’interface bas niveau $.ajax() :
$.ajax({
method: "POST",
url: "foo.php",
data: { name: "John", location: "Boston" },
dataType: "json",
success: function(resp) { ... },
error: function(req, status, err) { ... }
});

|
jQuery – AJAX
var jqxhr = $.ajax( "example.php" )
.done(function() {
alert("success");
})
.fail(function() {
alert("error");
})
.always(function() {
alert("complete");
});
• On peut aussi utiliser cette notation depuis jQuery >= 1.5 :

|
jQuery – AJAX
• Pour plus de simplicité, on peut également utiliser des fonctions raccourcies.
• $.get() permet de charger des données d’un serveur en utilisant le verbe HTTP GET :
// Requêter la page server.php en transmettant des données additionnelles
// Utiliser l’évènement done() en attachant une function de callback
$.get("server.php", { name: "John", time: "2pm" })
.done(function(data) {
console.log("Data Loaded: " + data);
}
);

|
jQuery – AJAX
• Pour plus de simplicité, on peut également utiliser des fonctions raccourcies.
• $.post() permet de charger des données d’un serveur en utilisant le verbe HTTP POST :
// Requêter la page server.php en transmettant des données additionnelles
// Utiliser l’évènement done() en attachant une function de callback
$.post("server.php", { name: "John", time: "2pm" })
.done(function(data) {
console.log("Data Loaded: " + data);
}
);
$.post("server.php", $("#myForm").serialize());

|
jQuery – AJAX
• Exercice d’application : soit le code HTML suivant, on cherche à soumettre ce formulaire de recherche
via une requête HTTP POST en utilisant l’architecture AJAX. Créer également la partie serveur (en PHP
par exemple). Retourner un objet JSON (en php : return json_encode([‘result’ => ‘…’]);) et parser le
résultat côté client.
• Aide : ajouter un évènement pour écouter la soumission du formulaire
 utiliser .submit(callback); sur le sélecteur correspond au formulaire searchForm. Utiliser par exemple
une fonction anonyme et passer « e » comme argument.
 utiliser la méthode preventDefault() pour stopper la propagation du clic.
<form action="search.php" id="searchForm">
<input type="text" name="s" placeholder=“Rechercher...">
<input type="submit" value="Search">
</form>
<div id="result"></div>

|
jQuery – AJAX
$("#searchForm").submit(function(e) {
e.preventDefault();
var $form = $(this),
term = $form.find("input[name='s']").val(),
url = $form.attr("action");
// Envoi paramètre "s" en POST
var posting = $.post(url, { s: term });
// Afficher le résultat dans un div
posting.done(function(data) {
data = $.parseJSON(data);
$("#result").empty().append(data.result);
});
});
<?php
header('Content-Type: application/json');
$search = $_POST["s"];
echo json_encode([
'result' => "Votre recherche : $search"
]);

|
jQuery – Effets et animations
• jQuery propose des fonctions d'animations et de transitions qui peuvent être appliquées sur les
éléments du DOM.
• On distingue deux groupes d’effets et animations :
• Les animations prédéfinies dans jQuery comme les effets de « fade » ou de « slide »
• Les animations manuelles que l’on paramètre soit même en appelant la fonction animate()

|
Effet sur la visibilité des éléments : hide / show
• hide(speed, callback) : permet de masquer un élément. Les deux paramètres de la fonction sont
optionnels. Le premier permet de définir le temps de l’animation (en ms ou en passant par
slow/fast), le second affecte une fonction de callback qui sera appelée à la fin de l’animation.
// Au clic sur le bouton, masquer l’élement #foo
// puis afficher un message de confirmation dans la console
$("#myButton").click(function() {
$("#foo").hide("slow", function() {
console.log("Animation complete");
});
});

|
Effet sur la visibilité des éléments : toggle
• toggle(speed, callback) : permet de basculer entre les fonctions hide() et show() en fonction
de l’état de l’élément. Par exemple si l’élément est visible, l’appel de toggle() entrainera le
déclenchement de hide().
// Au clic sur le bouton, masquer ou afficher l’élement #foo
// puis afficher un message de confirmation dans la console
$("#myButton").click(function() {
$("#foo").toggle(2000, function() {
console.log("Animation complete");
});
});

|
• fadeIn(speed, callback) : permet d’afficher progressivement un élément masquée (l’opacité de
l’élément cible va passer de 0 à 100 pendant la durée définie dans le paramètre optionnel speed).
Le second paramètre affecte une fonction de callback qui sera appelée à la fin de l’animation.
• fadeOut(speed, callback) : même principe, mais estompe progressivement un élément au lieu
de l’afficher.
Effet sur la visibilité des éléments : fading
$("a").click(function() {
$("div").fadeIn(3000, function() {
$("span").fadeIn(100);
});
return false;
});

|
• fadeToogle(speed, callback) : permet de basculer entre les fonctions fadeIn() et fadeOut() en
fonction de l’état de l’élément. Par exemple si l’élément est visible, l’appel de fadeToggle()
entrainera le déclenchement de fadeOut().
• fadeToogle(speed, opacity, callback) : permet d’afficher progressivement un élément
jusqu’à une opacité donnée. A l’inverse de fadeIn() qui passe l’opacité de 0 à 100.
Effet sur la visibilité des éléments : fading
$("p:first").on("click", function() {
$(this).fadeTo("slow", 0.33);
});

|
• Vous pouvez créer un effet de glissement sur les éléments en utilisant les fonctions slideDown(),
slideUp() ou slideToggle().
Effets de glissement (slide)
$("#flip").click(function(){
$("#panel").slideToggle();
});

|
• Si aucun effets prédéfinis correspond à votre usage, vous pouvez utiliser la fonction
animate({params}, speed, callback) pour définir votre propre animation.
Animations personnalisées
$("button").click(function(){
$("div.foo").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
}, 2000, function() {
console.log("Animation terminée");
});
});
Remarque : vous pouvez manipuler toutes les
propriétés CSS (sauf color qui nécessite
l’installation du plugin « jQuery Color »).
Cependant, le nom des propriétés doit être en
notation Camel Case.
padding-left  paddingLeft

|
• Comme presque toute fonction jQuery, vous pouvez passer par un chainage de méthodes pour éviter
de dupliquer du code. Dans l’exemple suivant, les animations se succèderons une après une :
Chainage des animations
$("#foo").css("color", "red")
.slideUp(2000)
.slideDown(2000);

|
jQuery – Itérations
• La function jQuery each() est utilisée pour itérer à travers chaque élément d’une collection
d’objets jQuery.
• Pour rappel, on utilise un sélecteur jQuery via la function $() ce qui aura pour effet de retourner
une collections d’objets jQuery correspondant à la requête du sélecteur.
• L’exemple suivant sélectionne chaque div du DOM et affiche l’index et l’ID de chaque div :
$('div').each(function (index, value) {
console.log('div' + index + ':' + $(this).attr('id'));
});

|
• L’exemple suivant permet d’afficher l’attribut href de chaque lien (élément <a>) du document :
$('a').each(function (index, value){
console.log($(this).attr('href'));
});
// Affichage uniquement des liens externes
$('a').each(function (index, value){
var link = $(this).attr('href');
if (link.indexOf('http://') === 0) {
console.log(link);
}
});

|
• On peut utiliser la fonction each() directement sur un sélecteur (qui retourne une collection), ou
l’utiliser de manière totalement indépendante du DOM. On utilisera la syntaxe $.each() :
// Tableau JavaScript
var arr = ['one', 'two', 'three', 'four', 'five'];
// Itérer chaque élément du tableau
$.each(arr, function (index, value) {
console.log(value);
// Stopper l’itération après le passage sur la valeur "three"
return (value !== 'three');
});
// Affichera : one two three

|
• La fonction utilitaire $.each() peut aussi itérer un objet JavaScript :
// Objet JavaScript
var obj = {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5
};
$.each(obj, function (index, value) {
console.log(value);
});
// Affichera : 1 2 3 4 5

|
jQuery – Plugins
• Les plugins permettent d’étendre les fonctionnalités de base de jQuery.
• L’appel d’un plugin se fait toujours de la même manière : $(selector).pluginName(options);
$('.slider').bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
slideMargin: 10
});

|
jQuery – Création d’un plugin
Structure basée sur https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js
;(function ( $, window, document ) {
...
})( jQuery, window, document );
Le point virgule avant l’invocation de la
fonction permet d’éviter d’éventuelles
erreurs (par exemple un autre plugin/script
en amont qui n’aurait pas fermé
correctement une instruction.
Trois arguments sont passés dans cette fonction
anonyme :
1) $ pour créer un alias de la fonction jQuery
2) l’objet natif window comme variable locale
3) l’objet natif document comme variable locale
2+3 : légèrement plus performant que d’appeler
les objets globaux window et document; facile la
minification.

|
;(function ($, window, document) {
...
var pluginName = "defaultPluginName",
defaults = {
propertyName: "value"
};
function Plugin(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
...
})(jQuery, window, document);
$.extend() : Etend un objet avec un
ou plusieurs autres, et retourne
l'objet original modifié.
La fonction « Plugin » sera utilisée
comme constructeur (voir slide
suivante).
Appel d’une des fonctions publics du
plugin (on verra dans le slide suivante
comment elle est déclarée et rendu
accessible).

|
...
$.fn[pluginName] = function (options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(
this,
"plugin_" + pluginName,
new Plugin(this, options)
);
}
});
};
...
Cette fonction agit comme un
Singleton pour éviter de multiples
instanciations du plugin.
Appel du constructeur
(voir slide précédente)
La propriété fn de jQuery est juste un alias
vers la propriété prototype.
De cette manière on étend jQuery en ajoutant
une nouvelle fonction à la chaine de fonction
jQuery.
Cette fonction sera : defaultPluginName();

|
...
$.extend(Plugin.prototype, {
init: function () {
this.yourOtherFunction("foo");
},
yourOtherFunction: function (text) {
// some logic
$(this.element).text(text);
}
});
...
On as vu que la fonction init() était appelée par le
constructeur de notre plugin.
Au sein de cette fonction, on peut déjà accéder au
DOM via this.element, et aux paramètres du plugin
via this.settings.
Comme son nom l’indique, on va pouvoir initier un
certain nombre d’actions, dont l’appel de notre
code métier.

|
• L’application web sur laquelle vous travaillez dispose d’un système de gestion des
comptes utilisateurs. Un formulaire permet à un visiteur de se créer un compte
utilisateur : il doit indiquer un nom, prénom, une adresse email et choisir un mot de
passe.
• Pour des raisons de sécurité, on souhaite forcer le choix d’un mot de passe sécurisé.
• On décide de passer par la bibliothèque PHP et JavaScript zxcvbn de Dropbox. Elle
permet de mesurer l’entropie d’un mot de passe en fonction de plusieurs critères.
La fonction native de zxcbn retourne un indice (propriété score) allant de 0 à 4.
Exercice d’application

|
• Le but final est d’afficher un indicateur graphique reprenant ce score. Si le score est supérieur ou
égale à 3 on autorisera la soumission du formulaire.
Exemple d’implémentation sur
dropbox.com

|
• Remarque : pour renforcer le calcul de l’entropie, on passera en paramètre à la fonction zxcvbn les
champs input nom, prénom et adresse email. De cette manière zxcvbn réduira l’entropie si le mot
de passe contient l’une de ces valeurs.
• Cette bibliothèque n’est pas portée sur jQuery. On devra créer un plugin jQuery pour faciliter la
manipulation des fonctions JavaScript fournies par zxcvbn et capitaliser sur le code créé
(réutilisation dans d’autres projets, partage à la communauté, etc.).
• Vous devrez procéder par étapes successives pour mener à bien cette mission.

|
• En premier lieu, créer un formulaire d’inscription, avec les champs correspondant aux informations
qu’on souhaite récupérer (nom, prénom, email, mot de passe), ainsi qu’un bouton de soumission.
Si vous souhaitez, vous pouvez même créer la partie serveur pour persister la soumission en table,
et même appeler la bibliothèque PHP zxcvbn pour renforcer la sécurité (indispensable en
production).
• Télécharger et intégrer la bibliothèque JavaScript zxcvbn dans votre page. Commencer par utiliser
la fonction native de zxcvbn pour calculer l’entropie.
• En fonction de cette entropie, autoriser ou non la soumission du formulaire.

|
• Seulement après, baser sur le squelette de plugin pour créer votre propre plugin que vous
nommerez « zxcvbn ». Ce plugin devra :
• Récupérer un certain nombre d’options : l’indice de force minimum attendu, des références
vers les champs input (ou directement les valeurs de ces champs), etc.
• Afficher un indicateur graphique à proximité du champ mot de passe
• Autoriser ou non la soumission du formulaire
Appeler le plugin avec le code : $("#form").zxcvbn({minScore: 3, blacklisted: […]});

Partie 3
L’architecture MEAN : introduction

|
MEAN – Introduction
• Depuis les 20 dernières années, il y a eu des changements conséquents dans le domaine du
développement informatique, et plus particulièrement en développement web.
• Les technologies, langages, et les architectures évoluent rapidement.
• Depuis 2/3 ans, un nouveau engouement pour le langage JavaScript dans la communauté des
développeurs. On a tendance à redécouvrir ce langage (et les possibilités qu’il offre), alors qu’il
existe depuis plus de 20 ans…
• « MEAN » est une architecture (on utilisera aussi le terme anglais « stack »).
• Utilisation massive de JavaScript, côté client et serveur.

|
• Découverte de l’architecture MEAN et ses composantes (couches et outils utilisés et utilisables).
• L’architecture MEAN n’est pas figée : vous pouvez remplacer un framework par un autre.
• Faible couplage et forte cohésion.
• Attention, MEAN n’est pas une réponse à tous les besoins !
• En développement informatique, l’ordre des opérations est très important. On doit d’abord
comprendre les besoins et problématique, et seulement ensuite choisir les technologies qui
peuvent y répondre.

|
• MEAN est une architecture à faible couplage et forte cohésion.
• C’est l’un des intérêts majeurs de cette stack.
• Le couplage mesure la dépendance entre système : par exemple entre les couches d’une
architecture (frameworks / modules), ou les classes d’un programme
• La cohésion mesure leurs compréhensibilités. Plus un élément à des responsabilités, plus faible
est sa cohésion.
Faible couplage et forte cohésion.

|
MEAN – L’architecture LAMP
• Pour mieux comprendre ce qu’il y a de si intéressant à propos de l’architecture MEAN, on doit
s’intéresser tout d’abord à l’architecture LAMP.
• Acronyme qui désigne les technologies open-source utilisées pour créer un site ou une
application web. Plusieurs couches : plateforme, serveur web, base de données et middleware/UI.

|
• Faible couplage et forte cohésion : LAMP, WAMP, MAMP, WIMP, LEMP, etc.
Plateforme
(système d’exploitation)
Serveur
web
Base de données
(SGBD)
Langage de programmation
(middleware / UI)

|

|
• LAMP s’est imposé comme un standard car c’est une architecture open-source, flexible et
rapidement déployable de nos jours.
• On peut facilement interconnecter des technologies entre elles.
• Cependant quelques limitations :
• Transformation des données
• Plusieurs langages de programmation (par exemple JavaScript, PHP et SQL)
• Scalabilité

|
MEAN – Choisir les bons outils
• A quoi ressemble le développement web de nos jours ?
• Recherche de composants / bibliothèques répondant à nos besoins. On se retrouve souvent avec
des technologies et langages différents au sein d’un même projet.
• Ne pas réinventer la roue : se reposer sur un système éprouvé, diminuer les coûts, etc.
• Nécessite par contre d’avoir des composants avec un faible couplage et une forte cohésion.

|
• Les managers recherchent l’outil ultime, qui permettrait de tout faire.
• Le marteau de Maslow : tentation qui consiste à travestir la réalité d’un problème en le
transformant en fonction des réponses dont on dispose, ou encore le fait de considérer qu’il n’y a
qu’une réponse unique à tous les problèmes.
« Si le seul outil que vous avez est un marteau, vous
tendez à voir tout problème comme un clou ».
Abraham Maslow

|
• Quand vous comparez des frameworks web, quand vous êtes à la recherche d’une solution
pouvant répondre à vos besoins, – et non une solution qui correspondrait exactement aux outils et
technologies que vous maitrisez –, …
• Il faut favoriser l’extensibilité sur la totalité, et les plugins sur les fonctionnalités du core (un
écosystème riche, robuste et actif).

|
MEAN – Découverte de cette architecture
• Le terme « MEAN » est l’acronyme de MongoDB, Express,
Angular et Node.js.
• Architecture nouvelle (moins de 3 ans), en plein développement.
• En 2015 elle a été largement propulsée, profitant du nouvel
engouement pour JavaScript, comme l’architecture « à la mode ».
• Un seule langage de programmation sur toutes les couches ,
JavaScript, et un seul format d’échange de données : JSON.
• On parle alors de solution « full-stack ».

|
Même langage, même objets…
{"_id": ObjectId("278390a08i399"), "username" : "john" }
{"_id": "278390a08i399", "username" : "john" }
{"_id": "278390a08i399", "username" : "john" }

|
• L’architecture MEAN ne doit pas être confondue avec l’architecture LAMP (ou ses dérivées).
• L’architecture MEAN est similaire dans le sens où :
• elle est également basée sur des technologies open-source,
• c’est une architecture à forte cohésion et à faible couplage.

|
LAMP ≠ MEAN
≠
≠
≠
≠
Linux
Apache
MySQL
PHP
MongoDB
Express
Angular
Node.js

|
LAMP  NEMA ?




Linux
Apache
MySQL
PHP
Node.js
Express
MongoDB
Angular
(plateforme)
(serveur web)
(persistance)
(interface utilisateur)

|
• Donc on a vu que Node.js n’est pas un serveur web.
• Node.js est « simplement » une plateforme qui inclue des modules réseau comme NET, HTTP,
HTTPS et UPD. Mais ont peut également charger des modules de plus haut niveau comme
Socket.io qui permet de gérer les WebSockets, ou bien SMTP pour créer un serveur d’envoi
d’emails…
• Cela signifie qu’on ramène ces services dans notre application, plutôt que de déployer notre
application sur un conteneur externe (comme un serveur).

|
LAMP MEAN
Linux Node.js
Navigateur
MySQL
MongoDBApache
Application
(PHP)
Application
Express.js
Application
Angular

|
• Tout comme LAMP, on se retrouve avec de nombreuses technologies devant cohabiter.
• Le faite d’avoir toutes ces couches ne signifie pas pour autant qu’on va devoir interagir avec
chacune d’entre elles !
• Existe-t-il un framework permettant de réunir / connecter ces technologies avec un peu plus
d’aisance, de commodité en apportant une génération de code (scaffolding), des tests
d’intégration, des scripts de déploiement, etc. ?
• MEAN.JS et MEAN.io (voir la partie 8 dédiée à ces frameworks)
• Avoir une architecture MEAN pleinement fonctionnelle en quelques minutes.

Partie 4
Node.js
Event-driven I/O server-side
JavaScript environment based on V8

|
Node.js
Présentation de Node.js : histoire,
usages, concepts clés et
architectures.

|
Node.js – Présentation

|
• Node.js est une plateforme open-source, piloté par les évènements,
pour développer des applications web côté serveur en utilisant le
langage JavaScript. On parle aussi de Node.js comme un environnement
d’exécution JavaScript.
• A l’origine Node.js pouvait seulement être installé sur Linux. Aujourd’hui,
des applications Node.js peuvent être exécutées également sur Windows
et Mac OS X.
• Moteur de script : machine virtuelle V8 de Google.
• Création : mai 2009 par Ryan Dahl.

|
• Nous avons vu que JavaScript est par nature asynchrone. La plupart des opérations I/O en
JavaScript sont non bloquantes : requêtes HTTP, requêtes AJAX, lecture / écriture sur le système
de fichier, etc.
• Cela signifie que les opérations s’exécutent de manière linéaire sans attendre la fin de l’opération
précédente. Les fonction de callback permettent de récupérer la réponse d’une opération.
• La programmation concurrente est un paradigme de programmation qui permet d’exécuter
plusieurs opérations au cours de période de temps qui se chevauchent simultanément, au lieu
d’exécuter ces opérations séquentiellement (attente de la fin d’une opération pour exécuter la
suivante).
Environnement non bloquant

|
• La programmation concurrente fait appel à des threads. Des langages comme Java ou
l’environnement .NET permettent de créer des applications multi-thread pour gérer la
concurrence en leur sein.
• Cependant, manipuler les threads n’est pas simple ! Communication inter-thread compliquée,
risque d’étreinte mortelle / deadlocks (interblocage de données), ralentissement parallèle,
problème de montée en charge, etc.
• Des mécanismes de synchronisation permettent de réduire ces problèmes.

|
• Les langages comme Java ou l’environnement .NET ne sont pas asynchrone. Les opérations d’I/O
ne sont pas non plus asynchrone.
• C’est pour ça qu’on doit obligatoirement passer par l’utilisation de thread si on ne veut pas
bloquer l’exécution de l’application.
• Dans un serveur web comme Apache, c’est le même problème : un thread est créé pour chaque
nouvelle connexion HTTP initiée par un client.
• Dans un contexte très concurrentiel, le modèle de programmation multi-threading atteint
rapidement ses limites. Dans le cas d’un serveur web, on a par exemple un nombre maximum de
thread en simultané (donc de thread disponible).

|

|
• Le problème ne se pose pas dans Node.js, car on profite de la puissante du langage JavaScript qui
est asynchrone.
• D’ailleurs, Node.js est single-threaded, c’est-à-dire que la programmation multi-thread est
impossible.
• Par exemple, dans le cas d’un serveur web créé avec Node.js, la nature non bloquante des
opérations I/O permet de gérer de très nombreuses connexions simultanées sans que cela
impacte les performances de l’application.

|
• De manière plus concrète, Node.js dispose en son sein d’une boucle d’évènements (event loop)
qui va continuellement traiter les évènements reçus.
• Dans le cas d’un serveur web avec Node.js, le serveur va conserver une pile de fonctions à
exécuter (dites de callback) lors de la réception d’évènements précis.
• L’unique thread de Node.js va ainsi traiter les évènements apparaissant dans la queue
d’évènements les uns après les autres, au fil des requêtes et fin d’IO.
• Permettre de traiter des milliers de requêtes simultanées en consommant très peu de mémoire.

|
• Seul inconvénient de ce modèle single-threaded : on ne profite pas de la puissance complète du
processeur s’il dispose de plusieurs cœurs.
• Pour ce faire, il faut lancer les applications Node.js en mode cluster (accessible via le module
« Cluster » de Node.js).
• Pour faire simple, ce module permet de partager des sockets entre processus pour mettre en
place du load balancing entre les cœurs du processeur.
• Plus d’informations sur la documentation : https://nodejs.org/api/cluster.html

|

|
• Piloté par les évènements.
• Modèle d’entrées / sorties (I/O) asynchrone non bloquant en passant par l’utilisation de callbacks.
• Tout à l’intérieur de Node.js est traité par un seul et unique thread.
• Approche réactive implémentée par le boucle d’évènements (voir schéma précédent).
Particularités de Node.js

|
• Node.js à un cycle de développement très rapide.
• Disclaimer : certaines fonctions de cette présentation
seront peut être dépréciés dans quelques mois…
• Généralement il y a au minimum 2 versions publiées
chaque mois.
• Des modifications importantes entre les versions :
attention aux outils dépréciés et aux tutoriels qui ne
sont plus à jour sur le web.
Cycle de développement et versions

|
• On distingue deux cycles de développement différents : les versions dites « LTS » et les versions
dites « Stable ».
• Versions LTS – L'abréviation LTS signifie Long Term Support, ou maintenue à long terme (3 ans).
Ces versions portent des numéros pairs et mettent l’accent sur la stabilité et la sécurité. A
privilégier en environnement de production. Dernière version LTS en date : v4.x.x (nom de code
Argon).
• Versions « Stable » – Ces versions portent de numéros impairs et ont des mises à jour plus
fréquentes du code. Ajout de nouvelles fonctionnalités et amélioration de l’API existante. Le nom
« stable » ne doit pas être compris au sens français du terme. Dernière version en date : v5.x.x.

|
• En décembre 2014, suit à un conflit interne en les développeurs de Node.js un
fork est créé : il s’agit de io.js. En juin 2015 Node.js et io.js se sont regroupés
pour travailler en ensemble.
• Les versions 1.x.x à 3.x.x réfèrent au fork io.js.
• La version 4.x.x de Node.js a été créé suite au regroupement de io.js et Node.js
(qui était en version 0.12.x).
• Attention : on retrouve énormément de tutoriels concernant la version 0.12.x.

|
Installation
• Aller sur nodejs.org et installer
Node.js sur votre poste.
• Télécharger la version 5.x.x.
• Exécuter la commande node -v
dans votre terminal pour vérifier
que l’installation s’est bien passée.

|
• Comment peut on faire tourner JavaScript en dehors d’un navigateur web ?
• On pourrait penser que JavaScript sert seulement à manipuler le DOM d’une page et à interagir
avec les évènements utilisateur via le navigateur (clic souris, etc.).
JavaScript côté serveur ?
JavaScript
Si vous vous êtes fait la représentation
suivante de JavaScript, vous pourriez
être vraiment confus par cette notion
d’utiliser JavaScript en hors d’un
navigateur.

|
« JavaScript » peut être décomposer en trois
parts égales :
• Le langage en lui-même (éléments de
langage, mots clés, concepts, structure, etc.)
• La plateforme sur lequel il peut tourner : V8,
SpiderMonkey, Chakra, etc.
• Les API : Navigator, Window, Document…
JavaScript
Plateforme
APIs

|
• Ces API dépendent de la plateforme sur
laquelle JavaScript (au sens large) est
exécuté.
• Dans le cas de JavaScript côté client, ces API
sont fournies par le navigateur. Chaque
navigateur gère ces API à sa manière (d’où
parfois des problèmes de compatibilité entre
navigateurs).

|
• Si vous voulez exécuter les mêmes instructions sur Node.js, créer un fichier foo.js avec les lignes
suivantes :
console.log(navigator.appName);
console.log(navigator.appVersion);
• Puis exécutez-le avec Node.js en utilisant la commande « node » suivie de l’emplacement du
fichier (ou de son nom si la console est ouverte dans le même répertoire).
node foo.js

|
• Avec l’architecture MEAN on utilise la langage JavaScript de bout en bout :
• dans le navigateur,
• sur le serveur pour nos programmes métiers mais aussi dans la couche de persistance.
• Quand vous exécuter du JavaScript sur chacune des couches de l’architecture MEAN
(serveur, persistance, client) vous devez connaitre quelles sont les APIs disponibles.
• JavaScript, le langage est le seul élément qui est consistant dans les couches de notre
architecture.

|

|
• Pour rappel on peut décomposer un navigateur en deux grandes parties : le moteur de rendu et
le moteur de script.
• Ces moteurs peuvent égaler tourner en dehors de l’environnement d’un navigateur. Cela ouvre un
tout nouveau champ de possibilité.
• Mais à quoi ça sert de faire tourner sur un serveur un moteur de rendu qui est sensé permettre
d’afficher à l’écran une page… en dehors d’un navigateur ?

|
• Reproduire le comportement d’un navigateur sans avoir à charger la page avec un navigateur.
Utilisé pour faire des tests d’intégration.
• Exemple de PhantomJS (pour de rendu WebKit) ou SlimerJS (reproduit Gecko). Et si un test est en
échec, on peut demander la génération d’une capture d’écran.
• On peut également faire tourner un moteur de script côté serveur : c’est ce que fait Node.js via le
moteur V8 de Google.

|
Pour faire simple : presque
tout le monde.
Aller sur le wiki du
repository GitHub de
Node.js pour découvrir en
détail les usages faits par
certaines des entreprises
mentionnées ici.
Qui utilise Node.js ?

|
• Migration de Java (et Java EE pour le site internet) vers JavaScript et Node.js.
• Depuis le passage à Node.js : performances améliorées et coûts d’infrastructure réduits.
• « We now run one quarter of the EC2 instances on Node compared with the legacy Java stack,
whilst serving the same number of subscribers at lower latencies. »
• Gain de productivité pour les développeurs : itérations (développement, tests, build, déploiement)
plus faciles, du fait de la nature dynamique de JavaScript.
• Plus d’infos sur talentbuddy « Building With Node.js At Netflix, an Interview With Yunong J Xiao »
Qui utilise Node.js ? Le cas

|
• eBay utilisait Java et les frameworks web Spring et JAX-RS
• Depuis, migration vers JavaScript en Node.js dans le but d’améliorer les performances et de
switcher vers une plateforme moderne vers laquelle les développeurs seraient excités de travailler
avec.
• Le passage en full JavaScript a grandement facilité les itérations.
• Plus d’infos sur talentbuddy « Building With Node.js At eBay, an Interview With John Cline »

|
• Linkedin était écrit avec le framework Ruby on Rails, mais c’est maintenant l’une des plus
importante application Node.js en production. En complément de Node.js, HTML5 est utilisée
pour la version mobile et l’application mobile.
• « We use a ton of technologies at LinkedIn, but for the mobile server piece, it’s entirely Node-based.”
• Linkedin voulait migrer vers une solution leur apportant plus de flexibilité (par exemple via la
programmation asynchrone et évènementielle).
• Gain en performance et en scalabilité.

|
• Réduction drastique de l’infrastructure serveur :
• « The improvements the team saw were staggering. They went from running 15 servers with 15
instances (virtual servers) on each physical machine, to just four instances that can handle double
the traffic. »
• Plus d’infos sur talentbuddy « Building With Node.js At Linkedin », et VentureBeat.

|
• Node.js est organisé en plusieurs modules.
Chaque module gère une fonctionnalité du
core : système de fichier, réseau (DNS, HTTP,
TCP, UDP et TLS), fonctions
cryptographiques, etc.
• Les modules sont chargés dans le code avec
l’instruction require().
• Documentation complète :
https://nodejs.org/dist/latest-v5.x/docs/api/
Modules du core

|
Node.js – CommonJS
• Pour charger une bibliothèque dans une page web, on utilise la balise HTML <script>.
• Dans l’environnement Node.js, on utilise l’instruction require() pour charger un module interne
ou externe. Par exemple le code suivant permet de charger le framework web Express :
Chargement d’un module
const http = require('express');

|
• Quand nous appelons Express, nous chargeons en fait un module CommonJS dans notre
application. C’est ce qu’on appelle une dépendance.
• Comment être sur que cette dépendance est mise à disposition de notre application ? Nous
définissons les dépendances dans un fichier de configuration appelé « package.json ».
• Cette dépendance doit être téléchargé en amont via une application qu’on appelle « npm ».
• Nous allons voir dans la partie suivante comment ajouter n’importe quelle dépendance dans
Node.js (et pas seulement un serveur web comme Express).
Principe de fonctionnement

|
• CommonJS est une API permettant d’écrire des programmes JavaScript s'exécutant ailleurs que
dans un navigateur web. Il permet de gérer des dépendances côté serveur (à l’inverse de
RequireJS).
• CommonJS a de nombreuses implémentations, par exemple dans Node.js.
• Les bibliothèques qui se basent sur l’API CommonJS ne sont pas fortement liées à une plateforme
spécifique.

|
Chargement de modules
CommonJS
Exportation du module Express

|
• La nature même de JavaScript fait que tout est public et global.
• Les modules donne la possibilité d’avoir des variables et des méthodes privées. En fait tout dans
un module CommonJS est privé, à moins qu’on exporte explicitement ce module.
• Cette possibilité là est très intéressante, car non supportée nativement par les anciennes version
JavaScript (avant ECMAScript 6). CommonJS joue le rôle d’un polyfill.
• Pour rappel (Wikipedia) : « un polyfill est un ensemble de fonctions permettant de simuler sur un
navigateur web ancien des fonctionnalités qui ne sont pas nativement disponibles. »
Exportation

|
• require() charge le module lui-même mais aussi toutes ces dépendances.
• module.exports === public API
• Les variables et fonctions qui ne sont pas dans module.exports sont privées.
Exportation

|
Node.js – Le gestionnaire de paquets npm
• Bien que Node.js ne soit pas un framework JavaScript, la plupart de ses modules sont écrits en
JavaScript. Les développeurs peuvent étendre les fonctionnalités de base de Node.js en
développant des modules en JavaScript.
• On peut facilement installer et partager des modules en utilisant npm (Node Package Manager).
• npm est un gestionnaire de paquets et de dépendances écrit entièrement en JavaScript et qui est
installé automatiquement avec la plateforme Node.js (depuis 2011). Mais on peut l’utiliser en
dehors de Node.js.
• Pour faire une analogie à PHP, le gestionnaire de dépendances Composer se rapproche de npm.
Présentation de npm

|
• Attention, npm ne doit pas être confondue avec l’instruction require() de CommonJS.
• npm n’est pas utilisé pour charger du code ou des bibliothèques. Au lieu de ça, il est utilisé pour
installer des modules et gérer les dépendances entre module en ligne de commande.
• « Composer se rapproche de npm » : sauf que Composer permet également de charger les
dépendances dans une application PHP (via un require/include sur le fichier vendor/autoload.php).
Présentation de npm

|
• Un module (ou package) est juste un répertoire
disposant d’un ou plusieurs fichiers. Il dispose
également d’un fichier nommé package.json qui
contient des métadata sur le module (nom, version,
dépendances, etc.).
• Une application web typique va dépendre de
plusieurs dizaines de modules.
• Les modules sont souvent petits : l’idée générale est
qu’un module doit avoir une unique responsabilité.

|
• L’utilisation de npm se fait en ligne de
commandes via la console du système
hôte où est installé Node.js.
• Le site npmjs.com liste les modules qui
sont disponibles. On peut le comparer à
packagist.org pour PHP.
• On retrouve des modules Node.js mais
aussi des modules front-end comme
Angular ou bower.

|
public
registery
npm publish packageName
npm install packageName

|
• Un module peut être téléchargé avec la commande suivante :
Installation d’un module
npm install <package_name>
• Cela créera un répertoire « node_modules » dans le répertoire de votre application (s’il n’existe
pas déjà), et téléchargera le module dans ce répertoire.
• Pensez bien à ajouter le répertoire node_modules dans le fichier .gitignore (pour qu’il ne soit pas
commité dans votre repository). Les développeurs qui travaillent sur le projet devront simplement
exécuter la commande npm update pour télécharger les même dépendances que vous.

|
• Quelle version du module est installée ?
• Fichier package.json inexistant : installation de la dernière version
• Fichier package.json existant : installation de la version du module spécifiée dans ce fichier
(si spécifiée, sinon installation de la dernière version).
Installation d’un module

|
• Permet de lister les modules dont votre application dépend.
• Permet de spécifier les versions des module que votre projet utilise.
• Facilite grandement le partage de votre application auprès d’autres développeurs.
• Le fichier package.json doit contenir au minimum les propriétés « name » et « version ».
Le fichier package.json
{
"name": "my-awesome-package",
"version": "1.0.0"
}

|
• La bonne pratique consiste à créer un fichier package.json dés la création de votre application en
utilisant la commande suivante :
npm init
• On peut également définir des valeurs par défaut pour éviter de renseigner à chaque fois les
mêmes données à l’exécution de la commande init :
npm set init.author.email "wombat@npmjs.com"
npm set init.author.name "ag_dubs"
npm set init.license "MIT"

|
• On peut manuellement modifier le fichier
package.json pour spécifier des dépendances.
• On distingue 2 types de dépendances : celles de
production (dans la propriété « dependencies ») et
de développement (dans la propriété
« devDependencies »).
• Exemple de dépendances en développement : tests
unitaires, minification, transpiler, etc.
{
"name": "my-awesome-package",
"version": "1.0.0",
"license": "MIT",
"author" : "John Doe",
"dependencies": {
"my_dep": "^1.0.0",
"express": "~4.13.0",
"mongoose": "~3.6.1 "
},
"devDependencies" : {
"minify": "^3.1.0"
}
}

|
• Pour ajouter des dépendances à votre application, plutôt que de modifier manuellement le fichier
package.json, le plus simple est d’utiliser les commandes suivantes :
npm install <package_name> --save
npm install <package_name> --save-dev

|
• De temps en temps, pensez à mettre à jour les modules dont votre application dépend de sorte à
profiter des dernières nouveautés et des corrections de bugs / vulnérabilités. Pour ce faire,
exécuter la commande suivante (au même niveau que package.json) :
Mettre à jour vos dépendances
npm update

|
• Pour supprimer une dépendance du répertoire node_modules et du fichier package.json, utiliser
la commande suivante :
Supprimer une dépendance
npm uninstall --save <package_name>

|
• Semver (Semantic Versioning) est une gestion sémantique des versions d’un logiciel / modules.
En d’autres termes, une façon de numéroter les versions de manière logique.
• Ce n’est pas une norme, mais une bonne pratique (que je vous recommande d’appliquer)…
Comprendre les versions (semver)
4.13.2
Version majeure
A incrémenter quand il y a des
changements rétro-incompatibles Version mineur
changements rétro-compatibles
Correctif / patch
corrections d’anomalies rétro-
compatibles

|
• On renseigne souvent des numéros de versions des dépendances dans le fichier package.json.
Parfois on rencontre la notation ~ (tilde) ou ^ (caret).
• L’opérateur ~ permet de prévenir des changements brutaux alors que ^ est plus permissif.
• Pour le tilde, il va inclure la version mineure la plus récente mais sans changer de branche.
• ~1.2.3 équivaut à >=1.2.3 <1.3.0
• Pour le caret il inclura la version majeure la plus récente.
• ^1.2.3 équivaut à >=1.2.3 <2.0.0
Comprendre les versions (semver)

|
Architecture interne de Node.js

|
Node.js – Exercices basiques
• Ecrire un programme JavaScript qui permette d’afficher le texte « Hello World » un fois exécuté
dans Node.js.
L’incontournable « Hello World »

|
• Ecrire un programme JavaScript qui permette d’afficher le texte « Hello World » un fois exécuté
dans Node.js.
L’incontournable « Hello World »
console.log("Hello World!");
Fichier hello.js
$ node hello.js
Hello World!
$ _
Terminal

|
• Ecrire un programme JavaScript qui permette d’afficher le texte « Bonjour <nom> ». Le nom de
l’utilisateur étant récupéré en argument.
• Aide : utiliser l’objet natif « process ».
Passage d’arguments

|
• Ecrire un programme JavaScript qui permette d’afficher le texte « Bonjour <nom> ». Le nom de
l’utilisateur étant récupéré en argument.
• Ecrire un deuxième programme qui permette d’afficher l’ensemble des arguments saisis.
• Aide : utiliser l’objet natif « process » et le tableau argv.

|
var name = process.argv[2];
console.log("Hello " + name + "!"");
Fichier helloBis.js
$ node helloBis.js Guillaume
Hello Guillaume!
$ _
Terminal

|
var arguments = "";
for (var i=2; i < process.argv.length; i++) {
console.log(process.argv[i]);
}
Fichier displayArgs.js
$ node displayArgs.js Formation ORT 3CSi Lyon
Formation
ORT
3CSi
Lyon
$ _
Terminal

|
• Sur le même principe des exercices précédents, écrire un programme qui émule une calculatrice
basique. Le premier argument sera le type d’opération (addition, soustraction, multiplication et
division), et les suivants les nombres à calculer.
• Bonnes pratiques : séparer bien votre code en plusieurs fonctions.

|
Node.js Création d’un serveur web

|
Node.js – Création d’un serveur web
• Node.js n’est pas un serveur web, c’est une
plateforme / environnement d’exécution !
• Cet idée fausse que Node.js serait un serveur
web commence sur le programme d’exemple
« Hello World » qui implémente un serveur
web.
• Ce qu’ils essayent de démontrer c’est que
Node.js est une plateforme, qui peut, dans cet
exemple, permettre de gérer nativement le
protocole HTTP.

|
const http = require('http');
const hostname = '127.0.0.1';
const port = 1337;
http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.write('Hello World!n');
res.end();
}).listen(port, hostname, () => {
console.log('Server running at http://'+ hostname +':'+ port +'/');
});

|
• Modifier le code précédent pour faire en sorte d’afficher les paramètres GET que l’utilisateur
aurait saisi dans l’URL.
• Vous devrez charger le module « url » pour récupérer les paramètres (utilisez la documentation
https://nodejs.org/api/).
• Astuce : passer par la fonction url.parse()

|
const http = require('http');
const url = require('url');
const hostname = '127.0.0.1';
const port = process.env.PORT || 5000;
var parsedUrl = url.parse(req.url, true);
var queryAsObject = parsedUrl.query;
res.end(JSON.stringify(queryAsObject));
}).listen(port, hostname, () => {
console.log('Server running at http://'+ hostname +':'+ port +'/');
});

|
• Créer un serveur HTTP avec Node.js qui retourne des données au format JSON quand :
• Il reçoit une requête GET sur l’URI « /api/formatDateFr »
• L’objet JSON doit retourner les propriétés année, mois, jours, heures, minutes ainsi qu’une
propriété retourner la date du type : « Mardi 23 février 2016 à 12h00 ».
• Il reçoit une requête GET sur l’URI « /api/formatDatetime »
• L’objet JSON doit retourner une seule propriété dont la valeur est au format YYYY-MM-DD HH:ii:ss
• Ces deux requêtes acceptent un paramètre GET « time » ayant pour valeur le temps UNIX
(timestamp = nombre de ms écoulée depuis le 1er janvier 1970).
• Retourner une erreur 404 si une autre URI du répertoire /api/ est appelée.

|
Aparté
Heroku
Déploiement de vos applications
dans le Cloud.

|
Heroku – Déploiement de vos applications sur le cloud
• Heroku est un service de cloud computing de type PaaS, créé en
2007 puis racheté depuis par Salesforce.com. Il propose des services
de cloud aux entreprises et développeurs (dont une version gratuite,
mais limité à 5 apps).
Présentation
• PaaS = Platform as a Service (Plate-forme en tant que Service)
• l'entreprise cliente maintient les applications proprement dites ;
• le fournisseur cloud maintient la plate-forme d'exécution de ces applications (serveur,
système d’exploitation, sécurité, etc.).

|
Présentation
• Le modèle de cloud computing PaaS est à différencier du
modèle SaaS.
• SaaS = Software as a Service (logiciel en tant que service)
• Modèle d'exploitation commerciale des logiciels.
• Les logiciels sont installés sur des serveurs distants
plutôt que sur la machine de l'utilisateur.
• Les clients ne paient pas une licence d’utilisation mais
un abonnement.

|
• Plusieurs runtimes pris en charge par Heroku : Ruby on Rails, Node.js, Java, Spring, Python, Scala
ainsi que PHP de façon officieuse.
• Ces runtimes tournent dans un stack nommé « Cedar » qui tourne sous Ubuntu.
• Intérêts de Heroku :
• Déploiement très rapide d'applications web dans le cloud
• Prise en charge de nombreux langages / technologies
Présentation

|
Présentation
Les développeurs
déploient le code
(en CLI ou via
GitHub)
Les applications
s’exécutent dans
des « conteneurs »
Vous pouvez gérer les
applications depuis un
tableau de bord.
Gestion de la
persistance des
données : Postgres,
Redis, etc.
Les clients initient des
requêtes qui sont
envoyées et traités par
l’application ciblée.

|
• Google Cloud Platform permet également de déployer des applications Node.js dans le Cloud.
• Il est plus probable que vous rencontriez Google Cloud Platerform que Heroku en entreprise.
• Il n’y a pas de formule gratuite. Cependant, Google vous offre un crédit de $300 valable pendant
60 jours. Passé ce délais, ce crédit est perdu et votre instance de test est supprimée (vous ne serez
pas facturé passé cette période d’évaluation si vous n’utilisez plus la plateforme).
• Google a créé une bibliothèque d’abstraction qui facilite l’usage de Node.js lors du déploiement.
• Tutoriel : https://cloud.google.com/nodejs/
Solutions alternatives

|
• Modulus : cloud pour Node.js, PHP, Java, Meteor, Docker,
Python, etc.
• Remarque : il existe aussi des plateformes Cloud dédiées
au déploiement de votre base de données. C’est le cas de
Google Cloud Datastore, Compose et MongoLab. On
utilisera ce dernier dans la partie relative à MongoDB.
• Votre application peut donc être hébergée entièrement
dans le Cloud en quelques lignes de commandes… !
Solutions alternatives

|
Inscription (gratuite)
• Rendez-vous sur https://signup.heroku.com/
et créer un compte utilisateur gratuit.
• Quelques limitations cependant : l’instance se
mettra en sommeil après 30 minutes
d’inactivités, et devra être stoppée 6h sur une
période de 24 heures.
• Suffisant pour notre usage de test…

|
Votre tableau de bord

|
• Suivez le « Getting Started », partie « Setup » pour installer l’environnement Heroku sur votre
poste : https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up
• Cet environnement va vous permettre d’utiliser les commandes heroku pour votre terminal.
• Vérifier que l’installation s’est bien terminée en tapant la commande heroku.
• Identifiez-vous avec la commande heroku login.
Déploiement d’une application Node.js

|
• Nous allons déployer un serveur web basique (dans le même principe que notre premier exercice
Hello World) sur la plateforme Cloud Heroku.
• Si ce n’est pas déjà fait, lancer la commande npm init pour générer un fichier package.json.
• Modifier le fichier package.json généré pour spécifier le script à lancer au déploiement de
l’application. Cela ce fait via la propriété start de l’objet scripts :
{
"scripts": {
"start": "node index.js"
}
}

|
• On doit adapter légèrement le code du serveur web. Le numéro de port sur lequel le serveur web
va écouter ne peut pas être spécifié manuellement sur Heroku. On utilisera donc la variable
d’environnement PORT :
const port = process.env.PORT || 5000;
...
}).listen(port);

|
• Si ce n’est pas déjà fait : lancer la commande npm install : cela va créer un répertoire
node_modules.
• Pour déployer les application, Heroku utilise GIT. On doit donc initier un repository git avec la
commande git init. Cela va créer un répertoire cache .git à la racine de votre application.
• Exécuter la commande « git add . » (le point est important !) pour ajouter l’ensemble des fichiers
de votre application dans votre nouveau repository. Bien sur, il faut ensuite commiter vos
changement avec la commande git commit –m "Votre message".

|
• L’idée est en fait de faire un « push » de notre code dans une branche gérer par Heroku nommé
« heroku ».
• Pour créer cette branche et lancer l’écoute active par Heroku, exécuter la commande heroku
create.
• Ensuite on exécutera la commande : git push heroku master. Analyser bien les logs sur votre
terminal, toutes les actions faites par Heroku sont décrites. A la fin du traitement, l’URL de votre
projet dans le cloud s’affichera.

|
$ git push heroku master
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
...
remote: -----> Launching...
remote: Released v3
remote: https://secret-forest-98123.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/secret-forest-98426.git
* [new branch] master -> master

|
• Heroku va attribuer automatiquement une URL unique à votre application.
• Au lieu de copier-coller l’URL de votre app Heroku, utiliser la commande heroku open.
• Cependant, vous pouvez choisir manuellement une URL. Au moment de la création de la branche
heroku dans votre repository GIT, utiliser plutôt la commande suivante (le troisième paramètre
étant le nom que vous souhaitez donné à votre application) :
heroku create nodejs-formation-ort
• Vous pouvez aussi utiliser la commande heroku apps:rename si votre app est déjà déployée.

|
• En cas de modification de votre code source :
• git add <file>
• git commit –m "Message"
• git push heroku master
Cette dernière commande va automatiquement relancer le déploiement
de votre application sur Heroku. La même URL sera conservée : c’est
simplement un remplacement des fichiers modifiés.

|
Node.js
Manipulation de fichier
(le module FileSystem)

|
Node.js – Le module « fs » (File System)
• Le module du core « fs » de Node.js fournit une API qui permet d’interagir avec le système de
fichiers et d'effectuer certaines opérations IO comme créer, lire ou écrire un fichier.
• Comme « fs » est un module du core, nous n’avons pas besoin de la configurer avant de l’utiliser.
Pour le charger, comme tout autre module CommonJS, on utilisera l’instruction require() :
Présentation
var fs = require("fs");

|
• Toutes les fonctions de ce module peuvent être utilisées de manière synchrone ou asynchrone.
• Si vous utilisez la forme asynchrone, vous devrez utiliser une fonction de callback.
• Les arguments passés à cette fonction de callback dépendent de la fonction utilisée.
• Cependant, de manière générale, le premier argument est réservé à une exception. Si l’opération
s’est bien passée, la valeur retournée par cet argument sera null ou undefined.
• Les fonctions synchrone reprennent souvent le nom de la fonction asynchrone suivi de « Sync ».
Synchrone ou asynchrone ?

|
• Ce code d’exemple supprime le fichier /tmp/hello. On utilise la fonction unlink() du module « fs ».
Le nom de cette fonction est un héritage de la norme POSIX.
Suppression d’un fichier (asynchrone)
const fs = require('fs');
fs.unlink('/tmp/hello', (err) => {
if (err) {
throw err;
}
console.log('successfully deleted /tmp/hello');
});

|
• Quand vous utilisez la version synchrone, les éventuelles exceptions sont immédiatement levees.
Vous devez utilizer le bloc try / catch pour gérer ces exceptions.
Suppression d’un fichier (synchrone)
const fs = require('fs');
fs.unlinkSync('/tmp/hello');
console.log('successfully deleted /tmp/hello');

|
• Que fait ce code ? Identifiez-vous un problème ?
Ordre des opérations
fs.rename('/tmp/hello', '/tmp/world', (err) => {
if (err) throw err;
console.log('renamed complete');
});
fs.stat('/tmp/world', (err, stats) => {
if (err) throw err;
console.log(`stats: ${JSON.stringify(stats)}`);
});

|
• Avec des fonctions asynchrones, l’ordre
des opération n’est pas garantie !
• fs.stat pourrait très bien être exécuté
avant fs.rename.
• Donc le code suivant est sujet à erreurs.
if (err) throw err;
console.log('renamed complete');
});
if (err) throw err;
console.log(`stats: ${JSON.stringify(stats)}`);
});

|
• En programmation asynchrone, vous devez
toujours vous baser sur les callbacks.
• Utiliser une chaine de callback entre
rename et stat.
if (err) {
throw err;
}
if (err) {
throw err;
}
console.log(`stats:
${JSON.stringify(stats)}`);
});
});

|
• Si vous faites des traitements lourd, vous êtes fortement encourager à utiliser les appels
asynchrones.
• La version synchrone va bloquer le processus entier jusqu’à complétion de sa tâche. Comme
Node.js est mono-threadé, toutes les autres connexions vont être stoppées (voir schéma
d’architecture dans les slides précédentes).

|
• Plusieurs methodes pour créer un fichier : write, writeFile ou createWriteStream. Le plus simple est
d’utiliser la function writeFile() du module :
Création d’un fichier
var fs = require('fs');
fs.writeFile("/tmp/test", "Hey there!", function(err) {
if(err) {
return console.log(err);
}
console.log("The file was saved!");
});

|
• Créer un serveur web avec Node.js. Chaque chargement de page doit incrémenter un compteur
de visite contenu dans un fichier texte. Vous devrez donc : créer le serveur web, créer le fichier
texte s’il n’existe pas, puis lire son contenu et incrémenter le nombre de visite.
• Vous devrez charger les modules natifs « http » et « fs ».
• Utilisez les fonctions asynchrones readFile() et writeFile() du module fs.

|
...
http.createServer(function (request, response) {
fs.readFile("test.txt", 'utf-8', function (error, data) {
response.writeHead(200, { 'Content-Type': 'text/plain‘ });
// Incrémenter le nombre obtenu a partir du fichier
data = parseInt(data) + 1;
// Mettre à jour le fichier (numéro incrémenté)
fs.writeFile('test.txt', data);
response.end(‘Page rafraichie ' + data + ' fois !');
});
}).listen(port);
TODO : vérifier si la
requête est sur le fichier
favicon.ico. Dans ce cas
ne pas incrémenter le
compteur.

|
• Créer un programme asynchrone qui affiche sur la console une liste de fichiers dans un répertoire
choisi et filtré par extension.
• 1er argument : le répertoire ciblé
• 2nd argument : l’extension à filtrer (ignorer les fichiers n’ayant pas cette extension).
• Charger les modules « fs » et « path ». Vous pouvez utiliser les fonctions suivantes pour vous aider :
• fs.readdir() pour lire le contenu d’un répertoire
• path.extname() pour récupérer l’extension d’un fichier
• Récupérer les arguments de votre programma via le tableau process.argv[].
Exercice d’application (2)

|
var path = require('path');
var directory = process.argv[2];
var ext = '.' + process.argv[3];
fs.readdir(directory, function (err, files) {
if (err) {
throw err;
}
files.filter(function (file) {
return fs.statSync(file).isFile();
}).filter(function (file) {
return (path.extname(file) == ext);
}).forEach(function (file) {
console.log("%s (%s)", file, path.extname(file));
});
});

|
• La fonction readFile() permet de lire un fichier et d’afficher son contenu.
• Utiliser cette fonction pour récupérer le contenu de fichiers HTML.
• Créer un serveur HTTP avec Node.js, gérer plusieurs routes, et retourner une page HTML
différente en fonction de la route.
• Pensez-bien à adapter le header retourné :
• Content-type : text/html
• Content-length : la taille de la page HTML

|
Node.js Création d’un module

|
Node.js – Création d’un module
• Un module encapsule du code correspondant au sein d’un même fichier.
• Par exemple pour créer un module « foo » on créera un fichier foo.js. Pour charger le module on
utilisera la fonction require() de CommonJS. On passera en argument le chemin relatif du fichier
par rapport où on écrit ce code :
var foo = require('./foo');
• Si vous utiliser le code suivant, le module « foo » devra être dans le répertoire « node_modules ».
var foo = require('foo');
main.js
main.js

|
• Pour pouvoir utiliser les fonction d’un module dans un autre fichier (par exemple le fichier où on a
fait l’appel de la fonction require()), il faut exporter les fonctions du module = rendre public.
• On utilisera l’objet natif module.exports pour exporter des fonctions.
module.exports.myModuleFunction = function() {
return "Hello World";
};
module.exports.mySecondModuleFunction = function() {
return "Foo Bar";
};
foo.js

|
• Au final, le code suivant…
var foo = {
myModuleFunction: function() {
console.log("Hello World");
},
mySecondModuleFunction: function() {
console.log("Foo Bar");
}
}
• …est équivalent à :

|
• La fonction CommonJS require() retourne un objet qui reference la valeur de module.exports
pour un fichier donné.
• On peut maintenant accéder aux fonctions publics de foo.js via les propriétés rendues accessibles
par la variable locale foo dans main.js.
foo.myModuleFunction(); // Affichera « Hello World »
foo.mySecondModuleFunction(); // Affichera « Foo Bar »
main.js

|
• Remarque : si votre module exporte une seule function, vous pouvez directement assigner une
function anonyme à l’objet module.exports.
module.exports = function() {
return "Single module function";
};
foo.js

|
• On va refactoriser l’exercice précédent (qui consistait à lister les fichiers d’un répertoire) en créant
un module.
• Le module devra exporter une seule fonction qui prendra 3 arguments :
• Le chemin du répertoire
• L’extension sur laquelle filtrer
• Une fonction de callback, utilisant la convention de nommage de Node.js : (err, data) :
• err est égale à null s’il n’y a aucune erreur, ou retourne les erreurs de fs.readdir().
• data est un tableau contenant les fichiers filtrés
• Aucun console.log() doit être initié par notre module.

|
• Dans le fichier du module, par exemple module.js, on assignera d’abord une fonction à l’objet
module.exports (pour la rendre disponible).
• Charger le module dans le fichier main.js avec l’instruction require() de CommonJS.

|
var path = require('path');
module.exports = function(directory, ext, callback) {
if (err) {
return callback(err);
}
var ext = '.' + ext;
var filesFiltered = files.filter(function (file) {
return fs.statSync(file).isFile() && (path.extname(file) == ext);
});
callback(null, filesFiltered);
};
module.js

|
var module = require('./module.js');
module(process.argv[2], process.argv[3], function(err, files) {
if (err) {
console.log("Error: " + err);
}
files.forEach(function (file) {
console.log("%s (%s)", file, path.extname(file));
});
});
main.js

|
Node.js
Utiliser les WebSockets avec
Socket.io

|
Node.js – Socket.io
• Socket.io est une bibliothèque JavaScript pour développer des
applications web en temps réel via l’utilisation des WebSocket.
• Permet la communication temps réel et bidirectionnelle entre un ou
plusieurs clients web et un serveur.
• Socket.io fonctionne en deux parties (avec des API similaires) :
• Une bibliothèque côté client qui s’exécute sur le navigateur
• Une bibliothèque côté serveur pour Node.js
Présentation

|
Présentation

|
• Socket.io est principalement utilisé pour des systèmes de communication en temps réel :
messagerie instantanée, édition collaborative de document (comme Google Docs), streaming de
données binaires (image / vidéo / audio).
• Tout comme AJAX, le protocole WebSocket était géré différemment en fonction du navigateur
utilisé. Socket.io corrige ce problème en apportant un support des différents navigateurs.
Présentation

|
• Le web a été construit dans l’idée que : le client requête, le serveur répond.
• Ce modèle est aujourd’hui dépassé : il ne correspond plus à l’usage que l’on se fait du web.
• AJAX : premier pas vers la communication temps réel. Mais AJAX n’est pas en temps réel car il faut
interroger le serveur régulièrement (pooling) pour récupérer des éventuelles modifications. Cette
interrogation se fait via des requêtes AJAX émises chaque X secondes.
• Problème en cas de forte affluence  surcharge du serveur.
Présentation

|
• Pour palier à ce problème, une évolution de Ajax à vue le jour sous le terme « Ajax Long Pooling ».
• Si le serveur ne retourne aucune donnée, la connexion du client est laissée ouverte.
• Si aucune réponse après un certain temps (timeout), la connexion sera fermée.
• Si une réponse est retournée par le serveur, la connexion est également fermée.
• Ce modèle n’est toujours pas idéal… ce qui a poussé à l’implémentation des WebSocket.
• Attention : ne pas confondre avec WebRTC (technologie permettant les communications directes entre
navigateurs, sans passer par un serveur – utilisé en VOIP par exemple).
Présentation

|
• Standard désignant un protocole réseau permettant de créer des canaux de communication full-
duplex par-dessus une connexion TCP (pour les navigateurs et serveurs web).
• Full-duplex ? Si l’information peut être transporté simultanément dans les 2 sens. Un canal de
communication bidirectionnel n’est pas forcément full-duplex : il peut être half-duplex.
• Ce canal permet de :
• notifier le client d’un changement d’état du serveur,
• d’envoyer des données (push) du serveur vers les clients connectés sans que ces derniers
aient à effectuer la moindre requête.
WebSocket

|
• Socket.io est un module CommonJS. Il est disponible sur le catalogue d’application npm.
• Pour installer Socket.io sur Node.js puis le charger :
Installation côté serveur / client
npm install socket.io
• Pour charger Socket.io côté client (une page web par exemple) :
<script src="socket.io.js"></script>

|
Utilisation côté serveur
var http = require('http').createServer(handler)
var io = require('socket.io')(http);
http.listen(8080);
function handler (req, res) { ... }
• On créé ensuite un serveur web avec Node.js et on l’attache à une instance de Socket.io (sans
oublier de définir des callback pour traiter les évènements).

|
Utilisation côté serveur
io.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
• La dernière étape consiste à utiliser l’évènement « connection » de Socket.io qui est lancée
lorsque le serveur à pu initier une connexion avec un client.
• Dans ce cas là on envoi une donnée via la fonction emit(). Dans cet exemple on écoute également
sur l’évènement « my other event » envoyé par le client.

|
Utilisation côté client
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
• Ensuite il faut indiquer à notre client (une page web par exemple), qu’il va devoir communiquer
avec le serveur Socket.io.

|
• Pour interagir avec un serveur Socket.io, il n’est pas forcément nécessaire d’avoir un client sous la
forme d’un navigateur web. On peut utiliser un script Node.js qui jouera le rôle du client…
• Cela ouvre à de nombreuses possibilités !
Remarque

|
• On suivra le guide « Get started : Chat Application » sur http://socket.io/get-started/chat/ pour
créer notre première application temps réel utilisant les WebSocket. Il s’agit d’une application
basique de type « chat ».
• Quand vous aurez terminé, améliorer l’application de base en :
• Donnant la possibilité aux clients de spécifier un nom d’utilisateur.
• Afficher l’indicateur « <user> écrit » lorsqu’un utilisateur compose un message.
• Afficher les personnes en ligne (par exemple dans un sidebar à gauche).
Exercice d’application : création d’un chat temps réel

Partie 5
Express
Node.js web application framework

|
Express – Présentation

|
Express – Présentation
• Express est un serveur web pour Node.js. Il étend les fonctionnalités de base du serveur web de
Node.js (module « http » que nous avons vu dans le chapitre précédent).
• Express doit être vu comme un framework dans le sens où il apporte diverses fonctionnalités :
• Serveur web HTTP
• Module de routage (en fonction de l’URI, exécution d’une action précise) : dans le même
principe que les routeurs des framework web modernes : exemples du routeur de Symfony2 ou
Laravel).
• Middleware (fonctions appelées après routage)
• Gestion des erreurs

|
Express – Installation
• Express est un module CommonJS. Vous pouvez l’installer en passant par le gestionnaire de
paquets npm en exécutant la commande suivante :
npm install express --save

|
Express – Hello World
• Créer un nouveau répertoire pour cette application de test. Bonne pratique : lancer la commande
npm init pour générer un fichier package.json contenant les métadonnées propres à votre
application.
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
• Ajouter Express en dépendance de
votre application (voir slide
précédente).
• Créer un fichier app.js avec le code
ci-contre. Pour lancer votre
application, exécuter la commande
node app.js.

|
• On peut noter quelques ressemblances avec l’utilisation native de module http de Node.js.
• Les deux syntaxes suivantes sont identiques :
});
app.listen(3000)
});
http.createServer(app).listen(3000);
• Remarque : app n’est en fait qu’une fonction spéciale de Express.

|

|
Express – Générateur d’application
• En complément d’Express, il peut être intéressant d’installer le
générateurs d’applications Express. Cet outil permet de créer
rapidement un squelette d’application.
• Installation :
• La structure d’application créée par le générateur est l’une des
nombreuses manières possibles de structurer les applications Express.
• Vous avez toute latitude pour l’utiliser ou la modifier en fonction de
vos besoins.
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
npm install express-generator -g

|
Express – Générateur d’application
• Nous avons installé le générateur avec le flag –g ce qui rend le générateur accessible depuis
n’importe quel répertoire. Il a été installé globalement et non dans le répertoire
« nodes_modules » de l’application.
• La commande suivante va créer une application Express nommée myapp dans le répertoire de
travail en cour :
express myapp
cd myapp
npm install
npm start // Va lancer la commande spécifiée dans la propriété scripts.start du package.json

|
Express – Routage
• Dans des frameworks web moderne comme Symfony ou Laravel (pour ne citer que eux) un
composant appelé « routeur » existe. C’est le point d’entrée de votre application : toutes les
requêtes HTTP initiées par les utilisateurs passeront par le routeur.
• L’idée est de définir les routes de notre applications, c’est-à-dire les URI (partie après l’URL de
base) possibles.
• Le routeur va comparer l’URI de la requête cliente avec celles définies par l’application. Si il y a une
correspondance, les actions définies dans la route est exécutée. Le routage n'est effectué qu'une
seule fois par requête.
• Le routeur d’Express fonctionne sur le même principe.

|
Express – Routage
• Le programme « Hello World » définie une seule route sur l’URI « / ». Toute requête HTTP de type
GET correspondant à cette route va lancer l’exécution de la fonction anonyme.
• Deux paramètres sont passés à la fonction de callback : req pour obtenir des informations sur la
requête initiée et res pour modifier la réponse.
});
• L’ordre de la définition des routes dans votre application et important.

|
Express – Routage
res.send('Requête GET sur la page d’accueil');
});
app.post('/', function (req, res) {
res.send('Requête POST sur la page d’accueil');
});
app.put('/user', function (req, res) {
res.send('Got a PUT request at /user');
});
app.delete('/user', function (req, res) {
res.send('Got a DELETE request at /user');
});
app.all('/foo', function(req, res) { ... });

|
Express – Routage
• Vous pouvez chainer plusieurs routes répondant à la même URI mais à une action HTTP
différente. C’est très utilise dans le cas d’une architecture RESTful.
app.route('/book')
.get(function(req, res) {
res.send('Get a random book');
})
.post(function(req, res) {
res.send('Add a book');
})
.put(function(req, res) {
res.send('Update the book');
});

|
Express – Routage
• Vous pouvez avoir des routes dynamiques. Quelques exemples :
app.get('/article/:id', function(req , res) {
res.render('article' + req.params.id);
});
app.get('/:name(article|article2|article3)?', function(req, res) {
var name = req.params.name;
res.render(name);
});
app.get('/:id', function(req, res) {
var id = req.params.id;
});
Accessible depuis /article, /article2,
/article3 ou / (grâce à l’opérateur ?).

|
Express – Routage
• Vous pouvez effectuer des tests basiques sur les paramètres de vos routes pour vous assurer que
le format est bien celui attendu. Par exemple le regex « d+ » permet de spécifier un nombre
entier.
• Cette possibilité n’est pas encore documentée. Le double slash permet d’échapper le premier.
app.get('/:foo(d+)', function(req, res){
// Get user info based on the user id (int).
}
app.get('/:bar(w+)', function(req, res){
// Get user info based on the user name (string).
}

|
Express – Middleware
• Les middleware sont des fonctions qui gèrent les requêtes. Elles se situent entre la requête brute
et la réponse finale (d’où le nom « middle ware » : entre deux).

|
• Le serveur créé avec Express peut avoir une pile de fonctions middleware. Quand une requête
arrive, elle est déléguée à la première fonction middleware de la pile.
• Les fonctions middleware sont toujours invoquées dans l’ordre où elles sont ajoutés.
• Chaque fonction middleware peut accéder aux objets request et response, ainsi qu’à la fonction
middleware suivante dans la pile.
• Chaque fonction middleware peut décider de « répondre » en appelant des méthodes sur l’objet
response, et / ou en passant la requête à la fonction middleware suivante dans la pile en appelant
la fonction next().

|
• De manière schématisée, une fonction middleware ressemble à ça :
function myFunMiddleware(request, response, next) {
// Do stuff with the request and response.
// When we're all done, call next() to defer to the next middleware.
next();
}
• Si une fonction middleware ne termine pas le cycle requête / réponse, elle doit obligatoirement
appeler next() pour passer le contrôle à la fonction middleware suivante.

|
• L’application Express suivante va répondre à deux
routes définies : « / » et « /help ».
• Supposons maintenant que nous voulons avoir un
log à chaque fois qu’une requête sur l’une de ces
deux routes est faite.
• Une première approche serait d’ajouter dans
chaque route le code permettant de loguer la
requête (console.log par exemple).
• Ce n’est pas l’idéal : duplication de code.
app.get('/', function(req, res) {
});
app.get('/help', function(req, res) {
res.send('Nope.. nothing to see here');
});

|
• Au lieu de ça on va utiliser un middleware :
app.use(function(req, res, next) {
console.log('%s %s', req.method, req.url);
next();
});
app.get('/', function(req, res, next) {
});
app.get('/help', function(req, res, next) {
res.send('Nope.. nothing to see here');
});

|
• Les fonctions middleware peuvent réaliser les tâches suivantes :
• exécuter n’importe quel code,
• modifier les objets requête / réponse (decorator),
• terminer le cycle requête / réponse,
• appeler la prochaine fonction middleware de l’application avec next().

|
• Une application Express peut utiliser les types suivants de middleware :
• Application-level middleware
• Router-level middleware
• Error-handling middleware
• Built-in middleware : 1 seule pour l’instant, static() permettant de servir des fichiers statiques
• Third-party middleware : cookie parse, Passport, etc.
• Nous n’allons pas voir dans cette présentation le détail de chaque type de Middleware. Si besoin,
la documentation officiel donne des exemples précis : http://expressjs.com/en/guide/using-
middleware.html

|
• Exemple de Middleware permettant de gérer les sessions avec Express :
var express = require('express');
var redis = require("redis");
var session = require('express-session');
var redisStore = require('connect-redis')(session);
var client = redis.createClient();
app.use(session({
secret: '...',
store: new redisStore({ host: 'localhost', port: 6379, client: client }),
saveUninitialized: false,
resave: false
}));
Le module « connect-mongo »
fonctionne sur le même principe
mais avec MongoDB

|
Express – Moteur de template
• Express n’est pas un moteur de template, mais il peut faire appel à un moteur de template externe
(un autre module qu’on installera via npm) pour retourner des pages HTML.
• Passer par npm pour utiliser le moteur de template de votre choix.
• Nous allons installer jade via la commande :
• Pour indiquer à Express qu’on utilise ce moteur de rendu, et que les templates sont stockés dans
le répertoire views on doit passer par des instructions set.
npm install jade --save
app.set('view engine', 'jade');
app.set('views', './views')

|
Express – Moteur de template
• Création d’un template Jade (plus d’infos sur la syntaxe sur http://jade-lang.com/) :
html
head
title!= title
body
h1!= message
• Puis, créez une route pour générer le fichier index.jade. Si la propriété view engine n’est pas
définie, vous devez spécifier l’extension du fichier view. Sinon, vous pouvez l’omettre.
res.render('index', { title: 'Hey', message: 'Hello there!'});
});

|
Express – Exercices
• Utiliser le générateur pour créer un squelette d’application.
• Nous n’avons pas encore vu comment ajouter une couche de persistance à nos applications. Créer
un tableau JavaScript ayant plusieurs objets correspondant chacun à des articles de blog.
Propriétés : title, content, author, created_at.
• Votre application devra comporter les pages suivantes :
• Page d’accueil qui listes les articles par ordre chronologique (si vous avez le temps,
implémenter une pagination).
• Détail d’un article

Partie 6
MongoDB
The next-generation database that lets you
create applications never before possible…

|
MongoDB – Présentation
• Nous avons maintenant une plateforme en place (Node.js), ainsi qu’un serveur web (Express).
L’architecture MEAN vue dans la partie 3 prend forme. Cependant, sans moyen de persistance des
données, les applications que nous pouvons développer seront vite limités en fonctionnalités.
• MongoDB est une système de gestion de base de données open source de
type NoSQL.
• Il a été créé en 2009 et est depuis largement utilisé du fait de sa simplicité.
• Il est écrit principalement en JavaScript. L’utilisation de JavaScript et de
JSON pour la représentation des données stockées, fait que MongoDB est
un acteur de choix dans MEAN.

|
MongoDB – Bases de données relationnelles
• Quand on parle de base de donnée, on pense immédiatement
au langage SQL permettant de rechercher, d'ajouter, de
modifier, de supprimer ou de faire des jointures sur des
données dans les bases de données relationnelles.
• Une base de donnée est dite relationnelle quand elle applique
le modèle relationnel introduit par Edgard Codd au début des
années 70, et depuis largement utilisé.
• Dans ce type de base de données, l'information est organisée
dans des tableaux à deux dimensions : ce qu’on appel des
tables.

|
• Les données organisées dans les tables s’appellent des enregistrements.
• Les noms des colonnes sont appelées des attributs.
• On parle aussi de relation pour désigner les tables.
• Les opérations d'algèbre relationnelle telles que l'intersection, la jointure ou le produit cartésien
sont utilisées pour faire des rapprochements entre les enregistrements et créer de nouvelles
relations à partir des relations enregistrées dans la base de données.

|
• Pour faciliter l’exploitation des données depuis une application, on peut présenter le contenu
d'une base de données relationnelle sous forme d'objets. Cela passe par l’utilisation d’un ORM
(Object Relational Mapping).
• Un ORM donne simplement l'illusion de travailler avec une base de données orientée objet.
Généralement une classe (un « Modèle ») représente une table en base de données. Par exemple
on instancie cette classe pour créer un nouvel enregistrement.
// Création d’un user avec Eloquent (Laravel)
$user = new User;
$user->name = 'John';
$user->age = 30;
$user->save();
// Requêtage et mise à jour d’un vol
Flight::where('active', 1)
->where('destination', 'San Diego')
->update(['delayed' => 1]);

|
• Un ORM est donc une couche d’abstraction : le langage SQL n’est plus manipulé de manière
directe, et la manipulation des modèles est beaucoup plus aisé.
• Mais par fois il est difficile pour un ORM de faire cette connexion entre un système basé sur les
objets et un système relationnel.
• Héritage : c’est la façon dont on définit des relations dans un langage orienté objet. Mais
comment représenter ces relations dans une base de données relationnelle ?
• Vous ne pouvez pas avoir des tables qui héritent d’autres tables.
• Donc au final les ORM doivent forcément faire des compromis…

|
• Dans une base de données relationnelle, il y a plusieurs façon de simuler ce
lien d’héritage :
Soit l’héritage ci-contre :
• Première méthode : ajouter des champs propres aux employés et
managers dans une table personne. Et en fonction de la ressource,
alimenter ou non ces champs.
• Seconde méthode : avoir plusieurs tables Person, Employee, Manager
avec des relations 1-1. Mais par contre ont doit au final gérer des
jointures de tout les côtés.

|
• Donc bien qu’a première vue les ORM semblent être simple, ils essayent de connecter
ensemble des systèmes qui sont fondamentalement différents.
• Dans ce cas là, si les bases de données relationnelle ne sont pas adaptés aux langages de
programmation orientés objet, ne devrait t’on pas opter pour une autre solution, un autre
système de représentation des données ?
• Modèle relationnel  Marteau de Maslow ?
« Si le seul outil que vous avez est un marteau, vous
tendez à voir tout problème comme un clou ».
Abraham Maslow

|
MongoDB – Vous avez dit NoSQL ?
• Le terme « NoSQL » désigne un type de base de données qui n’utilise pas le modèle
relationnel.
• Généralement le langage SQL n’est pas utilisé pour requête ces bases de données. Le terme
NoSQL est trompeur car il signifie « Not Only SQL » (pas seulement SQL). On aurait plutôt du
l’appeler « Not Only Relational Databases ».
• NoSQL est une mouvance, et non une technologie spécifique ou un produit. Il y a plus de 230
SGBD NoSQL recensés en février 2016 (cf nosql-database.org).
• Des acteurs comme Google, Linkedin, Amazon ou Facebook conçoivent et exploitent des bases de
données de type NoSQL.

|
Quelques systèmes de gestion de base de données NoSQL

|
• Vous ne pouvez pas ajouter un enregistrement qui ne correspond pas au schéma.
• Vous devez spécifier la valeur NULL pour les champs non renseignés d’un enregistrement.
• On doit prendre en compte le type de données : vous ne pouvez pas ajouter une chaine de
caractère dans un champ entier.
• Vous ne pouvez pas ajouter des enregistrement dans un champ : vous devez créer une autre table
et utiliser une pair de clé étrangère / clé primaire pour lier ces deux tables, et enfin faire une
jointure pour récupérer les données complètes.
Dans une base de données relationnelle :

|
• Il n’y a pas de notion de schéma : au sein d’une même « table », les « enregistrements » peuvent
avoir une structure totalement différente. Les champs peuvent être ajoutés, modifiés, supprimés
d’un enregistrement à l’autre et ce à n’importe quel moment !
• Il n’y a pas de champs inutilisés.
• Il n’y a pas de type de données (ils sont implicites).
• La plupart des traitements sont fait dans la couche application.
Dans une base de données non relationnelle (= NoSQL) :

|
• Parfait pour les bases de données larges et distribuées.
• On a par fois besoin de stocker des données qui ne sont pas structurées (à la différence de
données insérées dans un table qui doivent correspondre à un schéma bien précis : les différents
champs de la table) ou dont le nombre / type de champs peut varier d’un enregistrement à
l’autre.
• Logs, données scientifiques, pages web, (Champ 1, Champ 2, Champ 3… Champ n), etc.
• Facilité de mise en place et de développement.
• Scalabilité horizontale aisée (= ajout de serveur).
Pourquoi utiliser NoSQL ?

|

|
• NoSQL supprime toute la complexité des requêtes SQL.
• NoSQL fonctionne très bien en cluster.
• NoSQL peut gérer une nombre très important de données (ce qu’on appel le Big Data).
• Les SGBD NoSQL sont en grande partie open source.
• Dans le grande majorité des bases de données NoSQL, aucune gestion des transaction n’est
prévue. Elles doivent être gérées au niveau de la couche applicative.
Particularités

|
• Donc totalement différent du modèle ACID appliqué par les SGBDR :
• Atomicity / atomicité : assure qu'une transaction se fait au complet ou pas du tout. si une
partie d'une transaction ne peut être faite, il faut effacer toute trace de la transaction et
remettre les données dans l'état où elles étaient avant la transaction.
• Consistency / cohérence : assure que chaque transaction amènera le système d'un état
valide à un autre état valide ( par exemple vérification sur les contraintes d’intégrité).
Particularités

|
• Donc totalement différent du modèle ACID appliqué par les SGBDR :
• Isolation / isolation : toute transaction doit s'exécuter comme si elle était la seule sur le
système. Aucune dépendance possible entre les transactions.
• Durability / durabilité : assure que lorsqu'une transaction a été confirmée, elle demeure
enregistrée même à la suite d'une panne d'électricité ou d’un autre problème.
 ACID est pessimiste, alors que NoSQL est optimiste !
Particularités

|
• Il existe plusieurs types de base de données NoSQL. On peut les classifier par la manière dont ils
traitent les données. Chacune de ces solutions à ses propres forces et faiblesses.
• Key-Value (ce que fait Redis par exemple)
• Document-oriented (utilisé par MongoDB)
• Column-oriented
• Graph
Types de base de données NoSQL

|
MongoDB – Orienté document
• Les données sont modélisées dans des objets
JavaScript appelés documents.
• Les documents stockés par MongoDB sont de
type BSON. Les objets BSON sont la
représentation binaire des objets JSON en leur
ajoutant des améliorations et des capacités
supplémentaires (expressions régulières, gestion
des dates, etc.).
• Chaque document possède un identifiant unique
généré par MongoDB : la propriété « _id ».
// Exemple de document dans MongoDB
{
first_name: "Paul",
surname: "Miller",
city: "London",
location: [45.123,47.232],
cars: [
{ model: "Bentley",
year: 1973,
value: 100000, ….},
{ model: "Rolls Royce",
year: 1965,
value: 330000, ….},
]
}

|
• Les documents sont stockés dans des collections (qu’on pourrait rapprocher aux tables).
• Il faut voir une collection comme un amas de documents pas forcément uniformes. Car un
document n’est jamais figé : les couples clé / valeur peuvent changer en fonction des données.
Document

|
• Les documents sont stockés dans des collections (qu’on pourrait rapprocher aux tables). Il faut
voir une collection comme un amas de documents pas forcément uniformes.
• Ainsi, une base de données sous MongoDB contient donc des collections de documents.
• Un SGBD MondoDB est composé d’une ou plusieurs base de données.

|
SGBDR
• Les bases de données ont des tables.
• Les tables ont des colonnes.
• Les lignes ont de cellules.
• Les champs contiennent des types de
données simples.
• Les schémas sont rigides.
MongoDB
• Les bases de données ont des collections.
• Les collections ont des documents.
• Les documents ont des champs.
• Les champs contiennent : des types de
données simples, des arrays ou d’autre
documents.
• Les schémas sont fluides.

|
MongoDB – Requêtage
Création d’une collection
CREATE TABLE users (
name VARCHAR(128),
age NUMBER
)
db.createCollection(“users”)

|
Insertion
INSERT INTO table (f1, f2, f3)
VALUES (v1, v2, v3)
db.collection.insert(
{f1: v1, f2: v2, f3: v3}
)
db.comments.insert({
'discussion_id': discussion_id,
'slug': slug,
'posted': datetime.utcnow(),
'author': author_info,
'text': comment_text
})

|
Modification
UPDATE table
SET f1 = v1, f2 = v2
WHERE f3 = v3
db.collection.update(
{f3: v3},
{$set:
{f1: v1, f2: v2}
}
)

|
Sélection
SELECT f1, f2
FROM table
WHERE f3 = 'foo'
db.collection.find(
{f3: 'foo'},
{f1: 1, f2: 1}
)
db.users.find()
db.invoices.find({id: 12})
db.customers.find({name:'John'})

|
Commandes diverses
show dbs // Voir les bases de données disponibles
use foo // Choisir une base de données (ici switcher sur “foo”)
db // Vérifier qu’elle est la base de données en cours
show collections // Lister les collections de la base de données
// Insérer des données
foo = {"lastName": "Doe", "firstName": John, "dateBirth": 1970-06-24}
db.test.insert(foo)
db.test.find() // Récupérer les documents d’une collection

|
Commandes diverses
// Utiliser du JavaScript dans Mongo
for (var i=0; i < 5; i++) db.test.insert({a:42, b:i})
// Vérifier l’ajout des documents
db.test.find()
// Retournera...
{"_id": ObjectId("554a990f0ebf783b64a56776"), "a": 42, "b": 0}
{"_id": ObjectId("554a990f0ebf783b64a567ce"), "a": 42, "b": 1}
{"_id": ObjectId("554a990f0ebf783b64a567cf"), "a": 42, "b": 2}
{"_id": ObjectId("554a990f0ebf783b64a567d0"), "a": 42, "b": 3}

|
Commandes diverses
db.test.find({ b: {$gt: 2}}).sort({b: -1})
// Retournera...

|
MongoDB – Installation

|
• Télécharger MongoDB sur mongodb.com et
installer l’archive sur votre poste. Sous Windows,
le répertoire d’installer par défaut est dans
Program FilesMongoDBServer.
• MongoDB nécessite un répertoire pour stocker
toutes les données. Créons ce répertoire en invite
de commandes, en tapant la commande : md
datadb

|
• Pour lancer MongoDB, exécutez le
fichier mongod.exe depuis votre
terminal.
• Ceci lance le processus de la base
de données MongoDB. Le message
« waiting for connections » sur
l'invite de commandes indique que
le processus mongod.exe a bien
été exécuté.

|
• Pour se connecter à l’instance de MongoDB
il faut utiliser le Shell Mongo.
• Exécutez le fichier mongo.exe depuis une
autre fenêtre de terminal (pour ne pas tuer
l’instance mongod).
• Après le lancement de mongo, votre session
va utiliser par défaut la base de données «
test ».
• Taper use <database> pour changer de
base de données.

|
MongoDB
• Installer MongoDB sur votre poste.
• Lancer mongod.
• Connectez-vous en utilisant mongo.
• Créer une base de données, une collection et quelques documents.
• Tester les requête de modification, suppression, sélection, etc.

Partie 7
Angular
Concepts fondamentaux d’Angular 2

|
Angular – Présentation
• Sur la partie serveur, Node.js a de plus en plus clairement remporté la bataille. Côté client c’est le
framework JavaScript AngularJS qui est devenu une référence (47K étoiles sur GitHub !).
• AngularJS est un framework JavaScript côté client open-source développé par Google en 2009.
• Framework MVC (Modèle Vue Contrôleur) et / ou MVVM (Modèle Vue – Vue Modèle).
• Concepts clés :
• Particulièrement adapté pour du Single Page Application (SPA)
• Il étend le langage HTML par des directives HTML
• Data Binding bidirectionnel
• Injection de dépendances

|
• Première version nommée « AngularJS »
• Actuellement en version 1.5.0 (février 2016)
• Utilisé massivement en production, mais
concurrencé par l’arrivée de Angular 2.
• Développement verbeux et quelques
concepts difficile à assimiler.
On distingue deux versions du framework Angular :
• Deuxième version nommée « Angular »
• Actuellement en version beta. Pas de roadmap.
• Rupture totale avec la version 1 : on peut
presque le considérer comme un autre
framework.
• Plus simple, plus rapide.

|

|
• Angular 2 est encore en cours de développement. Cependant, il est possible de développer dés
maintenant des applications. Le core va être amené à évoluer, mais globalement les bases sont
posées. Ne pas utiliser en production !
• Vous serez sur le marché de l’emploi d’ici 1 à 2 ans… ils est plus judicieux de découvrir Angular 2.
• Pourquoi Google a retiré la mention « JS » dans « Angular 2 » ? Google pousse l’utilisation du
langage TypeScript en remplacement de JavaScript. Cependant, il est toujours possible de
développer directement en JavaScript.
• On peut également utiliser le langage de programmation Dart (développé par Google).
Angular 2

|
• Se base sur les futurs standards du web :
• WebComponents : a voir comme des widgets réutilisables. Ils font partie intégrante des
navigateurs, et ne nécéssitent donc pas de librairie comme jQuery. Un Web Component
existant peut être utilisé sans écrire de code, simplement en ajout la déclaration d'un
import à une page HTML. Possibilité d’utiliser nos propres balises dans un code HTML.
• ES6 / ES7 (en draft) / TypeScript
• Réponce face au frameworks concurrents comme Ember.js et React (Facebook).
Angular 2

|
• Langage de programmation open-source développé en 2012 par Microsoft, comme un sur-
ensemble de JavaScript (tout code JavaScript peut être utilisé dans TypeScript).
• Développé dans le but d’améliorer le code JavaScript (face aux manquements d’ECMAScript 5) :
typage, interfaces, classes, modules, mixin, etc.
• Le code TypeScript est transcompilé / transpiler vers JavaScript.
• TypeScript supporte la spécification ECMAScript 6. Son intérêt est limité depuis l’arrivée
d’ECMAScript 6.
TypeScript (rappel)

|
TypeScript (rappel)
class Greeter {
constructor(public greeting: string) { }
greet() {
return "<h1>" + this.greeting + "</h1>";
}
};
var greeter = new Greeter("Hello, world!");
document.body.innerHTML = greeter.greet();
• Exemple de code TypeScript (Hello World) :
Comparaison de TypeScript VS JavaScript sur typescriptlang.org/Playground

|
TypeScript (rappel)
npm install -g typescript
• Comme TypeScript n’est pas un langage de programmation directement intégré dans nos
navigateurs, nous devons l’installer. Le plus simple et de passer par npm :

|
Prise en main du framework
• Aller sur https://angular.io/docs/ts/latest/quickstart.html
et suivez les différentes étapes.
• Comme Google conseille d’utiliser TypeScript, et que la
grande majorité des tutoriaux ainsi que la
documentation officiel se basent sur ce langage,
sélectionner bien « Angular 2 for TypeScript » dans le
menu déroulant.

Partie 8
MEAN.JS
Full-Stack JavaScript Using MongoDB,
Express, AngularJS, and Node.js

|
MEAN.JS – Présentation
• MEAN.JS est un framework JavaScript fullstack qui permet de
faire communiquer les différentes couches de l’architecture MEAN.
• Cela peut demander un peu de configuration. MEAN.JS permet de
se concentrer sur la partie métier de votre application, plutôt que
de faire du code boileplate.
• Un bon framework n’avance pas la ligne d’arrivée, il avance la ligne
de départ. Il faut choisir un framework qui inclus de la génération
de code, des scripts, des tests, déploiement… c’est le cas de
MEAN.JS.

|
• MEAN.JS ne doit pas être confondu avec MEAN.io.
• Les deux frameworks sont quasiment identiques puisque MEAN.JS est un fork de MEAN.IO. La
même personne est à l’origine de ces framework. Cette personne c’est désolidarisé de MEAN.io
après des points de divergence interne.
• Quelques différences dans les outils utilisés :
MEAN.JS MEAN.IO
Système de build : Grunt
Scaffolding : Yeoman Generators
Système de build : Gulp
Scaffolding : custom CLI nommé « mean »

|
• Un système solaire composé de 4 planètes (MongoDB, Express, AngularJS et NodeJS), et de satellites :
• Yo : générateur
• Grunt : build script (automatisation de tâches : minification, compilation, etc.)
• Bower : gestionnaire de dépendance
• Bootstrap : mobile support (responsive web design)
• KarmaJS : pour écrire et lancer des tests unitaires
• Passport : gestion de l’authentification sur des services externes
• Tout ces outils / helpers sont là pour rendre le développement d’une application MEAN le plus facile
possible

|
Remarque importante :
AngularJS (version 1) est
utilisée. Les développeurs ont
prévu de migrer vers la version
2 lorsqu’elle sera finalisée.

|
MEAN.JS – Utilisation
• En cours de rédaction…

Partie 9
Meteor
Complete platform for building web and
mobile apps in pure JavaScript.

|
METEOR – Présentation

|
• Meteor est un framework open-source de développement web en
JavaScript basé sur Node.js.
• Il s’inspire fortement de l’architecture / de la philosophie MEAN.
• Il s’inscrit comme un framework « nouvelle génération » car il bouscule les
codes : une application peut être développée simplement et rapidement
avec Meteor.
• Des mécanismes complexes comme la persistance client / serveur et le
temps réel sont implémentés de manière native et transparente. Meteor
apporte une couche d’abstraction à de nombreux problèmes et pièges
qu’on pourrait rencontrer en temps normal.
Première version :
décembre 2011.
Dernière version
1.2.1 (octobre 2015)

|
• Le partage de code entre l’environnement client et serveur est possible avec Meteor.
• Meteor repose sur Node.js. C’est ce qui permet de faire le lien entre la base de données de votre
application et son interface utilisateur, tout en assurant que les deux restent bien synchronisés.
• Les données de la base de données côté serveur peuvent être répliquées en tout ou partie sur les
clients. De manière générale, les client ne manipulent jamais directement les données du serveur.
Les modifications (ajout, modification, suppression) côté client sont synchronisées avec le serveur.
• Cela permet une grande flexibilité.

|
• On peut alors effectuer des requêtes même en étant déconnecté du serveur. Lorsque le client sera
de nouveau connecté au serveur les éventuelles modifications sur les données seront envoyées
vers le serveur.
• Programmation réactive côté client (Latency Compensation) : l’action est immédiate pour le
client, mais le traitement côté serveur peut être différé ou mis en arrière plan. Exemple : envoi
immédiat d’un message dans un chat via un bouton « Envoyer », alors que la transmission et la
vérification côté serveur se fait en arrière-plan.
• Votre application web Meteor peut être transformée en application mobile native iOS / Android
en seulement quelques lignes de commandes. Apache Cordova est utilisé.

|
• Vous pouvez déployer votre application dans le cloud Meteor en 1 ligne de commande (sur le même
principe que Heroku que nous avons vue dans la partie Node.js).
• Optionnel : vous pouvez utiliser AngularJS ou React pour le partie client.
• Hot Code Reload : les modifications que vous faites dans le code sont reportées en direct sur votre
page (sans avoir à recharger votre page).
• Pour toutes ces raisons, grand intérêt pour ce framework JavaScript dans la communauté des
développeurs.
• Levée de fonds de 11,2 millions de dollars en 2012.
• De nombreux Meetup chaque année en France et dans le reste du monde.

|
• Meteor dispose de son propre catalogue de packages
/ modules : Atmosphere.
• Il fonctionne sur le même principe que npm.

|
• La documentation de Meteor permet de prendre
rapidement en main le framework.
• Elle est complète et comprend beaucoup
d’exemple de code.
• Vous pouvez la consulter via :
http://docs.meteor.com/
• Sur StackOverflow, le tag meteor est très actif :
http://stackoverflow.com/questions/tagged/met
eor

|
• Le guide de Meteor permet de
connaître les bonnes pratiques à
utiliser lorsque vous développerez
votre application.
• Ce guide vient en complément de
la documentation officielle.
• Vous pouvez le consulter via :
http://guide.meteor.com/

|
METEOR – Plateforme
Infographie par @nwientge pour Meteorjs.club

|
METEOR – Plateforme

|
METEOR – Installation
• Pour Windows : https://install.meteor.com/windows
• Pour Mac OS et Linux : exécuter la commande curl https://install.meteor.com/ | sh
• Au moment de l’installation, créer un compte développeur sur Meteor.

|
METEOR
• Les slides suivantes se basent en partie sur le
livre Discover Meteor.
• Une version en ligne, traduire par la
communauté, est disponible depuis
http://fr.discovermeteor.com.
• Je vous invite à lire attentivement ce livre
pour en apprendre d’avantage sur le
développement d’application Meteor.

|
METEOR – Premiers pas
• On suppose que vous avez installé Meteor sur votre poste.
• Toute comme Node.js, Express ou MongoDB, Meteor fonctionne en ligne de commande. Une
variable d’environnement a été créé vous permettant d’utiliser la commande meteor directement
dans votre terminal.
• Pour lister toutes les actions disponibles, exécuter la commande suivante :
meteor help

|
• Nous allons maintenant créer notre premier application. La commande create de Meteor permet
de créer une application basique (création du répertoire de projet, téléchargement des
dépendances et génération d’un squelette basique).
meteor create microscope
• Exécuter la commande suivante pour lancer votre application :
cd microscope
meteor

|

|
• Meteor à son propre gestionnaire de paquets et dépendance qui fonctionne sur le même principe
que npm que nous avons vu dans les parties précédentes. Equivalent à la commande npm install
<packageName>, la commande suivante permet d’ajouter un paquet :
Ajout d’un paquet
meteor add <packageName>
meteor add twbs:bootstrap
meteor add underscore
• Ajoutons les 2 paquets suivant (Bootstrap comme framework CSS et Underscore qui apporte des
fonctions utilitaires pour JavaScript.

|
Ajout d’un paquet

|
• La commande précédente à téléchargé le paquet et ses éventuelles dépendances.
• Dans le même principe que le fichier packages.json de npm, Meteor délègue la gestion des
paquets installés à deux fichiers : .meteor/packages et .meteor/versions.
• Vérifier que ces fichiers contiennent bien les paquets ajoutés.
Ajout d’un paquet
Suppression d’un paquet
meteor remove <packageName>

|
• isopacks : paquets de Meteor pouvant fonctionner à la fois côté client et serveur
• Paquets tiers : isopacks développés par la communauté. Dans le même principe que la catalogue
npm ou que Packagist de Composer, la catalogue des paquets est géré par Atmosphere
(http://atmosphere.meteor.com/).
• Paquets locaux : dans le répertoire /packets
• Paquets npm : ne fonctionnent pas directement avec la plateforme Meteor mais peuvent être
utilisés par d’autres paquets en tant que dépendance.
Types de paquet

|
• /client : exécuté que la par client
• /server : exécuté que par le serveur
• Tout le reste est exécuté à la fois par le client et le serveur.
• /public : ressource statiques (images, css)
• /lib : fichiers chargés par Meteor avant tous les autres
• Fichiers main.* : chargés par Meteor après les autres
Structure d’une application
Appelé par Meteor en fonction du
contexte (client / serveur)

|
• Meteor trouvera et inclura automatiquement les fichiers que vous ajoutez dans le répertoire
/client.
• Ce qui signifie que vous n'avez jamais besoin d'écrire manuellement des chemins d'inclusion
(include) pour les fichiers javascript ou CSS.
• Au final, Meteor compilera tout dans un seul fichier minifié.
Inclusion automatique des fichiers

|
• Les feuilles de style CSS sont automatiquement chargées et comprimées à la volée par Meteor, de
sorte qu'elles doivent être placées dans le dossier /client, plutôt que /public comme le seraient les
autres ressources statiques.
• Même principe qu’avec Grunt (voir MEAN.JS).
Feuilles de style

|
METEOR – Templates (Spacebars)
• Meteor utilise son propre moteur de template nommé Spacebars.
• https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md
• Meteor garde les templates et leur logique séparés, et ces templates ne font rien par eux-même.
• Un template est fichier HTML comprenant une balise ouvrante et fermante <template>
• On utilise l’attribut « name » de cette balise pour spécifier le nom du template.
• Donc le nom de fichier du template n’a pas d’incidence. Par convention, on nomme quand même
le fichier par le nom utilisée dans l’attribut name.
Présentation

|
• Inclusion d’un template dans une page HTML :
• Création du fichier de template (notez l’utilisation de la balise <template>) :
Présentation
<template name="postList">
<div class="posts page">
...
</div>
</template>
client/templates/posts/post_list.html
{{> postsList}}

|
• Itération sur une variable ici « posts » qui représente un tableau d’articles, puis appel du template
permettant d’afficher le détail d’un article.
{{#each posts}}
{{> postItem}}
{{/each}}
client/templates/posts/posts_list.html
<template name="postItem">
<h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>
</template>
client/templates/posts/posts_item.html
Appel d’une propriété de l’objet courant.

|
• Afin d'exister, un template a besoin de helpers.
• Dans l’exemple précédent, la variable « posts » est lié à un helper.
• Template = affichage + itération (aucune logique métier ou de framework)
• Helpers = assigne et prépare une variable à chaque variable  logique du template
• On parle de « helpers du template » dans la terminologie Meteor.
Helpers de template

|
var postsData = [
{
title: 'Introducing Telescope',
url: 'http://sachagreif.com/introducing-telescope/'
},
{
title: 'Meteor',
url: 'http://meteor.com'
}
];
Template.postsList.helpers({
posts: postsData
});
client/templates/posts/posts_list.js
Ces données viendraient
normalement de la base de
données… mais c’est un premier pas.

|
• Tester l’application Microscope (celle du livre Discover Meteor) :
// Cloner l’application depuis GitHub
git clone https://github.com/DiscoverMeteor/Microscope.git github_microscope
cd github_microscope
// Changer de branche (chapitre 3:2 = templates)
git checkout chapter3-2
// Lancer l’application
meteor

|
METEOR – Collections temps réel
• Les collections temps réel sont au cœur de Meteor.
• Quelque soit l’application Meteor développé, les collections sont des éléments centraux.
• A placer dans le répertoire « lib » pour quelles soient lancer en premier.
• Nous allons voir comment synchroniser automatiquement des données et intégrer des collections
dans les templates.
• Une collection (à comprendre dans le sens MongoDB du terme) est une structure de données qui
prend soin de conserver les données en base de données côté serveur et côté client. Une
synchronisation est ensuite faite, en temps réel, avec chaque navigateur connecté.

|
Posts = new Mongo.Collection('posts');
lib/collections/posts.js
• La collection Posts est disponible à la fois sur le client et sur le serveur (car dans /lib).
• Collection (dans le sens Meteor) : librairie standard pour manipuler la couche persistance
(MongoDB et local storage côté client).
• Sur le client la collection est une copie d'un sous-ensemble de la réelle et canonique collection.
La collection côté client est constamment mise à jour avec ce sous-ensemble, (la plupart du
temps) de manière transparente.

|
• Agit comme une API dans votre base de donnée MongoDB.
• Permet d'écrire des commandes Mongo telles que Posts.insert() ou Posts.update().
• On peut manipuler directement des collections / documents depuis le shell MongoDB.
Collections côté serveur
meteor mongo
> db.posts.insert({title: "A new post"});
> db.posts.find();
{ "_id": ObjectId(".."), "title" : "A new post"};

|
METEOR – Le shell meteor
• Appelé depuis le terminal avec
meteor shell
• Donne un accès direct au code
côté serveur de l’application.

|
METEOR – Le shell mongo
• Appelé depuis le terminal avec
meteor mongo
• Donne l'accès direct à la base de
donnée de l'application.
• Similaire au shell Mongo vu
dans le chapitre précédent sur
MongoDB.
• Meteor inclue sa propre instance
de MongoDB (vous n’avez pas
besoin de l’installer).

|
• Quand vous déclarez Posts = new Mongo.Collection('posts'); sur le client, ce que vous êtes
en train de créer est un cache local dans le navigateur de la collection Mongo réelle.
• Collection côté client en tant que “cache”  contient le sous-ensemble des données, et offre un
accès rapide à ces données.
• Ces documents sont stockés dans la mémoire du navigateur, ce qui signifie qu'y accéder est tout
simplement instantané.
• L'implémentation de Mongo côté client s'appelle MiniMongo.
Collections côté client

|
• Comment la collection côté client synchronise ses données avec la collection côté serveur ?
Communication client / serveur
// Changer de branche (chapitre 4:1 = collections)
git checkout chapter4-1
meteor
• Ouvrer deux fenêtre de votre navigateur, et accéder à la console JavaScript dans l’un des deux. Ouvrez
aussi le shell Mongo (voir slide précédente).
• Dans le shell Mongo, exécuter :
db.posts.find();

|
• Dans le console du premier navigateur :
Posts.findOne();
• Créer un nouveau article. Dans l'une des consoles navigateur, exécutez une commande d'insertion :
Posts.find().count(); // 1
Posts.insert({title: "A second post"});
Posts.find().count(); // 2
• Vérifier sur le shell Mongo :
db.posts.find();

|
• Ouvrir la console du 2nd navigateur et exécuter :
db.posts.find(); // 2
• La collection côté serveur a été informé par la collection côté client d'un nouvel article, et a pris
en charge la tâche d'insérer l'article dans la base de données Mongo et de renvoyer l'information
à toutes les autres collections post connectées.

|
• En phase de développement vous serrez amené à manipuler souvent votre base de données en
ajoutant des collections, créer des documents de tests… Il est par fois utile de repartir sur une
base de données vierge.
• La commande suivante permet de remettre à zéro les données. Avant d’exécuter cette
commande, vous devez arrêter l’instance Meteor (CTRL + C sur la console Meteor).
• Puis relancer votre application Meteor :
meteor reset
meteor

|
• Toujours en phase de développement, il est intéressant d’ajouter automatiquement des données
de tests en base de données à chaque démarrage de l’application.
• On utilise une fixture, représenté par un fichier JavaScript créé dans le répertoire /server (donc
jamais chargé dans le navigateur d'un utilisateur).
• Le code sera exécuté immédiatement quand le serveur démarrera, et fera des appels d'insertion
sur la base de données.
meteor reset

|
if (Posts.find().count() === 0) {
Posts.insert({
title: 'Introducing Telescope',
url: 'http://sachagreif.com/introducing-telescope/'
});
Posts.insert({
title: 'Meteor',
url: 'http://meteor.com'
});
}
server/fixtures.js

|
• Maintenant que nous avons des articles en base de données, modifions le helper de template
pour récupérer ces articles directement en base, au lieu d’un tableau statique depuis une variable.
Template.postsList.helpers({
posts: function() {
return Posts.find();
}
});
client/templates/posts/posts_list.js

|
• Ajouter maintenant un article depuis la
console d’un des deux navigateurs.
Posts.insert({
title: 'Meteor Docs',
author: 'Tom Coleman',
url: 'http://docs.meteor.com'
});
• Dans le navigateur, l’article apparait
maintenant dans la liste (l’interface a
été automatiquement mis à jour).

|
• Par défaut le paquet autopublish est activé.
Dans ce cas là on a pas besoin de penser aux
publications.
• Permet de partager chaque collection dans sa
totalité à chaque client connecté.
• En production il ne faut pas activer le paquet
autopublish, au risque de dévoiler des
informations confidentielles (comme la base user
contenant les mots de passe) !
Publication et souscriptions des collections

|
• Instantanément les articles ne sont plus affichés (et donc plus contenu dans la base locale de
chaque client connecté).
meteor remove autopublish
• Désactiver l’autopublish :

|
• Comment transférer seulement les articles que l'utilisateur a besoin de voir (en prenant en
compte les choses comme la pagination) ?
Meteor.publish('posts', function() {
});
server/publications.js
Meteor.subscribe('posts');
client/main.js

|
METEOR – Publications et Souscriptions
• Meteor peut gérer une large quantité de données et être
sécurisé. Il faut cependant comprendre comment le
système de publications et souscriptions fonctionne.
• Meteor = client + serveur.
• Architecture appelée Database Everywhere : Meteor va
prendre un sous-ensemble de votre base de données et le
copier sur le client.
• Au lieu d'envoyer du code HTML au client, une application
Meteor va envoyer la donnée brute (data on the wire).

|
• On peut accéder aux données instantanément, et même
les modifier, sans attendre un aller-retour client > serveur
(principe de Latency compensation).

|
• Principe de la publication : décider quelles données vont être publiées sur les copies locales côté
client. On parle alors de sous-ensemble.
• Protocol appelé DDP (Distributed Data Protocol).
Publication

|
• Cela assure qu'il n'y a aucun moyen possible qu'un client soit capable d'accéder à un article
signalé. Assurez-vous juste que vous publiez seulement les données que vous voulez fournir au
client.
Publication
Meteor.publish('posts', function() {
return Posts.find({flagged: false});
});

|
• Exemple : publier une collection dans sa totalité
(ce que fait autopublish quand il est activé).
Publication
Meteor.publish('allPosts', function(){
});

|
• Exemple : publier une collection partielle.
Publication
Meteor.publish('somePosts', function(){
return Posts.find({'author':'Tom'});
});

|
• Exemple : publier des propriétés partielles.
Exclusion de certains champs.
Publication
return Posts.find({}, {fields: {
date: false
}});
});

|
• On peut aussi combiner les deux exemples précédents (filtrer sur un auteur et retourner
seulement les champs avec date = false).
Publication
return Posts.find({'author':'Tom'}, {fields: {
date: false
}});
});

|
Souscription
• Principe : spécifier aux clients quel sous-ensemble de données ils ont besoin à un moment donné.
• Les données auxquelles vous souscrivez seront dupliquées sur le client grâce à Minimongo
(implémentation de MongoDB côté client).
Affichage seulement des
articles écrits par un
utilisateur précis.

|
Souscription
Meteor.publish('posts', function(author) {
return Posts.find({flagged: false, author: author});
});
Meteor.subscribe('posts', 'bob-smith');
client/main.js

|
Trouver (filtrer les données de la base locale)
Template.posts.helpers({
posts: function(){
return Posts.find({author: 'bob-smith', category: 'JavaScript'});
}
});
Côté client
• Sélectionner un sous-ensemble précis de données.

|
METEOR – Routage
• Iron Router est un package de routage qui a été créé spécialement pour les applications Meteor.
• La commande suivante permet d’installer le paquet. Pensez à redémarrer votre instance de
Meteor.
Installation du routeur
meteor add iron:router

|
METEOR – Routage
Relier des URLS à des templates

|
METEOR – Routage
<head>
<title>Microscope</title>
</head>
client/main.html
• Le layout sera intégré dans ce template basique (nécessaire avec Meteor / handlebars).

|
METEOR – Routage
<template name="layout">
<header class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="/">Microscope</a>
</div>
</header>
<div id="main">
{{> yield}}
</div>
</div>
</template>
client/templates/application/layout.html
Remplace notre précédent postsList

|
METEOR – Routage
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', {name: 'postsList'});
lib/router.js
• Indique au routeur d’utiliser le layout précédent (« layout » correspond au nom du fichier).
• Définition d’une nouvelle route appelée postsList. Assignation à l’URI « / ».

|
METEOR – Routage
<header class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="{{pathFor 'postsList'}}">Microscope</a>
</div>
</header>
client/templates/application/layout.html

|
METEOR – Routage
Router vers un article spécifique
<template name="postPage">
<div class="post-page page">
{{> postItem}}
</div>
</template>
client/templates/posts/post_page.html

|
METEOR – Routage
...
Router.route('/', {name: 'postsList'});
Router.route('/posts/:_id', {
name: 'postPage‘
});
lib/router.js
• Nous allons créer une autre route nommée, cette fois en associant les chemins d'URL de la forme
/posts/<ID> au template postPage :

|
METEOR – Routage
• Nous routons maintenant vers le template correct, mais il
nous manque encore quelque chose : le routeur connaît
l’_id de l'article que nous voulons afficher, mais le
template n'a toujours pas d'indice.
• Heureusement, le routeur a une solution intégrée
intelligente : il vous laisse spécifier un contexte de
données (data context). C’est ce avec quoi vous remplissez
votre template.

|
METEOR – Routage
Router vers une page d’erreur
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
notFoundTemplate: 'notFound',
});
lib/router.js
<template name="notFound">
<div class="not-found page jumbotron">
<h2>404</h2>
<p>Désolé, nous ne pouvons pas trouver une page à cette adresse.</p>
</div>
</template>
client/templates/application/not_found.html

|
METEOR – Ajout d’une donnée côté client
• On a vu comment ajouter des données depuis la console du navigateur côté client. Pour rappel,
dans l’application d’exemple on affiche une liste d’article. Pour ajouter un article on appelait
l’instruction Posts.insert().
• On créera une interface graphique pour permettre aux utilisateurs d’ajouter un article.
• On ajoute la route suivante dans le routeur :
Construction de la page d’ajout d’article
Router.route('/submit', {name: 'postSubmit'});
lib/router.js
Correspond au nom du template. Meteor analysera le code
de chacun des fichiers HTML de notre application à la
recherche d’une balise <template> ayant pour attribut
« name » la valeur « postSubmit ».

|
• Ajout d’un lien dans l’entête de page. On référence directement la route plutôt que d’écrire
l’adresse en dur :
<ul class="nav navbar-nav">
<li><a href="{{pathFor 'postSubmit'}}">Créer un post</a></li>
</ul>
client/templates/includes/header.html

|
<template name="postSubmit">
<form class="main form page">
<input name="url" id="url" type="text" value="" placeholder="Votre URL" />
<input name="title" id="title" type="text" value="" placeholder="Nommez votre article" />
<input type="submit" value="Submit" />
</form>
</template>
client/templates/posts/post_submit.html
• Inutile de préciser l’attribut « action » dans le formulaire HTML, car nous allons intercepter
l’évènement d’envoi (submit) sur ce formulaire.

|
• Pour plus de simplicité on utilise la
bibliothèque jQuery. C’est tout à fait
possible avec Meteor (après avoir
installé le paquet correspondant).
• L’utilisateur envoi le formulaire, un
nouveau article est créé. Puis avec
Router.go(), l’utilisateur est
instantanément redirigé vers une
autre page.
Template.postSubmit.events({
'submit form': function(e) {
e.preventDefault();
var post = {
url: $(e.target).find('[name=url]').val(),
title: $(e.target).find('[name=title]').val()
};
post._id = Posts.insert(post);
Router.go('postPage', post);
}
});
client/templates/posts/post_submit.js

|
Sécurisation (validation d’accès)
meteor remove insecure
• Seul les utilisateurs authentifiés doivent pouvoir accéder au formulaire d’ajout d’article.
• La sécurité des données est incluse dans les collections Meteor, mais elle est désactivée par défaut
pour faciliter le développement.
• Pour réactiver cette sécurité, on doit supprimer le paquet insecure :

|
• Sans ce paquet, les insert() côté client sur la collection des articles ne sont plus autorisés !
• Donc 2 solutions :
• Définir quand un client et autorisé ou non à insérer un article.
• Faire les insertions côté serveur.

|
• Définir quand un client et autorisé ou non à insérer un article :
Posts = new Meteor.Collection('posts');
Posts.allow({
insert: function(userId, doc) {
// autoriser les posts seulement si l'utilisateur est authentifié
return !! userId;
}
});
lib/collections/posts.js
!! : convertie une valeur en booléen
Si useId est égale à 0, null ou undefined  retournera false.

|
• Grâce au code précédent (fonction allow), même en utilisant la console navigateur, l’utilisateur ne peut
pas ajouter d’article s’il n’est pas authentifié.

|
• Définir quand un client et autorisé ou non à insérer un article – Sécuriser l’accès au formulaire.
Router.route('/submit', {name: 'postSubmit'});
var requireLogin = function() {
if (! Meteor.user()) {
this.render('accessDenied');
} else {
this.next();
}}
Router.onBeforeAction(requireLogin, {only: 'postSubmit'});
lib/router.js
On appelle ça un « hook de routage ».
Peut être comparé aux middlewares de
Express.

|
// On va cacher le lien d’ajout si l’utilisateur n’est pas connecté
<ul class="nav navbar-nav">
{{#if currentUser}}<li><a href="{{pathFor 'postSubmit'}}">Créer un post</a></li>{{/if}}
</ul>
client/templates/includes/header.html

|

|
METEOR – Session
• Utile pour stocker des états éphémères (sans passer par une transmission de paramètre par URL).
• Manipulation des sessions via l’objet natif et global Session.
• Une session est caractérisée par une clé et une valeur.
• Ajout ou modification d’une donnée en session :
• Lecture d’une donnée en session :
Session.set('foo', 'Lorem ipsum');
Session.get('foo');

|
METEOR – Gestion des utilisateurs
• La gestion des utilisateurs est facile avec Meteor. En quelques minutes on peut mettre en place un
système d’authentification complet.
• Meteor inclus nativement l’authentification. Cependant, il faut installer des paquets additionnel
pour ajouter des connecteurs en fonction du ou des types d’authentification que vous souhaitez
mettre en place.
• Connexion par mot de passe (local) : accounts-password
• Connexion depuis un compte Google : accounts-google
• Connexion depuis un compte Twitter : accounts-twitter
• Connexion depuis un compte Facebook : accounts-facebook
Utilise le protocole OAuth2
pour se connecter à des
services tiers.
meteor add accounts-password

|
• Meteor permet de gérer nativement :
• Connexion / Déconnexion
• Création de compte
• Validation de compte par email
• Fonctionnalité mot de passe perdu
• Possibilité d’utiliser le protocole OAuth 2 pour se connecter via un service tiers

|
• Les comptes utilisateurs sont stockés dans la collection MongoDB « users » qui est
automatiquement créé par Meteor sur le serveur.
Collection « users »
{
_id: "bbca5d6a-2156-41c4-89da-0329e8c99a4f", // Meteor.userId()
username: "cool_kid_13",
emails: [
{ address: "cool@example.com", verified: true },
{ address: "another@different.com", verified: false }
],
createdAt: Wed Aug 21 2013 15:16:52 GMT-0700 (PDT),
... (voir slide suivante)
}

|
{
... (voir slide précédente)
profile: {
// The profile is writable by the user by default.
name: "Joe Schmoe"
},
services: {
facebook: {
id: "709050", // facebook id
accessToken: "AAACCgdX7G2...AbV9AZDZD"
}
}
}

|
Meteor.user(); // Retourne null si l’utilisateur n’est pas connecté
• Récupération de l’utilisateur courant :
• Remarque : même avec l’auto-publication désactivée, Meteor (via le paquet comptes) auto-publie
les détails de base du compte de l'utilisateur actuellement authentifié. Un utilisateur ne peut donc
pas voir les détails d'un autre compte.
• La publication publie donc seulement un objet utilisateur par utilisateur authentifié (et aucun si
vous n'êtes pas authentifié).

|
• Par mesure de sécurité, le document user retourné par la collection pour l’utilisateur courant ne
contient pas le même nombre de champs entre MongoDB côté serveur et la base de donnée côté
client.
• On remarque alors qu’une collection locale peut être un sous-ensemble sécurisé (dans le sens où
les données retournées sont limitées). L'utilisateur authentifié voit seulement les informations
nécessaires à son bon fonctionnement.
❯ Meteor.users.findOne();
Object {_id: "kYdBd8hr3fMPGPcii", username: "john"}
Console navigateur

|
• L’algorithme de chiffrement bcrypt est utilisé (particulièrement recommandé pour le chiffrement
de données sensibles comme des mots de passe).
• Documentation complète sur le module natif de gestion des utilisateurs / de l’authentification :
• https://www.meteor.com/accounts
• http://docs.meteor.com/#/full/accounts_api

|
• Plutôt que de créer manuellement des templates d’authentification (formulaire de connexion,
création de compte, etc.), vous pouvez installer le paquet suivant :
Interface utilisateur
meteor add accounts-ui-unstyled // Version sans aucune mise en forme
meteor add accounts-ui // Version non Bootstrap
meteor add ian:accounts-ui-bootstrap-3 // Version Bootstrap
{{> loginButtons}}
• Le template « loginButtons » est disponible. Il permet d’afficher un menu déroulant contenant les
formulaires. On utilisera la syntaxe habituelle pour insérer le template :

|

|
• Les utilisateurs assument généralement que leur état de connexion est partagée entre tous les
onglets ouverts dans leur navigateur.
• C’est-à-dire que si l’utilisateur à ouvert plusieurs onglets de votre application sur son navigateur,
et qu’il se connecte sur l’un des onglets, il s’attend à être connecté automatiquement sur les
autres onglets.
• En pratique peut de site implémentent ce comportement. L’utilisateur doit recharger les autres
onglets pour profiter de l’authentification (relecture de la session).
• Meteor gère ça nativement en utilisant la base de donnée cliente (local storage) pour
synchroniser l’état de connexion de l’utilisateur entre les onglets.
Synchronisation de l’état de connexion

|
METEOR – Déploiement sur le cloud
• Nous avons vu dans le chapitre consacré à la plateforme Node.js que nous pouvions déployer
rapidement une application dans le cloud. Plusieurs solutions PaaS existent. Nous avions utilisé
Heroku pour sa simplicité et sa gratuité.
• Meteor met également à disposition une solution PaaS entièrement gratuite.
• Documentation complète sur http://guide.meteor.com/deployment.html
• Votre application sera déployée sur un sous-domaine du type http://yourApp.meteor.com.
• Une seule ligne de commande suffit pour le déploiement des sources !
meteor deploy your-app.meteor.com

|
• Suppression d’une application déployée sur Meteor.com :
Commandes utiles
meteor deploy --delete your-app.meteor.com
• Voir les derniers logs :
meteor logs your-app.meteor.com
• Accéder à la base de données mongo :
meteor mongo your-app.meteor.com

|
• La commande meteor deploy créé bien une base de données mais ne transfert par défaut pas
vos collections MongoDB. Quelques étapes sont nécessaires pour déployer également votre base
de données.
• Les programmes mongodump et mongostore sont nécessaires. Ils peuvent être téléchargés sur
mongodb.org/downloads (inclus dans le bundle).
• Faire un dump de votre base de données MongoDB locale (-d : nom de votre base de données,
-o : répertoire de destination du dump) :
Déploiement de la base de données Mongo
mongodump -h 127.0.0.1:3002 -d meteor -o meteor

|
• Exécuter la commande suivante pour connaitre l’URL de votre base de données distante
MongoDB (créée lors du déploiement de votre application) :
meteor mongo --url your-app.meteor.com
// Retounera une adresse au format :
mongodb://user:password@sky.member1.mongodirector.com:27017/your_app_meteor_com
• La chaine « user:password » correspond au nom d’utilisateur et au mot de passe de votre instance
distante MongoDB créés spécifiquement par Meteor.com lors du déploiement. Le nom du
serveur peut changer.

|
• A partir de l’adresse récupérée dans le slide précédent, exécuter la commande suivante pour
déployer vos collections (bien sûr, adapter les paramètres) :
mongorestore -u client -h sky.member1.mongodirector.com:27017
-d your_app_meteor_com
-p 'password' folder/
Source : http://stackoverflow.com/questions/11024888/is-there-a-simple-way-to-export-the-data-from-a-meteor-deployed-
app/16380978

|
• Le déploiement sur Meteor.com est parfait en phase de
développement, mais n’est pas vraiment adaptée pour
de la production (performances limités : chaque
application est lancée dans un processus unique).
• Galaxy est la solution PaaS professionnelle de Meteor.
C’est un système distribué qui repose sur Amazon AWS.
Plus d’infos sur https://galaxy.meteor.com/

|
Meteor
Création d’une application

|
METEOR – Création d’une application
• Le développement de cette application compte pour votre partiel.
• Vous pouvez vous baser sur les slides précédentes, mais également sur les autres chapitres de
Discover Meteor qui n’ont pas été abordés ici. Le but est d’implémenter un maximum de choses
dans le temps impartis.
• Soyez créatif et appliquez-vous.
• Vous avez passé un partenariat avec les boulangeries et restaurants de votre quartier. Vous
souhaitez offrir un service à vos utilisateurs, pour leur permettre de passer commande de leur
déjeuner, à partir d’un catalogue de restaurants (et leurs menus) directement depuis votre
application.

|
• Cela va permettre aux restaurateurs / boulangers (qu’on va simplifier par le terme « commerce »)
de préparer leurs commandes en avance. Les clients n’auront plus qu’à aller récupérer leurs
commandes prêtes. On pourrait même aller plus loin en imaginant un système de paiement en
ligne… mais ce sera pour une autre fois.
• Votre application aura plusieurs page :
• Page d’accueil : affichage des commerces.
• Détail d’un commerce : affichage des menus disponibles dans ce commerce et des
informations sur le commerce (nom, horaires d’ouverture, téléphone, etc.).

|
• Votre application aura plusieurs page :
• Un menu est caractérisé par un nom, un texte de description, un prix, et éventuellement
une photo, un nombre de produit restant.
• En face de chaque menu, un bouton permet de passer commande. Le passage d’une
commande modifie le nombre de produit restant.
• Si vous voulez allez plus loin, vous pouvez ajouter un espace d’administration permettant
de gérer les commerces et leurs menus.

|
• Bien sûr vous devez authentifier vos clients : l’idéal est de passer par un espace client (page
d’inscription, de connexion, récupération du client connecté). Peut être qu’il y a des paquets tout
prêt sur Atmosphere.
• Votre base de données MongoDB contiendra plusieurs collections.
• Cahier des charges :
• Vous devez publier votre projet sur GitHub.
• Vous pouvez publier votre application sur le cloud Meteor.
• Vous devez utiliser Bootstrap pour votre interface utilisateur.

Merci de votre attention !

Formation JavaScript full-stack (JS, jQuery, Node.js...)

Contenu connexe

Tendances

Similaire à Formation JavaScript full-stack (JS, jQuery, Node.js...)

Dernier

Formation JavaScript full-stack (JS, jQuery, Node.js...)