Etat de l'art Server-Side JavaScript - JS Geneve

39
ETAT DE L’ART: SERVER-SIDE JAVASCRIPT 2012-01-16 mercredi 18 janvier 2012

Transcript of Etat de l'art Server-Side JavaScript - JS Geneve

Page 1: Etat de l'art Server-Side JavaScript - JS Geneve

ETAT DE L’ART:SERVER-SIDE JAVASCRIPT

2012-01-16

mercredi 18 janvier 2012

Page 2: Etat de l'art Server-Side JavaScript - JS Geneve

PRESENTATION

Web Architect / Community Manager

Alexandre Morgaut

@amorgaut

Initiateur de @NantesJS

mercredi 18 janvier 2012

Page 3: Etat de l'art Server-Side JavaScript - JS Geneve

HISTOIRE

mercredi 18 janvier 2012

Page 4: Etat de l'art Server-Side JavaScript - JS Geneve

NAISSANCE

• 1995 Mocha > LiveScript > JavaScript

• 1996 Microsoft JScript (IE4)NetScape Enterprise Server 2aka LiveWire/iPlanet

• 1997 ECMAScript 1“DHTML”Windows IIS 3

Brendan EichJavaScript creator

mercredi 18 janvier 2012

Page 5: Etat de l'art Server-Side JavaScript - JS Geneve

MATURITÉ

• 1998 - HTML/XML DOM, Sun/Mozilla Rhino

• 1999 - ECMAScript 3, XMLHttpRequest, HTML 4

• 2000 - ActionScript, Helma Hop

• 2001 - JSON, Apple JavaScript OSA

• 2002 - JSLint, Mozilla “Phoenix” > Firefox

• 2003 - JavaScript Adobe Press, JScript .NET

• 2004 - E4X , “Web 2.0”, JSDB

• 2005 - Prototype.js, “Ajax”

• 2006 - Firebug, jQuery, “Comet”, APE, “HTML5”

• 2007 - SitePoint Persevere, Rhino on Rails

mercredi 18 janvier 2012

Page 6: Etat de l'art Server-Side JavaScript - JS Geneve

SSJS: LE RETOUR

• 2008Aptana Jaxer CouchDBAcid Test 3

• 2009Narwhal & JackServerJS > CommonJS Node.jsv8cgi, GPSEEECMAScript 5

• 2010Helma NG > RingoJSSun Phobos

• 2011WakandaCoffeeScriptECMAScript 5.1

mercredi 18 janvier 2012

Page 7: Etat de l'art Server-Side JavaScript - JS Geneve

http://en.wikipedia.org/wiki/Comparison_of_server-side_JavaScript_solutions

+ DE 60 SOLUTIONS EXISTANTES

mercredi 18 janvier 2012

Page 8: Etat de l'art Server-Side JavaScript - JS Geneve

ÉCOSYSTÈME

mercredi 18 janvier 2012

Page 9: Etat de l'art Server-Side JavaScript - JS Geneve

•Nombreux Groupes d’utilisateurs

•Nombreuses Conférences

•Nombreux Blogs et livres

• Large documentation

• Langage aussi utilisé par les développeurs venant d’autres technologies

COMMUNAUTÉ

mercredi 18 janvier 2012

Page 10: Etat de l'art Server-Side JavaScript - JS Geneve

LIBRAIRIES & FRAMEWORKS

• JavaScript est le language le plus populaire sur GitHub

•Nombreuses librairies

•Nombreux framework

https://github.com/languages/JavaScripthttp://javascriptlibraries.com/

mercredi 18 janvier 2012

Page 11: Etat de l'art Server-Side JavaScript - JS Geneve

• Visual Studio

• XCode

• Eclipse

•NetBeans

•Wakanda Studio

• Cloud9

ENVIRONNEMENT DE DEVELOPEMENT

mercredi 18 janvier 2012

Page 12: Etat de l'art Server-Side JavaScript - JS Geneve

Client-side

• Firebug *

•Web Inspector *

•Dragonfly

Server-Side

•Wakanda Debugger *

• Cloud9 Debugger *

DÉBOGUEURS

* via standard protocols, some debugger can debug JS code running anywhere (server, desktop, mobile, ...)

mercredi 18 janvier 2012

Page 13: Etat de l'art Server-Side JavaScript - JS Geneve

• JSLint / JSHint / JavaScriptLint

• JSON / JSON-Schema / JSON-RPC

• JSDoc

• HTTP Fox / JSON View

• JSMin / Packer / Closure / YUI Compressor / Dojo Shrinksafe

• YUI Test / QUnit / Jasmine

•NPM

AUTRES OUTILS ET STANDARDS

