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
NEWT Backend Evolution
xpromx
1
140
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
PipeCDのプラグイン化で目指すところ
warashi
1
300
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9.6k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Writing Fast Ruby
sferik
628
62k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Code Reviewing Like a Champion
maltzj
524
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
KATA
mclloyd
30
14k
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/