• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rendering Views in JavaScript - "The New Web Architecture"
 

Rendering Views in JavaScript - "The New Web Architecture"

on

  • 4,705 views

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 ...

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.

Statistics

Views

Total Views
4,705
Views on SlideShare
4,494
Embed Views
211

Actions

Likes
1
Downloads
64
Comments
0

14 Embeds 211

http://lanyrd.com 90
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Rendering Views in JavaScript - "The New Web Architecture" Rendering Views in JavaScript - "The New Web Architecture" Presentation Transcript

    • Rendering Views in JavaScript The New Web Architecture Jonathan Julian @jonathanjulian http://www.flickr.com/photos/thelightningman/5473594295/Sunday, July 10, 2011
    • @jonathanjulian jonathanjulian.com 410labs.com shortmail.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.htmlSunday, July 10, 2011
    • http://www.staff.ncl.ac.uk/roger.broughton/museum/firmware/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
    • Sunday, July 10, 2011
    • Sunday, July 10, 2011
    • http://cscie12.dce.harvard.edu/lecture_notes/2010/20100421/slide43.htmlSunday, July 10, 2011
    • Sunday, July 10, 2011
    • OMGSunday, July 10, 2011 AJAX
    • Sunday, July 10, 2011
    • 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
    • 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-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
    • 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
    • Rendering Views http://www.flickr.com/photos/aoifemac/171476309/Sunday, July 10, 2011
    • Underscore ICanHaz Eco EJS Mustache Mold Jaml jquery-tmpl Weld Pure http://www.flickr.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
    • Sunday, July 10, 2011
    • BITCH, PLEASESunday, 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.jsSunday, July 10, 2011
    • http://www.flickr.com/photos/alykat/5284308030/Sunday, July 10, 2011
    • I am @jonathanjulian Thanks GothamJS! http://www.flickr.com/photos/alykat/5284308030/Sunday, July 10, 2011