mercredi 18 janvier 2012

Page 14: Etat de l'art Server-Side JavaScript - JS Geneve

ENGINES

mercredi 18 janvier 2012

Page 15: Etat de l'art Server-Side JavaScript - JS Geneve

ECMASCRIPT 5 & NEXT

• ES5.1

•Mode strict

•Object freeze

• Read only properties

• Getter / setter

• ES.Next

• Typed Array

•Modules

•Destructuring

• String templates

mercredi 18 janvier 2012

Page 16: Etat de l'art Server-Side JavaScript - JS Geneve

SpiderMonkey3 JIT Compilers: TraceMonkey, JägerMonkey, IonMonkey

V8JIT Compiler : CrankShaft

webkit JavaScriptCore: JSCSquirrelFish Extreme: SFX aka Nitro

(JIT Compiler inside)

Trident: MSHTMLChakra

-> Classic JScript, Managed JScript, & JScript.NET

TamarinJIT Compiler : NanoJIT

-> ActionScript / “ECMAScript 4”

CarakanPreviously: Linear A, Linear B, Futhark

RhinoInterpreted or Compiled execution

CC++

C++Java

C++

C++C++

Nashorn?

mercredi 18 janvier 2012

Page 17: Etat de l'art Server-Side JavaScript - JS Geneve

CLIENT-SIDE

SpiderMonkey

V8

JavaScriptCore

Trident / ChakraTamarin Carakan / Futhark

Rhino

mercredi 18 janvier 2012

Page 18: Etat de l'art Server-Side JavaScript - JS Geneve

SpiderMonkey

V8

JavaScriptCore

Rhino

Trident / Chakra

SERVER-SIDE

mercredi 18 janvier 2012

Page 19: Etat de l'art Server-Side JavaScript - JS Geneve

JAVASCRIPT EVERYWHERE

mercredi 18 janvier 2012

Page 20: Etat de l'art Server-Side JavaScript - JS Geneve

BENCHMARKS

and what they worth....

mercredi 18 janvier 2012

Page 21: Etat de l'art Server-Side JavaScript - JS Geneve

BROWSERS WAR II(MAY 2009)

http://www.maximumpc.com/article/features/browser_brouhaha_your_maximum_guide_browsers_today_and_tomorrow?page=0,6

mercredi 18 janvier 2012

Page 22: Etat de l'art Server-Side JavaScript - JS Geneve

PERSEVERE & JAVASCRIPTDB(APRIL 2009)

http://www.sitepen.com/blog/2009/04/20/javascriptdb-perseveres-new-high-performance-storage-engine/

mercredi 18 janvier 2012

Page 23: Etat de l'art Server-Side JavaScript - JS Geneve

NODE VS THIN VS NARWHAL(SEPTEMBER 2009)

http://four.livejournal.com/1019177.html

300 concurrent clients

completed requests:thin 36045node 35668narwhal 2921

> summary(node300$ttime) Min. 1st Qu. Median Mean 3rd Qu. Max. 12.0 66.0 112.0 239.4 157.0 12200.0

> summary(thin300$ttime) Min. 1st Qu. Median Mean 3rd Qu. Max. 71.0 84.0 87.0 208.7 107.0 23950.0

> summary(narwhal300$ttime) Min. 1st Qu. Median Mean 3rd Qu. Max. 928 2837 2935 2921 3018 8759

mercredi 18 janvier 2012

Page 24: Etat de l'art Server-Side JavaScript - JS Geneve

RINGOJS VS NODEJS(SEPTEMBER 2010)

http://hns.github.com/2010/09/21/benchmark.html

mercredi 18 janvier 2012

Page 25: Etat de l'art Server-Side JavaScript - JS Geneve

SPIDERMONKEY

http://www.page.ca/~wes/SpiderMonkey/Perf/sunspider_history.png

1.5 is ~ Firefox 2.0 (and ES-3) 1.7 is ~ Firefox 3.01.8 is ~ Firefox 3.6 1.8.5 + JITs is ~ Firefox 4

mercredi 18 janvier 2012

Page 26: Etat de l'art Server-Side JavaScript - JS Geneve

SUNSPIDER 0.9.1(AUGUST 2011)

http://expansive-derivation.ossreleasefeed.com/2011/08/javascript-performance-test-results-with-sunspider/

7

8

6

5

4

3

2

1

mercredi 18 janvier 2012

Page 27: Etat de l'art Server-Side JavaScript - JS Geneve

MAIN CONCEPTS

mercredi 18 janvier 2012

Page 28: Etat de l'art Server-Side JavaScript - JS Geneve

COMMON JAVASCRIPT

