- Device Access Within the Browser - Client Side Processing w/ Background Threads - Device Detection and Descriptors / - Adaptive Frameworks - HTML5 Connectivity Revolution and HTTP 2.0 - Single Runtime, Shared Syntax - Embedded JavaScript

1. Client/Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/
Server Relationship
27 NOVEMBER 2012
Wednesday, November 28, 12

2. Jesse Cravens & Jeff Burtoft
HTML5
Hacks
Tips & Tools for Creating
Interactive Web Applications
@jdcravens
github.com/jessecravens
jessecravens.com
html5hacks.com
Wednesday, November 28, 12

3. HACKS
node.JS Hacks
Summer 2013
Wednesday, November 28, 12

4. Client/Server 3.0: 6 Ways JavaScript is Revolutionizing the
Client/Server Relationship
Wednesday, November 28, 12

5. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
6 ways JavaScript is Revolutionizing the
Client/Server Relationship
• Device Access Within the Browser
• Client Side Processing w/ Background Threads
• Device Detection and Descriptors / Adaptive Frameworks
• HTML5 Connectivity Revolution and HTTP 2.0
• Single Runtime, Shared Syntax
• Embedded JavaScript
DEVCON5 HTML5 Summit 5 OCT 2012 5
Wednesday, November 28, 12

6. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
#1 Device Access within the Browser
• Adobe Cordova (phoneGap)
• Device API is now defunct.
• getUserMedia/Stream API (no native IE support ... yet?)
• GeoLocation API broad support (except IE8)
• Device Orientation, Device Motion, (poorly supported /
hacky)
The Client Gets Smarter.
JavaScript Device APIs continue to evolve, allowing more access to
device hardware, services and applications such as the camera,
microphone, system sensors, native address books, calendars and
native messaging applications.
DEVCON5 HTML5 Summit 5 OCT 2012 6
Wednesday, November 28, 12

7. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
DEVCON5 HTML5 Summit 5 OCT 2012 7
Wednesday, November 28, 12

8. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
DEVCON5 HTML5 Summit 5 OCT 2012 8
Wednesday, November 28, 12

9. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
DEVCON5 HTML5 Summit 5 OCT 2012 9
Wednesday, November 28, 12

10. GeoLocation Hacks
from ‘HTML5 Hacks’
Wednesday, November 28, 12

11. Device Orientation Hacks
from ‘HTML5 Hacks Xtra’
Wednesday, November 28, 12

12. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
#2: Client-Side Background Threads
• Browser runs a single threaded, event loop
• Dedicated Web Workers
• Shared Web Workers
• Async Programming Models, Reactionary Systems
• Interpreters are Maturing (V8)
The Client Gets More Powerful.
Web Workers API enables background threads in the browser,
making heavy computations realistic.
DEVCON5 HTML5 Summit 5 OCT 2012 12
Wednesday, November 28, 12

13. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
DEVCON5 HTML5 Summit 5 OCT 2012 13
Wednesday, November 28, 12

14. Web Workers Hacks
from ‘HTML5 Hacks’
Wednesday, November 28, 12

15. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
#3: Device Detection and Adaptive/
Responsive Frameworks
• CSS3 Media Queries
• Responsive Grids
• Modernizr
• Polyfill Support - Cross Platform Compliance
• Adaptive Frameworks (UA Sniffing - Maps to Templates)
• State of DDRs (Device Description Repositories)
• W3C Device Description Working Group (DDWG) (closed 2008)
• WURFL (commercial Oct 2011)
• OpenDDR - based on W3C's DDR Simple API, .NET, Java
• Device Atlas
DEVCON5 HTML5 Summit 5 OCT 2012 15
Wednesday, November 28, 12

16. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
DEVCON5 HTML5 Summit 5 OCT 2012 16
Wednesday, November 28, 12

17. ResponderJS
with Fn-Responsive
Wednesday, November 28, 12

18. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
#4: HTML5 Connectivty Revolution and
HTTP 2.0
• Web Sockets API
• XHR2
• Event Source and Server Sent Events
• SPDY
• CORS
DEVCON5 HTML5 Summit 5 OCT 2012 18
Wednesday, November 28, 12

19. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
HTML5 Connectivity
http://marakana.com/s/peter_lubbers_the_html5_connectivity_revolution_devcon5,1170/index.html
DEVCON5 HTML5 Summit 5 OCT 2012 19
Wednesday, November 28, 12

20. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
HTML5 Connectivity
http://marakana.com/s/peter_lubbers_the_html5_connectivity_revolution_devcon5,1170/index.html
DEVCON5 HTML5 Summit 5 OCT 2012 19
Wednesday, November 28, 12

21. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
DEVCON5 HTML5 Summit 5 OCT 2012 20
Wednesday, November 28, 12

22. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
DEVCON5 HTML5 Summit 5 OCT 2012 21
Wednesday, November 28, 12

23. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
DEVCON5 HTML5 Summit 5 OCT 2012 22
Wednesday, November 28, 12

24. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
DEVCON5 HTML5 Summit 5 OCT 2012 23
Wednesday, November 28, 12

25. Robodeck
Socket.io Driven Collaborative Presentations
Wednesday, November 28, 12

26. node-spdy
Hello World
Wednesday, November 28, 12

27. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
#5: Single Language, Shared Syntax
• Node Streams - IO as it should be
• Linux Pipes
• Modular
• Different Types of Streams
• Browserify - Build tool to Normalize APIs between Client/
Server
• node-browserify - adds require()
• http-browserify - adds http()
• DomNode - wrap common I/O bound APIs in node style
stream
• Browser-stream - open pipable streams to and from the
browser, with Socket.io
Node.js has enabled the same language, single runtime. But,
the paradigms are still quite different. Next steps are shared
APIs.
DEVCON5 HTML5 Summit 5 OCT 2012 26
Wednesday, November 28, 12

28. Node Streams
from NodeJSHacks
Wednesday, November 28, 12

29. 6 Ways JavaScript is Revolutionizing the Client/Server Relationship
#6 Embedded JavaScript
• more and more JavaScript Ubiquity
• JavaScript Arduino Wrappers
• Noduino
• Johnny Five
• Server moves to the Client
• Beaglebone (Angstrom Linux)
• Bonescript
• Mongoose ORM
• Mongo JavaScript CLI
• node-ar-drone
There is a barrier of entry to learning SQL, C and C++, and
Linux. JavaScript is opening new worlds for Developers.
Not to mention, the server is now on the client.
DEVCON5 HTML5 Summit 5 OCT 2012 28
Wednesday, November 28, 12

30. Embedded NodeJS
from NodeJSHacks
Wednesday, November 28, 12

31. Image API
DragDrop, XHR2 FormData, Express Restful
Services
Wednesday, November 28, 12

32. © 2012 frog. All rights reserved.
Wednesday, November 28, 12