Rendering Views in JavaScript - "The New Web Architecture"
•
2 likes•2,966 views
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.
Recommended
More Related Content
Similar to Rendering Views in JavaScript - "The New Web Architecture"
Similar to Rendering Views in JavaScript - "The New Web Architecture" (20)
Recently uploaded
Recently uploaded (20)
Rendering Views in JavaScript - "The New Web Architecture"
- 1. Rendering Views in JavaScript The New Web Architecture Jonathan Julian @jonathanjulian http://www.flickr.com/photos/thelightningman/5473594295/ Sunday, July 10, 2011
- 2. @jonathanjulian jonathanjulian.com 410labs.com shortmail.com http://www.flickr.com/photos/see-through-the-eye-of-g/4283298553/ Sunday, July 10, 2011
- 8. Sunday, July 10, 2011
- 10. Sunday, July 10, 2011
- 11. Sunday, July 10, 2011
- 13. Sunday, July 10, 2011
- 14. OMG Sunday, July 10, 2011 AJAX
- 15. Sunday, July 10, 2011
- 16. The New Web Architecture http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/ Sunday, July 10, 2011
- 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. The New Web Architecture Server JSON Client REST Views db behaviour Models Controllers Sunday, July 10, 2011
- 19. What does it look like? Sunday, July 10, 2011
- 20. How do you build it? Sunday, July 10, 2011
- 21. /public /public/javascripts Sunday, July 10, 2011
- 22. /src (php, ruby, python, Java, ColdFusion) Sunday, July 10, 2011
- 23. Examples Sunday, July 10, 2011
- 24. Sunday, July 10, 2011
- 26. • DIY events • DIY templates • models? Sunday, July 10, 2011
- 27. Sunday, July 10, 2011
- 28. • controller • DIY views • plug-ins Sunday, July 10, 2011
- 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. Sunday, July 10, 2011
- 31. • models • views • events! • ajax! Sunday, July 10, 2011
- 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. 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. 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. Rendering Views http://www.flickr.com/photos/aoifemac/171476309/ Sunday, July 10, 2011
- 36. Underscore ICanHaz Eco EJS Mustache Mold Jaml jquery-tmpl Weld Pure http://www.flickr.com/photos/alibree/244728678/ Sunday, July 10, 2011
- 37. Underscore Template $('#content').html( _.template( '<h1><%= name %></h1>', {name: 'Foo'} ) ); Sunday, July 10, 2011
- 38. Mustache Template $('#content').html( Mustache.to_html( '<h1>{{name}}</h1>', {name: 'Foo'} ) ); Sunday, July 10, 2011
- 39. EJS Template $('#content').html( new EJS({ url: ‘my_template.ejs’ }).render({ name: 'Foo' }) ); Sunday, July 10, 2011
- 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. • jquery-tmpl - mustache-like • Jaml - not much like Haml • Pure - directive-based • Mold - php-like • Weld - uses existing divs • Eco - coffeescript, ASP-like Sunday, July 10, 2011
- 42. javascript/templates javascript/templates/user.jst javascript/templates/address.jst javascript/templates/post.jst javascript/templates/comment.jst javascript/templates/comments.jst Sunday, July 10, 2011
- 43. window.JST.address = _.template ("...html..."); window.JST.address ({email:'joe@example.com', name:'Joe Bob'}); Sunday, July 10, 2011
- 44. Sunday, July 10, 2011
- 45. BITCH, PLEASE Sunday, July 10, 2011
- 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.js Sunday, July 10, 2011
- 49. I am @jonathanjulian Thanks GothamJS! http://www.flickr.com/photos/alykat/5284308030/ Sunday, July 10, 2011