• Working Groups: - CommonJS- WHATWG- W3C- ECMA TC39

• L’ubiquité au delà d’ECMAScript

• la spécification HTML5 se faisait aussi appeler : “Web Applications 1.0”http://www.whatwg.org/specs/web-apps/current-work/

• Asynchronous & Synchronous APIs

mercredi 18 janvier 2012

Page 29: Etat de l'art Server-Side JavaScript - JS Geneve

INTEGRATION-ORIENTED• Java environment

- using Rhino like with

- Helma, Persevere, Narwhal, RingoJS, Sun Phobos...

• .Net environment- using JScript.NET like with

- IronJS, Node.NET

• Other environments

- C (GPSEE), PHP (J2PA), Ruby (Johnson), Perl (JE), …

mercredi 18 janvier 2012

Page 30: Etat de l'art Server-Side JavaScript - JS Geneve

ASYNC. EVENT-BASED

• Browser Event-Loop on the Server

• An Event Loop in one single thread

• Cooperative («one at a time») with async. callbacks

•Node.js (V8), SpiderNode, RhiNodeII, Node.NET

Node.js like

mercredi 18 janvier 2012

Page 31: Etat de l'art Server-Side JavaScript - JS Geneve

SINGLE & MULTI THREADINGOne context per thread

SINGLE

• Low memory usage

• Potentially handle lot of requests

• Cooperative

• Shared context

• Use mostly one core*

MULTI

• Vertical scalability (multi-core)

• Thread-safety for concurrent access

• Preemptive: Parallel code execution

• Allow Synchronous APIs

• Uses easily all available cores

Notes: - an event loop can generate some other threads which could use other cores- multi-thread architectures can run event loops in some of their threads

mercredi 18 janvier 2012

Page 32: Etat de l'art Server-Side JavaScript - JS Geneve

DATABASE-DRIVEN

• Document Store- CouchDB, MongoDB

• Key/value Store- Riak

• Object Store- Wakanda

• Push Store- APE

mercredi 18 janvier 2012

Page 33: Etat de l'art Server-Side JavaScript - JS Geneve

APIS - PACKAGES

mercredi 18 janvier 2012

Page 34: Etat de l'art Server-Side JavaScript - JS Geneve

COMMONJS

• System

• Unit-Testing

• Binary

• File

• JSGI

• Stream

http://wiki.commonjs.org/wiki/CommonJS

•Modules • Packages • Promises

mercredi 18 janvier 2012

Page 35: Etat de l'art Server-Side JavaScript - JS Geneve

NODE ASYNC APIS

• Buffer

• Events

• File

• Net

• OS

• Process

• Streams

• Timers

• . . .

http://nodejs.org/docs/v0.5.5/api/

mercredi 18 janvier 2012

Page 36: Etat de l'art Server-Side JavaScript - JS Geneve

W3C / HTML5 / ES.NEXT& OTHER STANDARDS

• Console

• Blob, Blob URL*

• DataView*

• File / FileSystem

• Modules*

• Progress Events

• Structured clones

• Typed Arrays*

• Web Sockets

• Web Storage, Indexed DB

• Web Workers

• XHR 2

mercredi 18 janvier 2012

Page 37: Etat de l'art Server-Side JavaScript - JS Geneve

PACKAGES & MODULES

• github: CommonJS modules in projects (Persevere, Narwhal, RingoJS, ...)

•NPM: Node Package Manager (thousands packages)

•CPM: CommonJS Package Manager (new)

• PINF: Universal module loader

mercredi 18 janvier 2012

Page 38: Etat de l'art Server-Side JavaScript - JS Geneve

CREDITS

Thanks for their contributions to

Wesley Garland

Ondrej Zara

mercredi 18 janvier 2012

Page 39: Etat de l'art Server-Side JavaScript - JS Geneve

Full-JS - 5 Trophées1. Interopérabilité: Interconnexion de systèmes

hétérogènes,interopérabilité entre applications. Mise en œuvre, utilisation de connecteurs et/ou de standards ouverts (Open Data, CommonJS, W3C…).

2. Innovation:  toute application présentant une innovation dans son usage, dans sa mise en œuvre, par son originalité…  Les thèmes de l’accessibilité et du développement durable sont les bienvenus.

3. JS Embarqué: Toute application embarquée hors navigateur et qui soit à usage industriel, scientifique, médical… (internet des objets, NFC…).

4. Application Desktop: Applications desktop end to end JavaScript (Chrome OS, Windows 8 Metro, Mozilla WebRT…)

5. Environnement de développement: Outils de développement / Traçabilité / Robustesse / Scalabilité… full-js.org @fulljs

mercredi 18 janvier 2012