End-to-end HTML5 APIs - The Geek Gathering 2013
3 likes5,703 views
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.
End-to-end HTML5 APIs - The Geek Gathering 2013
- 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
- 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?
- 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
- 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
- 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/