rendering views in javascript - "the new web architecture"
DESCRIPTION
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.TRANSCRIPT
![Page 1: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/1.jpg)
Rendering Views in JavaScript
The New Web Architecture
Jonathan Julian@jonathanjulian
http://www.flickr.com/photos/thelightningman/5473594295/
Sunday, July 10, 2011
![Page 2: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/2.jpg)
@jonathanjulianjonathanjulian.com
410labs.comshortmail.com
http://www.flickr.com/photos/see-through-the-eye-of-g/4283298553/
Sunday, July 10, 2011
![Page 3: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/3.jpg)
http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/
Sunday, July 10, 2011
![Page 4: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/4.jpg)
http://www.livelygrey.com/2007/08/the_pink_white_house.html
Sunday, July 10, 2011
![Page 5: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/5.jpg)
http://www.staff.ncl.ac.uk/roger.broughton/museum/firmware/mainframe.htm
Sunday, July 10, 2011
![Page 6: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/6.jpg)
http://www.old-computers.com/fun/default.asp?s=56Sunday, July 10, 2011
![Page 7: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/7.jpg)
http://splitscreencoop.com/2010/09/10/computers-programmed-to-entertain/
Sunday, July 10, 2011
![Page 8: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/8.jpg)
Sunday, July 10, 2011
![Page 9: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/9.jpg)
http://www.rpm-software.com/clientserver.php
Sunday, July 10, 2011
![Page 10: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/10.jpg)
Sunday, July 10, 2011
![Page 11: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/11.jpg)
Sunday, July 10, 2011
![Page 12: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/12.jpg)
http://cscie12.dce.harvard.edu/lecture_notes/2010/20100421/slide43.html
Sunday, July 10, 2011
![Page 13: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/13.jpg)
Sunday, July 10, 2011
![Page 14: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/14.jpg)
OMG AJAX
Sunday, July 10, 2011
![Page 15: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/15.jpg)
Sunday, July 10, 2011
![Page 16: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/16.jpg)
http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/
The New Web Architecture
Sunday, July 10, 2011
![Page 17: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/17.jpg)
http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/
“The New Web Architecture”http://www.quirkey.com/blog/2009/09/15/sammy-js-
couchdb-and-the-new-web-architecture/
Sunday, July 10, 2011
![Page 18: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/18.jpg)
ServerREST
dbModels
ClientViews
behaviourControllers
JSON
The New Web Architecture
Sunday, July 10, 2011
![Page 19: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/19.jpg)
What does it look like?
Sunday, July 10, 2011
![Page 20: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/20.jpg)
How do you build it?
Sunday, July 10, 2011
![Page 21: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/21.jpg)
/public/public/javascripts
Sunday, July 10, 2011
![Page 22: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/22.jpg)
/src(php, ruby, python, Java,
ColdFusion)
Sunday, July 10, 2011
![Page 23: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/23.jpg)
Examples
Sunday, July 10, 2011
![Page 24: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/24.jpg)
Sunday, July 10, 2011
![Page 25: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/25.jpg)
http://www.flickr.com/photos/hatm/5704687186/
Sunday, July 10, 2011
![Page 26: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/26.jpg)
• DIY events
• DIY templates
• models?
Sunday, July 10, 2011
![Page 27: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/27.jpg)
Sunday, July 10, 2011
![Page 28: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/28.jpg)
• controller
• DIY views
• plug-ins
Sunday, July 10, 2011
![Page 29: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/29.jpg)
(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
![Page 30: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/30.jpg)
Sunday, July 10, 2011
![Page 31: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/31.jpg)
• models
• views
• events!
• ajax!
Sunday, July 10, 2011
![Page 32: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/32.jpg)
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
![Page 33: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/33.jpg)
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
![Page 34: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/34.jpg)
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
![Page 35: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/35.jpg)
http://www.flickr.com/photos/aoifemac/171476309/
Rendering Views
Sunday, July 10, 2011
![Page 36: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/36.jpg)
http://www.flickr.com/photos/alibree/244728678/
Underscore
MustacheEJS
Jaml
Pure
Mold
Eco
Weld
ICanHaz
jquery-tmpl
Sunday, July 10, 2011
![Page 37: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/37.jpg)
Underscore Template$('#content').html( _.template( '<h1><%= name %></h1>', {name: 'Foo'} ));
Sunday, July 10, 2011
![Page 38: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/38.jpg)
Mustache Template$('#content').html( Mustache.to_html( '<h1>{{name}}</h1>', {name: 'Foo'} ));
Sunday, July 10, 2011
![Page 39: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/39.jpg)
EJS Template$('#content').html( new EJS({ url: ‘my_template.ejs’ }).render({ name: 'Foo' }));
Sunday, July 10, 2011
![Page 40: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/40.jpg)
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
![Page 41: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/41.jpg)
• 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
![Page 42: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/42.jpg)
javascript/templatesjavascript/templates/user.jstjavascript/templates/address.jstjavascript/templates/post.jstjavascript/templates/comment.jstjavascript/templates/comments.jst
Sunday, July 10, 2011
![Page 43: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/43.jpg)
window.JST.address = _.template("...html...");
window.JST.address({email:'[email protected]', name:'Joe Bob'});
Sunday, July 10, 2011
![Page 44: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/44.jpg)
Sunday, July 10, 2011
![Page 45: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/45.jpg)
BITCH, PLEASE
Sunday, July 10, 2011
![Page 46: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/46.jpg)
http://www.flickr.com/photos/davic/3358417142/
Sunday, July 10, 2011
![Page 47: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/47.jpg)
• 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
![Page 48: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/48.jpg)
http://www.flickr.com/photos/alykat/5284308030/
Sunday, July 10, 2011
![Page 49: Rendering Views in JavaScript - "The New Web Architecture"](https://reader033.vdocuments.site/reader033/viewer/2022052619/5552de8cb4c90532498b4d74/html5/thumbnails/49.jpg)
http://www.flickr.com/photos/alykat/5284308030/
I am @jonathanjulian
Thanks GothamJS!
Sunday, July 10, 2011