VS - Toolkit
Développer une toolkit en HTML5
David Thevenin - ViniSketch
www.vinisketch.com
@d_thevenin
Appuyez sur → pour avancer.
Historique
Mi 2009 j'ai lancé le projet ViniSketch
IDE WYSIWYG HTML5
HTML5 : avenir du dev Mobile
- HTML5 la meilleure techno pour faire du multi-plateforme
- HTML5 offre de nombreuses possibilités
- HTML5 "à la mode"
Historique
Pour faire une application il faut une toolkit
Pas grand chose mi 2009 :
- iUI
- jQTouch
=> décidé d'implémenter ma toolkit
Les principales problématiques
Gérer le pond entre le monde HTML et le monde de votre toolkit
Par exemple :
- Etats HTML VS état dans la toolkit
- Evénements
CSS et HTML ne sont pas adaptés au développement d'IHM
(mais avec HTML5 cela s'arrange)
Performance
Eviter de faire une usine à gaz
Objectif de la toolkit
1 - Proposer une architecture par composants
2 - Une programmation par événements ou dataflow
- Evènement pour la communication inter composants
- Dataflow pour la gestion des données
3 - Formaliser le contrôle en utilisant des automates
4 - Que ca tourne sur un téléphone Mobile !!!
Papa ; c'est quoi un composant ?
1 - une boîte noire
2 - se configure avec des propriétés d'entrée
3 - effets de bord "se limitent" à la modification de ses propriétés de sortie et l'émission d'évènements
4 - encapsule d'autres composants
=> faciliter la réutilisabilité, faciliter la conception d'une application, limiter les bogues…
Mais concrètement, c'est quoi ?
C'est une classe qui hérite de vs.core.Object
Il ya 2 façons de faire une classe avec VS-Toolkit
- La méthode "hard core"
- La méthode "fleur bleue"
Une classe "hard core"
Constructeur
Méthode + appel super
Extension
Déclaration des prop.
Une classe "fleur bleue"
Extension
Déclaration des prop.
Méthode + appel super
Une classe "fleur bleue"
Déclarer une propriété :
1 - Simple
properties : {propName: vs.core.Object.PROPERTY_IN_OUT},
vs.core.Object.PROPERTY_IN_OUT
vs.core.Object.PROPERTY_IN
vs.core.Object.PROPERTY_OUT
2 - Descripteur
properties : { propName: {
set : function (v) {
...
this._prop_name = v;
},
get : function () {
...
return this._prop_name
}
}
3 - Path
properties : {propName: "textField#text"}
Gestion des événements
bind / notify et propagate
3 APIs
Générer un événement
Gestion des événements
Pont avec les événements DOM
Abonnement DOM
Gestion de l'événement
Le Dataflow
C'est un principe de programmation pour lequel un programme est représenté sous la forme d'un graphe :
- Un noeud est, dans notre cas, un composant
- Un arc relie une propriété de sortie d'un composant A à une propriété d'entrée d'un composant B
Démos DF
API du Dataflow
Liste des modules
- vs.util
Fonctions pour manipuler les className, String, charger dynamiquement un css ou JS… quelques extensions d'Objet (mais très peu)
- vs.core
Object, Model, FSM, DataStore, HTTPRequest…
- vs.ui
View, et ensemble de widgets (Button, List, Slider, ProgressBar…)
- vs.fx
Animation et Controller
- vs.data
GoogleSearch, RSSFeed…
- vs.ext / vs.av
GMap, Carousel, Accordion, Audio, Video…
Les principaux pbs du dev Mobile
1 - Bogues et non respect des standards
2 - Performance
3 - Mémoire
Les principaux pbs du dev Mobile
Exemple de Bogues
- innerHTML : plante de temps en temps sur iOS (pb de charge ?)
- offsetXXX : ne retourne pas toujours la bonne valeur (pb de reflow ?)
- rendu pas équivalent entre les # OSs (même entre # Android)
- …
Les principaux pbs du dev Mobile
Non respect des standards (source : www.html5test.com)
| Firefox Mobile 9 |
Multiple platforms |
313 |
9 |
| iOS 5 |
Apple iPhone and iPod Touch |
305 |
9 |
| Opera Mobile 11.50 |
Multiple platforms |
286 |
9 |
| MeeGo/Harmattan |
Nokia N9 and N950 |
271 |
14 |
| BlackBerry OS 7 |
BlackBerry Bold 9900 and others |
266 |
10 |
| Android 4.0 |
Samsung Galaxy Nexus |
256 |
10 |
| Bada 2.0 |
Samsung Wave and others |
251 |
9 |
| webOS 2.2 |
Palm Pre 2 and HP Pre 3 |
201 |
5 |
| Android 2.3 |
Google Nexus S and others |
182 |
6 |
| Windows Phone 7.5 (Mango) |
Samsung Omnia W, LG E906 and others |
141 |
1 |
Les principaux pbs du dev Mobile
La performance : Optimisation du JavaScript
- Limiter la manipulation du DOM
- Faire attention à la multiplication des scopes
- Faire attention à la profondeur d'héritage
- Cacher (display:none) les éléments non présents à l'écran
- Attention à la profondeur du DOM (ne pas dépasser 10-12 niveaux)
- Tableau numérique à la place de tableau associatif
- Optimisation des boucles
- …
➤ Lire le livre : Hight Performance Javascript (N. Zakas)
Les principaux pbs du dev Mobile
La performance : Mémoire
Sur une page Web "normale" le pbs n'éxiste pas vraiment
- Ordinateur a un paquet de mémoire
- Architecture d'un site web => rechargement régulier de page donc libération de la mémoire
Dans un environnement mobile, une WebApp ou une AppHybride est beaucoup plus limitée :
- Par exemple iOS WebKit limité à 10Mo de mémoire (WebOS : 3Mo…)
- Tout se fait dans la même page (avec programmation Ajax si nécessaire)
➤ faire attention à ne pas créer trop d'objets
➤ faire très attention aux memory leak
Les principaux pbs du dev Mobile
La performance : Mémoire
1 - Faire attention aux références croisées
var monObjet = {};
...
div = document.getElementById ("mon_objet");
monObjet.view = div;
div._objet_ = monObjet;
2 - libérer les objets lorsqu'on ne les utilise plus (delete)
3 - il faut défaire le maximum de listener (faire des removeEventListener)
4 - il est préférable d'implémenter un destructeur pour ses objets
var v = new vs.ui.View ({id: 'myView'});
v.init ();
...
free (v); // free appel la méthode 'destructor' de 'vs.ui.View'
v = undefined;
Les principaux pbs du dev Mobile
La performance : Mémoire
Cas particulier des images :
1 - utiliser une propriété css (ex:background) plutôt que img
2 - faire une "double libération" pour forcer la libération de la mémoire: (bogue ?)
1: img.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
2: delete (img)
END
David Thevenin - ViniSketch
www.vinisketch.com / @d_thevenin
N'hésitez pas à donner votre avis...
Appuyez sur ← pour revenir en arrière.