Post on 13-May-2015
description
Rendering Views in JavaScript
The New Web Architecture
Jonathan Julian@jonathanjulian
http://www.flickr.com/photos/thelightningman/5473594295/
Sunday, July 10, 2011
@jonathanjulianjonathanjulian.com
410labs.comshortmail.com
http://www.flickr.com/photos/see-through-the-eye-of-g/4283298553/
Sunday, July 10, 2011
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.html
Sunday, July 10, 2011
http://www.staff.ncl.ac.uk/roger.broughton/museum/firmware/mainframe.htm
Sunday, 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.php
Sunday, July 10, 2011
Sunday, July 10, 2011
Sunday, July 10, 2011
http://cscie12.dce.harvard.edu/lecture_notes/2010/20100421/slide43.html
Sunday, July 10, 2011
Sunday, July 10, 2011
OMG AJAX
Sunday, July 10, 2011
Sunday, July 10, 2011
http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/
The New Web Architecture
Sunday, July 10, 2011
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
ServerREST
dbModels
ClientViews
behaviourControllers
JSON
The New Web Architecture
Sunday, July 10, 2011
What does it look like?
Sunday, July 10, 2011
How do you build it?
Sunday, July 10, 2011
/public/public/javascripts
Sunday, July 10, 2011
/src(php, ruby, python, Java,
ColdFusion)
Sunday, July 10, 2011
Examples
Sunday, 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-ins
Sunday, July 10, 2011
(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
Sunday, July 10, 2011
• models
• views
• events!
• ajax!
Sunday, July 10, 2011
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
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
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
http://www.flickr.com/photos/aoifemac/171476309/
Rendering Views
Sunday, July 10, 2011
http://www.flickr.com/photos/alibree/244728678/
Underscore
MustacheEJS
Jaml
Pure
Mold
Eco
Weld
ICanHaz
jquery-tmpl
Sunday, July 10, 2011
Underscore Template$('#content').html( _.template( '<h1><%= name %></h1>', {name: 'Foo'} ));
Sunday, July 10, 2011
Mustache Template$('#content').html( Mustache.to_html( '<h1>{{name}}</h1>', {name: 'Foo'} ));
Sunday, July 10, 2011
EJS Template$('#content').html( new EJS({ url: ‘my_template.ejs’ }).render({ name: 'Foo' }));
Sunday, July 10, 2011
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
• 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
javascript/templatesjavascript/templates/user.jstjavascript/templates/address.jstjavascript/templates/post.jstjavascript/templates/comment.jstjavascript/templates/comments.jst
Sunday, July 10, 2011
window.JST.address = _.template("...html...");
window.JST.address({email:'joe@example.com', name:'Joe Bob'});
Sunday, July 10, 2011
Sunday, July 10, 2011
BITCH, PLEASE
Sunday, July 10, 2011
http://www.flickr.com/photos/davic/3358417142/
Sunday, July 10, 2011
• 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
http://www.flickr.com/photos/alykat/5284308030/
Sunday, July 10, 2011
http://www.flickr.com/photos/alykat/5284308030/
I am @jonathanjulian
Thanks GothamJS!
Sunday, July 10, 2011