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
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
XP, Testing and ninja testing
m_seki
3
240
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
VS Code Update for GitHub Copilot
74th
2
640
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Practical Orchestrator
shlominoach
189
11k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Making Projects Easy
brettharned
116
6.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Agile that works and the tools we love
rasmusluckow
329
21k
How STYLIGHT went responsive
nonsquared
100
5.6k
Into the Great Unknown - MozCon
thekraken
40
1.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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/