How to develop SPA apps with ASP.NET

1. Development of
Rich Internet Apps
with ASP.NET
Hrvoje Hudoletnjak

2. Agenda
Little bit of History
Knockout (Open Source)
Microsoft ASP.NET Web API (Open Source)
HTML5 (Open Source)
SignalR

3. Little bit of History
Then
HTML + CSS
Flash / Flex
Silverlight
Now
HTML5 / CSS3 / JavaScript
Future?
Native or plugin?

4. What is a Single Page App?
Server-Side App
Page rendered from the server
ASP.NET WebForms / MVC
SinglePage App
Page rendered from the browser
Only one actual page is loaded
ASP.NET REST API + Client side code

5. Why Single Page Apps?
The problem with server-side apps:
Server-Side Apps are Stateless
The Presentation Layer is Miles Away
Server-Side Apps don’t respect the web

6. Knockout
MVVM for JavaScript
Open-source framework created by Steven Sanderson
Included with ASP.NET MVC 4 (works with Web Forms)
Available through NuGet with:
Install-Package KnockoutJS

7. Knockout
Observer Pattern:
An object maintains a list of observers. When the object changes, the
observers are notified.

8. // Create view model
var viewModel = {
product: {
name: ko.observable("Milk"),
price: ko.observable(2.99)
},
updateProduct: function() {
alert(viewModel.product.name());
}
};
// Bind view model to DOM
ko.applyBindings(viewModel);
Name:
<input data-bind="value:product.name" />
Price:
<input data-bind="value:product.price" />
<button data-bind="click:updateProduct">
Update
</button>
Knockout two-way databinding
Javascrip
t
HTML

9. Server Client
Web UI
HTML/CSS/JS
Data services
JSON/XML
Application layer
JavaScript
Visible UI
HTML/CSS
Data access layer
JavaScript
Local storage
Navigation
APIs
MVC, WEBFORMS
KNOCKOUT
WEB API
BREEZE
HISTORY.JS
HTML5

10. What is the ASP.NET Web API?
ASP.NET MVC Controllers
return views (HTML)
derives from Controller base class
ASP.NET API Controllers
return data (JSON, XML)
derives from ApiController base class
uses POST, GET, PUT, DELETE

11. What is the ASP.NET Web API?
What is it Good For?
Public Web API
Twitter, Salesforce.com, StackOverflow
Single Page Apps (SPA)
A single view is rendered to the browser and all updates to the view are
made using jQuery with the Web API. No Postbacks!

12. Model Binding
Converts form post into a strongly typed C# class:
{ “id”: 23, “title”: “Star Wars”, “director”: “Lucas”}
Converts to:
new Movie { Id=23, Title=“Star Wars”, Director=“Lucas”}

13. Validation
You can use validation attributes with the Web API:
Required, StringLength, Range, and so on

14. Authorization
You can perform authorization declaratively by using the [Authorize]
attribute with API controller methods.
You can perform authorization imperatively by returning a 401 Unauthorized
status code.
Remember to enable Forms Authentication in the Web.config file.

15. HTML5
HTML5 (and related standards) adds support for:
Client-Side Validation – Input validation in the browser.
Web Storage – Store key value pairs in big, persistent cookies.
IndexedDB – Standard API for interacting with in-browser database (SQL
Compact, MySQL)
Web Sockets – Asynchronous communication with a two-way open socket.
Validation adds two new attributes: required, pattern
Supports custom validation with new JavaScript method:
setCustomValidity()

16. Web Sockets
Full duplex client-server communication
SignalR (Open Source)
WebSockets on IIS 8 + IE10/Chrome/Firefox
Fallback to AJAX polling duplex
public class Chat : Hub
{
public void Send(string message)
{
Clients.All.addMessage(message);
}
}
var chat = $.connection.chat;
chat.client.addMessage = function (message) {
$('#messages').append('<li>' + message +
'</li>');
};
$.connection.hub.start();
C# Javascrip
t

17. Thank you! Questions?
Hrvoje Hudoletnjak software developer, MVP for ASP.NET/IIS
http://hudosvibe.net
http://twitter.com/hhrvoje
hrvoje@hudoletnjak.com
Some slides by Stephen Walther from http://Superexpert.com