Rendering Views in                            JavaScript                          The New Web Architecture                ...
@jonathanjulian                        jonathanjulian.com                           410labs.com                          s...
http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/Sunday, July 10, 2011
http://www.livelygrey.com/2007/08/the_pink_white_house.htmlSunday, July 10, 2011
http://www.staff.ncl.ac.uk/roger.broughton/museum/firmware/mainframe.htmSunday, July 10, 2011
http://www.old-computers.com/fun/default.asp?s=56Sunday, July 10, 2011
http://splitscreencoop.com/2010/09/10/computers-programmed-to-entertain/Sunday, July 10, 2011
Sunday, July 10, 2011
http://www.rpm-software.com/clientserver.phpSunday, July 10, 2011
Sunday, July 10, 2011
Sunday, July 10, 2011
http://cscie12.dce.harvard.edu/lecture_notes/2010/20100421/slide43.htmlSunday, July 10, 2011
Sunday, July 10, 2011
OMGSunday, July 10, 2011                        AJAX
Sunday, July 10, 2011
The New Web Architecture                          http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-ba...
“The New Web Architecture”            http://www.quirkey.com/blog/2009/09/15/sammy-js-                  couchdb-and-the-ne...
The New Web Architecture                        Server   JSON     Client                         REST              Views  ...
What does it look like?Sunday, July 10, 2011
How do you build it?Sunday, July 10, 2011
/public                        /public/javascriptsSunday, July 10, 2011
/src                        (php, ruby, python, Java,                              ColdFusion)Sunday, July 10, 2011
ExamplesSunday, July 10, 2011
Sunday, July 10, 2011
http://www.flickr.com/photos/hatm/5704687186/Sunday, July 10, 2011
• DIY events                        • DIY templates                        • models?Sunday, July 10, 2011
Sunday, July 10, 2011
• controller                        • DIY views                        • plug-insSunday, July 10, 2011
(function($) {     var app = $.sammy(#main, function() {       this.get(#/, function(context) {         // do whatever you...
Sunday, July 10, 2011
• models                        • views                        • events!                        • ajax!Sunday, July 10, 2011
var Note = Backbone.Model.extend({      initialize: function() { ... },      author: function() { ... },      allowedToEdi...
var Workspace = Backbone.Controller.extend({      routes: {         "help":                 "help",   // #help         "se...
var DocumentView = Backbone.View.extend({      events: {         "dblclick"                : "open",         "click .icon....
Rendering                                                      Views http://www.flickr.com/photos/aoifemac/171476309/Sunday...
Underscore                    ICanHaz                                                 Eco                                 ...
Underscore Template           $(#content).html(              _.template(                <h1><%= name %></h1>,             ...
Mustache Template           $(#content).html(              Mustache.to_html(                <h1>{{name}}</h1>,            ...
EJS Template           $(#content).html(              new EJS({                 url: ‘my_template.ejs’              }).ren...
ICanHaz Template           <script id="welcome" type="text/html">             <h1>Welcome, {{ name }}</h1>           </scr...
• jquery-tmpl - mustache-like                        • Jaml - not much like Haml                        • Pure - directive...
javascript/templates                        javascript/templates/user.jst                        javascript/templates/addr...
window.JST.address = _.template                ("...html...");                window.JST.address                ({email:jo...
Sunday, July 10, 2011
BITCH, PLEASESunday, July 10, 2011
http://www.flickr.com/photos/davic/3358417142/Sunday, July 10, 2011
•   more frameworks                        •   more templating choices                        •   adoption of REST        ...
http://www.flickr.com/photos/alykat/5284308030/Sunday, July 10, 2011
I am @jonathanjulian                        Thanks GothamJS!      http://www.flickr.com/photos/alykat/5284308030/Sunday, Ju...
Upcoming SlideShare
Loading in …5
×

Rendering Views in JavaScript - "The New Web Architecture"

5,423 views

Published on

This presentation will help attendees re-design their applications to take advantage of fast client-side templating of views. We will survey the landscape of templating solutions in JavaScript, and discuss architecture choices when using various back-end languages. Technologies discussed will include Backbone.js, underscore.js, JSON, REST, mustache, as well as others.

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

No Downloads
Views
Total views
5,423
On SlideShare
0
From Embeds
0
Number of Embeds
231
Actions
Shares
0
Downloads
72
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Rendering Views in JavaScript - "The New Web Architecture"

  1. 1. Rendering Views in JavaScript The New Web Architecture Jonathan Julian @jonathanjulian http://www.flickr.com/photos/thelightningman/5473594295/Sunday, July 10, 2011
  2. 2. @jonathanjulian jonathanjulian.com 410labs.com shortmail.com http://www.flickr.com/photos/see-through-the-eye-of-g/4283298553/Sunday, July 10, 2011
  3. 3. http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/Sunday, July 10, 2011
  4. 4. http://www.livelygrey.com/2007/08/the_pink_white_house.htmlSunday, July 10, 2011
  5. 5. http://www.staff.ncl.ac.uk/roger.broughton/museum/firmware/mainframe.htmSunday, July 10, 2011
  6. 6. http://www.old-computers.com/fun/default.asp?s=56Sunday, July 10, 2011
  7. 7. http://splitscreencoop.com/2010/09/10/computers-programmed-to-entertain/Sunday, July 10, 2011
  8. 8. Sunday, July 10, 2011
  9. 9. http://www.rpm-software.com/clientserver.phpSunday, July 10, 2011
  10. 10. Sunday, July 10, 2011
  11. 11. Sunday, July 10, 2011
  12. 12. http://cscie12.dce.harvard.edu/lecture_notes/2010/20100421/slide43.htmlSunday, July 10, 2011
  13. 13. Sunday, July 10, 2011
  14. 14. OMGSunday, July 10, 2011 AJAX
  15. 15. Sunday, July 10, 2011
  16. 16. The New Web Architecture http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/Sunday, July 10, 2011
  17. 17. “The New Web Architecture” http://www.quirkey.com/blog/2009/09/15/sammy-js- couchdb-and-the-new-web-architecture/ http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/Sunday, July 10, 2011
  18. 18. The New Web Architecture Server JSON Client REST Views db behaviour Models ControllersSunday, July 10, 2011
  19. 19. What does it look like?Sunday, July 10, 2011
  20. 20. How do you build it?Sunday, July 10, 2011
  21. 21. /public /public/javascriptsSunday, July 10, 2011
  22. 22. /src (php, ruby, python, Java, ColdFusion)Sunday, July 10, 2011
  23. 23. ExamplesSunday, July 10, 2011
  24. 24. Sunday, July 10, 2011
  25. 25. http://www.flickr.com/photos/hatm/5704687186/Sunday, July 10, 2011
  26. 26. • DIY events • DIY templates • models?Sunday, July 10, 2011
  27. 27. Sunday, July 10, 2011
  28. 28. • controller • DIY views • plug-insSunday, July 10, 2011
  29. 29. (function($) { var app = $.sammy(#main, function() { this.get(#/, function(context) { // do whatever you need to do for #/ }); }); $(function() { app.run(#/); }); })(jQuery);Sunday, July 10, 2011
  30. 30. Sunday, July 10, 2011
  31. 31. • models • views • events! • ajax!Sunday, July 10, 2011
  32. 32. var Note = Backbone.Model.extend({ initialize: function() { ... }, author: function() { ... }, allowedToEdit: function(account) { return true; } }); var Notes = Backbone.Collection.extend({ url: /notes }); fetch() save() destroy()Sunday, July 10, 2011
  33. 33. var Workspace = Backbone.Controller.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { ... }, search: function(query, page) { ... } });Sunday, July 10, 2011
  34. 34. var DocumentView = Backbone.View.extend({ events: { "dblclick" : "open", "click .icon.doc" : "select" }, render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; }, open: function() { window.open(this.model.get("viewer_url")); }, select: function() { this.model.set({selected: true}); }, });Sunday, July 10, 2011
  35. 35. Rendering Views http://www.flickr.com/photos/aoifemac/171476309/Sunday, July 10, 2011
  36. 36. Underscore ICanHaz Eco EJS Mustache Mold Jaml jquery-tmpl Weld Pure http://www.flickr.com/photos/alibree/244728678/Sunday, July 10, 2011
  37. 37. Underscore Template $(#content).html( _.template( <h1><%= name %></h1>, {name: Foo} ) );Sunday, July 10, 2011
  38. 38. Mustache Template $(#content).html( Mustache.to_html( <h1>{{name}}</h1>, {name: Foo} ) );Sunday, July 10, 2011
  39. 39. EJS Template $(#content).html( new EJS({ url: ‘my_template.ejs’ }).render({ name: Foo }) );Sunday, July 10, 2011
  40. 40. ICanHaz Template <script id="welcome" type="text/html"> <h1>Welcome, {{ name }}</h1> </script> <script> $(document).ready(function() { $(#content).html( ich.welcome({name: Username}) ); }); </script>Sunday, July 10, 2011
  41. 41. • jquery-tmpl - mustache-like • Jaml - not much like Haml • Pure - directive-based • Mold - php-like • Weld - uses existing divs • Eco - coffeescript, ASP-likeSunday, July 10, 2011
  42. 42. javascript/templates javascript/templates/user.jst javascript/templates/address.jst javascript/templates/post.jst javascript/templates/comment.jst javascript/templates/comments.jstSunday, July 10, 2011
  43. 43. window.JST.address = _.template ("...html..."); window.JST.address ({email:joe@example.com, name:Joe Bob});Sunday, July 10, 2011
  44. 44. Sunday, July 10, 2011
  45. 45. BITCH, PLEASESunday, July 10, 2011
  46. 46. http://www.flickr.com/photos/davic/3358417142/Sunday, July 10, 2011
  47. 47. • more frameworks • more templating choices • adoption of REST • HTML5 • Rails 3.1 includes Sprockets and CoffeeScript OUT OF THE BOX • CouchDB over HTTP • Sproutcore • node.js • node.jsSunday, July 10, 2011
  48. 48. http://www.flickr.com/photos/alykat/5284308030/Sunday, July 10, 2011
  49. 49. I am @jonathanjulian Thanks GothamJS! http://www.flickr.com/photos/alykat/5284308030/Sunday, July 10, 2011

×