54163

Ember Data Sync - LocalStorage+REST+RealTime+Online/Offline

Question:

We have a combination of requirements in terms o data access.

<ul><li>Pre-load some reference data. </li> <li>We need reference data to survive browser restarts instead of just living in memory to avoid loading it all the time. I'm currently using the LocalStorageAdapter for that. </li> <li>Once we have it, we would like to sync changes (polling or using Socket.IO in the background and updating the LocalStorage could do the trick)</li> <li>There're other models that are more transactional, where we would need to directly go to the Server and get/save them. It would be nice to use something like the RESTAdapter for that. </li> <li>Lastly, there're some operations that should work off-line and changes should be synced later. </li> </ul>

To make it more concrete:

<ul><li>We pre-load vendor and "favorite products" into Local Storage. We work offline with those. </li> <li>We need to sync server changes to vendor and product information. </li> <li>If they search the full catalog, that requires them to be online. </li> <li>When offline, we need to allow users to add something to their cart or even submit and order. We would like to queue this action and submit it when they have an Internet Connection. </li> </ul>

So a few questions are derived from this:

<ul><li>Is there a way to user RESTAdapter in combination with LocalStorage?</li> <li>Is there some Socket.IO support? (Happy to do this part manually)</li> <li>Is there Queueing support? Ideally at the Ember-Data level. </li> </ul>

I know we will have to do a lot of this manually and pull together the different lego pieces, but I wanted to ask for some perspective from experience Ember devs.

Answer1:

You definitely can do this. Like you said you're going to need to do a lot of lego pieces to put it all together.

You'll need to take the RESTAdapter and LSAdapter and create a hybrid. We've done something a little similar at my work, but it only goes one way (from server to client, not reverse).

That being said, I'd just like to pose a few questions:

<ol><li>

How much do you plan on storing in localStorage, and do you have an eviction plan in place? Local Storage is generally small for most browsers, though the implementation is the same across most browsers (not implemented until IE8). IndexedDB gives you a much larger chunk of space, though implementation isn't available until later versions of IE.

</li> <li>

Depending on performance needs, I'd recommend storing localStorage first, then attempting to persist to the server, if that works pop from localStorage, if it doesn't leave it in there for your adapter to attempt at a later date. (I'd look into using Ember's schedule or scheduleOnce or a slew of other convenient helpers that work within the run loop, <a href="http://emberjs.com/api/classes/Ember.run.html#method_schedule" rel="nofollow">http://emberjs.com/api/classes/Ember.run.html#method_schedule</a>).

Called by the store when a newly created record is `save`d. It serializes the record, and `POST`s it to a URL generated by `buildURL`. See `serialize` for information on how to customize the serialized form of a record. createRecord: function(store, type, record) { var data = {}; var serializer = store.serializerFor(type.typeKey); serializer.serializeIntoHash(data, type, record, { includeId: true }); // build up a model that knows the url, the method, and the data to post // store it to local storage in some queue to save // schedule it to save to server later, keep track of the record since you'll // need to update the record with new information later that could come down // from the server return this.ajax(this.buildURL(type.typeKey), "POST", { data: data }); }, </li> </ol>

Honestly I think the most difficult thing you might experience will be how you handle ids when you don't really save it to the server. Good luck

Recommend

  • Additional paypal fee on Woocommerce checkout page
  • Save new value to Laravel session array
  • How to show “regular price” instead of a “discounted price” on mini-cart (Woo)
  • What is the Performance, Safety, and Alignment of a Data member hidden in an embedded char array in
  • Original method still getting called in Moq even after CallBase = true/false
  • Renaming class causes IBOutlet connection to fail
  • How do i do the following curl command in Java
  • Submission of new app with iAds
  • How to remove left and right margins from all wrapped rows in flexbox (without nth-child or js)
  • Error “Reflect.defineMetadata” while trying to load a transient web worker
  • Organizing large javascript files [closed]
  • Spring Integration Bridge with poller not working as expected for JMS
  • Application bar icon text length
  • How to make Twilio api Post request with the help of AFNetworking?
  • what makes a request a new request in asp.net C#
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Implementing “partial void” in VB
  • Sending HTML Form Data to Spring REST Web Service
  • Check for zero lines output from command over SSH
  • nonblocking BIO_do_connect blocked when there is no internet connected
  • Sequential (transactional) API calls in angular 4 with state management
  • Button click event not firing in jQuery
  • Marklogic : Query response time is very high
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • JSON response opens as a file, but I can't access it with JavaScript
  • MailKit: The IMAP server replied to the 'EXAMINE' command with a 'BAD' response
  • Breeze - Deleted Items nav properties bug
  • req.body is undefined - nodejs
  • javaw.exe and eclipse startup problems
  • Menu Color Fade on Hover with Jquery
  • Javascript Callbacks with Object constructor
  • what is the difference between the asp.net mvc application and asp.net web application
  • Display Images one by one with next and previous functionality
  • Matrix multiplication with MKL
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • need help with bizarre java.net.HttpURLConnection behavior
  • Authorize attributes not working in MVC 4
  • Busy indicator not showing up in wpf window [duplicate]
  • Python/Django TangoWithDjango Models and Databases
  • Net Present Value in Excel for Grouped Recurring CF