Embed Size (px)
DESCRIPTION
Building a Next-Generation Web Application with ASP.NET MVC 2 and jQuery. Nate Kohari Co-Founder / CTO Enkari , Ltd. [email protected]. Who?. Goals. ASP.NET is a great platform for building attractive, standards-compliant rich internet applications. - PowerPoint PPT Presentation
Citation preview
Building a Next-Generation Web Applicationwith ASP.NET MVC 2 and jQuery
Nate KohariCo-Founder / CTOEnkari, [email protected]
Who?
Goals
ASP.NET is a great platformfor building attractive, standards-compliant
rich internet applications
You can build rich internet applications withoutSilverlight or Flash
Why ASP.NET MVC?
BizSpark
Why jQuery?
(demo)
User Action
Metadata Lookup
Route Lookup
Filters
Domain Service
Event Broadcast
Anatomy of a typicalZen request
User Action
Metadata Lookup
Route Lookup
Filters
Domain Service
Event Broadcast
ASP.NET MVC
HTML/JavaScript
User Action
Metadata Lookup
Route Lookup
Filters
Domain Service
Event Broadcast
JS.Class
Zen.Ui.StoryCard = new JS.Class({ func1: function() { ... }, func2: function() { ... }});
var card = new Zen.Ui.StoryCard();
Behaviors
$(“.story-card”).attach( Zen.Ui.Behaviors.StoryCard);
Find all elements with the CSS class story-card…
$(“.story-card”).attach( Zen.Ui.Behaviors.StoryCard);
…and apply the appropriate behavior
$(“.story-card”).attach( Zen.Ui.Behaviors.StoryCard);
Which card did theuser move?
User Action
Metadata Lookup
Route Lookup
Filters
Domain Service
Event Broadcast
<li data-projectid=“123” data-storyid=“456”> ...</li>
HTML5 data-* attributes
(story card)
<li data-projectid=“123” data-storyid=“456”> ...</li>
HTML5 data-* attributes
(story card)
{ projectid: 123, storyid: 456 }
JSON read via Metadata Plugin
Where should we sendthe request?
User Action
Metadata Lookup
Route Lookup
Filters
Domain Service
Event Broadcast
One Action = One Route
One Action = One Route(“route-per-action”)
<app> <project> <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> ... </project> ...</app>
Routes defined in XML:
<app> <project> <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> ... </project> ...</app>
Routes defined in XML:
…at app start, parsed & registered in RouteTable
<app> (area) <project> <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> ... </project> ...</app>
Routes defined in XML:
<app> <project> (controller) <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> ... </project> ...</app>
Routes defined in XML:
<app> <project> <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/> ... </project> ...</app>
Routes defined in XML:
Url.Action(“move”, “story”, new { projectid = 123, storyid = 456 })
Url.Action(“move”, “story”, new { projectid = 123, storyid = 456 })
http://agilezen.com/projects/123/story/456/move
But wait… we needthe route in JavaScript!
urlfor()
urlfor(“move”, “story”, { projectid: 123, storyid: 456 })
urlfor(“move”, “story”, { projectid: 123, storyid: 456 })
http://agilezen.com/projects/123/story/456/move
urlfor(“move”, “story”, { projectid: 123, storyid: 456 })
Metadata read from story card <li>
routes.js
User Action
Metadata Lookup
Route Lookup
Filters
Domain Service
Event Broadcast
User Action
Metadata Lookup
Route Lookup
Filters
Domain Service
Event Broadcast
ASP.NET MVC
HTML/JavaScript
Aspect Oriented Programming
[Demand]
[Demand(Permission.EditStory)]
[Secured]
[Secured(SSLMode.Force)]
[Transactional]
Output Filters
[DoNotCache]
[StripWhitespace]
[HandleExceptions]
User Action
Metadata Lookup
Route Lookup
Filters
Domain Service
Event Broadcast
Filters SecurityOther cross-cutting concerns
ControllerInterprets requestsCommunicates with browserSets up view data
Filters SecurityOther cross-cutting concerns
Controller
Domain Service
Interprets requestsCommunicates with browserSets up view data
Modifies data modelBroadcasts events
Filters SecurityOther cross-cutting concerns
Controller
Domain Service
Repository
Interprets requestsCommunicates with browserSets up view data
Modifies data modelBroadcasts events
Persists data to database
Filters SecurityOther cross-cutting concerns
Controller
Domain Service
Repository
Filters
LINQ
NHibernate
User Action
Metadata Lookup
Route Lookup
Filters
Domain Service
Event Broadcast
Messenger
SMTP Service
Domain Service
XMPP Service
Messenger
SMTP Service
Domain Service
XMPP Service
Events queued
Messenger
SMTP Service
Domain Service
XMPP Service
Events queued
Messenger
SMTP Service
Domain Service
XMPP Service
Email notifications IM notifications
Events queued
User Action
Metadata Lookup
Route Lookup
Filters
Domain Service
Event Broadcast
Recap
Thanks for listening!Nate Koharihttp://kohari.orghttp://[email protected]@nkohari
