JavaScript UI Architecture be all that you can be kyle simpson @getify http://getify.me #jsui #hbjs
“ everyone is entitled to the their own ( wrong ) opinion.” --unknown
how i( we ) got here
front-end (html/css) ? back-end (logic, db)
front-end (html/css) “ middle-end” back-end (logic, db) (ui architecture)
ui architecture: how the “server” builds & delivers the presentation layer to the “client” + how communication happens bet...
warning: highly offensive material
warning: highly offensive material breaking news: javascript is a first-class language now. javascript is just so king awe...
warning: highly offensive material javascript is better at ui archiecture than your current application. javascript doesn’...
what we’re NOT talking about javascript frameworks application platforms all-in-one anything css {display:cool;} <marquee>...
what we ARE talking about raw javascript (browser & server) an alternate “design pattern” to MVC modular everything howto:...
what problems do we need to solve?
MVC uh oh! “ i like ‘mvc’, I just don’t like the ‘m’…”
M + C <?php if ($user->IsLoggedInAndCanPublish()) { $user->publish($doc->get()); } ?>
M + V <?php if (user->IsLoggedInAndCanPublish()) { ?> Welcome back! <?php } ?>
V + C <?php if (user->IsLoggedInAndCanPublish()) { $output = $template->create(“loggedin.tmpl”)->html(); $ouput .= $templa...
DRY
data validation
url routing
so how can we solve these problems?
MVC (in the browser) ? MVC (on the server)
MVC (in the browser) iPad MVC (on the server)
MVC (in the browser)   MVC (on the server)
MVC (in the browser) CVC MVC (on the server)
CVC c lient- v iew- c ontroller everything is a client of everything else
CVC data should only be data, not methods or behavior
CVC presentation templates should not have any application logic
CVC code should be able to run anywhere
CVC whatever application framework you choose (.NET, Java, RoR, PHP, etc), CVC sits on top of your application
c lient(s) everything is module and a client of everything else
v iew(s) HandlebarJS
HandlebarJS templating engine written in javascript that takes simple text templates and combines with json data to output...
c ontroller(s) also javascript url routing, data validation, etc
ask more questions about your architecture… … be all that you can be!
more info kyle simpson @getify http://getify.me http://github.com/getify/HandlebarJS http://speakerrate.com/talks/2062 htt...
Upcoming SlideShare
Loading in …5
×

JavaScript UI Architecture: Be all that you can be

4,112
 -1

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
no profile picture user

  • Be the first to comment

No Downloads
Views
Total views
4,112
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
56
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

×