Hybrid Web Applications
Upcoming SlideShare
Loading in...5

Hybrid Web Applications



Can traditional document-based applications compete with the user experience frameworks such as Ember & Angular are known for?

Can traditional document-based applications compete with the user experience frameworks such as Ember & Angular are known for?



Total Views
Views on SlideShare
Embed Views



1 Embed 6

http://www.slideee.com 6



Upload Details

Uploaded via as Adobe PDF

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.

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

Hybrid Web Applications Hybrid Web Applications Presentation Transcript

  • Hybrid Web Applications with PJAX & HATEOAS James Da Costa @jamesdacosta
 james@bright-interactive.com jamesdacosta.com
  • 1885 2014
  • Hybrid Web Applications An approach to improving the user experience of legacy web applications Modernising applications in a way that doesn’t ignore the fundamental tenets of the web Borrowing ideas and techniques from the oldschool web and new technologies
  • Background Needed to rewrite a server-side application and wanted a better UX Decided to learn about client side SPA frameworks (Ember/Angular) Realised there’s a steep learning curve Big mindset shift from server-side to client-side development
  • Is there another way? Retain server-side development environment Fluid & engaging UX (like modern SPAs) Not learn a big client-side framework
  • Imagebase - Upload, tag, and edit images
  • Toolset Django + Backbone.js
  • Backbone Models for managing data / syncing with server ! Router wrapper around History API
  • Demos The Old School Application PJAX & History API Nesting Views & Modals Discoverability (HATEOAS) Animation Push or Replace Staying In Sync
  • Demo 1 The Old School Application
  • Basic PJAX & History API
  • PJAX PushState + A JAX
  • Normal vs PJAX server Browser makes normal request Server responds with full HTML document Normal Request Browser
  • Normal vs PJAX Browser makes PJAX request and updates location bar Server responds with partial HTML document server PJAX Request Browser
  • jQuery-PJAX https://github.com/defunkt/jquery-pjax
  • PJAX Container Identify where the partial HTML will be inserted <div class="container" id="pjax-container"> Go to <a href=“/page/2" data-pjax>next page</a>. </div> $(document).pjax(a[data-pjax]', '#pjax-container')
  • PJAX Requests Inform the server that you don’t want the full page, just the partial Could use a custom request header If the browser doesn’t support the History API fallback to normal request
  • PJAX Requests If browser supports History API then intercept links and make PJAX request <a href=“/my-page/“ data-pjax>link</a> and XHR.setRequestHeader(‘X-PJAX’)
  • PJAX - Server def myView(request): if request.headers[‘X-PJAX’]: return renderPartial() else: return renderLayout()
  • PJAX Benefits Fewer requests Fast response Reduced load on server Bookmarkable URL Degrades nicely
  • History API Session History and Navigation API
  • Session History Browser Support
  • Traditional http://website.com/index.html
  • Traditional http://website.com/about.html about Unique resource has unique URL
  • Traditional + A JAX http://website.com/index.html
  • Traditional + A JAX http://website.com/index.html about Unique resource has shared URL
  • PushState + A JAX http://website.com/index.html
  • PushState + A JAX http://website.com/about.html about Unique resource has unique URL again
  • PushState var stateObj, title, url; stateObj = {name: "fred"} url = "/fred"; history.pushState(stateObj, title, url);
  • PushState www.bbc.co.uk/news/ www.bbc.co.uk/fred www.bbc.co.uk Update the UI e.g. via ajax {}
  • PopState Event window.onpopstate = function(e) { console.log(e.state); }
  • PopState Event the popState event is fired when you go back and forward in the browser history the state object assigned to the url is returned on a property of the event called state this allows you to reconstruct the page without a full reload
  • PopState www.bbc.co.uk/news/ www.bbc.co.uk/fred www.bbc.co.uk {}
  • Demo Master - Detail with PJAX
  • Visual Cues
  • Visual Cues Browsers have traditionally given visual cues More power for developers (A JAX, History API) Remember to keep the user in the loop Slow down connection or put setTimeout in jquery send
  • https://github.com/defunkt/jquery-pjax
  • $(document).on('pjax:send', function() { $('#loading').show() }) $(document).on('pjax:complete', function() { $('#loading').hide() })
  • PJAX In the wild
  • PJAX - Who’s using it?
  • https://blog.twitter.com/2012/ improving-performance-on-twittercom
  • http://www.youtube.com/watch?v=hrZl_EQUbRQ
  • http://bit.ly/1hG3GTi
  • Backbone.js
  • Demo 3 Nesting Views & Modals
  • Event Delegation & Element Lifetime
  • Element Lifetime Long lifetime (container) Short lifetime (view) Short lifetime (view)
  • Event Delegation Delegate events to elements with a long lifetime Events fired on newly inserted HTML bubble up to container (delegate) Fewer event handlers
  • Event Delegation (jQuery) $(container).on(‘click’, ‘a[data-pjax]’, function(){ do_something(); });
  • HATEOAS Hypermedia As The Engine Of Application State
  • Sport Link
  • What if there were no links And instead, the BBC published a document detailing URL’s of all their pages
  • Don’t cook URLs on the client, instead use the URLS provided by the server Decouples the client from the server
  • Demo 4 Discoverability (HATEOAS)
  • Animation & the Back Button
  • Animation Feedback for the user is vital Helps to suggest the behaviour of the back button Helps to suggest available touch events Native mobile/desktops rely on animation to help the user feel in control of the application UX is predictable
  • Demo 5 Animation
  • Animation Spotify Web Player Twitter App
  • Back Button
  • http://www.xkcd.com/1309/
  • http://www.reddit.com/r/programming/comments/ 1uou3g/please_respect_the_back_button/
  • Epistemic Action
  • Demo 6 Push or Replace
  • Push or Replace history.pushState vs history.replaceState Is this a new state or are we just altering the existing state? How are we presenting states? What will the typical user want to do? User Testing
  • ReplaceState some potential use cases Modal dialogues - users probably don't expect the back button to undo the modal Setting up the first page a user visits so we can recreate state when they hit back
  • Staying In Sync With The Server
  • Staying In Sync With The Server PJAX makes updating a part of the page easy What about other representations of the same entity which already exist on the page? Allow parts of the page to become stale or occasionally refresh the page (jquery-idletimer) Assign URL’s to components on the page
  • Assign URLs to components /image/58/panel/ /image/57/panel/ /image/56/panel/
  • Demo 7 Staying In Sync With The Server
  • Staying In Sync With The Server Pros: Master and detail view stay in sync Cons: making multiple requests for content
  • Staying In Sync With The Server How can we make a single request? Server-Sent Events Send HTML in JSON Generic approach to updating content on the client with JSON & HTML
  • Staying In Sync With The Server { “content”: [ “div.thing”: “<p>content</p>”, “div.related”: “<p>related content</p>” ] }
  • Staying In Sync With The Server Sending HTML/JSON could work but lots of benefits of using SSE: Uses Traditional HTTP Automatic reconnection Send any type of event
  • Summary PJAX - PushState+A JAX, URLs are important in modern JS heavy apps HATEOAS - decoupling client from server Element Lifetime & Event Delegation - binding to long lived element Push or Replace - what should the back button do? Animation - important for user feedback Staying in Sync - giving components URLs
  • Thanks Questions James Da Costa @jamesdacosta
 james@bright-interactive.com jamesdacosta.com