Rendering Views in JavaScript - "The New Web Architecture"

Rendering Views in JavaScript The New Web Architecture Jonathan Julian @jonathanjulian http://www.ﬂickr.com/photos/thelightningman/5473594295/Sunday, July 10, 2011

@jonathanjulian jonathanjulian.com 410labs.com shortmail.com http://www.ﬂickr.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.htmlSunday, July 10, 2011

http://www.staff.ncl.ac.uk/roger.broughton/museum/ﬁrmware/mainframe.htmSunday, 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.phpSunday, July 10, 2011

http://cscie12.dce.harvard.edu/lecture_notes/2010/20100421/slide43.htmlSunday, July 10, 2011

OMGSunday, July 10, 2011 AJAX

The New Web Architecture http://talkinterior.com/modern-studio-architecture-parasite-san-paolo-bank-design-romania/Sunday, July 10, 2011

“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

The New Web Architecture Server JSON Client REST Views db behaviour Models ControllersSunday, July 10, 2011

What does it look like?Sunday, July 10, 2011

How do you build it?Sunday, July 10, 2011

/public /public/javascriptsSunday, July 10, 2011

/src (php, ruby, python, Java, ColdFusion)Sunday, July 10, 2011

ExamplesSunday, July 10, 2011

http://www.ﬂickr.com/photos/hatm/5704687186/Sunday, July 10, 2011

• DIY events • DIY templates • models?Sunday, July 10, 2011

• controller • DIY views • plug-insSunday, 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

• models • views • events! • ajax!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

Rendering Views http://www.ﬂickr.com/photos/aoifemac/171476309/Sunday, July 10, 2011

Underscore ICanHaz Eco EJS Mustache Mold Jaml jquery-tmpl Weld Pure http://www.ﬂickr.com/photos/alibree/244728678/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-likeSunday, July 10, 2011

javascript/templates javascript/templates/user.jst javascript/templates/address.jst javascript/templates/post.jst javascript/templates/comment.jst javascript/templates/comments.jstSunday, July 10, 2011

window.JST.address = _.template ("...html..."); window.JST.address ({email:joe@example.com, name:Joe Bob});Sunday, July 10, 2011

BITCH, PLEASESunday, July 10, 2011

http://www.ﬂickr.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.jsSunday, July 10, 2011

http://www.ﬂickr.com/photos/alykat/5284308030/Sunday, July 10, 2011

I am @jonathanjulian Thanks GothamJS! http://www.ﬂickr.com/photos/alykat/5284308030/Sunday, July 10, 2011

http://lanyrd.com	81
http://www.techgig.com	65
http://speakerrate.com	25
http://odedtips.blogspot.com	12
http://paper.li	5
url_unknown	4
http://www.slideshare.net	2
http://coderwall.com	2
https://twitter.com	1
http://twitter.com	1
http://us-w1.rockmelt.com	1
http://odedtips.blogspot.co.il	1
http://odedtips.blogspot.ca	1
http://www.linkedin.com	1

Rendering Views in JavaScript - "The New Web Architecture"

by Jonathan Julian

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 202

Statistics