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

Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5 David Rousset Technical Evangelist Microsoft France Web-5 Conference 2013 - Béziers @davrous http://aka.ms/davrous
• Introduction 5’ • Créer une application mobile pure HTML5 35’ – Les spécifications disponibles – Quelques défis retenus et quelques suggestions de solutions • Plus loin avec PhoneGap et Sencha Touch 5’ Agenda Agenda
Introduction
HTML, CSS & JS : une seule équipe pour toutes les plateformes en réutilisant certaines parties sur plusieurs plateformes pour accéder entièrement à la plateforme Pourquoi faire du HTML5 sur mobiles & tablettes ?
IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612 (Madame IRMA Corp) de périphériques mobiles équipés de navigateurs modernes en 2013 de développeurs Web en 2013 de développeurs d’applications mobile s’intéressent à HTML5 des applications mobile utiliseront du HTML5 en 2015 Quelques chiffres intéressants
: – 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 du code, aux patterns modernes, etc. Apps vs Sites
Créer une application mobile pure HTML5
Démo: quelque exemples du potentiel d’HTML5
Défi 1 : relever le challenge du tactile • Outre les , nous avons un problème technique : – Touch Events créés par Apple mais non membre de la spécification W3C (patents) : pour la souris et pour le tactile – Faire attention aux « gestures »
Un solution possible: Pointer Events • Ecrivez votre pour le tactile, le stylet et la souris • Les sites écrits uniquement pour la souris fonctionne automatiquement • Patterns connus d’évènements DOM de la souris, avec des extensions pour le touch
Démo: utilisation des Pointer Events
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 : éviter de télécharger à chaque fois
• Cache basé sur un pour des scenarios déconnectés • Choisissez les : HTML, CSS, JS & vos ressources • Permet de rendre disponible vos HTTP via une MAJ du manifeste Solution : HTML5 application cache
<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 manifest MIME Type: text/cache-manifest
Démo: application cache http://aka.ms/platformer
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 du navigateur
Démo: utilisation d’IndexedDB pour stocker des images
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 RAM Vidé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
Idées de solutions pour les performances à privilégier aux animations JS (jQuery ou autre) • Ne pas abuser du pattern de Promise • Essayez d’utiliser les pour taper dans les différentes cœurs voir des shaders pour taper dans le GPU • Faites vos pour : – Niveler vers le bas – Adapter dynamiquement les perfs à la plateforme
Attention aux perfs de certaines WebView 0 500 1000 1500 2000 2500 3000 3500 4000 IE10 (WP8) HTML5 APP (WP8) IPHONE 5 SAFARI IPHONE 5 HTML5 APP SUNSPIDER 0.9.1 SCORE LOWER IS BETTER
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
Démo: benchmark sprites canvas HTML5
0 1000 2000 3000 4000 5000 6000 Max sprites @30fps Max sprites @60fps Performance à 30 et 60 FPS PC Intel Core i5 HD4000 Core i7 avec nVidia GT330m Surface RT Nokia Lumia 920 Xbox 360
Démo: utilisation des WebWorkers pour appliquer des filtres aux images
Résultats des performances de traitement 0 5000 10000 15000 20000 Blur with Monothread Blur with Workers Blur with GPU SnapDragon (2 CPUs) - 1280x720 0 2000 4000 6000 8000 10000 12000 14000 16000 18000 Blur with Monothread Blur with Workers Blur with GPU Snap Dragon ARM vs Intel Core i7 (HD4000) Core i7 - HD4000 - 1280x720 SnapDragon (2 CPUs) - 1280x720
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 vous permet de refaire vous-même l’expérience des apps natives mais en partant de zéro… • … ou alors utilisez et leurs thèmes adaptés !
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 OS ont leurs propres univers
Démo: jQuery Mobile
Comment étendre HTML5 dans une app native
Démo: PhoneGap et Sencha Touch
Questions ?

Check these out next

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

Recomendados

Mais conteúdo relacionado

Apresentações para você(7)

Destaque(20)

Similar a Les défis d’une application mobile multi-périphériques avec HTML5(20)

Mais de davrous(20)

Último(20)

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

Notas do Editor