A piece of sugar in your client-side development

Nicolas BlancoNovagile team

JavaScript ?

JavaScript ?

HTML 5

<form>

<input type=‘text’ ... />

<input type=‘checkbox’ ... />

<input type=‘password’ ... />

<input type=‘submit’ ... />

<form>

<form>

<form>

<input type=‘text’ ... />

<input type=‘text’ placeholder=‘Entrez votre nom...’ ... />

<input type=‘text’ autofocus ... />

<input type=‘text’ required ... />

<input type=‘text’ pattern=’[0-9]’ ... />

<form><input type=‘email’ ... />

<input type=‘url’ ... />

<input type=‘search’ ... />

<form>

<input type=‘number’min=’0’

max=’10’step=’2’ ... />

<form>

<input type=‘range’min=’0’

max=’10’step=’2’ ... />

<form><input type="date" ... />

<type="month" ... /><input type="week" ... /><input type="time" ... />

<input type="datetime" ... /><input type="datetime-local" ... />

<form>

<form>

flowplayer

≠ 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!!!

MUST DO&HAVE!!!

Closure Compiler YUI Compressor

So... JavaScript ?

CoffeeScript

« It’s just JavaScript! »

CoffeeScript

math = root: Math.sqrt square: square cube: (x) -> x * square x alert "I knew it!" if elvis?

$(document).ready -> alert "hello world!"

math = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); }};

if (typeof elvis != "undefined" && elvis !== null) { alert("I knew it!");}

$(document).ready(function() { alert("hello world!");});

CoffeeScript1.0

Easy to convert JS => CS«no conflict»

Readable «compiled» code«compiled» code passes JSLint

Rails :automatic compilation with the Barista plugin

good architecture : CS code in the «app» directory

underscore.js

Small < 4 kb!

underscore.js

JS :

_([1, 2, 3]).map(function(n) { return n * 2; });

CS :

_([1, 2, 3]).map (n) -> n * 2

[1, 2, 3] => [2, 4, 6]

underscore.jsHelloTemplate = _.template(‘<h1>Bonjour <%= first_name %> <%= last_name %> !</h1>’)

greatRubyDev = { first_name: ‘Nicolas’, last_name: ‘Blanco’ }

HelloTemplate(greatRubyDev)

<h1>Bonjour Nicolas Blanco !</h1>

Rich clientAjax

Communication with server

Rich client

backbone.js

Small < 5 kb!

Framework & design independent

Based on underscore.js

Bookid: 1

Bookid: 2

Bookid: 3

Bookid: 4

Library

BookView

LibraryView

Models

Collection

Views

Backbone.jsevents

Bookid: 1

«change»

Library«change»

«add»«remove»

backbone.js

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

myBookView = new BookView(model: myBook)

myBookView.render() // <li class=‘book’>Victor Hugo - Les Misérables</li>

myBook.set { author: ‘Nicolas’ } // triggers ‘change’ event

Thank you!

follow me on twitter :@slainer68