Javascript
Au-delà Du Langage

Par Dr Samir ROUABHI
rouabhi@gmail.com
Plan
Javascript

À Savoir
Avant de savoir
Un peu d’Histoire..

NCSA Mosaïc

Sun Microsystems

Netscape

Mocha
LiveScript

Java

Mozilla Foundation

Javascript

Oracle

Créé par Brendan Eich en 1995, sortie en 1996 sur NN 2.0 & IE 3.0
ECMA Script

JScript

ActionScript
Standards

 ECMA-262

6/1997

Dernière version ECMAScript 5.1, Javascript 1.9
Prochaine version ECMAScript 6, Javascript 2
D’autres implémentations: JScript, ActionScript, PDF, Node.js,…

 ECMA-327

ES-CP

6/2001

 ECMA-357

E4X

6/2004
Spécifications
 ECMA-262 : http://www.ecma








international.org/publications/files/ECMAST/Ecma-262.pdf
ECMA-327 : http://www.ecmainternational.org/publications/files/ECMAST/Ecma-327.pdf
ECMA-357 : http://www.ecmainternational.org/publications/files/ECMAST/Ecma-357.pdf
XMLHttpRequest :
http://www.w3.org/TR/XMLHttpRequest/
HTML 5 :
http://dev.w3.org/html5/spec/Overview.html
CSS 3 : http://www.w3.org/Style/CSS/
HTTP : http://www.w3.org/Protocols/
DOM : http://www.w3.org/TR/DOM-level-3-Core/
1998
Javascript : le tournant
Le tournant

 Spécifications du DOM Level 1

1/1998

 MS Internet Explorer 5.0

9/1998

Implémente XMLHttpRequest comme ActiveX

Prémices du web 2.0
Javascript
Ce qu’il ne fait plus
Une utilité de perdue..
Une utilité de perdue..

Validation de formulaires :
Nom* :
Prénom* :
Date de naissance * :
Email* :
Enregistrer

Une de perdue, dix de retrouvées
Javascript

Un langage
en quelques
mots…
En quelques mots..

 Langage de Script, Dynamique, Interprété
 Sensible à la casse

 Typage dynamique faible
 Orienté objet, par prototypes

 Mono thread
 Asynchrone, par évènements
Un langage & des mots

61 mots réservés:
abstract, boolean, break, byte, case, catch, char, class, co
nst, continue, debugger, default, delete, do, double, else,
enum, export, extends, false, final, finally, float, for, func
tion, goto, if, implements, import, in, instanceof, int, int
erface, long, native, new, null, package, private, protecte
d, public, return, short, static, super, switch, synchronize
d, this, throw, throws, transient, true, try, typeof, undefi
ned, var, void, volatile, while, with
Un langage & des mots

30 Mots réservés utilisés:
abstract, boolean, break, byte, case, catch, char, class, c
onst, continue, debugger, default, delete, do, double,
else, enum, export, extends, false, final, finally, float, f
or, function, goto, if, implements, import, in, instanc
eof, int, interface, long, native, new, null, package, priv
ate, protected, public, return, short, static, super, switc
h, synchronized, this, throw, throws, transient, true, tr
y, typeof, undefined, var, void, volatile, while, with
Types
6 types natifs:
• string
• number
• boolean
• function
• object
• undefined
4 types prédéfinies:
• Array
• Date
• RegExp
• Error

"une chaine"
1.5e-2, NaN, Infinity
true, false
function(){…}
{}, null
undefined
typeof [] -> "object"

[1,2]
new Date()
/^[a-z]+[0-9]{1,3}$/gi
throw("Invalid_Value")
Variables: Duck typing

function f(a){
var x="chaine";
x=1;
console.log(a)
}
f();

-> undefined

Typage dynamique faible
Variables: toutes des objets

"beyond strings".toUpperCase()
"BEYOND STRINGS"
new String("beyond strings")
.toUpperCase()
.valueOf()
(.1253454).toPrecision(2)
"0.13"
new Number(.1253454)
.toPrecision(2)
.valueOf()
Les classes natives et prédéfinies peuvent être étendue !!
Variables: toutes des booléens
!"Bonjour"
!!
!!
!!
!!
!!
!!
!!
!!
!!

"Beyond"
""
3
0
{}
null
[]
undefined
function(){}

false
true
false
true
false
true
false
true
false
true

truthy, falsy

