JavaScript UI Architecture: Be all that you can be

4,512 views

Published on

Most web applications take UI architecture for granted, simply using out-of-the-box offerings from the framework of choice without much thought. This often yields far too complicated templating, data exchange (Ajax), URL routing, validation, etc. CVC (Client-View-Controller) is an alternative, deconstructed, framework-independent approach to building/delivering performant, maintainable web UI.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,512
On SlideShare
0
From Embeds
0
Number of Embeds
96
Actions
Shares
0
Downloads
58
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JavaScript UI Architecture: Be all that you can be

  1. 1. JavaScript UI Architecture be all that you can be kyle simpson @getify http://getify.me #jsui #hbjs
  2. 2. “ everyone is entitled to the their own ( wrong ) opinion.” --unknown
  3. 3. how i( we ) got here
  4. 4. front-end (html/css) ? back-end (logic, db)
  5. 5. front-end (html/css) “ middle-end” back-end (logic, db) (ui architecture)
  6. 6. ui architecture: how the “server” builds & delivers the presentation layer to the “client” + how communication happens between the presentation layer and the application
  7. 7. warning: highly offensive material
  8. 8. warning: highly offensive material breaking news: javascript is a first-class language now. javascript is just so king awesome!
  9. 9. warning: highly offensive material javascript is better at ui archiecture than your current application. javascript doesn’t have to run in the browser to be so awesome .
  10. 10. what we’re NOT talking about javascript frameworks application platforms all-in-one anything css {display:cool;} <marquee> <html>
  11. 11. what we ARE talking about raw javascript (browser & server) an alternate “design pattern” to MVC modular everything howto: make the ui really work for you templating DRY
  12. 12. what problems do we need to solve?
  13. 13. MVC uh oh! “ i like ‘mvc’, I just don’t like the ‘m’…”
  14. 14. M + C <?php if ($user->IsLoggedInAndCanPublish()) { $user->publish($doc->get()); } ?>
  15. 15. M + V <?php if (user->IsLoggedInAndCanPublish()) { ?> Welcome back! <?php } ?>
  16. 16. V + C <?php if (user->IsLoggedInAndCanPublish()) { $output = $template->create(“loggedin.tmpl”)->html(); $ouput .= $template->create(“footer.tmpl”)->html(); return $output; } ?>
  17. 17. DRY
  18. 18. data validation
  19. 19. url routing
  20. 20. so how can we solve these problems?
  21. 21. MVC (in the browser) ? MVC (on the server)
  22. 22. MVC (in the browser) iPad MVC (on the server)
  23. 23. MVC (in the browser)   MVC (on the server)
  24. 24. MVC (in the browser) CVC MVC (on the server)
  25. 25. CVC c lient- v iew- c ontroller everything is a client of everything else
  26. 26. CVC data should only be data, not methods or behavior
  27. 27. CVC presentation templates should not have any application logic
  28. 28. CVC code should be able to run anywhere
  29. 29. CVC whatever application framework you choose (.NET, Java, RoR, PHP, etc), CVC sits on top of your application
  30. 30. c lient(s) everything is module and a client of everything else
  31. 31. v iew(s) HandlebarJS
  32. 32. HandlebarJS templating engine written in javascript that takes simple text templates and combines with json data to output presentation views.
  33. 33. c ontroller(s) also javascript url routing, data validation, etc
  34. 34. ask more questions about your architecture… … be all that you can be!
  35. 35. more info kyle simpson @getify http://getify.me http://github.com/getify/HandlebarJS http://speakerrate.com/talks/2062 http://www.slideshare.net/shadedecho

×