Best way to use client-side storage with Angular?

[Steve Shaffer]

I'm looking for the best way to use some form of client-side resource storage within an Angular.is application. My ideal would be that there was a built-in method of caching ngResources in IndexedDB/WebSQL/LocalStorage (auto-sniff-selected???) so that apps can run offline and automatically syncing them with the server when the connection comes back. (Basically what toggl.com does with LocalStorage)

I don't know if this is officially "outside the scope" of Angular.js, but my gut feeling is that it would fit in nicely. In many applications, two-way data binding is only as useful as your ability to persist that data. And that's not usually that easy to do (unless you just round-trip everything).

I'd be super interested in working on this with whoever else might be interested.

[Peter Bacon Darwin]

How about using Persistence.js?  I believe this has some kind of local caching ability?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.

[Steve Shaffer]

Ya, persistence seems like a decent choice.  It's kinda frustrating that there's no universal client-side storage solution besides LocalStorage.  I still think an IndexedDB (/ fallback) adapter would be a really good addition to Angular.js in the future.  Maybe I'll start working on something like that...

[Owen M]

Steve, wondering if you've had any time to work on this since October? I'm currently just starting a project which needs exactly what you are talking about. Typical online use, then when client is offline stores changes locally. Changes are then synced with the server when coming back online. Could be multiple users with the system, so some sort of conflict resolution (even simply, most recent update wins) will be needed.

Spent some time hunting around for something like this plugged straight into AngularJS. No luck. Would love to help contribute to something vs writing one from scratch.

Cheers,

~Owen

[Dave Merrill]

Saw someone mention a Lawnchair integration:

  https://groups.google.com/forum/#!msg/angular/ikaL3hcjhGg/2L7JWGB5AUgJ

Dave

[Steve Shaffer]

Hi Owen,

I haven't had any REAL time to work on this, but I did quite a bit of thinking on it.  I think the easiest way to get something done the quickest would be to plug in the localStorage caching in the middle of the ngResource code.  If done right, a few lines might do the trick (although the rest of the trick would be in tracking which ones need to be synced when an "online" mode comes back on).  This would be done (I believe) by overriding the call to $http right here (https://github.com/angular/angular.js/blob/master/src/ngResource/resource.js#L377) with some call that firsts checks localStorage, etc.

I would still love to work on a general solution that would do all the synchronization behind the scenes and allow us just to call something like x.$save() where x is some kind of ngSuperResource.  Though it's worth noting, it would probably have to be very opinionated about how the backend worked in regards to updated_at stamps and sync calls and stuff.  If you've got the time to setup such an endeavor, I would definitely contribute to it.  As it stands, I'm pretty busy with other projects and I'm still learning how to properly use gitHub, but I would definitely contribute if someone else could setup the project.

Re: other client-side storage libraries, I believe libraries like lawnchair and persistence wouldn't effectively do much more in this case than just abstracting away calls to the localStorage API, etc.

Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Owen M]

Very much agree. My thinking is that ideally you could swap ngResource with ngOfflineResource (or whatever we call it) and continue working as if nothing changed. Something along the idea of:

https://github.com/Ask11/backbone.offline

As a shoot from the hip I barely know what I'm talking about approach... all the CRUD calls interact with some form of local storage. If there is a network connection, propagate them through to the server. When offline, keep track of changes so when coming back online, sync the changes to the server. The sync will most likely result in changes to the local and server data stores.

Issues such as 5Mb localstorage limit, and how exactly to solve sync issues and conflicts will need to be addressed.

From here I think I'm going to do a deep dive into understanding ngResource, and then start trying stuff. I'll most likely get it wrong on the first couple attempts, but that is half the fun. I've only been using AngularJS for a week, but really like what I see so far.

Once I get something more then just hand waving I'll create a repo so others interested can collaborate on it. If someone else beets me to the punch, awesome. Start a repo and share the love.

With all the mobile dev I'm seeing in this group, I can see this turning into a reasonably vital component.

Cheers,

~Owen

[Ryan Zec]

Something that has peaked my interest related to this area (my use case is more for cache than to be able to work offline) is:

http://amplifyjs.com/

It's request/store system look interesting.  This is probably something I am going to dive into to try to build a request type that works with $http instead of $.ajax hopefully within the next couple of weeks.

Thanks,

Ryan

[Steve Shaffer]

@Ryan, looks cool.  I'll have to take a look at that.

@Owen, alright, let's make this happen!  I'll try to do some work as well and keep you posted if I manage to make any progress.

I've been lucky enough to do a couple things with Angular so far, and it really is pretty awesome.  Welcome to the future, broseph!

[Owen M]

Awesome, be very happy to see this happen.

Right now I'm spending some time doing some deeper learning of ngResource. Eventually I'll start providing ways to do the sync, local store, and remote store.

Amplify looks interesting, but seems to be primarily for local storage. Other things like Lawnchair provide this as well. What we are trying to do here is provide a persistence layer that works both online and offline, and seamlessly switches.

Cheers,

~Owen

[Peter Bacon Darwin]

You could have a look at couchapps on touchdb if you plan to run on a mobile device.

Pete
...from my mobile.

[Owen M]

TouchDB looks to be an ObjectiveC project, so only available on iOS.

