A piece of sugar in your client-side development

A piece of sugar in yourclient-side development Nicolas Blanco Novagile team

JavaScript ?

HTML 5

<form>

<form>

<form> ﬂowplayer≠ jQuery UI

<form>jQuery Tools Form Validator$(‘form.validator’).validator();

<form>$(":date").dateinput();

<form>HTML 5 new forms input + jQuery TOOLS =

MUST DO&HAVE!!! Obtrusive JavaScript ??? <a href=’...’ onclick=‘...’ / ...> <form onsubmit=’...’ / ...> =

MUST DO&HAVE!!! UNobtrusive JavaScript «Events» programming

MUST DO&HAVE!!!

MUST DO&HAVE!!!Closure Compiler YUI Compressor

So... JavaScript ?

CoffeeScript« It’s just JavaScript! »

CoffeeScript math = {math = root: Math.sqrt, root: Math.sqrt square: square, cube: function(x) { square: square return x * square(x); cube: (x) -> x * square x } };alert "I knew it!" if elvis? if (typeof elvis != "undeﬁned" && elvis !== null) { alert("I knew it!"); }$(document).ready -> alert "hello world!" $(document).ready(function() { alert("hello world!"); });

CoffeeScript 1.0 Easy to convert JS => CS «no conﬂict» Readable «compiled» code «compiled» code passes JSLint Rails : automatic compilation with the Barista plugingood architecture : CS code in the «app» directory

underscore.js Small < 4 kb!

underscore.js [1, 2, 3] => [2, 4, 6] JS :_([1, 2, 3]).map(function(n) { return n * 2; }); CS : _([1, 2, 3]).map (n) -> n * 2

underscore.jsHelloTemplate = _.template(‘<h1>Bonjour <%= ﬁrst_name %> <%=last_name %> !</h1>’)greatRubyDev = { ﬁrst_name: ‘Nicolas’, last_name: ‘Blanco’ }HelloTemplate(greatRubyDev) <h1>Bonjour Nicolas Blanco !</h1>

Rich client AjaxCommunication with server

Rich client

backbone.js Small < 5 kb!Framework & design independent Based on underscore.js

Bookid: 1Book Bookid: 2 View LibraryBookid: 3 Collection LibraryBook Viewid: 4 ViewsModels

Backbone.js eventsBook «change»id: 1 «change» Library «add» «remove»

backbone.jsWork best with JSON REST API by convention /books # => GET : retrieve collection of books # => POST : create new book /book/3 # => GET : retrieve book id = 3 # => PUT : update book id = 3 # => DELETE : destroy book id = 3

backbone.js Book = Backbone.Model.extend()myBook = new Book { author: ‘Victor Hugo’, title: ‘Les Misérables’ } myBook.get(‘author’) myBook.set(...) myBook.toJSON()

backbone.jsLibrary = Backbone.Collection.extend model: Book url: ‘/books’ myLibrary = new Library() myLibrary.fetch() myLibrary.at(0) myLibrary.each (book) -> ... myLibrary.map (book) -> ... myBook.save() // if validations pass

backbone.jsBookView = Backbone.View.extend tagName: ‘li’ className: ‘book’ template: _.template ‘<%= author %> - <%= title %>’ initialize: -> _.bindAll this, ‘render’ this.model.bind ‘change’, this.render render: -> $(this.el).html(this.template(this.model.toJSON())) this

backbone.jsmyBookView = new BookView(model: myBook)myBookView.render() // <li class=‘book’>Victor Hugo - LesMisérables</li>myBook.set { author: ‘Nicolas’ } // triggers ‘change’ event

Thank you! follow me on twitter : @slainer68

http://www.nicolasblanco.fr	288
http://localhost:2999	136
http://localhost:3000	22
http://localhost:4567	10
http://nicolasblanco.fr	3
url_unknown	2
http://paper.li	1
https://twitter.com	1
http://us-w1.rockmelt.com	1
http://twitter.com	1

A piece of sugar in your client-side development

by Nicolas Blanco on Apr 01, 2011

Accessibility

Upload Details

Usage Rights

10 Embeds 465

Statistics

A piece of sugar in your client-side development — Presentation Transcript