Ecriture idiomatique:
function(myName,myAge){
var name = myName || "Nom par défaut";
var age = myAge || 0;
}
Variables: toutes des miettes
function f(){
var x = { name:"X" , value: 1 },
y = new Object({ name:"Y" , value:-2 });
return x;
}
var z = f();
.
.
.
z = null;

Ramasse Miettes

Garbage Collector

Quand elles ne sont plus référencées,
les données sont détruites
Variables: Les fonctions, des objets de première classe

var sqare=function g(a){return a*a;}
console.log(typeof sqare) -> "function"
console.log(sqare(2))
-> 4

function f(n){
var power=function(x){return Math.pow(x,n);}
return power;
}
var square=f(2),cube=f(3);
console.log(square(3));
console.log(cube(5));

// 9
// 125

Les fonctions sont des objets comme les autres
Les closures : au-delà de l’accessible
function Baz(initial) {
var compteur = initial || 0;
return {
plus:function() { return compteur++; },
moins:function() { return --compteur; }
};
}
var X=Baz(), Y=Baz(5);

console.log(
console.log(
console.log(
console.log(
console.log(

X.plus() );
X.plus() );
X.plus() );
X.moins() );
Y.plus() );

//
//
//
//
//

0
1
2
2
5

Les closures sont un des mécanismes les plus puissants de Javascript
Les closures
var a=5,b=2;
var c=f(a,b);

console.log(window.a , window.b);

// 5 2

Traitement nécessitant la création de variables globales

var c;
( function(){var a=5,b=2; c=f(a,b);} )();

Aucune variable globale n’est créée
Javascript: Un langage objet par prototypes
function obj (a , n){
this.valeur = a||1;
this.pow = function(){return Math.pow(this.valeur , n||1);};
obj.prototype.compteur++;
}
obj.prototype.inc = function(){return ++this.valeur;}
obj.prototype.dec = function(){return this.valeur--;}
obj.prototype.set = function(a){this.valeur=a; return this;}
obj.prototype.compteur = 0;
var X=new obj(4,3), Y=new obj();

X

valeur=4
pow()

valeur=0
pow()
constructor
prototype
inc()

dec()

set()

compteur

Y
Javascript

Inside The Machine
Les Javascript Machines
Javascript engine + Layout engine
Mozilla Firefox
SpiderMonkey, TraceMonkey, JägerMonkey, OdinMonkey (+Gecko)
Microsoft Internet Explorer 9

Chakra (+ Trident)
Google Chrome

V8 (+ Webkit/Blink)
Apple Safari

JavascriptCore (+ Webkit)
Konqueror

KJS (+KHTML)

Javascript Engine : Environnement Mono-Thread
La programmation par événements
La programmation en Environnement Mono-Thread

Fonction bloquante :
for(var i=0;i<1000;i++) console.log(i);
La programmation par événements
La programmation en Environnement Mono-Thread

Chainage de fonctions :
function f(a, b, callback) {
|
callback();
}
f(1,2, function(){...});
La programmation par événements
La programmation en Environnement Mono-Thread

Programmation évènementielle:
table.findAll( {where:{login:"user"}} )
.success( function(data){...} )
.error( function(error){...} );
Plateforme

de développement
Plateforme de développement
 Vanilla Javascript
 Frameworks & Librairies
 Génériques: jQuery, Prototype, Dojo Toolkit
 Outils: Underscore.js, D3.js/ Raphaëljs
 AMD: Require.js, Browserify
 TDD: jUnit
 MVC :
Backbone, Ember, AngularJs, SproutCore, Spine, Knock
out, Batman, Sammy, Cappuccino, Mojito
Javascript en mode MVC
Backbone, Ember, Angular, SproutCore, Spine, Knockout,
Batman, Sammy, Cappuccino, Yahoo! Mojito,…
Backbone
Obfuscation du code

