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
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
190
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
XP, Testing and ninja testing
m_seki
3
240
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
ふつうの技術スタックでアート作品を作ってみる
akira888
1
840
Porting a visionOS App to Android XR
akkeylab
0
460
Discover Metal 4
rei315
2
130
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Side Projects
sachag
455
42k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Fireside Chat
paigeccino
37
3.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/