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...’ ... />     <...
<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" ... /...
<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      ...
CoffeeScript                        1.0             Easy to convert JS => CS                   «no conflict»            Rea...
underscore.js   Small < 4 kb!
underscore.js            [1, 2, 3] => [2, 4, 6]                      JS :_([1, 2, 3]).map(function(n) { return n * 2; }); ...
underscore.jsHelloTemplate = _.template(‘<h1>Bonjour <%= first_name %> <%=last_name %> !</h1>’)greatRubyDev = { first_name: ...
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                     ...
Backbone.js          eventsBook       «change»id: 1                         «change»               Library     «add»      ...
backbone.jsWork best with JSON REST API by convention                   /books   # => GET : retrieve collection of books  ...
backbone.js Book = Backbone.Model.extend()myBook = new Book { author: ‘Victor   Hugo’, title: ‘Les Misérables’ }       myB...
backbone.jsLibrary = Backbone.Collection.extend           model: Book           url: ‘/books’    myLibrary = new Library()...
backbone.jsBookView = Backbone.View.extend            tagName: ‘li’            className: ‘book’            template: _.te...
backbone.jsmyBookView = new BookView(model: myBook)myBookView.render() // <li class=‘book’>Victor Hugo - LesMisérables</li...
Thank you!     follow me on twitter :           @slainer68
Upcoming SlideShare
Loading in...5
×

A piece of sugar in your client-side development

12,596

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,596
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

A piece of sugar in your client-side development

  1. 1. A piece of sugar in yourclient-side development Nicolas Blanco Novagile team
  2. 2. JavaScript ?
  3. 3. JavaScript ?
  4. 4. HTML 5
  5. 5. <form> <input type=‘text’ ... /><input type=‘checkbox’ ... /><input type=‘password’ ... /> <input type=‘submit’ ... />
  6. 6. <form>
  7. 7. <form>
  8. 8. <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]’ ... />
  9. 9. <form><input type=‘email’ ... /> <input type=‘url’ ... /><input type=‘search’ ... />
  10. 10. <form><input type=‘number’ min=’0’ max=’10’ step=’2’ ... />
  11. 11. <form><input type=‘range’ min=’0’ max=’10’ step=’2’ ... />
  12. 12. <form> <input type="date" ... /> <type="month" ... /> <input type="week" ... /> <input type="time" ... /> <input type="datetime" ... /><input type="datetime-local" ... />
  13. 13. <form>
  14. 14. <form> flowplayer≠ jQuery UI
  15. 15. <form>jQuery Tools Form Validator$(‘form.validator’).validator();
  16. 16. <form>$(":date").dateinput();
  17. 17. <form>HTML 5 new forms input + jQuery TOOLS =
  18. 18. MUST DO&HAVE!!! Obtrusive JavaScript ??? <a href=’...’ onclick=‘...’ / ...> <form onsubmit=’...’ / ...> =
  19. 19. MUST DO&HAVE!!! UNobtrusive JavaScript «Events» programming
  20. 20. MUST DO&HAVE!!!
  21. 21. MUST DO&HAVE!!!
  22. 22. MUST DO&HAVE!!!Closure Compiler YUI Compressor
  23. 23. So... JavaScript ?
  24. 24. CoffeeScript« It’s just JavaScript! »
  25. 25. 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!"); });
  26. 26. 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
  27. 27. underscore.js Small < 4 kb!
  28. 28. 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
  29. 29. underscore.jsHelloTemplate = _.template(‘<h1>Bonjour <%= first_name %> <%=last_name %> !</h1>’)greatRubyDev = { first_name: ‘Nicolas’, last_name: ‘Blanco’ }HelloTemplate(greatRubyDev) <h1>Bonjour Nicolas Blanco !</h1>
  30. 30. Rich client AjaxCommunication with server
  31. 31. Rich client
  32. 32. backbone.js Small < 5 kb!Framework & design independent Based on underscore.js
  33. 33. Bookid: 1Book Bookid: 2 View LibraryBookid: 3 Collection LibraryBook Viewid: 4 ViewsModels
  34. 34. Backbone.js eventsBook «change»id: 1 «change» Library «add» «remove»
  35. 35. 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
  36. 36. backbone.js Book = Backbone.Model.extend()myBook = new Book { author: ‘Victor Hugo’, title: ‘Les Misérables’ } myBook.get(‘author’) myBook.set(...) myBook.toJSON()
  37. 37. 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
  38. 38. 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
  39. 39. backbone.jsmyBookView = new BookView(model: myBook)myBookView.render() // <li class=‘book’>Victor Hugo - LesMisérables</li>myBook.set { author: ‘Nicolas’ } // triggers ‘change’ event
  40. 40. Thank you! follow me on twitter : @slainer68
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×