Rendering Views in JavaScript - "The New Web Architecture"
2 likes2,972 views
The document discusses the modern web architecture, focusing on JavaScript-based rendering views and client-side data management using frameworks like Backbone.js. It highlights various templating options and their implementations in JavaScript for efficient user interface rendering. The text emphasizes the evolution of web technologies and the shift towards RESTful architectures and asynchronous data handling.
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:'[email protected]', 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