Google Closure Compiler (http://closure-compiler.appspot.com)
 Renomme les variables, comprime le code.
 Obfusque & optimise le code.
 L’optimisation fait certaines hypothèses sur le code pour

supprimer le code mort.
Code originel

function DBConstructor( db , user, pass , host ) {
if (!user) this.con = new (require('sequelize-mysql').sequelize)(db, {language:'en',logging:console.log, define:{freezeTableName: true}});
else this.con = new (require('sequelize-mysql').sequelize)(db,user,pass, {host:host, language:'en',logging: console.log, define:{freezeTableName:
true}});
}
DBConstructor.prototype.schemas = function( db , schemas , complete , force) {
var sequelize = require('sequelize-mysql').sequelize;
if (typeof schemas == "string") schemas = [schemas];
db = db || "user", remain = schemas.length, err=false; tables={};
if (!remain) complete(err , tables);
for(var index=0; index<schemas.length; index++) {
tables[ schemas[index] ] = require("./schema").table(db , schemas[index] , this.con);
tables[ schemas[index] ].sync({force:!!force})
.success( function(){ remain--; if (!remain) complete(err , tables); } )
.error( function(){ remain--; err=true; if (!remain) complete(err , tables); } );
}}
DBConstructor.prototype.loadData = function( db , schema , Options , key , onComplete) {
var table=require("./schema").table( db , schema , this.con);
if (!onComplete) {onComplete = key;key=null;}
if (!table) {onComplete(null);return;}
Options = Options || {};
Options.limit = Options.limit || 20;
table.findAll(Options)
.success(function(result){ var fields=require("./schema").fields(db,schema), data = require("./ormize")(result).get(fields); onComplete(data); } )
.error( function(){onComplete(null);} );
}
module.exports = function( db , user, pass , host ) {return new DBConstructor( db , user, pass , host );}
Code obfusqué
function DBConstructor(c,b,a,e){this.con=b?new (require("sequelize-mysql")
.sequelize)(c,b,a,{host:e,language:"en",logging:console.log,define:{freezeTableNam
e:!0}}):new (require("sequelize-mysql").sequelize)(c,{language:"en",logging:
console.log,define:{freezeTableName:!0}})} DBConstructor.prototype.schemas=
function(c,b,a,e){require("sequelize-mysql");"string"==typeof b&&(b=[b]);
c=c||"user";remain=b.length;err=!1;tables={};remain||a(err,tables);for(var
d=0;d<b.length;d++)tables[b[d]]=require("./schema").table(c,b[d],this.con),tables[
b[d]].sync({force:!!e}).success(function(){remain--;remain||a(err,tables)})
.error(function(){remain--;err=!0;remain||a(err,tables)})}; DBConstructor
.prototype.loadData=function(c,b,a,e,d){var f=require("./schema").table(c,b,this
.con);d||(d=e,e=null);f?(a=a||{},a.limit=a.limit||20,f.findAll(a).success(function(a)
{var e=require("./schema").fields(c,b);a=require("./ormize")(a).get(e);d(a)})
.error(function(){d(null)})):d(null)};module.exports=function(c,b,a,e){return
new DBConstructor(c,b,a,e)};
Node.js

Javascript
comme
serveur
web
Node.js : Javascript comme Serveur Web

Node.js
 Projet open Source, sponsorisé par Joyent
 Développé en 2009
 Utilise le moteur Javascript open source Google V8
 Utilise les spécifications CommonJS
 Permet de créer des serveurs web en Javascript

 Multiplateforme: Windows, Linux, OS X,…
 Version courante 0.10.24
Qui utilise Node.js ?

https://github.com/joyent/node/wiki/Projects,-Applications,-and-Companies-Using-Node

 LinkedIn (site mobile à la place de Ruby)
 Dow Jones
 eBay
 Microsoft (Windows Azure)
 HP (WebOS services)
 Paypal

 Flikr
 Rdio
 Telefonica
 Avira Gmbh (de)
 Jolicloud (fr)
 Sellsy (fr)
Exemple de Webstack full Javascript

Bootstrap
jQuery

Socket.IO
Express.js
Node.js

Backbone / Angular

Jade

RequireJs

Stylus

Nib

Mongoose / Sequelize
MongoDB / MySQL
Au dessus de

Javascript
Au dessus de Javascript
 CoffeeScript
 Compilateur écrit en Ruby et produit du Javascript (2009)
 Simplifie, allège et rajoute du sucre syntaxique à Javascript

 Google Web Toolkit
 Outil utilisé en interne par Google
 Contient un compilateur Java-to-Javascript

 Rhino
 Projet Javagator de Netscape
 Machine Javascript écrite en Java
 Hérité par Mozilla en 1998

 Dart
 Langage créé par Google (10/2011)
 SDK sortie en 11/2013
 Dart-to-JavaScript Compiler

 Meteor
 RAD full stack Javascript framework (serveur Node.js)

 Emscripten
 C/C++ (LLVM) to Javascript compiler
L’avenir proche :

asm.js

Le browser
comme
Plateforme
de jeux
Mozilla Firefox 22 & le projet asm.js

Asm.js
Sous ensemble optimisable de Javascript

Unreal
Engine
-Epic-

Moteur de jeux
Javascript
pour browser

Des centaines de jeux
en C/C++
portés au browser
Aller

Javascript

+
Plus
+

Loin
Aller plus loin, avec Javascript

 Code Academy

 Khan Academy
Javascript

The
Best
Is
Yet
To
Come

Présentation Javascript à l'ESI (Alger)

  • 1.
    Javascript Au-delà Du Langage ParDr Samir ROUABHI rouabhi@gmail.com
  • 2.
  • 3.
  • 4.
    Un peu d’Histoire.. NCSAMosaïc Sun Microsystems Netscape Mocha LiveScript Java Mozilla Foundation Javascript Oracle Créé par Brendan Eich en 1995, sortie en 1996 sur NN 2.0 & IE 3.0 ECMA Script JScript ActionScript
  • 5.
    Standards  ECMA-262 6/1997 Dernière versionECMAScript 5.1, Javascript 1.9 Prochaine version ECMAScript 6, Javascript 2 D’autres implémentations: JScript, ActionScript, PDF, Node.js,…  ECMA-327 ES-CP 6/2001  ECMA-357 E4X 6/2004
  • 6.
    Spécifications  ECMA-262 :http://www.ecma       international.org/publications/files/ECMAST/Ecma-262.pdf ECMA-327 : http://www.ecmainternational.org/publications/files/ECMAST/Ecma-327.pdf ECMA-357 : http://www.ecmainternational.org/publications/files/ECMAST/Ecma-357.pdf XMLHttpRequest : http://www.w3.org/TR/XMLHttpRequest/ HTML 5 : http://dev.w3.org/html5/spec/Overview.html CSS 3 : http://www.w3.org/Style/CSS/ HTTP : http://www.w3.org/Protocols/ DOM : http://www.w3.org/TR/DOM-level-3-Core/
  • 7.
  • 8.
    Le tournant  Spécificationsdu DOM Level 1 1/1998  MS Internet Explorer 5.0 9/1998 Implémente XMLHttpRequest comme ActiveX Prémices du web 2.0
  • 9.
  • 10.
  • 11.
    Une utilité deperdue.. Validation de formulaires : Nom* : Prénom* : Date de naissance * : Email* : Enregistrer Une de perdue, dix de retrouvées
  • 12.
  • 13.
    En quelques mots.. Langage de Script, Dynamique, Interprété  Sensible à la casse  Typage dynamique faible  Orienté objet, par prototypes  Mono thread  Asynchrone, par évènements
  • 14.
    Un langage &des mots 61 mots réservés: abstract, boolean, break, byte, case, catch, char, class, co nst, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, func tion, goto, if, implements, import, in, instanceof, int, int erface, long, native, new, null, package, private, protecte d, public, return, short, static, super, switch, synchronize d, this, throw, throws, transient, true, try, typeof, undefi ned, var, void, volatile, while, with
  • 15.
    Un langage &des mots 30 Mots réservés utilisés: abstract, boolean, break, byte, case, catch, char, class, c onst, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, f or, function, goto, if, implements, import, in, instanc eof, int, interface, long, native, new, null, package, priv ate, protected, public, return, short, static, super, switc h, synchronized, this, throw, throws, transient, true, tr y, typeof, undefined, var, void, volatile, while, with
  • 16.
    Types 6 types natifs: •string • number • boolean • function • object • undefined 4 types prédéfinies: • Array • Date • RegExp • Error "une chaine" 1.5e-2, NaN, Infinity true, false function(){…} {}, null undefined typeof [] -> "object" [1,2] new Date() /^[a-z]+[0-9]{1,3}$/gi throw("Invalid_Value")
  • 17.
    Variables: Duck typing functionf(a){ var x="chaine"; x=1; console.log(a) } f(); -> undefined Typage dynamique faible
  • 18.
    Variables: toutes desobjets "beyond strings".toUpperCase() "BEYOND STRINGS" new String("beyond strings") .toUpperCase() .valueOf() (.1253454).toPrecision(2) "0.13" new Number(.1253454) .toPrecision(2) .valueOf() Les classes natives et prédéfinies peuvent être étendue !!
  • 19.
    Variables: toutes desbooléens !"Bonjour" !! !! !! !! !! !! !! !! !! "Beyond" "" 3 0 {} null [] undefined function(){} false true false true false true false true false true truthy, falsy Ecriture idiomatique: function(myName,myAge){ var name = myName || "Nom par défaut"; var age = myAge || 0; }
  • 20.
    Variables: toutes desmiettes function f(){ var x = { name:"X" , value: 1 }, y = new Object({ name:"Y" , value:-2 }); return x; } var z = f(); . . . z = null; Ramasse Miettes Garbage Collector Quand elles ne sont plus référencées, les données sont détruites
  • 21.
    Variables: Les fonctions,des objets de première classe var sqare=function g(a){return a*a;} console.log(typeof sqare) -> "function" console.log(sqare(2)) -> 4 function f(n){ var power=function(x){return Math.pow(x,n);} return power; } var square=f(2),cube=f(3); console.log(square(3)); console.log(cube(5)); // 9 // 125 Les fonctions sont des objets comme les autres
  • 22.
    Les closures :au-delà de l’accessible function Baz(initial) { var compteur = initial || 0; return { plus:function() { return compteur++; }, moins:function() { return --compteur; } }; } var X=Baz(), Y=Baz(5); console.log( console.log( console.log( console.log( console.log( X.plus() ); X.plus() ); X.plus() ); X.moins() ); Y.plus() ); // // // // // 0 1 2 2 5 Les closures sont un des mécanismes les plus puissants de Javascript
  • 23.
    Les closures var a=5,b=2; varc=f(a,b); console.log(window.a , window.b); // 5 2 Traitement nécessitant la création de variables globales var c; ( function(){var a=5,b=2; c=f(a,b);} )(); Aucune variable globale n’est créée
  • 24.
    Javascript: Un langageobjet par prototypes function obj (a , n){ this.valeur = a||1; this.pow = function(){return Math.pow(this.valeur , n||1);}; obj.prototype.compteur++; } obj.prototype.inc = function(){return ++this.valeur;} obj.prototype.dec = function(){return this.valeur--;} obj.prototype.set = function(a){this.valeur=a; return this;} obj.prototype.compteur = 0; var X=new obj(4,3), Y=new obj(); X valeur=4 pow() valeur=0 pow() constructor prototype inc() dec() set() compteur Y
  • 25.
  • 26.
    Les Javascript Machines Javascriptengine + Layout engine Mozilla Firefox SpiderMonkey, TraceMonkey, JägerMonkey, OdinMonkey (+Gecko) Microsoft Internet Explorer 9 Chakra (+ Trident) Google Chrome V8 (+ Webkit/Blink) Apple Safari JavascriptCore (+ Webkit) Konqueror KJS (+KHTML) Javascript Engine : Environnement Mono-Thread
  • 27.
    La programmation parévénements La programmation en Environnement Mono-Thread Fonction bloquante : for(var i=0;i<1000;i++) console.log(i);
  • 28.
    La programmation parévénements La programmation en Environnement Mono-Thread Chainage de fonctions : function f(a, b, callback) { | callback(); } f(1,2, function(){...});
  • 29.
    La programmation parévénements La programmation en Environnement Mono-Thread Programmation évènementielle: table.findAll( {where:{login:"user"}} ) .success( function(data){...} ) .error( function(error){...} );
  • 30.
  • 31.
    Plateforme de développement Vanilla Javascript  Frameworks & Librairies  Génériques: jQuery, Prototype, Dojo Toolkit  Outils: Underscore.js, D3.js/ Raphaëljs  AMD: Require.js, Browserify  TDD: jUnit  MVC : Backbone, Ember, AngularJs, SproutCore, Spine, Knock out, Batman, Sammy, Cappuccino, Mojito
  • 32.
    Javascript en modeMVC Backbone, Ember, Angular, SproutCore, Spine, Knockout, Batman, Sammy, Cappuccino, Yahoo! Mojito,…
  • 33.
  • 34.
    Obfuscation du code GoogleClosure Compiler (http://closure-compiler.appspot.com)  Renomme les variables, comprime le code.  Obfusque & optimise le code.  L’optimisation fait certaines hypothèses sur le code pour supprimer le code mort.
  • 35.
    Code originel function DBConstructor(db , user, pass , host ) { if (!user) this.con = new (require('sequelize-mysql').sequelize)(db, {language:'en',logging:console.log, define:{freezeTableName: true}}); else this.con = new (require('sequelize-mysql').sequelize)(db,user,pass, {host:host, language:'en',logging: console.log, define:{freezeTableName: true}}); } DBConstructor.prototype.schemas = function( db , schemas , complete , force) { var sequelize = require('sequelize-mysql').sequelize; if (typeof schemas == "string") schemas = [schemas]; db = db || "user", remain = schemas.length, err=false; tables={}; if (!remain) complete(err , tables); for(var index=0; index<schemas.length; index++) { tables[ schemas[index] ] = require("./schema").table(db , schemas[index] , this.con); tables[ schemas[index] ].sync({force:!!force}) .success( function(){ remain--; if (!remain) complete(err , tables); } ) .error( function(){ remain--; err=true; if (!remain) complete(err , tables); } ); }} DBConstructor.prototype.loadData = function( db , schema , Options , key , onComplete) { var table=require("./schema").table( db , schema , this.con); if (!onComplete) {onComplete = key;key=null;} if (!table) {onComplete(null);return;} Options = Options || {}; Options.limit = Options.limit || 20; table.findAll(Options) .success(function(result){ var fields=require("./schema").fields(db,schema), data = require("./ormize")(result).get(fields); onComplete(data); } ) .error( function(){onComplete(null);} ); } module.exports = function( db , user, pass , host ) {return new DBConstructor( db , user, pass , host );}
  • 36.
    Code obfusqué function DBConstructor(c,b,a,e){this.con=b?new(require("sequelize-mysql") .sequelize)(c,b,a,{host:e,language:"en",logging:console.log,define:{freezeTableNam e:!0}}):new (require("sequelize-mysql").sequelize)(c,{language:"en",logging: console.log,define:{freezeTableName:!0}})} DBConstructor.prototype.schemas= function(c,b,a,e){require("sequelize-mysql");"string"==typeof b&&(b=[b]); c=c||"user";remain=b.length;err=!1;tables={};remain||a(err,tables);for(var d=0;d<b.length;d++)tables[b[d]]=require("./schema").table(c,b[d],this.con),tables[ b[d]].sync({force:!!e}).success(function(){remain--;remain||a(err,tables)}) .error(function(){remain--;err=!0;remain||a(err,tables)})}; DBConstructor .prototype.loadData=function(c,b,a,e,d){var f=require("./schema").table(c,b,this .con);d||(d=e,e=null);f?(a=a||{},a.limit=a.limit||20,f.findAll(a).success(function(a) {var e=require("./schema").fields(c,b);a=require("./ormize")(a).get(e);d(a)}) .error(function(){d(null)})):d(null)};module.exports=function(c,b,a,e){return new DBConstructor(c,b,a,e)};
  • 37.
  • 38.
    Node.js : Javascriptcomme Serveur Web Node.js  Projet open Source, sponsorisé par Joyent  Développé en 2009  Utilise le moteur Javascript open source Google V8  Utilise les spécifications CommonJS  Permet de créer des serveurs web en Javascript  Multiplateforme: Windows, Linux, OS X,…  Version courante 0.10.24
  • 39.
    Qui utilise Node.js? https://github.com/joyent/node/wiki/Projects,-Applications,-and-Companies-Using-Node  LinkedIn (site mobile à la place de Ruby)  Dow Jones  eBay  Microsoft (Windows Azure)  HP (WebOS services)  Paypal  Flikr  Rdio  Telefonica  Avira Gmbh (de)  Jolicloud (fr)  Sellsy (fr)
  • 40.
    Exemple de Webstackfull Javascript Bootstrap jQuery Socket.IO Express.js Node.js Backbone / Angular Jade RequireJs Stylus Nib Mongoose / Sequelize MongoDB / MySQL
  • 41.
  • 42.
    Au dessus deJavascript  CoffeeScript  Compilateur écrit en Ruby et produit du Javascript (2009)  Simplifie, allège et rajoute du sucre syntaxique à Javascript  Google Web Toolkit  Outil utilisé en interne par Google  Contient un compilateur Java-to-Javascript  Rhino  Projet Javagator de Netscape  Machine Javascript écrite en Java  Hérité par Mozilla en 1998  Dart  Langage créé par Google (10/2011)  SDK sortie en 11/2013  Dart-to-JavaScript Compiler  Meteor  RAD full stack Javascript framework (serveur Node.js)  Emscripten  C/C++ (LLVM) to Javascript compiler
  • 43.
    L’avenir proche : asm.js Lebrowser comme Plateforme de jeux
  • 44.
    Mozilla Firefox 22& le projet asm.js Asm.js Sous ensemble optimisable de Javascript Unreal Engine -Epic- Moteur de jeux Javascript pour browser Des centaines de jeux en C/C++ portés au browser
  • 45.
  • 46.
    Aller plus loin,avec Javascript  Code Academy  Khan Academy
  • 47.