Presentation in Club AJAX Dallas, 11/1/2011


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Presentation in Club AJAX Dallas, 11/1/2011

  1. 1. An MDV Framework for Web Apps <ul><li>
  2. 2. Developed for internal use by AdStream Holdings
  3. 3. Available under BSD license
  4. 4. Supported by myself: </li></ul><ul><ul><li>Chief architect, AdStream Holdings
  5. 5. Founding partner, 12 Quarters Consulting
  6. 6. [email_address] </li></ul></ul>
  7. 7. Domain Area: Web Apps <ul><li>Web applications, what they aren't: </li></ul><ul><ul><li>Not Web sites: functionality over content
  8. 8. Not public Web services: self-contained, provide complete solutions or experience </li></ul></ul><ul><li>Separation of concerns and integrated design: </li></ul><ul><ul><li>Clear separation of roles between frontend and backend
  9. 9. Common design, well defined APIs
  10. 10. The new client-server as a paradigm </li></ul></ul>
  11. 11. Defining the MDV <ul><li>Origin of the term:
  12. 12. Model: an object hierarchy </li></ul><ul><ul><li>Shared with server: REST </li></ul></ul><ul><li>View: a template engine </li></ul><ul><ul><li>View = f( model ) </li></ul></ul><ul><li>Controller: behaviors </li></ul><ul><ul><li>Separating event processing from visuals </li></ul></ul><ul><li>What MDV isn't: connected widgets </li></ul>
  13. 13. The Framework: History <ul><li>Introducing SoC across a wide variety of products
  14. 14. Requirements: </li></ul><ul><ul><li>Extreme visual flexibility: ”make it look like this picture”
  15. 15. Agnostic to backend technology
  16. 16. Performance: server load, bandwidth, UI
  17. 17. Reducing development costs </li></ul></ul><ul><li>What didn't work: jQuery, GWT, DTL </li></ul>
  18. 18. The Framework: Model <ul><li>Model: </li></ul><ul><ul><li>Virtual object layer with two-way synchronization
  19. 19. Object hierarchy and URL space </li><ul><li>Nodes and Objects
  20. 20. Containers </li></ul><li>Protocol: REST mapping, metadata
  21. 21. Asynchronous model </li><ul><li>Promises ( dojo.Deferred ) and watchers (callbacks) </li></ul><li>Paging and filtering in Containers
  22. 22. Implementing the compliant backend services </li></ul></ul>
  23. 23. The Framework: View <ul><li>View: dojox.jtlc </li></ul><ul><ul><li>”Don't bring a knife to a gunfight”: jtlc compiler infrastructure </li><ul><li>Dataflow processing model
  24. 24. AST with extensible dictionary
  25. 25. Frontend parsers: Q+ and CHT
  26. 26. [Load-][Parse-]compile-execute[-instantiate] </li></ul><li>Q+: data query syntax </li><ul><li>Intended as a refinement of dojox.json.query
  27. 27. Standalone or embedded into CHT
  28. 28. Version 2 now in the works </li></ul></ul></ul>
  29. 29. The Framework: View <ul><li>View: dojox.jtlc.CHT </li></ul><ul><ul><li>Full-fledged language for writing view components </li><ul><li>User-defined primitives, macros and modules </li></ul><li>Built-in primitives: </li><ul><li>Conditionals
  30. 30. Looping and grouping
  31. 31. Asynchronous evaluation </li></ul><li>No-overhead localization </li><ul><li>Support for NLS bundles in the loader </li></ul><li>Runtime capabilities </li><ul><li>Partial rendering
  32. 32. Animations </li></ul></ul></ul>
  33. 33. The Framework: Controller <ul><li>Controller: plain old Dojo... almost </li></ul><ul><ul><li>CHT runtime uses Dojo parser
  34. 34. Behavior or codebehind? Two M$ terms for the price of one </li><ul><li>Using dijit._Widget for lifecycle, DOM connection, cleanup
  35. 35. Ground rules of symbiosis: no event handlers in CHT, no HTML in behaviors, abstract away DOM specifics
  36. 36. Passing data through attributes and template arguments
  37. 37. Handling model changes with </li></ul><li>Global application flow </li><ul><li>Dojo.notQuiteReady? Initialization in asynchronous environment
  38. 38. Using dojo.hash for in-page navigation </li></ul></ul></ul>
  39. 39. Example: the Forum Page <ul><li>Arguably, a functionally complete application </li></ul><ul><ul><li>Threaded posts, user accounts, search </li></ul></ul><ul><li>12 hours, 800 L.O.C. (JS:350, CHT:100, CSS:200, Python:150)
  40. 40. Too big for the workshop, presenting a trimmed down version
  41. 41. See full version on GitHub
  42. 42. Also see the example E-commerce application (The Booze Shack) </li></ul>