Les défis d’une application mobile multi-
périphériques avec HTML5
David RoussetTechnical Evangelist
Microsoft France
Web-5 Conference 2013 - Béziers@davroushttp://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
• Réutilisez les compétences HTML, CSS & JS : une seule équipe pour toutes les plateformes
• Réduisez potentiellement les couts en réutilisant certaines parties sur plusieurs plateformes
• Combinez le avec du natif 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)
• 1 milliard de périphériques mobiles équipés de navigateurs modernes en 2013
• 2 millions de développeurs Web en 2013
• 79% de développeurs d’applications mobile s’intéressent à HTML5
• 80% des applications mobile utiliseront du HTML5 en 2015
Quelques chiffres intéressants
• Approches différentes :– Ergonomie et design– Concept de SPA (Single Page Application)– Gestion de l’offline possible– Gestion de la performance à des endroits
différents• Jeu de compétences :
– 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 problèmes d’ergonomie, nous
avons un problème technique :– Touch Events créés par Apple mais non membre
de la spécification W3C (patents)
– Ecrire du code 2 fois : pour la souris et pour le tactile
– Faire attention aux « gestures »
Un solution possible: Pointer Events • Ecrivez votre code une seule fois 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 manifeste pour des scenarios déconnectés
• Choisissez les fichiers à cacher: HTML, CSS, JS & vos ressources
• Permet de rendre disponible vos ressources au delà du cache local HTTP
• Resynchronisez les fichiers 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
Cache Manifest#12/02/2013 v10Cache:index.htmlyourstyles.cssyourcode.js...yourvideo.mp4
Network:*
Fichier HTML Fichier de manifest
MIME Type: text/cache-manifest
Démo: application cache
http://aka.ms/platformer
Solution : IndexedDB• Stockage, Indexation et recherche de données
• Stockage de paires « clé-valeur » à la NoSQL
• Indexation en utilisant un attribut objet
• 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 :
– CPU x86 >= CPU ARM * 10 (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 multi-coeurs– GPU mobiles utilisés pour accélération matérielle (CSS3,
Canvas)– Moteurs JS sur mobiles sont récents et donc rapides– Tout le monde ne limite pas les perfs ;-P
Idées de solutions pour les performances• CSS3 Transitions/Animations à privilégier aux
animations JS (jQuery ou autre)• Ne pas abuser du pattern de Promise • Essayez d’utiliser les Web Workers pour taper
dans les différentes cœurs voir des shaders pour taper dans le GPU
• Faites vos Benchmarks pour :– Niveler vers le bas– Adapter dynamiquement les perfs à la
plateforme
Attention aux perfs de certaines WebView
IE10 (WP8) H T ML5 A pp (WP8) iPho ne 5 Sa fa r i i Pho ne 5 H T ML5 A pp 0
500
1000
1500
2000
2500
3000
3500
4000
Sunspider 0.9.1 ScoreLower 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
Max sprites @30fps Max sprites @60fps0
1000
2000
3000
4000
5000
6000
Performance à 30 et 60 FPS
PC Intel Core i5 HD4000 Core i7 avec nVidia GT330m Surface RTNokia Lumia 920 Xbox 360
Démo: utilisation des WebWorkers pour appliquer des filtres aux images
Résultats des performances de traitement
Blur with Monothread
Blur with Workers
Blur with GPU
020
0040
0060
0080
00
1000
0
1200
0
1400
0
1600
0
1800
0
SnapDragon (2 CPUs) - 1280x720
Blur with Monothread Blur with Workers Blur with GPU0
2000
4000
6000
8000
10000
12000
14000
16000
18000
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 n’a
pas le même look qu’un site web ou qu’une app iOS/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 jQuery Mobile 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
• Exception : les jeux vidéos ont leurs propres univers
Démo: jQuery Mobile
Tout ce dont j’ai besoin serait déjà
présent dans HTML5…
Dans un monde parfait
Comment étendre HTML5 dans une app native
Démo: PhoneGap et Sencha Touch
Questions ?
