A piece of sugar in your client-side development

12,810 views
12,726 views

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,810
On SlideShare
0
From Embeds
0
Number of Embeds
9,234
Actions
Shares
0
Downloads
30
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

×