Couchapps looks interesting, but looks like the server is still a requirement. Perhaps pairing it with something like PouchDB could be a solution.

I may be off the mark in both cases.

The key use case I'm trying to solve is: User is using the website from their office. They then drive to middle of nowhere and need to use the site. They will be in places with zero network coverage. User performs work in the field, updating things locally. Come back to the office, everything syncs up automatically.

Cheers,

~Owen

[Peter Bacon Darwin]

There is also an android version. The idea is that the couchdb serves up the web app locally providing data storage and then syncs with the server when it is online. Since the web app is stored in the couchdb too it is data that can also be synced making application updates a cinch!

Pete
...from my mobile.

[Owen M]

I personally need it to work in a pure web client. So although TouchDB seems like a good route for mobile, not so much for a pure web stack. I may be missing something there.

PouchDB seems to do a similar thing, but purely in JS. Talking CouchDB API to it acts like another CouchDB instance in the distributed DB web.

Cheers,

~Owen

[Owen M]

Just saw this via Twitter:

http://www.breezejs.com/

Anyone have experience with it? Could solve the problems we are trying to address.

Cheers,

~Owen

[Ryan Zec]

On breezejs, I got this in my google+ feed today:

http://www.codeproject.com/Articles/528262/Data-with-Angular-js

--

[Steve Shaffer]

Looks like at least one person was able to make it happen with Breeze

http://stackoverflow.com/questions/13239204/a-data-persistence-library-for-angularjs

(I think that's what he meant)

Taking this one step further, imagine if one added WebSockets or something like the GAE Channel API in between Breeze and the server for server-to-client communication.  You'd have an auto-updating, offline-capable fully client-side web app!

[Agustin Viñao]

Steve did you have any news about this?

I tried https://github.com/zefhemel/persistencejs and it goes ok if you have a few models, but is not good for large systems. I will try Brezze now to check it. 

[Steve Shaffer]

Agustin, well you know... the best of intentions.

But no, I haven't done anything concrete.  Keeping this conversation starred though for the first person who wants to do my work for me... :)

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/FTB-UswCzh8/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en-US.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Agustin Viñao]

I have my firsts two modules to work with this, webStorage and webStorageResourse. I will finish all tests this weekend and do a launch post to notify the group about my new code.

I hope I can finish all for a first version this week.

[Tobias Gesellchen]

@Agustin: did you have any progress or some code to show?

[Agustin Viñao]

I almost have it done (last week was a hell), i will try to get this done next weekend (I only can use my weekends to work on this). 

More or less, the code is two libraries:

https://github.com/agustinvinao/angular-webstorage (for storage purpose)

https://github.com/agustinvinao/angularjs-webstorage-resource (to replace resource).

THIS IS NOT DONE YET, I'm only using this to store the model but not to set things, because in my current project I only get data but not change it.

I will send a new update soon.

 

-- 
--

Agustin Viñao

Paradox: Life is a mystery. Don't waste time trying to figure it out. / Humor: Keep a sense of humor, especially about yourself. It is a strength beyond all measure. / Change: Know that nothing stays the same.

Web Developer - Ruby - Ruby On Rails - T.D.D.

m: agusti...@gmail.com

g+: http://profiles.google.com/agustinvinao

l: http://ar.linkedin.com/in/agustinvinao

t: http://twitter.com/agustinvinao

w: http://www.agustinvinao.com.ar

f: http://www.facebook.com/saltoaciegas

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[Kay]

I've recently created a Web Storage module that I believe is the most easy-to-use one to date. A typical example:

JavaScript

$scope.$storage = $localStorage.$default({
    x: 42
});

HTML

<button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button>

It's called ngStorage and can be found at https://github.com/gsklee/ngStorage with more explanations and live demos on Plunker.

Any suggestions and tips for improvements are welcome =)

[Steve Shaffer]

This looks awesome!  So glad you took the time to put together something solid for schmucks like me that don't have the skill!

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.

To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/FTB-UswCzh8/unsubscribe.

To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.

[Gias Kay Lee]

Hey Steve - thanks! The source is actually authored in a very straightforward manner so I'd encourage you to take a look - it's not some black magic ;)

--

Gias Kay Lee

gsklee.im

[Nick Porter]

This is incredibly cool, thanks so much for making this available!

[Christophe HOARAU]

Hi,

This is really great.

Could you please help me on storing ngresources with ngstorage? It works fine as long as I don't reload the full page. When retrieving a stored ngResource after a page refresh it does not restore functions so I can't use ngResource functions anymore like $save. But it works fine as long as I don't refresh the page. I really don't know why.

Maybe I'm wrong to try to store ngResource, do you have another suggestion in order to be able to store data and then sync easily ?

Thanks.

[Kay]

Hi Christophe,

Since you can only store strings within Web Storage, everything is parsed into a JSON and that's why the functions were lost.

While function storing may be added as a new feature in the future, for the time being the best bet is to store the collection (array of objects) you retrieved from the backend into the Web Storage, not the `$resource` object itself.

Hope this helps! :P 

[Christophe HOARAU]

Thanks.

That's what I thought.

---

Yours Sincerely/Cordialement
Christophe HOARAU

--