End-to-end HTML5 APIs

Alexandre MorgautOsijek, CroatiaOctober 12th, 2013

PresentationW3C AC member

Web Architect

JS Expert

REST Lover

NoSQL Fanboy

W3C “jseverywhere“ community group

@amorgaut

AgendaThe Web & JavaScript

Web standards

Server-Side JavaScript

HTML5

Remote Debugging

Present & Future

The Web & JavaScript

The WebWWW: WorldWideWeb (Hypertext Project)

UDI: Uniform Document Identifier

➡ URL: Uniform Resource Locator

HTML: Hypertext Markup Language

HTTP: Hypertext Transfer Protocol

designed in 1989 by Tim Berners-Lee at the CERN

Info.cern.ch1st website on Christmas 1990

created on NeXT

RESTRepresentational State Transfer

1. Null

2. Client-Server

3. Stateless

4. Cache

5. Uniform Interface

6. Layered System

7. Code on Demand: JavaScript

defined in 2000 by Roy Thomas Fielding in its dissertation

“Architectural Styles and the Design of Network-based Software Architectures”

http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htmhttp://www.ics.uci.edu/~fielding/pubs/dissertation/evaluation.htm

Web Standards

W3C

Created at the MIT in 1994

➡ Led by Tim Berners-Lee and Dr. Jeffrey Jaffe

Joint agreement among three "Host Institutions"

➡ MIT - ERCIM - Keio University

Working Groups

➡ HTML, MathML, RDF, SVG, CSS, Audio, Device...

ECMAEuropean Computer Manufacturers Association

Standards: CD-ROM, ECMAScript, C#, Office Open XML File Formats

JavaScript

ECMA-262: ECMAScript (see also ISO/IEC 16262)

➡ TC39-TG1 managed by Mr. J. Neumann

➡ Test262

ECMA-357: E4X: ECMAScript for XML

ECMA-402: ECMAScript Internationalization API

ECMA-404: The JSON Data Interchange Format (was RFC 4627)

http://wiki.ecmascript.orghttp://www.ecma-international.org/publications/standards/Standard.htm

http://en.wikipedia.org/wiki/ECMAScript

CommonJScreated in 2009 by Kevin Dangoor as ServerJS on Mozilla Wiki

➡ standards for JavaScript on the server

➡ Narwhal, Helma NG, v8CGI, GPSEE, chiron, Persevere, flusspferd

Renamed CommonJS

➡ command line tools, desktop, addon, or browser implementations

➡ joined by CouchDB, Wakanda, Sproutcore, node.js, RequireJS...

Modules, Packages, and Promises

Binary, FileSystem, System, I/O stream, Socket I/O

Browser like APIs: worker, console, HTTP client

https://wiki.mozilla.org/ServerJS http://www.commonjs.org/

W3C on Server-Side ?

Really?

DOM

Java

JavaScript

.NET

PHP

python

..;

But also

XSL-FO

XSLT

XPath

XQuery

XML Schema

SOAP

WSDL

SVG

RDF

SPARQL

Server-Side JavaScript

Engines

Trident: MSHTML / Chakra-> Classic JScript, Managed JScript, & JScript.NET

TamarinJIT Compiler : NanoJIT

-> ActionScript / “ECMAScript 4”

CarakanLinear A, Linear B, Futhark

RhinoInterpreted or Compiled execution

webkit JavaScriptCore: JSCSquirrelFish Extreme: SFX aka Nitro

(JIT Compiler inside)

SpiderMonkey3 JIT Compilers: TraceMonkey, JägerMonkey, IonMonkey

V8JIT Compiler : CrankShaft

Standards

• ECMAScript

• CommonJS

More than 60 SSJS implementations

Servers

SpiderMonkey: GPSee, APE

Rhino: RingoJS, Persevere, AppJet, Glassfish

JavaScriptCore: wakanda

Trident / Chakra: IronJS, .NET

V8: node.js, SilkJS, TeaJS, Akshell

NoSQL Databases

SpiderMonkey: riak, CouchDB

Rhino: OrientDB

JavaScriptCore: WakandaDB

V8: ArangoDB, MongoDB, CouchBase

Web Application “1.0”

HTML5 APIsXMLHttpRequest 2

Blob

File / FileSystem

Web SQL

Web Storage

Web Workers

