The Future of Javascript
by 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
Netscape
Navigator
Mozilla Foundation
Créé...
Un peu d’ordre..
Ça ne fait pas de mal
L’ère de la standardisation
ECMA International (http://www.ecma-international.org/)
 ECMA-262 6/1997
ECMAScript Edition 2...
Spécifications :
 ECMA-262 : http://www.ecma-international.org/publications/files/ECMA-
ST/Ecma-262.pdf
 ECMA-327 : http...
1998 : le tournant
 Spécifications du DOM Level 1 1/1998
 MS Internet Explorer 5.0 9/1998
Implémente XMLHttpRequest comm...
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,...
30 mots réservés utilisés
abstract, boolean, break, byte, case, catch, char, class,
const, continue, debugger, default, de...
types natifs et prédéfinis
6 types natifs:
 string "une chaine"
 number 1.5e-2, NaN, Infinity
 boolean true, false
 fu...
Javascript en quelques mots
 Langage de Script, Dynamique, Interprété
 Sensible à la casse
 Typage dynamique faible (du...
Javascript : pour quelques mots de plus
 Toutes les valeurs traitées comme des objets:
(.1253454).toPrecision(2) = .13
 ...
Javascript
et la guerre des moteurs
Browser = Javascript engine + layout engine
Mozilla Firefox SpiderMonkey, TraceMonkey, JägerMonkey, OdinMonkey (+ Gecko)
G...
Javascript  Open Source
http://venturebeat.com/2015/08/19/here-are-the-top-10-programming-languages-used-on-github/
Javascript
pour croyants non pratiquants
AltJS ou la prolifération des clones
AltJS pour les croyants non pratiquants
 CoffeeScript, RedScript : à la sauce Ruby
 TypeScript, Javascript++, Objective-...
Javascript
et 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
drastiqueme...
ECMA Script
Une histoire tumultueuse
ECMA Script : Evolution
Édition Date Quelques particularités
1 6/1997 Edition initiale
2 6/1998 Réécriture norme ISO/IEC 1...
Node.js
JS de l’autre côté du miroir
Un 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 Lie...
Oubliez tout ce que vous savez pour
bien programmer sous Node.js
Oubliez surtout PHP !!
!
Hello World
Hello World
var express = require('express');
var app = express();
app.get("/", function(request, response) {
response.sta...
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 ...
Pour quel avantage ?
Histoire de LinkedIn
http://www.infoq.com/fr/news/2013/05/Ruby-on-Rails-Node-js-LinkedIn
LinkedIn a évalué 3 solutions pos...
asm.js
JS devient l’assembleur du web
Mozilla se tourne vers le futur
Emscripten
Javascript
LLVM
C / C++
Mozilla Firefox v22 & asm.js
Moteur de
jeux
Javascript
pour browser
Epic
Unreal
Engine
Des centaines de jeux
en C/C++
port...
Déjà dans la boite :
programmes déjà portés à asm.js
 Langages : C/C++, Ruby, Perl, Python
 Libraires: OpenGL, Qt, PNaCl...
WebAssembly
plus 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 b...
Embeded JS
Javascript OoO (Out-Of-Office)
Embeded Node.js
https://tessel.io/
Tessel 2 is a development platform
you can embed in a product. Build
fast with Node.js/...
Embeded Javascript
http://www.espruino.com/
54mm x 41 mm
48 kB ram
$40
33mm x 15 mm
96 kB ram
$25
The Best is Yet to Come
Merci pour votre attention
Prochain SlideShare
Chargement dans…5
×

The future of JavaScript

617 vues

Publié le

The Future of JavaScript, presented by Samir Rouabhi at the 3rd edition of Algiers Developer Meetup, which was held at Djezzy Training Center on October 3rd, 2015

Publié dans : Internet
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
617
Sur SlideShare
0
Issues des intégrations
0
Intégrations
33
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

The future of JavaScript

  1. 1. The Future of Javascript by Samir ROUABHI (rouabhi@gmail.com) Algiers Developer Meetup October 3rd, 2015
  2. 2. Aux origines du web.. était le browser
  3. 3. V8 (Google) JScript Shakra (Microsoft) ActionScript Tamarin (Adobe) NCSA Mosaïc Netscape Navigator 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 Mocha LiveScript
  4. 4. Un peu d’ordre.. Ça ne fait pas de mal
  5. 5. L’ère de la standardisation ECMA International (http://www.ecma-international.org/)  ECMA-262 6/1997 ECMAScript Edition 2015 (version 6), Javascript v2 Précédente ECMAScript 5 Javascript 1.8.5 27/7/2010 Mozilla FireFox 4 22/3/2011  ECMA-327 ES-CP 6/2001  ECMA-357 E4X 6/2004
  6. 6. 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/
  7. 7. 1998 : le tournant  Spécifications du DOM Level 1 1/1998  MS Internet Explorer 5.0 9/1998 Implémente XMLHttpRequest comme ActiveX Prémisses du Web 2.0
  8. 8. Le langage Javascript.. Quelques mots pour le dire
  9. 9. 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
  10. 10. 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
  11. 11. types natifs et prédéfinis 6 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")
  12. 12. 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
  13. 13. 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 idiomatique var name = value || "default";
  14. 14. Javascript et la guerre des moteurs
  15. 15. 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)
  16. 16. Javascript  Open Source http://venturebeat.com/2015/08/19/here-are-the-top-10-programming-languages-used-on-github/
  17. 17. Javascript pour croyants non pratiquants AltJS ou la prolifération des clones
  18. 18. 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/
  19. 19. Javascript et les défauts d'une création imparfaite
  20. 20. 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écanismes comme les variables au niveau block de code.  Evènements La gestion de callbacks avec traitement d’erreurs devient très vite infernale.  Syntaxe trop ouverte Qui 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 inattendus Quelques différences inattendues de traitement entre navigateurs.
  21. 21. ECMA Script Une histoire tumultueuse
  22. 22. 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
  23. 23. Node.js JS de l’autre côté du miroir Un saut de géant : du browser au serveur
  24. 24. 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
  25. 25. Oubliez tout ce que vous savez pour bien programmer sous Node.js Oubliez surtout PHP !! !
  26. 26. Hello World
  27. 27. Hello World var 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
  28. 28. Qui utilise Node.js ? https://github.com/joyent/node/wiki/Projects,-Applications,-and-Companies-Using-Node
  29. 29. 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)  …
  30. 30. Pour quel avantage ?
  31. 31. Histoire de LinkedIn http://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
  32. 32. asm.js JS devient l’assembleur du web Mozilla se tourne vers le futur
  33. 33. Emscripten Javascript LLVM C / C++
  34. 34. Mozilla Firefox v22 & asm.js Moteur de jeux Javascript pour browser Epic Unreal Engine Des centaines de jeux en C/C++ portés au browser asm.js est un sous-ensemble très optimisé de Javascript
  35. 35. 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
  36. 36. WebAssembly plus loin (encore) dans la logique Javascript in a binary cloth
  37. 37. 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
  38. 38. Embeded JS Javascript OoO (Out-Of-Office)
  39. 39. Embeded Node.js https://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
  40. 40. Embeded Javascript http://www.espruino.com/ 54mm x 41 mm 48 kB ram $40 33mm x 15 mm 96 kB ram $25
  41. 41. The Best is Yet to Come Merci pour votre attention

×