Html5 communication
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Html5 communication

  • 3,679 views
Uploaded 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......

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,679
On Slideshare
3,630
From Embeds
49
Number of Embeds
1

Actions

Shares
Downloads
59
Comments
0
Likes
0

Embeds 49

http://blog.kinorama.com 49

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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