Building Data-Centric Single Page Apps with Breeze

This course covers how to use the Breeze.js JavaScript library and server support to build rich, data-centric HTML Single Page Applications or highly interactive pages within a larger web application. You learn the end-to-end capabilities of the Breeze library and how to use them.
Course info
Rating
(234)
Level
Intermediate
Updated
Oct 2, 2013
Duration
6h 6m
Table of contents
Course Introduction
Breeze Overview
Breeze Web APIs
Breeze Query Basics
Breeze Advanced Querying
Editing and Saving Changes
Working with Entities on The Client
Validation Part 1
Validation Part 2
Description
Course info
Rating
(234)
Level
Intermediate
Updated
Oct 2, 2013
Duration
6h 6m
Description

If you are building an HTML Single Page Application, hybrid HTML installed mobile app, or just a web page that presents a lot of data that the user will be editing, you need to be able to retrieve and manipulate data on the client side in JavaScript. You'll need to query web services to retrieve the data for presentation, let the user edit the data, and push those changes to the server. And if you are going for a rich, stateful, interactive user experience, you won't want to be doing full page post backs to get that done. To work with the data on the client side, you'll need change tracking and validation of edits, the ability to filter, sort, and page data from the client side. You might need to work with that data offline as well. Breeze.js is a JavaScript library that does all of that for you. Breeze lets you quickly develop a good layered architecture on the client side in JavaScript, acting as a data layer, repository, or data gateway for your client side code. This course will walk you through all of the core features of Breeze. You'll learn how to execute queries from your client side JavaScript to retrieve data for presentation, work with the cached data on the client side, enable rich editing scenarios, handle changes to the data client side, validate that data, and send changes back to the server side. You'll see how to set up the services using ASP.NET Web APIs and how to work with OData services.

About the author
About the author

Brian Noyes is CTO and Architect at Solliance, an expert technology solutions development company. Brian is a Microsoft Regional Director and MVP, and specializes in rich client technologies including XAML and HTML 5, as well as building the services that back them with WCF and ASP.NET Web API.

More from the author
WPF Productivity Playbook
Intermediate
2h 57m
22 Aug 2016
More courses by Brian Noyes
Section Introduction Transcripts
Section Introduction Transcripts

Breeze Overview
Hi there this is Brian Noyes and in this first module I'm going to give you the 10, 000 foot overview of what Breeze is all about. We'll talk about the application architecture that it fits into, what the features are, and show you end to end what the Breeze coding experience looks like. First thing I'm going to dive into is the application architecture of a single page application and how it relates to other application architectures you might be more familiar with. Breeze's suite SPA is in a single page application or SPA but as I'll talk about that's not the only kind of application where you can use Breeze. It's just where you'll be able to get the most out of Breeze. Next I'll go into the features of Breeze and kind of enumerate what it can do for you that we'll see in more detail throughout the rest of the course. I'll talk about how it relates to other JavaScript client libraries. When you're building SPAs and rich HTML applications these days you need a composition of multiple client libraries to support you to really provide a framework to build your application on. So I'll tell you how Breeze relates to some of the most common libraries that you'll use in conjunction with it. Finally I lined up this module with an end to end demo that gives you a sense of what the Breeze coding experience is like on both the client and server side, all of which we'll expand on in later modules in the course.

Breeze Query Basics
Hi there this is Brian Noyes and in this module we're going to go into some of the basics of doing Querying with Breeze. We'll learn about the querying patterns, code you need to write to execute a query, what kinds of queries are supported by Breeze, and basically how to shape your data from the client side telling the server side exactly what to give you back. So first we'll review quickly how you go about creating a Breeze EntityManager then we'll get into defining and executing your queries. Some of this you've seen in brief from in the module one demo but we'll start diving a little deeper here and make sure you know exactly what you need to do to start structuring your code for executing queries. Then we'll go through all the basic query operations that are supported by Breeze. We'll talk about each one in turn and demo them as well. We'll cover the select operator which allows you to do projection queries, this allows you to shape the data that comes back from the server and say you only want certain properties off the entities not all of the properties. And then we'll talk about Eager Loading queries, this is the case where you want more than just the top level collection if those objects in the collection have related entities you want to get those as well as part of the initial query. And that will cover all the basic querying capabilities and then in the next module we'll cover some more advanced nuances.

