Single Page Apps JumpStart

SPA Templates
In this module we're going to kick off how you can get started by creating a spa by using some of the ASP. net spa templates Visual Studio 2012. We'll also explore some NuGet packages that you can install to get going with the spa Visual Studios in the year 2010 or '12. The goal of these templates and of this module is to show you some of the quickest ways you can jump start your development. There are a variety of templates available. So when you download these and install them and you do file, new project, for ASP. MVC you can start off very quickly and get a spa that is fully functional. So in this module we'll talk a little bit about each of the templates and why they exist and what they are trying to achieve. What some of them offer, because they do have different features that you can take advantage of. And also how they differ. There are different kinds of templates that are at your disposal. So let's exam these different templates and along the way I'll offer tips and my recommendations about which templates might be right for you.

SPA from Scratch
The ASP. NET spa template are a nice starting point and there's a variety of them we can choose from. But we're here to teach spa from the ground up. So in this module I'm going to show you how you can create a spa from scratch starting from blank canvas. We're going to create a new project from visual studio and create a blank antiweb project and add everything that we need to use. Now we're going to start this out by giving some service side components because we're going focus on the client code. But everything in the client we're going to build up and explain as we go. And I'll be building on top of this blank canvas and showing you how you can add things in there using NuGet by pulling some server packages and some client side packages, some styling and some other features so we can basically get the whole project going so we can add our custom code. And all this is on the journey to creating our code camper jumpstart. So let's begin.

Foundations and Adding a View
When I build applications I like to make sure that the foundations are in place so that when I add one screen, two, or ten screens, or more, that I can easily add those screens on in a consistent manner. Take advantage of code we use in modularity. So, in this section, we're going to talk about how we can add a view to the application and get all of that. The goal of this section is to make sure that we can create a speaker's view. So, we have our application from the previous module where you got the core structure in place and now, we're going to go add and create a new view that's going to list all the speakers in our application. Once we got our data, we're going to bind it up to the screen and make sure that we can display for the images and the names of the speakers. We're also going to have to have a technique for getting data. We might be getting speakers in more than one location so we want to-- really want to make sure we encapsulate that logic. By encapsulating it, we'll be creating these and separating them in different modules. The modules will really promote code reuse. And we want to make sure the scales, 'cause anytime you load an application with one screen in it, eventually when you go to the second screen, or third screen, or hundredth screen, you want to make sure that all those screens can follow the same kind of patterns. So, how can we do that? That's what we're going to talk about in this section as I build the speakers view.

Navigation with Durandal
One of the defining characteristics of being a SPA is the time to the navigation that's build into the browser for the URL and the forward and back buttons. And the goal is to keep the user in the clients so that they don't have to make round trips anymore often than they need too. We already have a framework in place with Durandal where we can build more Views and ViewModels and time of that navigation. So in this module, let's create some more Views and ViewModels and do that. We have a speaker view already but we want to add a session's view and once we have more than one view, we need a way to navigate between those two. So that's the goal of this module. We'll add that view navigation using Durandal, will be define in the navigation router to allows us to go between sessions and speakers and the other views that we want to create. Of course, we'll have to define how do we create that navigation UI and then bind that UI to the structure that's going to allow us to toggle between these different views. We'll be adding the Sessions View and the ViewModel and then we'll show how to do transitions from one page to the other. We're already using Durandal to do that View/ViewModel composition so we'll use that again and that good news is that Durandal also supports routing and transitions. So we can just use Durandal to create the new view for sessions and then create a navigation structure to toggle between the two. So let's go make it happen.

Getting Data Efficiently
Currently our spot can get data using breeze but knowing how to get data and knowing when to get it and what properties of that data to get are different things. So, in this module, we'll talk about how to get data efficiently. One of the goals we have is to make sure that our application runs fast and performs as well as it can. One of the ways we're going to get there is by fetching data only as needed in the application. By only getting the information that we need and see on screen as we actually need it on demand, we can make the users experience much better and make the application perform more smoothly. So, how do we get there? One way to do is, is to limit the data for all the list views that we have. When we're showing a summary review or our list view such as all the sessions or speakers, we don't show all the data points so let's not go get them all. And by getting less data that will help our application move little swifter but there we'll be a time where we need that data such as when we create like a detail review for a session. At that point, we're going to need all the data points for a particular session for one of them. So, at that point we can go get just that detail information for that particular session then merge it with the full list. So, this technique is going to allow us to only get the information we need as we need it and we go to a full session, that's when we go and request more details work one particular session at a time. So, in this module, we'll learn how to write leaner queries, make the application more efficient and create a detail screen.

Saving and Checking for Changes
We've mastered the art of getting data and showing them screens, the next step is to be able to edit the data, detect changes and be able to save it to the database. Our goals for this module can be allowing the editing of the data and saving the data on the screen. So we're going to change the Knockout Bindings so we can make them editable for text areas, text boxes, and other input elements like Dropdowns. And then we're going to be able to cache the Lookup information and Detect Changes when the user makes a change on the screen. So those change detections is going to change the state of the buttons on the screen and it's also going to alert the user with a little asterisk that some kind of changes had been made. And of course we have to wire up the code to save the changes back to database. And we'll also wire up some features so that we can detect when a user is trying to leave the screen in the middle of a change. So we can intercept that navigation and ask the user, "What would you like to do with this change data, save it or just leave and cancel? " So let's jump in and re-factor to this code.

Adding and Deleting Data
Our spa is really rounding out so we can get data and get details. We even have updating of data, and change tracking. But it's time to add Adding and Deleting of data in here so we have a full CRUD experience. So the story of this module is we're going to do inserting and deleting of data. And we'll create new custom navigations, so we can create add session menu item. And this is a nice tip because not always do you want have all the bottoms across the top. Maybe you want to create custom menu multiple levels deep or move menus all around the screen. So I'll show how you can customize those, and we'll hook ride into Durandal's navigation and router. And then we're going to create new entities on the Add New Session screen. And we'll put the logic in here so we can handle all the difference between inserting and updating. And one of the new ones when we add a session is we want to replace that screen and its routing history in place with the edit session. We'll show why that's important and how can you do that. Now that we have inserting and updating, we'll have to code the logic to delete the session from the application. We want to make sure we delete safely. And we'll explain what that means and how can make sure the rules are in place for it. And then finally, we'll take a closer look at how we can intercept navigation when we're inserting, updating, and deleting. By the end of this module, we'll add all the CRUD to our spa. And CRUD mean sound bad but it's actually a very good thing. Most for applications needed. In this case CRUD stands are create, reading, updating, and deleting. Let's go create the CRUD, by putting in the creates and the deletes. ( Pause )

Validating Data
When creating an application it's really important to make sure that valid data has been entered into the system and you want to put those guards in the server and in the client and the client to make it easier for the user and user experience and on the server so you always have the double safe guard. So in this module talk about how we can add validation to the application. Let's start with the goals of our story, we want to be able to validate the data, that's key importance here, we make sure that the data entered is proper and it's not going to violate any rules that we have. Then we're going to want to notify the user that they might have missed something for example here the title was required on the admin. section and they have to select a track time slot room and a person so we can let the user know and give them a chance to make the corrections. Everybody loves something for free right, so we can get some free validation right out of the box by using breeze in our spa we'll show you how to do that with things like required fields. We can also provide custom validation where we define a rule that's specific to our business needs and then apply that to our spa so it lets the user know hey you need to take care of this. By the end of the module you'll know how you can add your own validation to your own spa.