• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 communication
 

Html5 communication

on

  • 3,389 views

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

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.

Statistics

Views

Total Views
3,389
Views on SlideShare
3,343
Embed Views
46

Actions

Likes
0
Downloads
56
Comments
0

1 Embed 46

http://blog.kinorama.com 46

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 communication Html5 communication Presentation Transcript

    • HTML5 communications
    • Classic web application
      12. August 2011
      HTML5 communications | marcbaechinger
      DB
      HTTP App-Server
      Webbrowser
      HTTP GET/POST
      SQL
      • serve page assets
      • 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
      Slide 2
    • 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
      • XHR POST
      • 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
      Slide 3
    • Modern HTML5 web application
      12. August 2011
      HTML5 communications | marcbaechinger
      DB
      HTTP App-Server
      Webbrowser
      HTTP
      SQL
      • serve page assets
      • 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
      Slide 4
    • XMLHttpRequest and friends
      12. August 2011
      Slide 5
    • ‘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
    • Benefits
      • Abstracts browser deviations (from standard)
      • Clean and handy API
      • Implementation of common techniques (TEXT, XML, JSON(P), SCRIPT)
      • Implementations of common Ajax patterns
      • Support for global error handling and user feedback
      • Shortcuts and syntax sugar
      • all major libraries provide most of these features
      Library support for xhr and friends
      HTML5 communications | marcbaechinger
      12. August 2011
      Slide 7
    • Dasselbe mit jQuery
      $("#main").load(url);
      XMLHttpRequest
      HTML5 communications | marcbaechinger
      12. August 2011
      Slide 8
      • onreadystatechange (XHR Level 1)
      • onloadstart
      • onprogress
      • onabort
      • ontimeout
      • onerror
      • onload(on successonly)
      • onloadend(on successorerror)
      XHR2 – event handlers
      HTML5 communications | marcbaechinger
      12. August 2011
      Slide 9
      • fullREST support (GET, POST, PUT, DELETE)
      • FormDataAPI
      • Upload controlbyeventhandlersofxhr.upload
      • Download anduploadofbinarydata
      • Connect with BLOBs und URL.createObjectURL()
      XHR2 – new features
      HTML5 communications | marcbaechinger
      12. August 2011
      Slide 10
    • Data formats and protocols
      12. August 2011
      Slide 11
      • plaintext(HTML)
      • XML
      • XmlHttpRequest.responseXML
      • XML parser, XSLT transformer
      • data, markupfragments , UI templates
      • JSON (JavaScript Object Notation)
      • JSON.parse(string) , JSON.stringify(obj)
      • tightlyintegratedwith JavaScript
      • easeofuse on clientside
      • goodsupport on serverside (eg. JAX-RS, Rails, PHP)
      Dataformats
      HTML5 communications | marcbaechinger
      12. August 2011
      Slide 12
    • Websockets
      • bi-directionalcommunicationchannel
      • send andretrievemessagestoandfromtheserver
      • usuallyboils down tosomekindofpublish-subscribeapproach
      • usuallyrequiredforserver push only
      • maybeusedtokeepnetworklatencylow (multi-user)
      • Desktop: supportbybrowsers not widelyavailable
      • web-socket-js@github: flashfallbackfor all desktopbrowsers
      Websockets
      12. August 2011
      HTML5 communications | marcbaechinger
      Slide 14
    • 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
      • node.js
      • prominent serverside JavaScript server (V8)
      • Open sourcelicence
      • excellent socket.io libraryforclientandserver
      • KaazingWebSocket Gateway
      • advancedimplementation
      • clientlibraryfor JavaScript, Java, .Net, Flex, Silverlight
      • Commercial licence; freedeveloperlicences
      • Glassfish
      • EE6 referenceimplementationdrivenby Oracle
      • Pusher.com
      Server side implementations
      12. August 2011
      HTML5 communications | marcbaechinger
      Slide 16
      • Multi-User map
      • node.js (connect/socket.io), Google maps
      • broadcastmapinteractions
      • Call-agent usersupport
      • node.js (connect/socket.io)
      • custom HTML/JS/CSS
      • allow a useragentto remote-control a widget/application
      • SlideIt
      • node.js (connect/socket.io), jQuery
      • remote controlpresentation via mobile browser
      Websocket demos
      12. August 2011
      HTML5 communications | marcbaechinger
      Slide 17
    • jQuery and JAX-RS example
      Slide 18
    • 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
    • $.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
    • Monitoring REST with JSON
      HTML5 communications | marcbaechinger
      12. August 2011
      Slide 21
    • $.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
    • 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
    • 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
    • @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
    • Server sidearchitecture
      12. August 2011
      Slide 26
    • 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
    • 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
    • JSF JavaScript API
      12. August 2011
      HTML5 communications | marcbaechinger
      Webbrowser
      HTTP GET/POST
      JSF
      Business layer
      Integration layer
      Application server
      Slide 29
    • 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
    • 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
      • global errorhandling
      • global Ajax eventlistener (begin, complete, success)
      • decoratejsf.ajax.request
      • decoratejsf.ajax.response
      • trigger JSF eventsprogrammatically (requires JSF component)
      • send additional parameters
      • <h:commandButtononclick="doit();" value="OK"/>
      JSF 2.0 JavaScript opportunities
      12. August 2011
      HTML5 communications | marcbaechinger
      Slide 32
      • No JavaScript integrationbeyondthecomponentmodel
      • No REST support
      • simple HTML fragmentreplacements
      • workaroundtohook in with JavaScript: usehiddeninputfields
      • conservativecommunicationprogrammingmodel
      • goodbackwardcompatibility
      • Solution:exposebusinessservicewith REST andinject in JSF beanwith CDI
      • JAX-RS, JSF, CDI, JSR303: solid, powerful and flexible Ajax-Framework
      JavaScript integrationofJSF 2.0
      12. August 2011
      HTML5 communications | marcbaechinger
      Slide 33
    • 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
    • THX!
      Q&A
    • Backup slides
      12. August 2011
      Slide 36
      • backbone.js (MVC)
      • Model (Collections), View and Routers
      • Event system for arbitrary objects
      • Model synchronization via REST
      • templating and databinding of choice
      • knockout.js (MVVM)
      • ViewModel with Observables and dependent Observables
      • ModelView with templating and databinding
      • JavaScript MVC
      • meta-library collecting symbiotic jQuery plugins
      • MVC, scaffolding, testing
      Library support for MVC
      12. August 2011
      HTML5 communications | marcbaechinger
      Slide 37
    • Client sidearchitecture
      Slide 38
    • 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
    • Page loading
      HTML5 communications | marcbaechinger
      12. August 2011
      Slide 40
    • 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
    • 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
      • style andlayoutsystem (CSS)
      • template/renderengine
      • connect UI triggerstoeventhandlers/modelfunctions
      • update views (eg. databinding)
      • processuserevents
      • validateuserinput
      • back buttonanddeeplinkingsupport
      • remote orlocal I/O
      Functionalclientsiderequirements
      12. August 2011
      HTML5 communications | marcbaechinger
      M
      V
      C
      Slide 43
    • 12. August 2011
      HTML5 communications | marcbaechinger
      Model
      DataService
      use
      ListView
      Controller
      maintains
      observes
      databinding
      creates/handle events
      Slide 44
      • usuallyboils down to a publish/subscribepattern
      • polyvalent natureofpub/subfitsmostwsrequirements
      • 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
      • All-in-one
      • A single all-purpose library
      • jQuery (UI)/jQuery mobile, extJS, Dojo toolkit, Sencha touch
      • Micro libraries
      • < 5kb (minified & gzipped)
      • Each task a library (UNIX tools philosophy)
      • script management (getsprockets.org)
      • microjs.com
      • Example: underscore, backbone, moustache, qwery, reqwest
      JS libraries -All-in-one vs. micro libraries
      12. August 2011
      HTML5 communications | marcbaechinger
      Slide 46
    • (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