Slide 1
Slide 1 text
HTML5
Knockout
Web API
SignalR
Webstack of ♥
@bradwilson
http://bradwilson.typepad.com/
Slide 2
Slide 2 text
UI Mockup from the “Designer”
Demo
Slide 3
Slide 3 text
Model View
View
Model
HTML
Markup
Business
Layer
Knockout
(Observables)
Slide 4
Slide 4 text
Hello, Brad
Declarative
Slide 5
Slide 5 text
Hello,
Declarative
Slide 6
Slide 6 text
- Item 1
- Item 2
- Item 3
-
Iterative
Slide 7
Slide 7 text
-
Iterative
Slide 8
Slide 8 text
Eventing
Slide 9
Slide 9 text
Eventing
Slide 10
Slide 10 text
Slide 11
Slide 11 text
<span data-bind="text: firstName" />
<span data-bind="text: lastName" />
Templating
Slide 12
Slide 12 text
• View models with simple values are read once
• View models with observables get live updates
ko.observable(value)
ko.observableArray([...])
ko.computed(function() { ... })
ko.applyBindings(viewModel)
Observables
Slide 13
Slide 13 text
Convert Mockup to Knockout
Demo
Slide 14
Slide 14 text
ASP.NET Web API
MVC excels at processing form data and
returning HTML.
Web API excels at processing and returning
structured data like JSON or XML.
When you want to do both, use both.
Elevator Pitch
Slide 15
Slide 15 text
ASP.NET Web API
• Routing
• Controllers and actions
• Filters
• Model binding
• Dependency injection support
Mix in a Little of the Old…
Slide 16
Slide 16 text
ASP.NET Web API
• Dispatch based on HTTP verb
• Parameter binders
• Formatters
• Introspection
• Async from top to bottom (using Task)
• Pluggable hosting layer
…With a Little of the New
Slide 17
Slide 17 text
ASP.NET Web API
• HttpRequestMessage in
• HttpResponseMessage out
• HttpMessageHandler in-between
• No thread affinity, no static state*
Inspired by System.Net.Http
Slide 18
Slide 18 text
ASP.NET Web API
Dispatch (Self Host)
HttpServer
Message Handlers Controller
Routing &
Controller Handler
Slide 19
Slide 19 text
ASP.NET Web API
Dispatch (Self Host)
HttpServer
Message Handlers Controller
Routing &
Controller Handler
Slide 20
Slide 20 text
ASP.NET Web API
Dispatch (Web Host)
“Global” Server
Message Handlers Controller
(Not Routing &)
Controller Handler
ASP.NET Routing
Slide 21
Slide 21 text
ASP.NET Web API
http://aspnetwebstack.codeplex.com
• JSON.NET
• DotNetOpenAuth
• Tools, too: WiX, xUnit.net, Moq, StyleCop
Built as (and with) Open Source
Slide 22
Slide 22 text
Add Web API for Persistence
Demo
Slide 23
Slide 23 text
SignalR
• Web sockets
• Server-sent events
• Forever frames
• Long polling
Connection Mechanisms
Slide 24
Slide 24 text
SignalR
• Persistent connections
– Send/receive discrete strings
• Hubs
– RPC-style messages
Server library: .NET
Client libraries: .NET, JavaScript, + others
Two levels of abstraction
Slide 25
Slide 25 text
SignalR
• Connection events
– Connected / Reconnected
– Disconnected
• Information distribution
– Send to specific client
– Broadcast to all clients
Persistent Connection
Slide 26
Slide 26 text
SignalR
public class MyHub : Hub {
public string Echo(string value) {
return value + "!";
}
}
Hubs (Server, inbound)
Slide 27
Slide 27 text
SignalR
var hub = $.connection.myHub;
var result = hub.echo("value");
// result is "value!"
Hubs (client, outbound)
Slide 28
Slide 28 text
SignalR
var hub = $.connection.myHub;
hub.sayItLoud = function(message) {
alert(message);
};
hub.tellAll("Hello, world!");
Hubs (client, inbound)
Slide 29
Slide 29 text
SignalR
public class MyHub : Hub {
public void TellAll(string message) {
Clients.sayItLoud(message);
// Caller.sayItLoud(message);
// Clients[id].sayItLoud(message);
}
}
Hubs (server, outbound)
Slide 30
Slide 30 text
Live Collaboration with SignalR
Demo
Slide 31
Slide 31 text
Thank you!
github.com/bradwilson/WebstackOfLove
bradwilson.typepad.com/blog/talks.html
Webstack of ♥
@bradwilson
http://bradwilson.typepad.com/