WebApps avec Backbone & JQueryMobile

Pour https://twitter.com/smd_conf # http://saintemobiledays.com/

Transcript

1. WebApp(s) Mobile(s) avec Backbone & co
2. @k33g_org “Avant-vendeur” Steria Lyon
3. Nous allons voir : Ma problématique Des frameworks web mobile Mon choix > JQM Backbone Backbone + JQM & co
4. Ma problématique “web mobile”
5. Produire vite (& facile) > avv + démo “beau ou pas trop moche” > “faire rêver” le client bien > réutilisable & exploitable
6. Les frameworks “web mobile(s) ”
7. Pourquoi les utiliser ?
8. Ergonomie mobile Design mobile Spécificités mobiles
9. ils sont nombreux Quelques exemples
10. Dojo-Mobile à base de tags html + javascript skins iOs, Android, BlackBerry “fait tout” mais …
11. C’est du web! EVITER le“OS like à tout prix”
12. c’est souvent “moyen” >> restez simple >> personnalisez
13. SenchaTouch Composants Javascript Très puissant Reconnu forte communauté “fait tout” mais …
14. Beau, mais … difficile à “skinner” apprentissage long
16. Mon choix > jQuery Mobile
17. simple à base de tags composants “html” transitions “skinnable” facilement …
18. Fonctionnement de JQM Sélection des <elements data-??? = “something”> Ajout de balises, classes css, gestion des évènements Votre HTML devient une IHM Mobile
19. un peu de HTML >> démo 00-jqm & 01-jqm_skin
20. … mais … JQM ne “fait pas tout”
21. Backbone
22. 1 “librairie” MVC très légère avec un modèle objet (& facile à lire)
23. Classes are back! \o/
24. var  Klass  =  function()  {};   Klass.extend  =  Backbone.Model.extend;   ! var  TinyToon  =  Klass.extend({   !   constructor  :  function  (firstName,  lastName){       this.firstName  =  firstName;       this.lastName  =  lastName;   !          TinyToon.counter  +=1;     },     toString  :  function()  {       return  this.firstName  +  "  "  +this.lastName     }   },{/*  -­‐-­‐-­‐  static  -­‐-­‐-­‐  */          counter  :  0,          getCounter  :  function(){  return  TinyToon.counter;  }   });   ! var  babs  =  new  TinyToon("Babs",  "Bunny")   var  buster  =  new  TinyToon("Buster",  "Bunny")
25. var  TinyRabbit  =  TinyToon.extend({          constructor  :  function  (firstName,  lastName){                  TinyRabbit.__super__.constructor           .call(this,  firstName,  lastName);                  TinyRabbit.counter  +=1;          },          whoAmI  :  function  ()  {  return  "I'm  a  RABBIT!";  }   },{          counter  :  0,          getCounter  :  function(){  return  TinyRabbit.counter;  }   });
26. BackBone = 4 composants importants
27. Model Collection View (+ Template) Router
28. un peu de JS >> démo 02-bb
29. Backbone & REST $.ajax()
30. var  TinyToon  =  Backbone.Model.extend({          urlRoot  :  "/tinytoons"   })   ! var  TinyToons  =  Backbone.Collection.extend({          model  :  TinyToon,          url  :  "/tinytoons"   });
31. buster.save()         POST  :  http://domain/tinytoons   ! var  tinyToon  =  new  TinyToon({id:"001"})   tinyToon.fetch()   GET  :  http://domain/tinytoons/001   ! buster.set("twitter","@buster")   bob.save()   PUT  :  http://domain/tinytoons/001   ! buster.destroy()   DELETE  :  http://domain/tinytoons/001   ! var  tinyToons  =  new  TinyToons()  /*collection*/   tinyToons.fetch()   GET  :  http://domain/tinytoons  
32. Backbone + JQM (& co) c’est simple
34. Backbone (+ dépendances) jQueryMobile Require.js (+ plugin “text”) showdown.js highlight.js
35. Explication de code >> démo 03-bbjqm
36. >> 1 template de projet tout prêt https://github.com/k33g/ saintemobiledays >> amusez vous avec (fork it)
37. Si vous souhaitez aller plus loin : Grunt Grunt-contrib-jst Grunt-contrib-copy Grunt-contrib-uglify
38. Questions ? ping me @k33g_org