Khoros Atlas Logo

Using AngularJS for responsive UI

Lithium Alumni (Retired) Lithium Alumni (Retired)
Lithium Alumni (Retired)

On his blog, Lithium's own Santthosh Selvadurai describes using deferred update with local storage in AngularJS.

 

Find out more about how he's been exploring delivering a responsive UI experience, particularly for mobile, and get hands on with the working prototype.santthosh blog 2.PNG

 

Tags (2)
About the Author
Diana Helander is Senior Director, Product Marketing at Lithium Diana has worked in the technology industry for 20 years. Prior to Lithium, she has held marketing positions at Adobe, Autodesk, and various technology startups. She’s also chaired ISO standards development committees and has held several board positions at not-for-profit organizations.
4 Comments
Lithium Alumni (Retired) Lithium Alumni (Retired)
Lithium Alumni (Retired)

Awesome stuff!

Khoros Oracle
Khoros Oracle

I'm a little surprised to see efforts today in the Angular community to use the localStorage API. Admittedly the API is certainly dead simple to use, but I personally have been a bit hesitant to look at using it for performance reasons.

 

Chris Heilmann at Mozilla wrote a popular (and somewhat controversial) blog article last year, There is no simple solution for local storage, in which he explored some nasty performance impacts of the API. In particular, reads and writes make synchronous hard drive I/O that can block the page from loading, block events from being processed, etc. On top of that, most browsers (even IE8) are trying to optimize by reading everything from the disk early, meaning that the user suffers an unavoidable performance hit either when starting the browser or loading up pages on certain domains. Finally, there are no provisions for expiring data or for customizing the amount of space granted to a given application, so behavior is unpredictable from one user agent (or even machine, or even day) to another.

 

Other solutions are out there that work a little better -- Heilmann mentioned IndexedDB and WebSQL. Those options take a lot more code to use, and neither is universally supported, but there are wrapper libraries and polyfills out there that can abstract away the messy details. There might even be one for Angular?

 

More recently (this February), at the last Edge Conference in London, there was an interesting talk about offline webapps where all of this was discussed in a more in-depth fashion, for anyone interested.

Honored Contributor
Honored Contributor

At first glance I thought this was about responsive design 🙂

 

Client side caching makes a lot of sense for mobile given its online / offline nature, however once you start down this road you need to handle lots of conditions that push you outside the normal request / response and server sessions paradigm.

 

Our agency has created phonegap apps that need to support offline modes (mostly using WebSQL) and the application state and session process is completely counter to traditional always online style webapps.

Lithium Alumni (Retired) Lithium Alumni (Retired)
Lithium Alumni (Retired)

@AndrewF Great points, there has been some work by folks on IndexedDB and WebSQL with AngularJS using persistence.js like

 

http://jacobmumm.com/2011/10/18/todo-example-angularjs-persistencejs/

 

but the absence of wide spread support is a frustration, further cache expiry is still a big issue to deal with across all of these

 

@cblown glad to know, can u please share some of your apps on the store with offline modes? Would be a great material to watch and learn