MvvmStack for WinJS: Services persistence

Corrado Cavalli
Corrado Cavalli
Published in
2 min readMar 11, 2013

While refactoring MvvmStack for WinJS code i noticed that I did not show how to persist the state of the services when the app get suspended, so i checked in a new version that persist the data contained inside imageService.js (in a real world app, the data will probably come from a remote server).

The strategy I use is to let the services that need to keep their state add themselves to a services collection exposed by applicationControllerBase object that is passed to each service instance:

(function (winjs, applicationController) {
var images = [];
var cachedId;
var imageService = {
load: function (id) {
return new winjs.Promise(function (c, e) {
//Returns cached images when available
if (cachedId == id && images.length > 0) {
c(images);
} else {
cachedId = id;
if (id == 1) {
images = [
{ uri: "/images/data/Photo1.jpg", title: 'Photo 1' },
{ uri: "/images/data/Photo2.jpg", title: 'Photo 2' },
{ uri: "/images/data/Photo3.jpg", title: 'Photo 3' },
{ uri: "/images/data/Photo4.jpg", title: 'Photo 4' },
{ uri: "/images/data/Photo5.jpg", title: 'Photo 5' }];
} else {
images = [
{ uri: "/images/data/Photo6.jpg", title: 'Photo 6' },
{ uri: "/images/data/Photo7.jpg", title: 'Photo 7' },
{ uri: "/images/data/Photo8.jpg", title: 'Photo 8' }];
}
c(images);
}
});
},
serialize: function () {
return {
images: images,
id:cachedId
};
},
hydrate: function (state) {
images = state.images;
cachedId = state.id;
}
};
winjs.Namespace.define("Demo.Services", {
imageService: imageService
});
applicationController.services.push(Demo.Services.imageService);})(WinJS, Demo.Application.ApplicationController)As you see in code above the service also exposes the same methods serialize and hydrate we met when speaking about viewmodels that serialize and deserialize service state to/from a json object.Once we registered and added these functions, the task of invoking them when needed is contained inside Mvvm Stack’s common peristenceService.jsHere’s a fragment of serializaion code://De-Serializes services that implements serialize function
var j = 0;
applicationController.services.forEach(function (service) {
if (service.hydrate !== undefined) {
var serviceKey = "service" + j;
var serviceState = winjs.Application.sessionState.app[serviceKey];
service.hydrate(serviceState);
}
});
No rocket science, but it makes stack more complete and usable in real production code.

--

--

Corrado Cavalli
Corrado Cavalli

Senior Sofware Engineer at Microsoft, former Xamarin/Microsoft MVP mad about technology. MTB & Ski mountaineering addicted.