Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

End-to-end HTML5 APIs - The Geek Gathering 2013


Published on

REST seven’s rule was “Code on Demand,” meaning the ability for the server to deliver code able to run on the client, and the recommended language was JavaScript. Some, to use the same code everywhere, tried to do it with Java, or .NET (ActiveX). None of them had long life success in browsers. HTML5 and offline support contributed in the creation of a bunch of APIs which only made sense on server-side in first place: File/FileSystem, Workers, Sockets, Storage/Session, Blob, ImageData. Almost all those APIs, including the not that young XMLHttpRequest, have been designed to be usable via either synchronous or asynchronous APIs. We have today the opportunity to write code really able to either on the server and on the client and then have consistent behaviors and security rules. We can expect interoperable code/libraries/modules, save a lot of developing and debugging time, get more people involved in code we need. Discover already existing opportunities, see some of them working, and envision what the future can come with.

Published in: Technology
  • Be the first to comment

End-to-end HTML5 APIs - The Geek Gathering 2013

  1. 1. End-to-end HTML5 APIs Alexandre Morgaut Osijek, Croatia October 12th, 2013
  2. 2. Presentation W3C AC member Web Architect JS Expert REST Lover NoSQL Fanboy W3C “jseverywhere“ community group @amorgaut
  3. 3. Agenda The Web & JavaScript Web standards Server-Side JavaScript HTML5 Remote Debugging Present & Future
  4. 4. The Web & JavaScript
  5. 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 1st website on Christmas 1990 created on NeXT
  6. 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”
  7. 7. Web Standards
  8. 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. 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)
  10. 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
  11. 11. W3C on Server-Side ? Really?
  12. 12. DOM Java JavaScript .NET PHP python ..;
  13. 13. But also XSL-FO SOAP XSLT WSDL XPath SVG XQuery RDF XML Schema SPARQL
  14. 14. Server-Side JavaScript
  15. 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. 16. Standards • ECMAScript • CommonJS More than 60 SSJS implementations
  17. 17. Servers SpiderMonkey: GPSee, APE Rhino: RingoJS, Persevere, AppJet, Glassfish JavaScriptCore: wakanda Trident / Chakra: IronJS, .NET V8: node.js, SilkJS, TeaJS, Akshell
  18. 18. NoSQL Databases SpiderMonkey: riak, CouchDB Rhino: OrientDB JavaScriptCore: WakandaDB V8: ArangoDB, MongoDB, CouchBase
  19. 19. Web Application “1.0”
  20. 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. 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.”
  22. 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.”
  23. 23. Async “and” Sync XMLHttpRequest(method, url, async) FileReaderSync() requestFileSystemSync() openDatabaseSync() localStorage.getItem()
  24. 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.”
  25. 25. Web Workers Dedicated or Shared No Window, No Document WorkerGlobal, WorkerUtils, WorkerNavigator, WorkerLocation postMessage(), onmessage(), onerror() importScripts()
  26. 26. Concept Server JS contexts == JS Workers ➡ multi-threaded Dedicated Workers ➡ Shared Worker EventLoop
  27. 27. Remote Debugging
  28. 28. Protocols Firebug Crossfire Crossfire for Internet Explorer V8 Debugger Protocol Opera Scope Protocol Webkit “Remote Debugging Protocol 1.0” Mozilla Debugging Protocol
  29. 29. Purpose Original ➡ Debug JS code running in mobiles Implicit ➡ Debug JS code running on servers
  30. 30. Concept Server JS contexts === Remote JS Workers
  31. 31. Present & Future
  32. 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 APE YES
  33. 33. RingoJS HTML5 ➡ Web Worker CommonJS ➡ Modules ➡ System, fs, binary, IO, Unit Test Other ➡ console
  34. 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. 35. Wakanda HTML5 ➡ XMLHttpRequest, WindowTimer, ➡ Web Storages* ➡ Web Workers** ➡ File, FileSystem, Blob, ... CommonJS ➡ Modules, Packages, System, Unit Test Other: console
  36. 36. Wakanda * Web Storages ➡ sessionStorage, “”, “” ➡ lock(), tryLock(), unlock() ➡ no localStorage but easy to polyfil ➡ “storage” event planned ** Web Workers ➡ Worker, SharedWorker, “SystemWorker”
  37. 37. Wakanda Server-side JS context ➡ CommonJS (, require, ...) ➡ Worker (importScripts, WindowTimer, ...)
  38. 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
  39. 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. 40. Client and Server JavaScript APIs W3C Community Group Let’s start!
  41. 41. Q&A Wakanda @wakandasoft San Francisco, CA - Oct. 25th @jseverywhere Client and Server JavaScript APIs Community Group