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
Les défis d’une application mobile multi-périphériques avec HTML5
Dec 15, 2014
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/
http://conf2013.web-5.org/speaker/david-rousset-les-defis-dune-application-mobile-multi-peripheriques-avec-html5/
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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 ?
Related Documents
