The Future of Javascriptby Samir ROUABHI (rouabhi@gmail.com)

Algiers Developer Meetup

October 3rd, 2015

Aux origines du web..était le browser

V8(Google) JScript

Shakra(Microsoft)ActionScript

Tamarin(Adobe)

NCSA Mosaïc

NetscapeNavigator

Mozilla Foundation

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

Sun Microsystems

Oracle

Java

JerryScript(Samsung)

Rhino(Mozilla)

Nashorn(Oracle)

EjScript(Samba 4, AppWeb)

ECMA Script

MochaLiveScript

Un peu d’ordre..Ça ne fait pas de mal

L’ère de la standardisationECMA International (http://www.ecma-international.org/)

ECMA-262 6/1997ECMAScript Edition 2015 (version 6), Javascript v2Précédente ECMAScript 5

Javascript 1.8.5 27/7/2010Mozilla FireFox 4 22/3/2011

ECMA-327 ES-CP 6/2001

ECMA-357 E4X 6/2004

Spécifications : ECMA-262 :

http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

ECMA-327 : http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-327.pdf

ECMA-357 : http://www.ecma-international.org/publications/files/ECMA-ST/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 : le tournant

Spécifications du DOM Level 1 1/1998

MS Internet Explorer 5.0 9/1998Implémente XMLHttpRequest comme

ActiveX

Prémisses du Web 2.0

Le langage Javascript..Quelques mots pour le dire

61 mots réservés

abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, undefined, var, void, volatile, while, with

30 mots réservés utilisés

abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, undefined, var, void, volatile, while, with

types natifs et prédéfinis6 types natifs:

string "une chaine" number 1.5e-2, NaN, Infinity boolean true, false function function(){…} object {}, null undefined undefined

4 types prédéfinies: Array [1,2] Date new Date() RegExp /^[a-z]+[0-9]{1,3}$/gi Error throw("Invalid_Value")

Javascript en quelques mots

Langage de Script, Dynamique, Interprété

Sensible à la casse

Typage dynamique faible (duck typing)

Orienté prototypes (objet par prototypes)

Mono thread Asynchrone, par évènements

Javascript : pour quelques mots de plus Toutes les valeurs traitées comme des objets:

(.1253454).toPrecision(2) = .13 Les types natifs et prédéfinis peuvent êtres étendus et les méthodes standards

réécrites :Number.prototype.sqr = function(){return this*this;}

console.log( (3).sqr() ); Toutes les valeurs ont leur équivalent booléen

!! [] = true !!function(){}=true !!null=false !!""=false Les objets créés sont effacés par le Garbage Collector quand plus utilisées. Les fonctions sont des objets de premières classe Les closures sont la façon la plus puissante de gérer mémoire/confidentialité.

new Number(.1253454)

.toPrecision(2)

.valueOf()

Ecriture idiomatiquevar name = value || "default";

Javascript et la guerre des moteurs

Browser = Javascript engine + layout engine Mozilla Firefox SpiderMonkey, TraceMonkey, JägerMonkey, OdinMonkey (+ Gecko)

Google Chrome V8 (+ Webkit/Blink)

MS Internet Explorer Chakra (+ Trident)

Apple Safari JavascriptCore (+ Webkit)

Konqueror KJS (+KHTML/Webkit)

Javascript Open Source

http://venturebeat.com/2015/08/19/here-are-the-top-10-programming-languages-used-on-github/

Javascriptpour croyants non

pratiquantsAltJS ou la prolifération des clones

AltJS pour les croyants non pratiquants CoffeeScript, RedScript : à la sauce Ruby TypeScript, Javascript++, Objective-J, Latte-JS, JSX, oj

sur-ensembles de Javascript Closure Compiler, Dart, Go, GWT, AtScript, Traceur

Google joue avec JS et le défie Bonsai-C C-to-JS compiler (asm.js) Emscripten LLVM to JS

En connaitre davantage : https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js http://smurfpandey.github.io/altjs/

Javascriptet les défauts d'une création imparfaite

Critiques Absence de modules

difficulté de maintenance du code Javascript d’un site, dont le volume augmente drastiquement et les risques d’erreur et d’incompatibilité grandissants.

Absence de certains mécanismescomme les variables au niveau block de code.

EvènementsLa gestion de callbacks avec traitement d’erreurs devient très vite infernale.

Syntaxe trop ouverteQui n’a pas passé des heures à debugger à cause d’un (;) qui à tout changé ou d’une variable qui a accidentellement couvert une variable globale

Comportements inattendusQuelques différences inattendues de traitement entre navigateurs.

ECMA ScriptUne histoire tumultueuse

ECMA Script : EvolutionÉdition Date Quelques particularités

1 6/1997 Edition initiale

2 6/1998 Réécriture norme ISO/IEC 16262

3 12/1999 Gestion des exceptions

4 x Classes. Version abandonnée

5 12/2009 Clarifie la version 3

6 (2015) 6/2015 Classes, Modules, Tableaux binaires,…

7 En cours

Node.jsJS de l’autre côté du

miroirUn saut de géant : du browser au serveur

Node.js : serveur web Javascript Projet open Source, initialement sponsorisé par Joyent Développé en 2009 par Ryan Lienhart Dahl et son

équipe. Utilise le moteur Javascript open source Google V8

Utilise les spécifications CommonJS Utilise des packages stockés dans NPM.

(http://npmjs.org 200k packages, 31M downloads/jour) Multiplateforme: Windows, Linux, OS X,… Versions :

Version 4.0 08/09/2015 Version 0.12.7 09/07/2014

Oubliez tout ce que vous savez pour bien programmer sous

Node.jsOubliez surtout PHP !!

!

Hello World

Hello Worldvar express = require('express');var app = express();

app.get("/", function(request, response) { response.status(200).send('Hello World!');});

app.get("/hi/:name", function (req, response) { response.status(200).send('Hello

'+request.params.name);});

var server = app.listen(3000, function () {console.log('Listening to port 3000...');});

http://127.0.0.1:3000/

http://127.0.0.1:3000/hi/Samir

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

Ils aiment Node.js 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) …

Pour quel avantage ?

Histoire de LinkedInhttp://www.infoq.com/fr/news/2013/05/Ruby-on-Rails-Node-js-LinkedIn

LinkedIn a évalué 3 solutions possibles : Rails/Event Machine, Python/Twisted et Node.js. Node.js a finalement été choisi car il propose les avantages suivants : Meilleures performances, Node.js est plus de 20 fois plus

rapide que Rails pour certains scénarios Utilisation de seulement 3 serveurs au lieu de 30, ce qui

laisse de la place pour une croissance de 10 fois le trafic actuel

Les ingénieurs front-end JavaScript peuvent participer au code du serveur et les deux équipes ont finalement été fusionnées en une seule

Kiran Prasad, Directeur de l’Ingénierie Mobile chez LinkedIn, 5/2013

asm.jsJS devient l’assembleur du

webMozilla se tourne vers le futur

Emscripten

Javascript

LLVM

Emscripten

C / C++

Mozilla Firefox v22 & asm.js

Moteur de jeux

Javascriptpour browser

EpicUnreal Engine

Des centaines de jeux en C/C++

portés au browser

Emscripten modifié

Moteur de jeux 3Décrit en C++

asm.js est un sous-ensemble très optimisé de Javascript

Déjà dans la boite : programmes déjà portés à asm.js

Langages : C/C++, Ruby, Perl, Python Libraires: OpenGL, Qt, PNaCl Game Engines : Unreal Engine 3/4, Unity,

ScummVM, BannanaBread Jeux : Doom, SuperTux, Dune II, Humble Bundle

Liste exhaustive ici : https://en.wikipedia.org/wiki/Asm.js

WebAssemblyplus loin (encore) dans la logique

Javascript in a binary cloth

WASM : Web Assembly Collaboration de: Apple, Google, Microsoft, Mozilla, WebKit,… Un nouveau format binaire Pas de bytecodes mais AST (Arbre Syntaxique Abstrait)

Implémentation facile sur navigateur Elimine le goulot de performance du Parser Accélère le chargement N’accélère pas l’exécution de Javascript (par rapport à asm.js) Ne remplace pas Javascript mais est réservé aux code bas niveau

Embeded JSJavascript OoO (Out-Of-Office)

Embeded Node.jshttps://tessel.io/

Tessel 2 is a development platform you can embed in a product. Build fast with Node.js/io.js, then optimize the hardware and build thousands.

PREORDER FOR $35

Embeded Javascripthttp://www.espruino.com/

54mm x 41 mm48 kB ram

$40

33mm x 15 mm96 kB ram

$25

The Best is Yet to ComeMerci pour votre attention