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
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
NPOでのDevinの活用
codeforeveryone
0
420
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
990
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
240
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.6k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
100
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
220
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
470
ふつうの技術スタックでアート作品を作ってみる
akira888
0
150
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Designing for Performance
lara
609
69k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Language of Interfaces
destraynor
158
25k
Code Reviewing Like a Champion
maltzj
524
40k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
How GitHub (no longer) Works
holman
314
140k
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/