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

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

Comment étendre HTML5
dans une app native

Démo: PhoneGap et
Sencha Touch

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Destacado

Destacado (20)

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

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

Más de davrous

Más de davrous (20)

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

Notas del editor