HTML 5 + Knockout + ASP.NET Web API + SignalR = Webstack of Love

Given at NDC2012. Recorded presentation: http://vimeo.com/43603472

Transcript

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