Hire html5 developer for html5 development and html5 game development
End-to-end HTML5 APIs - The Geek Gathering 2013
-
Upload
alexandre-morgaut -
Category
Technology
-
view
3.345 -
download
3
description
Transcript of End-to-end HTML5 APIs - The Geek Gathering 2013
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/