Hybrid Web Applications
•
7 likes•6,020 views
This document discusses techniques for building hybrid web applications using PJAX and HATEOAS. PJAX uses AJAX and the History API to update parts of pages for a fluid user experience while retaining server-side rendering. Event delegation and element lifetime are important concepts for managing views. HATEOAS decouples clients from servers by having servers provide link URLs rather than clients hardcoding them. Animation and respecting the back button are also discussed. Staying in sync between the client and server by giving components URLs and using server-sent events is covered.
More Related Content
What's hot
What's hot (20)
Similar to Hybrid Web Applications
Similar to Hybrid Web Applications (20)
Recently uploaded
Recently uploaded (20)
Hybrid Web Applications
- 1. Hybrid Web Applications with PJAX & HATEOAS James Da Costa @jamesdacosta james@bright-interactive.com jamesdacosta.com
- 2. 1885 2014
- 3. 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
- 4. 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
- 5. Is there another way? Retain server-side development environment Fluid & engaging UX (like modern SPAs) Not learn a big client-side framework
- 6. Imagebase - Upload, tag, and edit images
- 8. Backbone Models for managing data / syncing with server ! Router wrapper around History API
- 9. Demos The Old School Application PJAX & History API Nesting Views & Modals Discoverability (HATEOAS) Animation Push or Replace Staying In Sync
- 10. Demo 1 The Old School Application
- 11. Basic PJAX & History API
- 12. PJAX PushState + A JAX
- 13. Normal vs PJAX server Browser makes normal request Server responds with full HTML document Normal Request Browser
- 14. Normal vs PJAX Browser makes PJAX request and updates location bar Server responds with partial HTML document server PJAX Request Browser
- 16. 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')
- 17. 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
- 18. 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’)
- 19. PJAX - Server def myView(request): if request.headers[‘X-PJAX’]: return renderPartial() else: return renderLayout()
- 20. PJAX Benefits Fewer requests Fast response Reduced load on server Bookmarkable URL Degrades nicely
- 21. History API Session History and Navigation API
- 22. Session History Browser Support
- 25. Traditional + A JAX http://website.com/index.html
- 26. Traditional + A JAX http://website.com/index.html about Unique resource has shared URL
- 27. PushState + A JAX http://website.com/index.html
- 28. PushState + A JAX http://website.com/about.html about Unique resource has unique URL again
- 29. PushState var stateObj, title, url; stateObj = {name: "fred"} url = "/fred"; history.pushState(stateObj, title, url);
- 30. PushState www.bbc.co.uk/news/ www.bbc.co.uk/fred www.bbc.co.uk Update the UI e.g. via ajax {}
- 31. PopState Event window.onpopstate = function(e) { console.log(e.state); }
- 32. 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
- 34. Demo Master - Detail with PJAX
- 35. Visual Cues
- 36. 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
- 38. $(document).on('pjax:send', function() { $('#loading').show() }) $(document).on('pjax:complete', function() { $('#loading').hide() })
- 39. PJAX In the wild
- 40. PJAX - Who’s using it?
- 44. Backbone.js
- 45. Demo 3 Nesting Views & Modals
- 46. Event Delegation & Element Lifetime
- 47. Element Lifetime Long lifetime (container) Short lifetime (view) Short lifetime (view)
- 48. Event Delegation Delegate events to elements with a long lifetime Events fired on newly inserted HTML bubble up to container (delegate) Fewer event handlers
- 49. Event Delegation (jQuery) $(container).on(‘click’, ‘a[data-pjax]’, function(){ do_something(); });
- 50. HATEOAS Hypermedia As The Engine Of Application State
- 53. Sport Link
- 54. What if there were no links And instead, the BBC published a document detailing URL’s of all their pages
- 55. + BBC WEBSITE BBC WEBSITE URLS BBC WEBSITE URLS ! URLS ! VERSION 1.0 ! VERSION 2.0 VERSION 3.0
- 56. Don’t cook URLs on the client, instead use the URLS provided by the server Decouples the client from the server
- 58. Animation & the Back Button
- 59. 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
- 60. Demo 5 Animation
- 62. Back Button
- 68. Epistemic Action
- 69. Demo 6 Push or Replace
- 70. 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
- 71. 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
- 72. Staying In Sync With The Server
- 73. 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
- 75. Demo 7 Staying In Sync With The Server
- 76. Staying In Sync With The Server Pros: Master and detail view stay in sync Cons: making multiple requests for content
- 77. 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
- 78. Staying In Sync With The Server { “content”: [ “div.thing”: “<p>content</p>”, “div.related”: “<p>related content</p>” ] }
- 79. 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
- 80. 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