LOpen Web en tant que    pierre angulaire dudéveloppement multi-objets          @tbassetto
Mon parcours• Développeur Front-End chez• Développeur JavaScript chez• Paris Hackers, ParisJS, PhoneGap Paris• Représentan...
Joshfire
Définitions
LOpen Web en tant que    pierre angulaire dudéveloppement multi-objets
LOpen Web en tant que    pierre angulaire dudéveloppement multi-objets
Objets connectés ?http://fuckyeahinternetfridge.tumblr.com
Multi-objets connectésOn ne laisse personne derrière (ordinateurs de  bureau, ordinateurs portables, téléphones,          ...
Multi-objets connectés• Multi-touch       • Push• GPS               • Bluetooth / RFID• Accéléromètre     • Capteurs de• O...
“Open Web”• Nous réalisons peu de sites Web• Principalement des applications ou objets  basées sur HTML/CSS/JS (hybrides)
Le choix de l’hybride
Application hybride                      © trigger.io
Une fragmentation à plusieurs niveaux      famille     marque                 ...        perfs        input   language    ...
Pourquoi ce choix ?• Mutualisation des • Expérience plus  compétences          complète• Mutualisation du • Utilisation de...
Expérience “bizarre”
Accès aux APIs
Qualité
Partage de code
Hybrides célèbres
Le natif ne fait pas tout
Problématiques évitées• SEO• Nombre de requêtes HTTP• Plus d’accès depuis un UA inconnu
Nouvelles problématiques • Validation pour entrer dans le market • Gestion de la perte de connexion • Resume/pause de l’ap...
WRITE ONCE, RUN EVERYWHERE
Objectif• Adapter le layout et le comportement• Tout en partageant le même coeur  applicatif, le même contenu
Responsive Web Design Le postulat de départ : même code HTML, changement de layout via des media-queries
Responsive Web Design                                      @media screen and (max-width:480px)@media screen and (max-width...
Feature detection• Par exemple, pour navigateur “moderne” :   if(querySelector in document        && localStorage in windo...
Feature detection:   Modernizrif (Modernizr.localstorage) {    // localstorage disponible} else {    // on doit faire sans}
Les limites• Pas toujours suffisant• Pas de dégradation possible, expérience  complète• Utilisation du RWD par type de fami...
Outils• adapt.js• respond.js• formfactor.js• device.js
(function() {                 formfactor.js   /* contents of tv.js */   formfactor.register({tv: [      "tv",      functio...
device.js<link rel="alternate" href="http://foo.com" id="desktop"media="only screen and (touch-enabled: 0)"><link rel="alt...
Frameworks UI• jQuery Mobile• Sencha Touch 2• Kendo UI Mobile• Jo
Frameworks• Backbone.js• Ember• Ender• Zepto
Créer son framework• “Joshfire Framework 2”• Basé sur Backbone.js + Require.js• Sur GitHub, dans une branche (pas master)  ...
Quelques considérationssur les différentes familles          d’objets
Téléphones & Tablettes
PhoneGap/Cordova
Principe• Même APIs pour accéder aux capteurs  quelque soit le matériel• Système de plugin qui permet quand même  d’appele...
API disponibles• Calquées sur celle du W3C• Risque d’évolution en fonction de B2G
Exemplenavigator.camera.getPicture(onSuccess, onFail, { quality: 50 });function onSuccess(imageData) {    var image = docu...
Debug mobile
Weinre Mettre les lignes de commandes qui vont bien
Weinre• $ sudo npm -g install weinre• Insérer <script src="http://a.b.c:8081/  target/target-script-min.js"></script>• htt...
Simuler les événements         touch• Options des nouveaux Chrome Dev Tools• Touch Bookmarklet: http://  louisremi.github....
Un mot sur les touch       events• Version W3C basée sur l’implémentation  d’Apple• Bloquée par Apple• Version Microsoft
TVs
En commun• Un paradigme entièrement différent• Contexte connu (contrairement aux  téléphones)• La télécommande s’utilise c...
Problèmes<link rel="stylesheet" media="screen" href="..."><link rel="stylesheet" media="tv" href="..."> User Agent String ...
Samsung• SDK Windows• Leader incontesté• Basé sur un vieux Firefox (peut-être plus  vrai en 2012)
Philips• Moteur web basé sur Opera• Site Web plein écran
LG• SDK Windows• Basé sur WebKit• On peut soumettre une URL à leur store
Google TV• Comme un Chrome (sauf le paradigme  différent)• <meta name="gtv-autozoom"  content="off" />
“Desktop”
Peu de solutions• QtWebKit• MacGap• AIR
Les objets ambiants
Juste un jeu d’API
Serveur d’API
BeagleBoneL’embarqué cible le developpeur système / C  mais si on préinstalle node et cloud9 cela               change la ...
Raspberry PI
Le Miroir
Le Miroir
Le Miroir• Micro-ordinateur• WebKit plein écran• Une app hybride pour en lancer d’autres
Canapé
Canapé• Arduino + RFID• Serveur node.js qui pilote une Google TV
La Borne
La Borne
La Borne• iPad + app hybride• Arduino + RFID pour passer le badge
Conclusion
Quelques souhaits• Plus d’implications dans les devices APIs• De meilleurs frameworks multi-objets
Two more things
Joshfire recrute !http://www.notaregularcompany.com
dotJS.fr — 30 Nov
+ grande conférenceJavaScript en France
Mr doobTickets early birds: http://www.dotjs.fr
QUESTIONS ?
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
Prochain SlideShare
Chargement dans…5
×

L'Open Web en tant que pierre angulaire du développement multi-objets

1 631 vues

Publié le

Présentation faire à SudWeb 2012 décrivant l'utilisation faite de HTML

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 631
Sur SlideShare
0
Issues des intégrations
0
Intégrations
123
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

L'Open Web en tant que pierre angulaire du développement multi-objets

  1. 1. LOpen Web en tant que pierre angulaire dudéveloppement multi-objets @tbassetto
  2. 2. Mon parcours• Développeur Front-End chez• Développeur JavaScript chez• Paris Hackers, ParisJS, PhoneGap Paris• Représentant français pour Mozilla WebFWD
  3. 3. Joshfire
  4. 4. Définitions
  5. 5. LOpen Web en tant que pierre angulaire dudéveloppement multi-objets
  6. 6. LOpen Web en tant que pierre angulaire dudéveloppement multi-objets
  7. 7. Objets connectés ?http://fuckyeahinternetfridge.tumblr.com
  8. 8. Multi-objets connectésOn ne laisse personne derrière (ordinateurs de bureau, ordinateurs portables, téléphones, tablettes,TVs, etc.)
  9. 9. Multi-objets connectés• Multi-touch • Push• GPS • Bluetooth / RFID• Accéléromètre • Capteurs de• Orientation proximité• Microphone • Capteurs de luminosité• Capture video & image • Gyroscope
  10. 10. “Open Web”• Nous réalisons peu de sites Web• Principalement des applications ou objets basées sur HTML/CSS/JS (hybrides)
  11. 11. Le choix de l’hybride
  12. 12. Application hybride © trigger.io
  13. 13. Une fragmentation à plusieurs niveaux famille marque ... perfs input language Java .NET Objective-C JS C++
  14. 14. Pourquoi ce choix ?• Mutualisation des • Expérience plus compétences complète• Mutualisation du • Utilisation des code markets• Royalty Free • APIs disponibles
  15. 15. Expérience “bizarre”
  16. 16. Accès aux APIs
  17. 17. Qualité
  18. 18. Partage de code
  19. 19. Hybrides célèbres
  20. 20. Le natif ne fait pas tout
  21. 21. Problématiques évitées• SEO• Nombre de requêtes HTTP• Plus d’accès depuis un UA inconnu
  22. 22. Nouvelles problématiques • Validation pour entrer dans le market • Gestion de la perte de connexion • Resume/pause de l’application • Mise à jour
  23. 23. WRITE ONCE, RUN EVERYWHERE
  24. 24. Objectif• Adapter le layout et le comportement• Tout en partageant le même coeur applicatif, le même contenu
  25. 25. Responsive Web Design Le postulat de départ : même code HTML, changement de layout via des media-queries
  26. 26. Responsive Web Design @media screen and (max-width:480px)@media screen and (max-width:999px) {{ #nav #extras { { float: none; clear: left; width: auto; float: none; } margin: 0 0 0 225px; width: 550px; #extras } {} float: none; width: auto; margin: 0; } .feature-image { display: none; } }
  27. 27. Feature detection• Par exemple, pour navigateur “moderne” : if(querySelector in document      && localStorage in window      && addEventListener in window) {      // victoire } else {      // ...     }
  28. 28. Feature detection: Modernizrif (Modernizr.localstorage) { // localstorage disponible} else { // on doit faire sans}
  29. 29. Les limites• Pas toujours suffisant• Pas de dégradation possible, expérience complète• Utilisation du RWD par type de familles
  30. 30. Outils• adapt.js• respond.js• formfactor.js• device.js
  31. 31. (function() { formfactor.js /* contents of tv.js */ formfactor.register({tv: [ "tv", function() { return navigator.indexOf("Samsung") > 0; }, (navigtor.indexOf("Samsung") > 0) ]})();var formfactor = formfactor.detect([ { formfactor : "tv", resources: ["/style/tv.css", "/style/fullscreen.less", "/script/ambientsounds.js", "/script/fx.coffee" ], callbacks: function() { alert("Look mum, I am on TV!"); } },},// default callback when nothing matches.{ "resources": ["/style/plain.css", "script/plain.js"], "callbacks": function() { alert("In plain mode.");}});
  32. 32. device.js<link rel="alternate" href="http://foo.com" id="desktop"media="only screen and (touch-enabled: 0)"><link rel="alternate" href="http://m.foo.com" id="phone"media="only screen and (max-device-width: 640px)"><link rel="alternate" href="http://tablet.foo.com"id="tablet" media="only screen and (min-device-width:641px)"><script src="device.js"></script>
  33. 33. Frameworks UI• jQuery Mobile• Sencha Touch 2• Kendo UI Mobile• Jo
  34. 34. Frameworks• Backbone.js• Ember• Ender• Zepto
  35. 35. Créer son framework• “Joshfire Framework 2”• Basé sur Backbone.js + Require.js• Sur GitHub, dans une branche (pas master) mais sans documentation
  36. 36. Quelques considérationssur les différentes familles d’objets
  37. 37. Téléphones & Tablettes
  38. 38. PhoneGap/Cordova
  39. 39. Principe• Même APIs pour accéder aux capteurs quelque soit le matériel• Système de plugin qui permet quand même d’appeler toutes les fonctions du SDK officiel
  40. 40. API disponibles• Calquées sur celle du W3C• Risque d’évolution en fonction de B2G
  41. 41. Exemplenavigator.camera.getPicture(onSuccess, onFail, { quality: 50 });function onSuccess(imageData) {    var image = document.getElementById(myImage);    image.src = "data:image/jpeg;base64," + imageData;}function onFail(message) {    alert(Failed because: + message);}
  42. 42. Debug mobile
  43. 43. Weinre Mettre les lignes de commandes qui vont bien
  44. 44. Weinre• $ sudo npm -g install weinre• Insérer <script src="http://a.b.c:8081/ target/target-script-min.js"></script>• http://debug.phonegap.com
  45. 45. Simuler les événements touch• Options des nouveaux Chrome Dev Tools• Touch Bookmarklet: http:// louisremi.github.com/touch-devtool/
  46. 46. Un mot sur les touch events• Version W3C basée sur l’implémentation d’Apple• Bloquée par Apple• Version Microsoft
  47. 47. TVs
  48. 48. En commun• Un paradigme entièrement différent• Contexte connu (contrairement aux téléphones)• La télécommande s’utilise comme un clavier moins souvent comme une souris• Domaine des jeux et des médias vidéos
  49. 49. Problèmes<link rel="stylesheet" media="screen" href="..."><link rel="stylesheet" media="tv" href="..."> User Agent String d’une LG Smart TV 2012: Mozilla/5.0 (DirectFB; Linux; ko-KR) AppleWebKit/534.26+ (KHTML, like Gecko) Version/5.0 Safari/534.26+
  50. 50. Samsung• SDK Windows• Leader incontesté• Basé sur un vieux Firefox (peut-être plus vrai en 2012)
  51. 51. Philips• Moteur web basé sur Opera• Site Web plein écran
  52. 52. LG• SDK Windows• Basé sur WebKit• On peut soumettre une URL à leur store
  53. 53. Google TV• Comme un Chrome (sauf le paradigme différent)• <meta name="gtv-autozoom" content="off" />
  54. 54. “Desktop”
  55. 55. Peu de solutions• QtWebKit• MacGap• AIR
  56. 56. Les objets ambiants
  57. 57. Juste un jeu d’API
  58. 58. Serveur d’API
  59. 59. BeagleBoneL’embarqué cible le developpeur système / C mais si on préinstalle node et cloud9 cela change la donne
  60. 60. Raspberry PI
  61. 61. Le Miroir
  62. 62. Le Miroir
  63. 63. Le Miroir• Micro-ordinateur• WebKit plein écran• Une app hybride pour en lancer d’autres
  64. 64. Canapé
  65. 65. Canapé• Arduino + RFID• Serveur node.js qui pilote une Google TV
  66. 66. La Borne
  67. 67. La Borne
  68. 68. La Borne• iPad + app hybride• Arduino + RFID pour passer le badge
  69. 69. Conclusion
  70. 70. Quelques souhaits• Plus d’implications dans les devices APIs• De meilleurs frameworks multi-objets
  71. 71. Two more things
  72. 72. Joshfire recrute !http://www.notaregularcompany.com
  73. 73. dotJS.fr — 30 Nov
  74. 74. + grande conférenceJavaScript en France
  75. 75. Mr doobTickets early birds: http://www.dotjs.fr
  76. 76. QUESTIONS ?

×