Hybrid Web Applications

20 %
80 %
Information about Hybrid Web Applications

Published on February 28, 2014

Author: jamesdac

Source: slideshare.net


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

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


$(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




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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Hybrid Web Applications: The Best of All Worlds for Mobile ...

Mobile application developers face a dilemma. The mobile device landscape is fragmented and fast-moving. To be sure of covering as much of the market as ...
Read more

Mobile: Native Apps, Web Apps, and Hybrid Apps

Native and hybrid apps are installed in an app store; web apps are mobile-optimized webpages that look like an app. Hybrid apps use app-embedded browsers.
Read more

Hybrid Web Development: New Zealand

Hybrid Web Dev builds websites and web applications. User-editable sites and complex Google Maps API implementations. Hybrid concentrates on usability and ...
Read more

Native, HTML5, or Hybrid: Understanding Your Mobile ...

Hybrid Mobile Applications. Hybrid development combines the best (or worst) of both the native and HTML5 worlds. We define hybrid as a web app, ...
Read more

Hybrid WebTech - Creating Identities

Web Development Best ... Mobile Application Development Android / IOS / Windows We make fully customized mobile applications for ... About Hybrid WebTech.
Read more

Hybrid Web, Inc.- Home Page

Hybrid Web, Inc's services include the planning, design, development, maintenance, and optimization of computer software, Internet applications, ...
Read more

What is hybrid application (hybrid app)? - Definition from ...

A hybrid application (hybrid app) is one that combines elements of both native and Web applications. Native applications are developed for a specific ...
Read more

Mashup (web application hybrid) - Wikipedia, the free ...

Mashup (web application hybrid) This article needs ... more and more Web applications have published APIs that enable software developers to easily ...
Read more

What is a Hybrid Mobile App? -Telerik Developer Network

What is a Hybrid Mobile App? ... On the other hand, web and hybrid applications are built using web technologies like HTML, CSS, and JavaScript.
Read more

Web application - Wikipedia, the free encyclopedia

In computing, a web application or web app is a client–server software application in which the client (or user interface) runs in a web browser.
Read more