What Breeze can do for You
Right about now you are wondering what Breeze brings that you can’t do on your own. Right about now you are wondering why you should bother learning another technology. Right about now you are wondering if you should continue to read this post. If you do, you won’t be sorry. Breeze is that valuable to rich web apps.
Remember Upshot?
You may recall a library that the ASP.NET team started a while back called Upshot.js. Upshot had a lot of promise for rich data management, but was dropped due to resources. That left the door wide open and in came a Breeze. Breeze does quite a bit, including making all entity properties observable (for Knockout), but for this post let’s focus on the features below as they are proof enough that you should take it seriously:
Learn more about Durandal and these topics from my beginner level SPA JumpStart course for Pluralsight, available now.
Separation
I choose to use separation patterns. So my data logic goes in a datacontext module in JavaScript. It exposes that data logic to the view models or controllers on the client. I slide Breeze right inside of the datacontext and expose a simple API so my viewmodels and controllers can share the datacontext. This makes it easy for the viewmodel to call for data doing something like datacontext.getCustomers or datacontext.Save.
Caching and Sharing
Let’s say you have an app with customer data. You may show customer information on views for a customer list, customer details, orders, sales, reports, and more. If you change a customer’s name or other information in one view, you expect it to ripple throughout the app. If you get the customer data in each viewmodel and store it separately, this becomes problematic. Sure you could use events to communicate with them all, but then you are storing that customer data in several places: not very DRY.
Breeze helps cache the customer data the first time you get it. Then when you go to another view that needs that data, Breeze supplies it. By wrapping this all in the datacontext, you have one place to go for your data. If you update the customer, Breeze has 1 copy of it and all places that point there are updated. Pretty slick!
Easy Queries
A library isn’t valuable unless it’s you can use it easily. Who wants to maintain something convoluted? Not me. Words can’t say how easy it is to query Breeze. So let’s just look at some examples.
var query = breeze.EntityQuery
.from("Customers")
.where("CompanyName", "startsWith", "A")
.orderBy("CompanyName");
var promise = manager.executeQuery(query)
.then(querySucceeded)
.fail(queryFailed);
This code creates a query that gets customers whose company name starts with the letter A and orders them by the company name. Then the query is executed against the remote data service and the data is returned through a promise. Pretty simple and self-explanatory.
Object Graphs
Real apps use object graphs. Real apps need to navigate between the entities in an object graph (both parent-child and child-parent). Real apps can be difficult. Breeze can retrieve object graphs and make it easy to navigate their relationships. Go from customer to one of their orders to one of the order details, and then back up if you like. Grab an entire object graph in one call or just get the top-level. Whatever you need, it’s pretty great to be able to get parts of or entire object graphs as needed.
Breeze allows you to connect objects on the client that you retrieved in separate calls, too. For example, go get a list of sales people objects (for customers). Breeze caches the sales people entities. Then go get a list of customers and their orders and Breeze caches those too. breeze also sees that the customer objects have a salesperson. We already have the sales people in cache so Breeze connects the entities and allows you to navigate between them. So as you get the data Breeze connect them in its cache.
Knockout and Angular
Breeze is built to adapt to other frameworks. So if you want to use Angular, Knockout, or Backbone you are in luck: Breeze is very happy to work with all of those. Out of the box Breeze works with Knockout, but you can change the adapter setting and switch to using Angular or Backbone. This gives Breeze a big advantage for future proofing in case you want to use one of these frameworks now and in the future choose a new popular framework.
Here is an example of getting employee data with Breeze and data binding the resulting entities using Knockout.
// bound to employees from query
manager.executeQuery(breeze.EntityQuery.from("Employees"))
.then(function(data){
ko.applyBindings(data);
});
Here is an example of getting employee data with Breeze and data binding the resulting entities using Angular.
// bound to employees from query
manager.executeQuery(breeze.EntityQuery.from("Employees"))
.then(function(data) {
$scope.employees = data.results;
});
Need SPA Support?
Want someone to have your back? The folks who make Breeze licensed it with an MIT license. They also offer support and consulting services for building a SPA with Breeze using technologies such as Durandal, Knockout, Backbone and Angular. IdeaBlade has been in the rich data business for a decade and has a great track record in this space with various other products. Breeze is their answer to the JavaScript and web space. So if you need support for your project, check out your options here.
What Else?
Do you want to save entities to local storage and later pull them back into Breeze? No problem. Do you want to query locally first and if the data is not there go to the remote service? No problem. Do you want the client to tell the server to do server-side paging and filtering? No problem! Breeze can do quite a lot and has saved me tons of code in my apps. I highly recommend checking it out.