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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

A piece of sugar in your client-side development

11,290
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.

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
11,290
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
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