This document summarizes a presentation about end-to-end HTML5 APIs. It discusses the history of the web and standards including HTTP, HTML, JavaScript, REST, W3C, ECMA, and CommonJS. It then covers using JavaScript on the server with engines like SpiderMonkey, Rhino and V8. HTML5 APIs that can be used both client-side and server-side with JavaScript are presented, including Web Workers, Web Sockets and remote debugging. Finally, implementations of server-side JavaScript like Node.js and Wakanda are compared, and the potential for shared client-server JavaScript APIs through a W3C community group is discussed.

1. End-to-end HTML5 APIs
Alexandre Morgaut
Osijek, Croatia
October 12th, 2013

2. Presentation
W3C AC member
Web Architect
JS Expert
REST Lover
NoSQL Fanboy
W3C “jseverywhere“
community group
@amorgaut

3. Agenda
The Web & JavaScript
Web standards
Server-Side JavaScript
HTML5
Remote Debugging
Present & Future

4. The Web & JavaScript

5. The Web
WWW: 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.ch
1st website on Christmas 1990
created on NeXT

6. REST
Representational 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.htm
http://www.ics.uci.edu/~fielding/pubs/dissertation/evaluation.htm

7. Web Standards

8. 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...

9. ECMA
European 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.org http://en.wikipedia.org/wiki/ECMAScript
http://www.ecma-international.org/publications/standards/Standard.htm

10. CommonJS
created 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/

11. W3C on Server-Side ?
Really?

12. DOM
Java
JavaScript
.NET
PHP
python
..;

13. But also
XSL-FO
SOAP
XSLT
WSDL
XPath
SVG
XQuery
RDF
XML Schema
SPARQL

14. Server-Side JavaScript

15. Engines
SpiderMonkey
3 JIT Compilers:
TraceMonkey,
JägerMonkey,
IonMonkey
webkit JavaScriptCore: JSC
SquirrelFish Extreme: SFX aka Nitro
(JIT Compiler inside)
V8
Rhino
JIT Compiler: CrankShaft
Tamarin
Carakan
Interpreted or Compiled execution
JIT Compiler: NanoJIT
-> ActionScript / “ECMAScript 4”
Trident: MSHTML / Chakra
-> Classic JScript, Managed JScript, & JScript.NET
Linear A,
Linear B,
Futhark

16. Standards
•
ECMAScript
•
CommonJS
More than 60 SSJS implementations

17. Servers
SpiderMonkey: GPSee, APE
Rhino: RingoJS, Persevere, AppJet, Glassfish
JavaScriptCore: wakanda
Trident / Chakra: IronJS, .NET
V8: node.js, SilkJS, TeaJS, Akshell

18. NoSQL Databases
SpiderMonkey: riak, CouchDB
Rhino: OrientDB
JavaScriptCore: WakandaDB
V8: ArangoDB, MongoDB, CouchBase

19. Web Application “1.0”

20. HTML5 APIs
XMLHttpRequest 2
Web Cryptography
Blob
ImageData
File / FileSystem
Typed Arrays
Web SQL
Storage Quota
Web Storage
System Information
Web Workers
URL
Web Sockets
WebCL

21. 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

22. 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/

23. Async “and” Sync
XMLHttpRequest(method, url, async)
FileReaderSync()
requestFileSystemSync()
openDatabaseSync()
indexedDBSync.open()
localStorage.getItem()

24. 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

25. Web Workers
Dedicated or Shared
No Window, No Document
WorkerGlobal, WorkerUtils, WorkerNavigator, WorkerLocation
postMessage(), onmessage(), onerror()
importScripts()

26. Concept
Server JS contexts
==
JS Workers
➡ multi-threaded Dedicated Workers
➡ Shared Worker EventLoop

27. Remote Debugging

28. Protocols
Firebug Crossfire
Crossfire for Internet Explorer
V8 Debugger Protocol
Opera Scope Protocol
Webkit “Remote Debugging Protocol 1.0”
Mozilla Debugging Protocol

29. Purpose
Original
➡ Debug JS code running in mobiles
Implicit
➡ Debug JS code running on servers

30. Concept
Server JS contexts
===
Remote JS Workers

31. Present & Future

32. caniuse “SS-HTML5”
node.js
wakanda
RingoJS
SilkJS
Timers
YES
YES
Base64
module
module
module
XHR
module
module
YES
?
YES
Blob
YES
?
?
Storage
YES*
?
?
Workers
module
YES**
YES
?
Sockets
module
WAK7
?
?
YES
?
?
?
?
FileSystem
SSE
module
DOM
module
SQL
module
WebCL
module
module
http://www.w3.org/community/jseverywhere/wiki/Main_Page
APE
YES

33. RingoJS
HTML5
➡ Web Worker
CommonJS
➡ Modules
➡ System, fs, binary, IO, Unit Test
Other
➡ console

34. node.js
HTML5 via modules
➡ XMLHttpRequest (node-xmlhttprequest)
➡ Web Sockets (node-websocket-client)
➡ DOM (jsdom),
➡ IndexedDB (perstore), Web SQL (node-sqlite)
CommonJS
➡ Modules*, Packages
Other: console*

35. Wakanda
HTML5
➡ XMLHttpRequest, WindowTimer,
➡ Web Storages*
➡ Web Workers**
➡ File, FileSystem, Blob, ...
CommonJS
➡ Modules, Packages, System, Unit Test
Other: console

36. 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”

37. Wakanda
Server-side JS context
➡ CommonJS (module.id, require, ...)
➡ Worker (importScripts, WindowTimer, ...)

38. CommonNode
HTML5 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/

39. Summary
ECMAScript 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

40. Client and Server JavaScript APIs
W3C Community Group
http://www.w3.org/community/jseverywhere/
Let’s start!

41. Q&A
Wakanda
@wakandasoft
http://wakanda.org
San Francisco, CA - Oct. 25th
@jseverywhere
http://jseverywhere.org
Client and Server JavaScript APIs Community Group
http://www.w3.org/community/jseverywhere/