Les défis d’une applicationmobile multi-périphériquesavec HTML5David RoussetTechnical EvangelistMicrosoft FranceWeb-5 Conf...
• Introduction 5’• Créer une application mobile pure HTML535’– Les spécifications disponibles– Quelques défis retenus et q...
Introduction
HTML, CSS & JS : uneseule équipe pour toutes les plateformesen réutilisantcertaines parties sur plusieurs plateformespour ...
IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612 (Madame IRMA Corp)de périphériques mobiles équipés denavigate...
:– Ergonomie et design– Concept de SPA (Single Page Application)– Gestion de l’offline possible– Gestion de la performance...
Créer une applicationmobile pure HTML5
Démo: quelque exemplesdu potentiel d’HTML5
Défi 1 : relever le challenge du tactile• Outre les , nous avons unproblème technique :– Touch Events créés par Apple mais...
Un solution possible: Pointer Events• Ecrivez votre pour le tactile, lestylet et la souris• Les sites écrits uniquement po...
Démo: utilisation desPointer Events
Défi 2 : gérer la connexion des mobiles• Pas toujours de connexion : train, tunnel, campagne,trou noir, etc.• Vitesse de c...
• Cache basé sur un pour des scenariosdéconnectés• Choisissez les : HTML, CSS, JS &vos ressources• Permet de rendre dispon...
<html manifest=“test.appcache"><head>...<link href="yourstyles.css“ rel="stylesheet"><script src="yourcode.js"></script></...
Démo: application cachehttp://aka.ms/platformer
Solution : IndexedDB• Stockage, et recherche de données• Stockage de paires « » à la NoSQL• Indexation en utilisant un• Pa...
Démo: utilisationd’IndexedDB pour stockerdes images
Défi 3 : faire attention aux perfs et à la mémoire• Mauvaises nouvelles :(au moins !)– RAM PC >= RAM Mobile * 4 minimum (s...
Idées de solutions pour les performancesà privilégier auxanimations JS (jQuery ou autre)• Ne pas abuser du pattern de Prom...
Attention aux perfs de certaines WebView05001000150020002500300035004000IE10 (WP8) HTML5 APP (WP8) IPHONE 5 SAFARI IPHONE ...
Idées de solutions pour la mémoire• Savoir bien coder – Réutilisation d’objets, identifier les « memory leaks »– Virtuali...
Démo: benchmark spritescanvas HTML5
0100020003000400050006000Max sprites @30fps Max sprites @60fpsPerformance à 30 et 60 FPSPC Intel Core i5 HD4000 Core i7 av...
Démo: utilisation desWebWorkers pour appliquerdes filtres aux images
Résultats des performances de traitement0 5000 10000 15000 20000Blur with MonothreadBlur with WorkersBlur with GPUSnapDrag...
Défi 4 : les codes de Design de chaque plateforme• Une application prévue pour Windows Phone/Android/Firefox OS• Le niveau...
Références vers les guides de design• Windows 8 : http://design.windows.com• Windows Phone 8 : dev.windowsphone.com/design...
Démo: jQuery Mobile
Comment étendre HTML5dans une app native
Démo: PhoneGap etSencha Touch
Questions ?
Les défis d’une application mobile multi-périphériques avec HTML5
Prochain SlideShare
Chargement dans…5
×

Les défis d’une application mobile multi-périphériques avec HTML5

1 243 vues

Publié le

Aujourd’hui, on peut s’approcher de plus en plus des capacités des applications dites « natives » grâce à HTML5. Il y a 2 manières pour atteindre ce but. Utiliser les capacités intrinsèques d’HTML5 en faisant un site web moderne ou étendre ses capacités avec des frameworks comme PhoneGap. Mais ce n’est pas tout. Il y a ensuite de nombreux défis à relever : gestion du tactile, identité visuelle de chacune des plateformes, performances très différentes du desktop, etc. Nous verrons comme adresser certains de ces points via des exemples parfois issus du monde du jeu vidéo pour égayer cette présentation !
http://conf2013.web-5.org/speaker/david-rousset-les-defis-dune-application-mobile-multi-peripheriques-avec-html5/

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive
  • T+3 min
  • T+5 min
  • T + 5 min Démos www.msn.com sur Tablet et WP8 dans les simu puis Larousse sur Win8 RT
  • T+8 min
  • T+11 min Démo : mousemove, puis CSS touch-action puis MSPointerMove puis HandJS
  • T+15min
  • T + 18 min : démo platformer sur WP8 (online/offline)
  • T+20 min
  • T+22 min : démo SnapyX sur IE10 classique et expliquer problèmes ergo pour le tactile
  • T+25 min
  • T+28 min
  • T+29 min
  • T+31minDémo 60 FPS sur WP8 et sur le PC
  • T+33min
  • T+34Démo filtres image sur Surface RT avec application caméra
  • T+36
  • T+37
  • T+38
  • T + 39Projet déjà setupé. Démo avec thème WP et sans thème (iOS)
  • T + 40 min
  • Démo du projet PhoneGap complet (accès caméra, contacts, etc.) sur le téléphoneDémo de SenchaTouch dans IE10: http://cdn.sencha.io/touch/sencha-touch-2.2.0/examples/kitchensink/index.html?platform=ie10#demo/overlays et dans Chrome : http://cdn.sencha.io/touch/sencha-touch-2.2.0/examples/kitchensink/index.html#demo/overlays
  • Les défis d’une application mobile multi-périphériques avec HTML5

    1. 1. Les défis d’une applicationmobile multi-périphériquesavec HTML5David RoussetTechnical EvangelistMicrosoft FranceWeb-5 Conference 2013 - Béziers@davroushttp://aka.ms/davrous
    2. 2. • Introduction 5’• Créer une application mobile pure HTML535’– Les spécifications disponibles– Quelques défis retenus et quelques suggestions desolutions• Plus loin avec PhoneGap et Sencha Touch5’AgendaAgenda
    3. 3. Introduction
    4. 4. HTML, CSS & JS : uneseule équipe pour toutes les plateformesen réutilisantcertaines parties sur plusieurs plateformespour accéderentièrement à la plateformePourquoi faire du HTML5 sur mobiles & tablettes ?
    5. 5. IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612 (Madame IRMA Corp)de périphériques mobiles équipés denavigateurs modernes en 2013de développeurs Web en 2013de développeurs d’applications mobiles’intéressent à HTML5des applications mobile utiliseront du HTML5 en2015Quelques chiffres intéressants
    6. 6. :– Ergonomie et design– Concept de SPA (Single Page Application)– Gestion de l’offline possible– Gestion de la performance à des endroits différents:– Profils développeurs d’apps JS encore rares– Faire attention aux fuites mémoires, à l’optimisation ducode, aux patterns modernes, etc.Apps vs Sites
    7. 7. Créer une applicationmobile pure HTML5
    8. 8. Démo: quelque exemplesdu potentiel d’HTML5
    9. 9. Défi 1 : relever le challenge du tactile• Outre les , nous avons unproblème technique :– Touch Events créés par Apple mais non membre de laspécification W3C (patents): pour la souris et pour le tactile– Faire attention aux « gestures »
    10. 10. Un solution possible: Pointer Events• Ecrivez votre pour le tactile, lestylet et la souris• Les sites écrits uniquement pour la souris fonctionneautomatiquement• Patterns connus d’évènements DOM de la souris, avecdes extensions pour le touch
    11. 11. Démo: utilisation desPointer Events
    12. 12. Défi 2 : gérer la connexion des mobiles• Pas toujours de connexion : train, tunnel, campagne,trou noir, etc.• Vitesse de connexion inférieure et plus chère : éviterde télécharger à chaque fois
    13. 13. • Cache basé sur un pour des scenariosdéconnectés• Choisissez les : HTML, CSS, JS &vos ressources• Permet de rendre disponible vosHTTPvia une MAJ dumanifesteSolution : HTML5 application cache
    14. 14. <html manifest=“test.appcache"><head>...<link href="yourstyles.css“ rel="stylesheet"><script src="yourcode.js"></script></head><body>...<video … src=“yourvideo.mp4” …></video>...</body></html>L’usage d’app cache via le fichier de manifestMIME Type: text/cache-manifest
    15. 15. Démo: application cachehttp://aka.ms/platformer
    16. 16. Solution : IndexedDB• Stockage, et recherche de données• Stockage de paires « » à la NoSQL• Indexation en utilisant un• Pas de dépendances vis-à-vis de l’implémentation dunavigateur
    17. 17. Démo: utilisationd’IndexedDB pour stockerdes images
    18. 18. Défi 3 : faire attention aux perfs et à la mémoire• Mauvaises nouvelles :(au moins !)– RAM PC >= RAM Mobile * 4 minimum (sans parler de la RAMVidéo)– Certains limitent les perfs de la WebView• Bonnes nouvelles :– CPU ARM sont– GPU mobiles utilisés pour (CSS3, Canvas)sur mobiles sont récents et donc– Tout le monde ne limite pas les perfs ;-P
    19. 19. Idées de solutions pour les performancesà privilégier auxanimations JS (jQuery ou autre)• Ne pas abuser du pattern de Promise• Essayez d’utiliser les pour taper dansles différentes cœurs voir des shaders pour taper dansle GPU• Faites vos pour :– Niveler vers le bas– Adapter dynamiquement les perfs à la plateforme
    20. 20. Attention aux perfs de certaines WebView05001000150020002500300035004000IE10 (WP8) HTML5 APP (WP8) IPHONE 5 SAFARI IPHONE 5 HTML5 APPSUNSPIDER 0.9.1 SCORELOWER IS BETTER
    21. 21. Idées de solutions pour la mémoire• Savoir bien coder – Réutilisation d’objets, identifier les « memory leaks »– Virtualisation des données• Attention aux contenus de type image– SVG : le vectoriel c’est cool mais ça charge le DOM– Faites attention aux résolutions des images• Utiliser des profileurs
    22. 22. Démo: benchmark spritescanvas HTML5
    23. 23. 0100020003000400050006000Max sprites @30fps Max sprites @60fpsPerformance à 30 et 60 FPSPC Intel Core i5 HD4000 Core i7 avec nVidia GT330m Surface RTNokia Lumia 920 Xbox 360
    24. 24. Démo: utilisation desWebWorkers pour appliquerdes filtres aux images
    25. 25. Résultats des performances de traitement0 5000 10000 15000 20000Blur with MonothreadBlur with WorkersBlur with GPUSnapDragon (2 CPUs) - 1280x720020004000600080001000012000140001600018000Blur with Monothread Blur with Workers Blur with GPUSnap Dragon ARM vs Intel Core i7 (HD4000)Core i7 - HD4000 - 1280x720 SnapDragon (2 CPUs) - 1280x720
    26. 26. Défi 4 : les codes de Design de chaque plateforme• Une application prévue pour Windows Phone/Android/Firefox OS• Le niveau actuel de support de CSS sur mobile vouspermet de refaire vous-même l’expérience des appsnatives mais en partant de zéro…• … ou alors utilisez et leurs thèmesadaptés !
    27. 27. Références vers les guides de design• Windows 8 : http://design.windows.com• Windows Phone 8 : dev.windowsphone.com/design• iOS : iOS Human Interface Guidelines• Android 4.x : http://developer.android.com/design• Firefox OS : UI Guidelines for Firefox OSont leurs propres univers
    28. 28. Démo: jQuery Mobile
    29. 29. Comment étendre HTML5dans une app native
    30. 30. Démo: PhoneGap etSencha Touch
    31. 31. Questions ?

    ×