A piece of sugar in your client-side development
Upcoming SlideShare
Loading in...5
×
 

A piece of sugar in your client-side development

on

  • 8,982 views

Client side development can be fun! Discover some of the new HTML5 features, JS good practices and Backbone.js to create rich client applications.

Client side development can be fun! Discover some of the new HTML5 features, JS good practices and Backbone.js to create rich client applications.

Statistics

Views

Total Views
8,982
Slideshare-icon Views on SlideShare
3,419
Embed Views
5,563

Actions

Likes
2
Downloads
28
Comments
0

19 Embeds 5,563

http://www.nicolasblanco.fr 5228
http://localhost:2999 136
http://www.dev.localhost.com 84
http://nicolasblanco.fr 29
http://localhost:3000 22
http://slainer68.github.io 19
http://localhost 14
http://localhost:4567 10
http://dev.com.local 8
http://translate.googleusercontent.com 3
url_unknown 2
https://www.google.fr 1
http://www.google.fr 1
http://nb-portfolio.herokuapp.com 1
http://twitter.com 1
http://paper.li 1
https://twitter.com 1
http://us-w1.rockmelt.com 1
http://www.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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

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

    • A piece of sugar in yourclient-side development Nicolas Blanco Novagile 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 = {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 != "undefined" && 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 conflict» 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 <%= first_name %> <%=last_name %> !</h1>’)greatRubyDev = { first_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