A piece of sugar in your client-side development

  • 10,116 views
Uploaded 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.

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
10,116
On Slideshare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
28
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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