Web Sockets

Web Cryptography

ImageData

Typed Arrays

Storage Quota

System Information

URL

WebCL

WebCL

“This section proposes mechanisms for transferring pixel data between WebCL memory objects and HTML media elements. Server-side or Web Worker based implementations of WebCL will not be required to support these features.”

https://cvs.khronos.org/svn/repos/registry/trunk/public/webcl/spec/latest/index.html#4

Web SQL

“This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.”

http://www.w3.org/TR/webdatabase/

Async “and” Sync

XMLHttpRequest(method, url, async)

FileReaderSync()

requestFileSystemSync()

openDatabaseSync()

indexedDBSync.open()

localStorage.getItem()

IndexedDB

“The synchronous database API methods provide a blocking access pattern to IndexedDB databases. Since they block the calling thread they are only available from workers.”

http://www.w3.org/TR/IndexedDB/#sync-database

Web WorkersDedicated or Shared

No Window, No Document

WorkerGlobal, WorkerUtils, WorkerNavigator, WorkerLocation

postMessage(), onmessage(), onerror()

importScripts()

Concept

Server JS contexts

==

JS Workers

➡ multi-threaded Dedicated Workers

➡ Shared Worker EventLoop

Remote Debugging

Protocols

Firebug Crossfire

Crossfire for Internet Explorer

V8 Debugger Protocol

Opera Scope Protocol

Webkit “Remote Debugging Protocol 1.0”

Mozilla Debugging Protocol

Purpose

Original

➡ Debug JS code running in mobiles

Implicit

➡ Debug JS code running on servers

Concept

Server JS contexts

===

Remote JS Workers

Present & Future

caniuse “SS-HTML5”node.js wakanda RingoJS SilkJS APE

Timers YES YES

Base64 module module module module

XHR module YES ? YES YES

Blob YES ? ?

Storage YES* ? ?

Workers module YES** YES ?

Sockets module WAK7 ? ?

FileSystem YES ? ?

SSE module module

DOM module ? ?

SQL module

WebCL modulehttp://www.w3.org/community/jseverywhere/wiki/Main_Page

RingoJSHTML5

➡Web Worker

CommonJS

➡Modules

➡ System, fs, binary, IO, Unit Test

Other

➡ console

node.jsHTML5 via modules

➡ XMLHttpRequest (node-xmlhttprequest)

➡ Web Sockets (node-websocket-client)

➡ DOM (jsdom),

➡ IndexedDB (perstore), Web SQL (node-sqlite)

CommonJS

➡ Modules*, Packages

Other: console*

Wakanda

HTML5

➡ XMLHttpRequest, WindowTimer,

➡ Web Storages*

➡ Web Workers**

➡ File, FileSystem, Blob, ...

CommonJS

➡ Modules, Packages, System, Unit Test

Other: console

Wakanda

* Web Storages

➡ sessionStorage, “user.storage”, “application.storage”

➡ lock(), tryLock(), unlock()

➡ no localStorage but easy to polyfil

➡ “storage” event planned

** Web Workers

➡ Worker, SharedWorker, “SystemWorker”

Wakanda

Server-side JS context

➡ CommonJS (module.id, require, ...)

➡ Worker (importScripts, WindowTimer, ...)

CommonNodeHTML5 via modules

➡ XMLHttpRequest (node-xmlhttprequest)

➡ Web Sockets (node-websocket-client)

➡ DOM (jsdom)

➡ IndexedDB (perstore), Web SQL (node-sqlite)

CommonJS

➡ Modules, Packages

➡ System, fs, binary, IO, Unit Test

Other: console

http://olegp.github.io/common-node/

SummaryECMAScript is already everywhere

Modules

➡ CommonJS already standard

➡ AMD (Asynchronous Module Definition)

➡ ECMAScript 6

Many W3C APIs already applicable server-side

Same APIs means

➡ better learning curve

➡ more shared libraries / modules

➡ DRY -> shared Model work Offline

Client and Server JavaScript APIs W3C Community Group

http://www.w3.org/community/jseverywhere/

Let’s start!

Q & A

San Francisco, CA - Oct. 25th

http://jseverywhere.org

Wakanda

http://wakanda.org

@jseverywhere

@wakandasoft

Client and Server JavaScript APIs Community Group

http://www.w3.org/community/jseverywhere/