Rendering Views in JavaScript - "The New Web Architecture"

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/




http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/




http://www.livelygrey.com/2007/08/the_pink_white_house.html




http://www.staff.ncl.ac.uk/roger.broughton/museum/firmware/mainframe.htm




http://www.old-computers.com/fun/default.asp?s=56Sunday, July 10, 2011

http://www.old-computers.com/fun/default.asp?s=56

http://www.old-computers.com/fun/default.asp?s=56

http://splitscreencoop.com/2010/09/10/computers-programmed-to-entertain/





http://www.rpm-software.com/clientserver.php






http://cscie12.dce.harvard.edu/lecture_notes/2010/20100421/slide43.html





OMG AJAX









“The New Web Architecture”http://www.quirkey.com/blog/2009/09/15/sammy-js-

couchdb-and-the-new-web-architecture/




http://www.quirkey.com/blog/2009/09/15/sammy-js-couchdb-and-the-new-web-architecture/




ServerREST

dbModels

ClientViews

behaviourControllers

JSON



What does it look like?


How do you build it?


/public/public/javascripts


/src(php, ruby, python, Java,

ColdFusion)


Examples



http://www.flickr.com/photos/hatm/5704687186/




• DIY events

• DIY templates

• models?



• controller

• DIY views

• plug-ins


(function($) { var app = $.sammy('#main', function() { this.get('#/', function(context) { // do whatever you need to do for #/ }); }); $(function() { app.run('#/'); });})(jQuery);



• models

• views

• events!

• ajax!


var Note = Backbone.Model.extend({ initialize: function() { ... }, author: function() { ... }, allowedToEdit: function(account) { return true; }});

var Notes = Backbone.Collection.extend({ url: '/notes'});

fetch()save()destroy()


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) { ... }});


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}); },});


http://www.flickr.com/photos/aoifemac/171476309/

Rendering Views




http://www.flickr.com/photos/alibree/244728678/

Underscore

MustacheEJS

Jaml

Pure

Mold

Eco

Weld

ICanHaz

jquery-tmpl




Underscore Template$('#content').html( _.template( '<h1><%= name %></h1>', {name: 'Foo'} ));


Mustache Template$('#content').html( Mustache.to_html( '<h1>{{name}}</h1>', {name: 'Foo'} ));


EJS Template$('#content').html( new EJS({ url: ‘my_template.ejs’ }).render({ name: 'Foo' }));


ICanHaz Template<script id="welcome" type="text/html"> <h1>Welcome, {{ name }}</h1></script>

<script> $(document).ready(function() { $('#content').html( ich.welcome({name: 'Username'}) ); });</script>


• jquery-tmpl - mustache-like

• Jaml - not much like Haml

• Pure - directive-based

• Mold - php-like

• Weld - uses existing divs

• Eco - coffeescript, ASP-like


javascript/templatesjavascript/templates/user.jstjavascript/templates/address.jstjavascript/templates/post.jstjavascript/templates/comment.jstjavascript/templates/comments.jst


window.JST.address = _.template("...html...");

window.JST.address({email:'[email protected]', name:'Joe Bob'});


mailto:[email protected]

mailto:[email protected]


BITCH, PLEASE


http://www.flickr.com/photos/davic/3358417142/




• 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


http://www.flickr.com/photos/alykat/5284308030/





I am @jonathanjulian

Thanks GothamJS!




Technology

Rendering Views in JavaScript - "The New Web Architecture"