Js il 2013 breeze.js

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Yaniv ArditiCTO, Dynamics Divisions

E4D Solutions Ltd.yaniv@e4d.co.il

http://blogs.microsoft.co.il/blogs/rdt/

Israel JavaScript Conference

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Agenda ? Query data Client side Caching Track changes Resources Q&A

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

What’s ? JS library aimed to manage data in rich client

applications

Implements the Open Data Protocol (OData) query standard

Ships with adapters for the ASP.NET Web API and for OData

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Comm

unication

DAL

UI

BL (MV*)

Offline Storage

Entities

Module Module Module

Server

You are here

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Why ? It’s free Simplify data query tasks Manage client side data caching Support batch operations Support all modern browsers on desktop and

mobile devices (ECMAScript 5) Out-of-box support for Knockout, Angular, and

Backbone Well documented Has roadmap

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Query Data LINQ style syntax Execute query asynchronously with a Promise Query related entities Flatten entity graphs Query server, cache, or both If a query can be expressed in OData syntax, it can

be expressed in Breeze

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Query Data

//define query

var query = breeze.EntityQuery().from("Customers")

.where("CompanyName", "startsWith", "C")

.orderBy("CompanyName");

//execute query

var manager = new breeze.EntityManager(serviceName);

manager.executeQuery(query)

.then(querySucceeded)

.fail(queryFailed);

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Query Data Breeze resolves this query into an HTTP GET

request formatted as an OData URIhttp://www.example.com/api/Northwind/Customers?$filter=startswith(CompanyName,'C') eq true&$orderby=CompanyName

EntityManager reshapes the result JSON data into entities and merges them into its cache

The Promise object forwards entities to the caller’s success callback

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Query Data

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Client Side Caching Cache entities locally on the JavaScript client Query client Cache, Server or both Navigate among entities in cache

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Client Side Caching/* Query the server, cache, or both */var query = breeze.EntityQuery("Customers");

// execute query asynchronously on the servermanager.executeQuery(query).then(querySuccess).fail(queryFail);

// execute query synchronously on local cachevar customers = manager.executeQueryLocally(query)

// fetch customer by id from cache (if found) or remotelyvar checkCacheFirst = true;manager.fetchEntityByKey("CompanyName", 42, checkCacheFirst).then(fetchSuccess).fail(fetchFail);

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Client Side Caching

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Track Changes Breeze Entities are self-tracking – they manage

their own state via entityAspect.entityState Refresh an entity to its current state on the server

or revert changed entities to their original values Get notifications about the entities that enter,

leave, and change in cache

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Track Changes Examine entity state via

entityAspect.entityState

Respond to entity property change via entityAspect.propertyChanged event

Respond to change validation errors via entityAspect.validationErrorsChanged event

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Track Changes/* Change tracking */// save all changes (if there are any)if (manager.hasChanges()){ manager.saveChanges().then(saveSucceeded).fail(saveFailed);}

// listen for any change to a customercustomer.entityAspect.propertyChanged.subscribe(somethingHappened);

// listen for validation errorscustomer.entityAspect.validationErrorsChanged.subscribe(updateValidationUI);

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Track Changes

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Resources Breeze central

http://www.breezejs.com

Breeze SDKhttp://www.breezejs.com/sites/all/apidocs/index.html

Trouble Shootinghttp://stackoverflow.com/questions/tagged/breeze

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

Thanks

Yaniv ArditiCTO, Dynamics Divisions

E4D Solutions Ltd.yaniv@e4d.co.il

http://blogs.microsoft.co.il/blogs/rdt/

Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

www.js-il.com

18.6.13