0
HTML5 communications<br />
Classic web application<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />DB<br />HTTP App-Server<br />...
authentication
authorization
access data storage
enterprise integration
maintain user state
process business logic
process UI logic
render markup
process CRUD
(stored procedures)
display markup
request pages
send form data</li></ul>Slide 2<br />
Lifecycle of modern HTML application<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />onbeforeunload<b...
JSON/XML REST
Websockets
Local storage
JSON/XML REST
Websockets
Local storage
File I/O
(HTTP GET/POST)
XHR GET/POST
JSONP
HTTP GET
XHR GET/POST</li></ul>Slide 3<br />
Modern HTML5 web application<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />DB<br />HTTP App-Server<...
authentication
authorization
access data storage
enterprise integration
provide services
process CRUD
display markup
request pages
send form data
access remote data
access local data
maintain user sstate
process business logic
process UI logic
render markup</li></ul>Slide 4<br />
XMLHttpRequest and friends<br />12. August 2011<br />Slide 5<br />
‘native’ JavaScript<br />varxhr= newXMLHttpRequest(); xhr.open("GET", url, true); xhr.onreadystatechange= function() { if(...
Benefits<br /><ul><li>Abstracts browser deviations (from standard)
Upcoming SlideShare
Loading in...5
×

Html5 communication

3,236

Published on

With the advent of HTML5, browser applications are becoming more and more independent of server side frameworks. The user interface and its rendering are often decoupled from the server and new ways of communication become handy. This talk aims to cover some techniques how HTML applications can communicate with the server. Besides raw communication techniques the talk presents an approach on how the user interface can be plumped together with an http communication technology of choice by declaring a clean client side architecture.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,236
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
59
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 communication"

  1. 1. HTML5 communications<br />
  2. 2. Classic web application<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />DB<br />HTTP App-Server<br />Webbrowser<br />HTTP GET/POST<br />SQL<br /><ul><li>serve page assets
  3. 3. authentication
  4. 4. authorization
  5. 5. access data storage
  6. 6. enterprise integration
  7. 7. maintain user state
  8. 8. process business logic
  9. 9. process UI logic
  10. 10. render markup
  11. 11. process CRUD
  12. 12. (stored procedures)
  13. 13. display markup
  14. 14. request pages
  15. 15. send form data</li></ul>Slide 2<br />
  16. 16. Lifecycle of modern HTML application<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />onbeforeunload<br />onunload<br />GET /index.html HTTP/1.1<br />onload<br />UI setup<br />application use cases<br />state synchronization <br />DOMContentLoaded<br /><ul><li>XHR POST
  17. 17. JSON/XML REST
  18. 18. Websockets
  19. 19. Local storage
  20. 20. JSON/XML REST
  21. 21. Websockets
  22. 22. Local storage
  23. 23. File I/O
  24. 24. (HTTP GET/POST)
  25. 25. XHR GET/POST
  26. 26. JSONP
  27. 27. HTTP GET
  28. 28. XHR GET/POST</li></ul>Slide 3<br />
  29. 29. Modern HTML5 web application<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />DB<br />HTTP App-Server<br />Webbrowser<br />HTTP<br />SQL<br /><ul><li>serve page assets
  30. 30. authentication
  31. 31. authorization
  32. 32. access data storage
  33. 33. enterprise integration
  34. 34. provide services
  35. 35. process CRUD
  36. 36. display markup
  37. 37. request pages
  38. 38. send form data
  39. 39. access remote data
  40. 40. access local data
  41. 41. maintain user sstate
  42. 42. process business logic
  43. 43. process UI logic
  44. 44. render markup</li></ul>Slide 4<br />
  45. 45. XMLHttpRequest and friends<br />12. August 2011<br />Slide 5<br />
  46. 46. ‘native’ JavaScript<br />varxhr= newXMLHttpRequest(); xhr.open("GET", url, true); xhr.onreadystatechange= function() { if(xhr.readyState === 4) { if(xhr.status< 300) { document.querySelector("#main").innerHTML=encodeHTML(xhr.responseText); } }}; xhr.send(null);<br />XMLHttpRequest<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 6<br />
  47. 47. Benefits<br /><ul><li>Abstracts browser deviations (from standard)
  48. 48. Clean and handy API
  49. 49. Implementation of common techniques (TEXT, XML, JSON(P), SCRIPT)
  50. 50. Implementations of common Ajax patterns
  51. 51. Support for global error handling and user feedback
  52. 52. Shortcuts and syntax sugar
  53. 53. all major libraries provide most of these features</li></ul>Library support for xhr and friends<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 7<br />
  54. 54. Dasselbe mit jQuery<br />$("#main").load(url);<br />XMLHttpRequest<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 8<br />
  55. 55. <ul><li>onreadystatechange (XHR Level 1)
  56. 56. onloadstart
  57. 57. onprogress
  58. 58. onabort
  59. 59. ontimeout
  60. 60. onerror
  61. 61. onload(on successonly)
  62. 62. onloadend(on successorerror)</li></ul>XHR2 – event handlers<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 9<br />
  63. 63. <ul><li>fullREST support (GET, POST, PUT, DELETE)
  64. 64. FormDataAPI
  65. 65. Upload controlbyeventhandlersofxhr.upload
  66. 66. Download anduploadofbinarydata
  67. 67. Connect with BLOBs und URL.createObjectURL()</li></ul>XHR2 – new features<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 10<br />
  68. 68. Data formats and protocols<br />12. August 2011<br />Slide 11<br />
  69. 69. <ul><li>plaintext(HTML)
  70. 70. XML
  71. 71. XmlHttpRequest.responseXML
  72. 72. XML parser, XSLT transformer
  73. 73. data, markupfragments , UI templates
  74. 74. JSON (JavaScript Object Notation)
  75. 75. JSON.parse(string) , JSON.stringify(obj)
  76. 76. tightlyintegratedwith JavaScript
  77. 77. easeofuse on clientside
  78. 78. goodsupport on serverside (eg. JAX-RS, Rails, PHP)</li></ul>Dataformats<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 12<br />
  79. 79. Websockets<br />
  80. 80. <ul><li>bi-directionalcommunicationchannel
  81. 81. send andretrievemessagestoandfromtheserver
  82. 82. usuallyboils down tosomekindofpublish-subscribeapproach
  83. 83. usuallyrequiredforserver push only
  84. 84. maybeusedtokeepnetworklatencylow (multi-user)
  85. 85. Desktop: supportbybrowsers not widelyavailable
  86. 86. web-socket-js@github: flashfallbackfor all desktopbrowsers</li></ul>Websockets<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 14<br />
  87. 87. varconnection = newWebSocket(url);<br />connection.onopen= function () { $(‘#send-button’).click(function() { // send a messagewhenbuttonclickedconnection.send('Ping'); });};<br />connection.onmessage= function (e) { // simply log themessageretrieved console.log('Server: ' , e.data); };<br />Accessing an echo service via websocket<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 15<br />
  88. 88. <ul><li>node.js
  89. 89. prominent serverside JavaScript server (V8)
  90. 90. Open sourcelicence
  91. 91. excellent socket.io libraryforclientandserver
  92. 92. KaazingWebSocket Gateway
  93. 93. advancedimplementation
  94. 94. clientlibraryfor JavaScript, Java, .Net, Flex, Silverlight
  95. 95. Commercial licence; freedeveloperlicences
  96. 96. Glassfish
  97. 97. EE6 referenceimplementationdrivenby Oracle
  98. 98. Pusher.com</li></ul>Server side implementations<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 16<br />
  99. 99. <ul><li>Multi-User map
  100. 100. node.js (connect/socket.io), Google maps
  101. 101. broadcastmapinteractions
  102. 102. Call-agent usersupport
  103. 103. node.js (connect/socket.io)
  104. 104. custom HTML/JS/CSS
  105. 105. allow a useragentto remote-control a widget/application
  106. 106. SlideIt
  107. 107. node.js (connect/socket.io), jQuery
  108. 108. remote controlpresentation via mobile browser</li></ul>Websocket demos<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 17<br />
  109. 109. jQuery and JAX-RS example<br />Slide 18<br />
  110. 110. JavaScript und REST<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Webbrowser<br />HTTP GET/POST/PUT/DELETE<br />JAX-RS<br />Service layer<br />Integration layer<br />Application server<br />Slide 19<br />
  111. 111. $.ajax( { type: "PUT", contentType: "application/json; charset=utf8", data: JSON.stringify(contact), // requestbody url: url, dataType: "json", success: function(data) { // parsed JSONresp.if(callback) { callback(data.contacts); } }});<br />REST with JSON and jQuery<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 20<br />
  112. 112. Monitoring REST with JSON<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 21<br />
  113. 113. $.ajax( { type: "PUT", contentType: "application/json; charset=utf8", data: JSON.stringify(contact), // requestbody url: url, dataType: "json", success: function(data) { // parsed JSONresp.if(callback) { callback(data.contacts); } }});<br />REST with JSON and jQuery<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 22<br />
  114. 114. varAddressService = function() {this.getAddresses= function(callback) { $.ajax({type: "GET", …});};this.addAddress = function(addr, callback) { $.ajax({type: "POST",…});};this.updateAddress= function(addr, callback) { $.ajax({type: "PUT"…});};this.deleteAddress= function(addr, callback) { $.ajax({type: "DELETE"…}); };};<br />Encapsulate remote communicationwith a client side service<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 23<br />
  115. 115. varDataService = function() {this.get= function(type, [id,] callback) { $.ajax({type: "GET", …});};this.add= function(type, obj, callback) { $.ajax({type: "POST",…});};this.update= function(type, obj, callback) { $.ajax({type: "PUT"…});};this.delete= function(type, obj, callback) { $.ajax({type: "DELETE"…}); };};<br />Generic client side service<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 24<br />
  116. 116. @Path("/contacts")publicclassAddressBookService{@GET @Produces(MediaType.APPLICATION_JSON)publicAddressBookResponsegetContacts() throwsException { // fetchdatareturnnewAddressBookResponse("ok", ALL_CONTACTS); }@POST @Consumes(MediaType.APPLICATION_JSON) @Produces(MediaType.APPLICATION_JSON)publicAddressBookResponsecreateContact(Contactcontact) { // createcontactandsetidreturnnewAddressBookResponse("ok", contact); }}<br />REST with JSON and JAX-RS<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 25<br />
  117. 117. Server sidearchitecture<br />12. August 2011<br />Slide 26<br />
  118. 118. JAX-RS and EE6<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Webbrowser<br />HTTP<br />HTTP<br />HTTP<br />Presentation layer<br />REST framework<br />Business layer<br />Integration layer<br />Application server<br />Slide 27<br />
  119. 119. Remoting with Direct Web Remoting (DWR)<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Webbrowser<br />DWR service (JS)<br />DWRHTTP<br />DWRHTTP<br />HTTP<br />Presentation layer<br />DWR<br />Business layer<br />Integration layer<br />Application server<br />Slide 28<br />
  120. 120. JSF JavaScript API<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Webbrowser<br />HTTP GET/POST<br />JSF<br />Business layer<br />Integration layer<br />Application server<br />Slide 29<br />
  121. 121. Include JSF JavaScript file into facelets pages<br /><h:outputScript library="javax.faces" name="jsf.js"/><br />API<br />addOnError(callback)<br />addOnEvent(callback)<br />request(source, event, options)<br />response(request, context)<br />JSF 2.0 JavaScript library<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 30<br />
  122. 122. JSF component<br /><h:inputText...> <f:ajaxevent="blur" render="nameError«onevent="com.corejsf.showProgress"/> </h:inputText><br />JavaScript<br />jsf.ajax.request(this, event, { render: ‘target', onevent: showProgress});<br />Trigger Ajax behaviourswith JavaScript<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 31<br />
  123. 123. <ul><li>global errorhandling
  124. 124. global Ajax eventlistener (begin, complete, success)
  125. 125. decoratejsf.ajax.request
  126. 126. decoratejsf.ajax.response
  127. 127. trigger JSF eventsprogrammatically (requires JSF component)
  128. 128. send additional parameters
  129. 129. <h:commandButtononclick="doit();" value="OK"/></li></ul>JSF 2.0 JavaScript opportunities<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 32<br />
  130. 130. <ul><li>No JavaScript integrationbeyondthecomponentmodel
  131. 131. No REST support
  132. 132. simple HTML fragmentreplacements
  133. 133. workaroundtohook in with JavaScript: usehiddeninputfields
  134. 134. conservativecommunicationprogrammingmodel
  135. 135. goodbackwardcompatibility
  136. 136. Solution:exposebusinessservicewith REST andinject in JSF beanwith CDI
  137. 137. JAX-RS, JSF, CDI, JSR303: solid, powerful and flexible Ajax-Framework</li></ul>JavaScript integrationofJSF 2.0<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 33<br />
  138. 138. JAX-RS and JSF 2.0<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Webbrowser<br />HTTP<br />HTTP<br />HTTP<br />JSF 2.0<br />JAX-RS<br />Business layer<br />Integration layer<br />Application server<br />Slide 34<br />
  139. 139. THX!<br />Q&A<br />
  140. 140. Backup slides<br />12. August 2011<br />Slide 36<br />
  141. 141. <ul><li>backbone.js (MVC)
  142. 142. Model (Collections), View and Routers
  143. 143. Event system for arbitrary objects
  144. 144. Model synchronization via REST
  145. 145. templating and databinding of choice
  146. 146. knockout.js (MVVM)
  147. 147. ViewModel with Observables and dependent Observables
  148. 148. ModelView with templating and databinding
  149. 149. JavaScript MVC
  150. 150. meta-library collecting symbiotic jQuery plugins
  151. 151. MVC, scaffolding, testing</li></ul>Library support for MVC<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 37<br />
  152. 152. Client sidearchitecture<br />Slide 38<br />
  153. 153. Model View Controller derivates<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />DataService<br />ModelView<br />ViewModel<br />use<br />ListView<br />observes<br />Controller<br />maintains<br />databinding<br />action binding<br />maintains<br />create and initialize<br />Slide 39<br />
  154. 154. Page loading<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 40<br />
  155. 155. functionupload(url, blob, f) { varr = newXMLHttpRequest(); r.open("POST", url); r.send(blob); // XHR2 r.upload.onprogress= f; } functionuploadFiles(url, files) { varr = newXMLHttpRequest(); r.open("POST", url); varfd = newFormData();// XHR2 for(vari=0; i < files.length; i++) {fd.append(files[i].name, files[i]);<br />}r.send(fd); // multipart/form-data}<br />XHR2 – Blob und Form data<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 41<br />
  156. 156. function getBlobWithXhr2(url, callback) { varr = newXMLHttpRequest(); r.open("GET", url); // Oruse "arraybuffer" r.responseType= "blob" // XHR2 r.send(null); r.onload= function() {// XHR2 if(callback) {callback(r.response); // XHR2 } }}<br />XHR2 – download binary blob<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 42<br />
  157. 157. <ul><li>style andlayoutsystem (CSS)
  158. 158. template/renderengine
  159. 159. connect UI triggerstoeventhandlers/modelfunctions
  160. 160. update views (eg. databinding)
  161. 161. processuserevents
  162. 162. validateuserinput
  163. 163. back buttonanddeeplinkingsupport
  164. 164. remote orlocal I/O</li></ul>Functionalclientsiderequirements<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />M<br />V<br />C<br />Slide 43<br />
  165. 165. 12. August 2011<br />HTML5 communications | marcbaechinger<br />Model<br />DataService<br />use<br />ListView<br />Controller<br />maintains<br />observes<br />databinding<br />creates/handle events<br />Slide 44<br />
  166. 166. <ul><li>usuallyboils down to a publish/subscribepattern
  167. 167. polyvalent natureofpub/subfitsmostwsrequirements
  168. 168. publish/subscribematcheswitheventdriven JavaScript apps</li></ul>remoteEventRegistry.bind(‘foo’, function(){});<br />connection.onmessage = function (e) {varev = e.data;if (ev.type) {remoteEventRegistry.fireEvent(ev.type, ev);}};<br />Websocket clientintegration<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 45<br />
  169. 169. <ul><li>All-in-one
  170. 170. A single all-purpose library
  171. 171. jQuery (UI)/jQuery mobile, extJS, Dojo toolkit, Sencha touch
  172. 172. Micro libraries
  173. 173. < 5kb (minified & gzipped)
  174. 174. Each task a library (UNIX tools philosophy)
  175. 175. script management (getsprockets.org)
  176. 176. microjs.com
  177. 177. Example: underscore, backbone, moustache, qwery, reqwest</li></ul>JS libraries -All-in-one vs. micro libraries<br />12. August 2011<br />HTML5 communications | marcbaechinger<br />Slide 46<br />
  178. 178. (function(global) {var Observable = function() {this.observers = [];returnthis; };Observable.prototype.bind = function(type, observerCallback) {if (type && observerCallback) {if (!this.observers[type]) {this.observers[type] = []; }this.observers[type].unshift(observerCallback); }returnthis; };Observable.prototype.unbind = function(type, observerCallback) {var i;if (type && observerCallback && this.observers[type]) {for (i = 0; i < this.observers[type].length;i++) {if (observerCallback === this.observers[type][i]) {this.observers[type].splice(i,1);break; } } }returnthis; };Observable.prototype.emit = function(type, event) {var i;if (type && event && this.observers[type]) {if (!event.type) {event.type = type; } for (i = 0; i < this.observers[type].length;i++) {this.observers[type][i](event); } }returnthis; }; global.Observable = Observable;}(this));<br />Simple Observable implementation<br />HTML5 communications | marcbaechinger<br />12. August 2011<br />Slide 47<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×