Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML 5 + Knockout + ASP.NET Web API + SignalR =...
Search
Brad Wilson
June 14, 2012
Programming
2
210k
HTML 5 + Knockout + ASP.NET Web API + SignalR = Webstack of Love
Given at NDC2012. Recorded presentation:
http://vimeo.com/43603472
Brad Wilson
June 14, 2012
Tweet
Share
More Decks by Brad Wilson
See All by Brad Wilson
DVCS for the Enterprise
bradwilson
1
130
Intro to Dependency Injection
bradwilson
1
80
Lessons Learned in Unit Testing
bradwilson
1
170
Micro-Pairing
bradwilson
0
87
Other Decks in Programming
See All in Programming
AI時代のUIはどこへ行く?
yusukebe
18
9k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
Cache Me If You Can
ryunen344
2
3k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
160
print("Hello, World")
eddie
2
530
Rancher と Terraform
fufuhu
2
550
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
420
OSS開発者という働き方
andpad
5
1.7k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
A Modern Web Designer's Workflow
chriscoyier
696
190k
Site-Speed That Sticks
csswizardry
10
820
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
RailsConf 2023
tenderlove
30
1.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Transcript
HTML5 Knockout Web API SignalR Webstack of ♥ @bradwilson http://bradwilson.typepad.com/
UI Mockup from the “Designer” Demo
Model View View Model HTML Markup Business Layer Knockout (Observables)
<div> Hello, <strong>Brad</strong> </div> Declarative
<div> Hello, <strong data-bind="text: name" /> </div> Declarative
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> Iterative
<ul data-bind="foreach: items"> <li data-bind="text: name"></li> <ul> Iterative
<input type="button" onclick="someJavaScript(thisObj)" /> Eventing
<input type="button" data-bind="click: modelFunction" /> Eventing
<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
<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
• 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
Convert Mockup to Knockout Demo
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
ASP.NET Web API • Routing • Controllers and actions •
Filters • Model binding • Dependency injection support Mix in a Little of the Old…
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
ASP.NET Web API • HttpRequestMessage in • HttpResponseMessage out •
HttpMessageHandler in-between • No thread affinity, no static state* Inspired by System.Net.Http
ASP.NET Web API Dispatch (Self Host) HttpServer Message Handlers Controller
Routing & Controller Handler
ASP.NET Web API Dispatch (Self Host) HttpServer Message Handlers Controller
Routing & Controller Handler
ASP.NET Web API Dispatch (Web Host) “Global” Server Message Handlers
Controller (Not Routing &) Controller Handler ASP.NET Routing
ASP.NET Web API http://aspnetwebstack.codeplex.com • JSON.NET • DotNetOpenAuth • Tools,
too: WiX, xUnit.net, Moq, StyleCop Built as (and with) Open Source
Add Web API for Persistence Demo
SignalR • Web sockets • Server-sent events • Forever frames
• Long polling Connection Mechanisms
SignalR • Persistent connections – Send/receive discrete strings • Hubs
– RPC-style messages Server library: .NET Client libraries: .NET, JavaScript, + others Two levels of abstraction
SignalR • Connection events – Connected / Reconnected – Disconnected
• Information distribution – Send to specific client – Broadcast to all clients Persistent Connection
SignalR public class MyHub : Hub { public string Echo(string
value) { return value + "!"; } } Hubs (Server, inbound)
SignalR var hub = $.connection.myHub; var result = hub.echo("value"); //
result is "value!" Hubs (client, outbound)
SignalR var hub = $.connection.myHub; hub.sayItLoud = function(message) { alert(message);
}; hub.tellAll("Hello, world!"); Hubs (client, inbound)
SignalR public class MyHub : Hub { public void TellAll(string
message) { Clients.sayItLoud(message); // Caller.sayItLoud(message); // Clients[id].sayItLoud(message); } } Hubs (server, outbound)
Live Collaboration with SignalR Demo
Thank you! github.com/bradwilson/WebstackOfLove bradwilson.typepad.com/blog/talks.html Webstack of ♥ @bradwilson http://bradwilson.typepad.com/