Single Page Apps with HTML5, Web API, Knockout and jQuery

Learn how to create rich user experiences by building Single Page Applications with HTML5, jQuery, Knockout, and the ASP.NET Web API.
Course info
Rating
(1226)
Level
Intermediate
Updated
Aug 29, 2012
Duration
6h 25m
Table of contents
Getting Started with the Code Camper SPA
Technologies and Patterns of the Code Camper SPA
Data Models, Entity Framework, and Data Patterns
Surfacing JSON Data with ASP.NET Web API
Optimizing the Single Page
SPA Basics: Separating the Ravioli
Loading Views with MVVM and Knockout
Data Services on the Client
Navigation, Transitions, Storage, and Messaging
Saving, Change Tracking and Validation
Mobility and Responsive Design with CSS and LESS
Description
Course info
Rating
(1226)
Level
Intermediate
Updated
Aug 29, 2012
Duration
6h 25m
Description

Single Page Applications (SPA's) focus on delivering rich user experiences with significant client-side interactions using JavaScript, HTML5, and CSS. In this course I'll explore how to build end to end SPA solutions using data binding and MVVM on the client, data services for abstracted calls, navigation and routing, responsive design for mobility, and local storage. On the server, we will explore layered patterns, ASP.NET Web API for RESTful services returning JSON, and Entity Framework Code First for data access.

About the author
About the author

John Papa is a Principal Developer Advocate with Microsoft and an alumnus of the Google Developer Expert, Microsoft Regional Director, and MVP programs.

More from the author
Play by Play: Extending the Browser
Beginner
38m
30 Apr 2018
More courses by John Papa
Section Introduction Transcripts
Section Introduction Transcripts

Getting Started with the Code Camper SPA
Hi, my name is John Papa with Pluralsight. I'm very excited to share with you the Building Single Page Apps with HTML5, APS. NET Web API, Knockout and jQuery course. Quite a mouthful of a title but it covers quite a lot. So why am I so excited? Well, this is my favorite type of course because I get to share not just one or two specific technologies, but rather, a whole lot of great web technologies to create what is commonly called a Single Page App, also known as a SPA, that works across multiple devices and screen sizes. And along the way in this course, I'm going to dissect the apps' data layer, the web service layer, and the presentation layer and explain how it all works together, why it works, and how the choices are made to pull in all the technologies. By the end of this course, you'll be armed with the knowledge to build a Single Page App and enhance it to suit your needs.

Technologies and Patterns of the Code Camper SPA
In the previous module, we talked about what a SPA is. And we took a walk through an example of the SPA, the Code Camper Application that I'll be using throughout this course. We also talked about the different client technologies that we're using inside the Code Camper SPA. In this module, we're going to take a closer look at this solution structure of the Code Camper SPA, walk through how to create the projects and the solution from scratch. And then demonstrate a couple of tools and key resources that you can take advantage of, that I'll be demonstrating. Such as some responsive design and mobility features. So let's begin.

Data Models, Entity Framework, and Data Patterns
In the previous module, we took a look at the different technologies that you need to get started with the Code Camper application to build the SPA. In this section, we're going to specifically look at the data layer and how we build our models using ORM like the Entity Framework and some of the data patterns that we can use in building a data layer. We'll start up by talking about the different technologies that we use inside the data layer itself and then walk through how we create models, our models are our containers for our data. Then we'll go through the Entity Framework and its DbContext using the Entity Framework Code First and the different patterns that it provides. And we'll set that up and show how you can use that to save and retrieve data. And then we're going to walk through two patterns that we're going to use inside of our data layer. One is called the Repository pattern and the other is the Unit of Work pattern. And these patterns go hand in hand and they've been out there for many years and work many different technologies. We're going to use these to help abstract and simplify our data access to the Entity Framework and keep it decoupled from our web service layer. So with that, let's dive in.

Surfacing JSON Data with ASP.NET Web API
When building any application, getting the data from the server to the client then being able to pass it back from the client to the server, is really important. So in this module, we're going to take a look at how we can take advantage of the ASP. NET Web API to handle serving our data from the server up to the client and then back. And specifically, we're going to look at how we can do with JSON data. In the previous module, we looked at how we can create the data layer using the unit of work, repository, and entity framework code first. This section will look at how we can interface with that layer using the Web API and then communicate back up to the client. So the Web API is going to be the glue between our client code and our data layer. So we're taking a look at why we'd want to use the Web API, it's always good to start there. Next up, we'll be setting up the routes for the Web API controllers. The routes are important because they direct the traffic to and from the client to the server and back. They will be creating some API controllers of couple of different kinds and flavors, some of that handle request very simply, and others, they have a little more customized actions to them. And then, we'll be doing some customizations to the controllers so they can serve the data back the way you want to. Doing things like validation, or handling JSON requests. And after writing all of this code, it's good to show how we can test it. So, we take in a look at some different frameworks that you can use to test your Web API controllers. And with that, let's dive right in.

Optimizing the Single Page
In this module, we're going to take a look at how we can build the single page part of our SPA. We'll start with looking at the HTML for the SPA and what goes into that page itself. We have a single page that shows our shell of our application, it's called home. cshtml. We'll be looking at all the pieces they're going to create in that and making it HTML5 compliant. So we'll explore something called HTML5 Boilerplate which helps us get started and then how we link in our CSS and our JavaScript and all the code that we're writing. And then of course all the views that we're going to have in our application and navigation, we'll look at how those work. And we'll be using the ASP. NET Web Optimization tools to do bundling and minification so we can make less network request for our JavaScript and CSS files and those requests that have smaller content going across. And then we'll wrap up by customizing some of the optimizations for our Code Camper SPA. So with that, let's dive in.

SPA Basics: Separating the Ravioli
When it comes to time to start writing your code, your JavaScript inside your SPA, it's important to make sure you understand how you're going to organize the structure and how does the actual SPA start. We don't want a lot of spaghetti code where it's difficult to maintain or even to read or reuse. Instead, we'd like to take our JavaScript and break it up to the modules or as I'd like to call them raviolis so we can separate the raviolis and make it easier to read and understand. So in this module, we're going to talk about how do you start off that SPA. There's a concept that I'd like to call the bootstrapper which it kick things off. So how do we start that bootstrapper? What processes should it run? And then how do you organize the whole structure of that SPA? Then we get into how we organize the different pieces into modules and what modularity needs in JavaScript. And as your application grows, how do you manage those different modules as it become more numerous? So you have a lot more modules, they depend upon each other, you need to know which ones come first. You have to deal with things like dependency resolution and loading the scripts in certain orders. We're going to talk about that problem and how you solve it with tools such us Require. js which will help us get good code reuse and to do our dependency resolution for us. So we'll kick things of in this module by talking about where we start with the code to kick of the SPA and get running. Then how we can organize that code and make sure that the organization can grow and scale.

Loading Views with MVVM and Knockout
Now that we've seen how to kick start the application and break it up into modules, we're going to take a look at how we can load data into a particular screen and look at the views or HTML in our JavaScript which is in our ViewModels. We'll see how we can connect these two using data bindings with a tool called KnockoutJS. First we'll talk about these tools, KnockoutJS, and how it helps us with data binding between our views, our screens, and our views models or code. And then we'll talk about the different pieces that are on that view. We're going to breakdown the view for the favorite screen and walk through how each of those different models gets filled. Our models are our data. So we have things like event dates and filters and sessions on the screens. We're going to pick a screen and we're going to walk through each one of those sections and see how on the screen what the data is doing to be bound to it and then how the data gets bound under the covers with the JavaScript. And we'll walk back and forth so we can understand each of these pieces and how they work together. Then finally we'll go through walking through the entire ViewModel from activation all the way up until when the user sees all the data and see what happens when the View is actually cranked up, how it goes and gets its data, what kind of things it does to set up and then presents it for the user. And along the way we'll see a couple of other tips on how we can present some of the data using some special bindings. Let's dive right in.

Navigation, Transitions, Storage, and Messaging
In any application that has more than one screen, you have to manage navigation. This is no different with the JavaScript based application. So how are we going to manage this with the SPA? We could do the traditional technique if hitting the server and doing a page refresh, or we could just stay on the client. With the SPA based application, it's a single page app so you're staying on the client. So, we're going to focus on not hitting the server and we'll talk about some of the advantages and disadvantages of that, and how we can stand the client to build the SPA. So, we'll cover couple of different things. First, we'll talk about what's SPA navigation is and what are our goals? And how are we're going to achieve those goals? And then, talking about how we're going to do transits between in different views or pages in that SPA. While we have a single page, there's still navigation there to different views of information. How are we going to actually animate that? There are times that it's important to build or cancel navigation that a user has requested. We'll talk about that. And then, also how do you recall. We'll get into things like local storage and how we can save navigation state. So when a browser is close and we open, we can comeback to what the user left off. So in this module, we'll cover all this and more.

Saving, Change Tracking and Validation
( Silence ) It's time to take a look at how we can save data in JavaScript and HTML file-based applications. So we'll start up by taking a look at some strategies for saving data then we'll jump into some Change Tracking techniques that we can use and some plug-ins that will be helpful. We'll take a closer look at Asynchronous Commands and how we can use activity indicators on those. And we'll look at how we can activity indicators on those and we'll look at how we can insert update and delete data with both explicit and implicit saving. And finally, we'll wrap up with looking at how we can do validation both for JavaScript and HTML5 techniques. Before I start coding when I deal with saving in my data my applications I like to think about what the user is trying to accomplish. Do I need to manage change tracking at all and if I do, what should that involve? Should it involve disabling and enabling the buttons? And if I want to do that then maybe I also want to prevent it from leaving screens. Another option is do I want to deal with Explicit Saves or Implicit Saves. Explicit Saves mean I have a button. The user fills out the data and makes their changes then they have to press Save or Cancel before they can move on. Or, you can do a new wave which is the Implicit Save where as soon as they type in the information it automatically saves using on blur other techniques. And then it's good to have a plan for how to validate your data. Do you have required fields? Do you want to make sure that you have regular expressions for e-mails and URLs and other types of validation that we want to do on a client. You want to make sure that you plan for all these upfront so when you start implementing your screens that you have all this built into your design. In this module we'll take a look at how all these features can play a role in a JavaScript-based SPA.