Caching and Synchronization in Flex
1
Zachary PinterSenior DeveloperEffectiveUI360Flex
The ProblemCommon application data shown in multiple views, being manipulated by multiple users at roughly the same time.
2
GoalsFetch entities only once and only as needed.
One definitive instance of a server-side entity.
Update all relevant views when the server sends notice that an entity has changed.
Server-side agnostic.
3
What’s the strategy?Store all fetched entities in a single cache (Dictionary).
Bind the views to the cache.
4
What about memory use?
5
public class WeakReference{ private var dic:Dictionary; public function WeakReference(obj:*) { dic = new Dictionary(true); dic[obj] = 1; } public function getValue():* { for (var item:* in dic) { return item; } return null; }
}
Text
Allows cache values to be garbage-collected if they’re not being referenced anywhere else.
The CacheHow do we add an entity to the cache?
6
public class EntityCache{ public function updateEntity(entity:BaseVO, ...):BaseVO { //... }}
Recurse through properties
UserVO id: 1 firstname: “Zachary” lastname: “Pinter” address: AddressVO id: 2 line1: “4444 W 44th Ave” city: “Denver” state: “CO”
7
EntityCache 1: UserVO 2: AddressVO
Adding a user to the cache also adds its address.
Recurse through properties
UserVO id: 1 firstname: “Zachary” lastname: “Pinter” addresses: [ AddressVO id: 2 label: “home” line1: “4444 W 44th Ave” city: “Denver” state: “CO” AddressVO id: 3 label: “work” line1: “5555 W 55th Ave” city: “Denver” state: “CO”]
8
EntityCache 1: UserVO 2: AddressVO 3: AddressVO
Arrays behave the same way
Finding an object’s propertiesSpring Actionscript (formally Prana)
http://www.pranaframework.org/
9
var type:Type = Type.forName(classname); for each (var accessor:Accessor in type.accessors) { if (accessor.isStatic == false && accessor.access.name == "readwrite") { result.push(accessor.name); }}return result;
Finding an object’s propertiesSource generator
10
public class UserVO extends BaseVO { public var username : String; public var firstname : String; public var lastname : String; public var address : AddressVO;
override public function getProperties():Array { return super.getProperties().concat("username","firstname","lastname","address"); }}
Updating the cacheWhat if the entity is already in the cache?
11
EntityCache 1: UserVO(instance A) id: 1 firstname: “Robert” lastname: “Smith”
EntityCache.updateEntity( UserVO(instance B) id: 1 firstname: “Bob” lastname: “Smith” )
EntityCache 1: UserVO(instance A) id: 1 firstname: “Bob” lastname: “Smith”
Copy the properties from instance B into instance A
Leave instance A in the cache
Discard instance B
Updating the cacheWhat about arrays?
12
EntityCache UserVO id: 1 firstname: “Zachary” lastname: “Pinter” addresses: [ AddressVO(instance A) id: 2 label: “home” line1: “4444 W 44th Ave” city: “Denver” state: “CO” AddressVO id: 3 label: “work” line1: “5555 W 55th Ave” city: “Denver” state: “CO”]
EntityCache.updateEntity( AddressVO(instance B) id: 2 label: “home” line1: “3333 W 33rd Ave” city: “Denver” state: “CO” )
Updating the cacheWhat about arrays?
13
UserVO id: 1 firstname: “Zachary” lastname: “Pinter” addresses: [ AddressVO(instance A) id: 2 label: “home” line1: “3333 W 33rd Ave” city: “Denver” state: “CO” AddressVO id: 3 label: “work” line1: “5555 W 55th Ave” city: “Denver” state: “CO”]
Since we update the existing instance, all references to it will see the update.
Updating the CacheThe flip side
14
UserVO id: 5 firstname: “Zachary” lastname: “Pinter” addresses: [ AddressVO(instance B) id: 2 label: “home” line1: “6666 W 66th Ave” city: “Denver” state: “CO” AddressVO id: 3 label: “work” line1: “5555 W 55th Ave” city: “Denver” state: “CO”]
EntityCache AddressVO(instance A) id: 2 label: “home” line1: “5555 W 55th Ave” city: “Denver” state: “CO”
Your cache already has an AddressVO with id 2 in it, and you add a new UserVO to the cache that references an updated instance of the AddressVO
Updating the Cache
15
UserVO id: 5 firstname: “Zachary” lastname: “Pinter” addresses: [ AddressVO(instance A) id: 2 label: “home” line1: “6666 W 66th Ave” city: “Denver” state: “CO” AddressVO id: 3 label: “work” line1: “5555 W 55th Ave” city: “Denver” state: “CO”]
EntityCache AddressVO(instance A) id: 2 label: “home” line1: “6666 W 66th Ave” city: “Denver” state: “CO”
The AddressVO in the cache is updated and the AddressVO in UserVO.addresses is replaced with the instance from the cache.
Updating the Cache
16
if (obj is Array) { var arr:Array = obj as Array; for (var i:int=0;i<arr.length;i++) { if (arr[i] is BaseVO) { var res:BaseVO = updateEntity(arr[i] as BaseVO,...); if (res != null) arr[i] = res; } }}
Code looks something like this...
Updating the Cache
17
if (obj is ArrayCollection) { var ac:ArrayCollection = obj as ArrayCollection; ac.disableAutoUpdate(); for (i=0;i<ac.length;i++) { if (ac.getItemAt(i) is BaseVO) { var res:BaseVO = updateEntity(ac.getItemAt(i) as BaseVO,...); if (res != null) { ac.setItemAt(res,i); } } } ac.enableAutoUpdate();}
ArrayCollection’s are slightly trickier
18
Now that we’ve added an entity to the cache...
The CacheHow do we get an entity?
What happens if we ask for an entity that isn’t in the cache?
19
public class EntityCache{
public function getEntity(id:String):EntityWrapper { //... } }
EntityWrapperWhen requesting an entity, a wrapper object is returned.
If that object is in the cache, EntityWrapper.entity will have a value.
If the object is not in the cache, EntityWrapper.entity will be null and a call to fetch the entity will be queued.
20
[Bindable]public class EntityWrapper{ public var entityId:String; public var entity:BaseVO; public function EntityWrapper(id:String) { entityId = id; } }
Using the Cache
21
<mx:Label text="Username: {userWrapper.entity.username}"/>
userWrapper = cache.getEntity(userid.text);
Using the Cache - List RenderersBenefits‣ Faster initial query since you’re only grabbing the id’s‣ Rows are lazy-fetched as you scroll
Drawbacks‣ Sorting has to be handled by the server
22
Using the Cache - List RenderersWhat’s the code for the item renderer look like?
23
override public function set data(val:Object):void { if(val != data){ if (!val) { wrapper = null; } else { wrapper = cache.getEntity(val); } super.data = val; }}
Serverside ConsiderationsWhat does this require of your backend infrastructure?‣ Globally unique keys (or a way to fake it)‣ Ability to get an entity by its key‣ Ability to query for entities and only return their keys (used by lazy lists)
Perks:‣ Versioned entities‣ Get multiple entities in a single call by passing multiple keys
24
Dictionary KeysOnly one cache, need to prevent collisions
Some Options:‣ Globally unique sequence across all tables (UserVO with id 1, AddressVO with id 2)‣ UUID’s (great for generating new id’s flex-side)‣ Combine type with id (“UserVO-1”, “AddressVO-1”)
25
26
Demo
27
Questions?
Thanks!Zachary Pinter
http://github.com/zpinter/cache-synchttp://slideshare.net/zpinterhttp://zacharypinter.comhttp://effectiveui.com
Twitter: zpinter
28
