1. Building a Next-Generation Web Application with ASP.NET MVC 2 and jQuery Nate Kohari Co-Founder / CTO Enkari, Ltd. nate@enkari.com

2. Who?

5. Goals

6. ASP.NET is a great platform for building attractive, standards-compliant rich internet applications

7. You can build rich internet applications without Silverlight or Flash

8. Why ASP.NET MVC?

9. BizSpark

10. Why jQuery?

11. (demo)

12. User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast Anatomy of a typical Zen request

13. User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast ASP.NET MVC HTML/JavaScript

14. User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

15. JS.Class

16. Zen.Ui.StoryCard = new JS.Class({ func1: function() {... }, func2: function() {... } }); var card = new Zen.Ui.StoryCard();

17. Behaviors

18. $(“.story-card”).attach( Zen.Ui.Behaviors.StoryCard);

19. Find all elements with the CSS class story-card… $(“.story-card”).attach( Zen.Ui.Behaviors.StoryCard);

20. …and apply the appropriate behavior $(“.story-card”).attach( Zen.Ui.Behaviors.StoryCard);

21. Which card did the user move?

22. User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

23. ... HTML5 data-* attributes (story card)

24. ... HTML5 data-* attributes (story card) { projectid: 123, storyid: 456 } JSON read via Metadata Plugin

25. Where should we send the request?

26. User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

27. One Action = One Route

28. (“route-per-action”)

29. <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/>...... Routes defined in XML:

30. <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/>...... Routes defined in XML: …at app start, parsed & registered in RouteTable

31. (area) <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/>...... Routes defined in XML:

32. (controller) <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/>...... Routes defined in XML:

33. <route action=“move” pattern=“project/{projectid}/story/{storyid}/move” verbs=“post”/>...... Routes defined in XML:

34. Url.Action(“move”, “story”, new { projectid = 123, storyid = 456 })

35. Url.Action(“move”, “story”, new { projectid = 123, storyid = 456 }) http://agilezen.com/projects/123/story/456/move

36. But wait… we need the route in JavaScript!

37. urlfor()

38. urlfor(“move”, “story”, { projectid: 123, storyid: 456 })

39. urlfor(“move”, “story”, { projectid: 123, storyid: 456 }) http://agilezen.com/projects/123/story/456/move

40. urlfor(“move”, “story”, { projectid: 123, storyid: 456 }) Metadata read from story card

41. routes.js

42. User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

43. User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast ASP.NET MVC HTML/JavaScript

44. Aspect Oriented Programming

45. [Demand]

46. [Demand(Permission.EditStory)]

47. [Secured]

48. [Secured(SSLMode.Force)]

49. [Transactional]

50. Output Filters

51. [DoNotCache]

52. [StripWhitespace]

53. [HandleExceptions]

54. User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

55. Filters Security Other cross-cutting concerns

56. Controller Interprets requests Communicates with browser Sets up view data Filters Security Other cross-cutting concerns

57. Controller Domain Service Interprets requests Communicates with browser Sets up view data Modifies data model Broadcasts events Filters Security Other cross-cutting concerns

58. Controller Domain Service Repository Interprets requests Communicates with browser Sets up view data Modifies data model Broadcasts events Persists data to database Filters Security Other cross-cutting concerns

59. Controller Domain Service Repository Filters LINQ NHibernate

60. User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast

61. Messenger SMTP Service Domain Service XMPP Service

62. Messenger SMTP Service Domain Service XMPP Service Events queued

63. Messenger SMTP Service Domain Service XMPP Service Events queued

64. Messenger SMTP Service Domain Service XMPP Service Email notifications IM notifications Events queued

65. User Action Metadata Lookup Route Lookup Filters Domain Service Event Broadcast Recap

67. Thanks for listening! Nate Kohari http://kohari.org http://agilezen.com nate@enkari.com @nkohari