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.

1. HTML5 communications

3. authentication

4. authorization

5. access data storage

6. enterprise integration

7. maintain user state

8. process business logic

9. process UI logic

10. render markup

11. process CRUD

12. (stored procedures)

13. display markup

14. request pages

15. send form dataSlide 2

17. JSON/XML REST

18. Websockets

19. Local storage

20. JSON/XML REST

21. Websockets

22. Local storage

23. File I/O

24. (HTTP GET/POST)

25. XHR GET/POST

26. JSONP

27. HTTP GET

28. XHR GET/POSTSlide 3

30. authentication

31. authorization

32. access data storage

33. enterprise integration

34. provide services

35. process CRUD

36. display markup

37. request pages

38. send form data

39. access remote data

40. access local data

41. maintain user sstate

42. process business logic

43. process UI logic

44. render markupSlide 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

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 featuresLibrary 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

56. onloadstart

57. onprogress

58. onabort

59. ontimeout

60. onerror

61. onload(on successonly)

62. onloadend(on successorerror)XHR2 – event handlers HTML5 communications | marcbaechinger 12. August 2011 Slide 9

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

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

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 desktopbrowsersWebsockets 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

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.comServer side implementations 12. August 2011 HTML5 communications | marcbaechinger Slide 16

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 browserWebsocket 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

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

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-FrameworkJavaScript 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

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, testingLibrary 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

158. template/renderengine

159. connect UI triggerstoeventhandlers/modelfunctions

160. update views (eg. databinding)

161. processuserevents

162. validateuserinput

163. back buttonanddeeplinkingsupport

164. remote orlocal I/OFunctionalclientsiderequirements 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

167. polyvalent natureofpub/subfitsmostwsrequirements

168. publish/subscribematcheswitheventdriven JavaScript appsremoteEventRegistry.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

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, reqwestJS 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