Breeze Advanced Querying
Hi, this is Brian Noyes and in this module we're going to cover a few more ways of querying from Breeze. Now, I call this module Advanced Querying, there's nothing particularly intricate or involved about the querying I'm going to show here, it's just more fine grain control from the client-side and some nuance that you probably won't do as often as the mainstream querying I showed in the last module. So, what we're going to go through here is first talk about being able to pre-fetch your metadata. Sometimes you want to go out and make sure the client-side cache of metadata is prepopulated, and that's important for several reasons we'll talk about. Then we're going to talk about querying by key, the ability to go get a single entity at a time as long as you know the key value you're going after. We'll talk about getting a bag of entities, meaning multiple collections in a single round-trip to the server, which is typically done for things like populating all your dropdown lists of look-up values. Then we'll talk about being able to pass parameters when you issue your service queries that go above and beyond the ones that get implicitly passed in the OData query syntax for things like, filtering, ordering, and paging. We'll talk in demo briefly of the concept of server driven queries, that fact that not everything can be accommodated through the OData query syntax, so sometimes you've got to do some of the heavy lifting on the server-side, and just target a custom method on that server-side from the client. We'll look at re-querying data, once you've retrieved it to the client-side, you may actually want to go and refresh it with whatever the current state of the server is, and you can do that by specifying individual or specific collections of entities that you want to update. Then we'll finish off by talking about local queries, the ability to query against the cache of entities once they've already been retrieved so that you don't have to make additional round-trips to the server, and we'll look at both synchronous and asynchronous versions of those. So, let's dive right in.

Working with Entities on The Client
In this module I'm going to get you familiar with a number of other things you can do when working with entities on the client-side. We'll look at checking state and managing that state, we'll look at property change notifications, extending entities, and importing and exporting data from the cache. So, first thing we'll look at working with entity state, and we'll talk about the kinds of transitions that are available, what the available states are, what normal transitions between those states are, and then we'll demo how you can override some of this and force the state to change when you want it to. Next we'll talk about extending entities; sometimes you want additional properties or methods that are only known about on the client-side, possibly to support your presentation, but you want those to exist on the entities that are normally being produced by Breeze through a query or through a creation in Breeze. So, we'll talk about how you go about doing that using some standard JavaScript patterns and working it in with Breeze as well. Next we'll talk about handling property changes, there's a couple of different levels you can this in Breeze. You can do it at the entity level or more centrally against the EntityManager. We'll see how to handle both of those in some scenarios where you might do that. Finally we'll finish off with importing and exporting data from the cache. You can basically reach into the cache and get everything that's in there, or portions of it, turn it into a serialized string representation, and then put that wherever it's appropriate for you such as using the offline storage capabilities of an HTML 5 compatible browser.

Validation Part 1
Once you start editing data in a data-intensive, single-page application Validation becomes a very important concern. The good news is Breeze has some great capabilities here built in for doing both client-side and server-side Validation. Enough features that I need to break it up into two separate modules. So in this module we'll cover Part 1, the basics about Validation, and in the next module we'll get into some more detailed aspects that go beyond the basics. First, we're going to talk about validation in general and we'll talk about why you want to do it, where you want to do, and how you go about doing it with Breeze. Next, we'll talk about automatic validation, which is the way Breeze can automatically create certain kinds of rules for you, based on the metadata and invoke those rules at strategic times in the life cycle of working with that data and editing it. Next, we'll talk about Data Annotations, which are a part of the. NET framework that you can leverage if you're building your services using ASP. NET Web API and Breeze controllers. Then we'll finish off this module talking about how you go about using some of the built-in, client-side validation rules that Breeze includes that don't automatically get created. You'll see how you can create instances to these rules, attach them to properties, and make sure they get evaluated and show errors to the user. So let's dive right in.

Validation Part 2
In this module I'll pick up where I left off in the last module on Validation. And we'll dive in to some more advanced aspects including manually invoking Validation, creating custom client and server-side rules, and using Validation events. When I get done with this module you should know everything you need to know about Validation and Breeze to build out powerful, data-centric applications. So first in this module I'm going to cover manual validation. How you can manually invoke validation at any point in your code so that you have deterministic points in the code where you know the state of the entity with respect to validation. Next I'll get into how you can create custom client-side validation rules in Breeze and attach them to the properties of your entities. So whatever crazy, wacky business rules you may have that need to be enforced on the client-side you'll see how you can do that. Next we'll talk about validation events. How you can be notified whenever the validation errors associated with entities change. And then we'll finish off with how you can create custom server validation rules that get executed on the server side, but still communicate the right information to the client-side so that Breeze can provide you those entity errors. So let's dive right in.