Historique

Pour faire une application il faut une toolkit

Pas grand chose mi 2009 :

1. iUI
2. 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

1. Evènement pour la communication inter composants
2. 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

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

1. La méthode "hard core"
2. La méthode "fleur bleue"

Une classe "hard core"

function Canvas (config) { this.parent = vs.ui.View; this.parent (config); this.constructor = Canvas; } Canvas.prototype = { canvas_ctx: null, ... uneMethode: function () { View.prototype.uneMethode.call (this); ... } ... }; util.extendClass (Canvas, vs.ui.View); util.defineClassProperties (Canvas, { "propName": { set : function (v) { ... }, get : function () { ... } }, ... }); var c = new Canvas (config);

Une classe "fleur bleue"

var Canvas = vs.core.createClass ({ parent: vs.ui.View, properties : {propName: vs.core.Object.PROPERTY_IN_OUT}, uneMethode : function (p1, p2, ...) { this._super (p1, p2, ...); // ou this._super.apply (this, arguments); ... }, ... }); var c = new Canvas (config);

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

var MyClass = vs.core.createClass ({ initComponent : function () { this._super (); ... this.textFiled.bind ("change", this); // ou this.textField.bind ("change", this, this.notify); // ou this.textField.bind ("change", this, "notify"); }, notify : function (event) { if (event.src === this.textField && event.type == "change") this.propagate ("continue", data); } ... });

Gestion des événements

Pont avec les événements DOM

var MyView = vs.core.createClass ({ parent: vs.ui.View, initComponent : function () { this._super (); ... this.view.addEventListener ("mousemove", this); }, handleEvent : function (event) { ... } ... });

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…

Démos

<div id="demo1"> <img id="image_logo" src="resources/logoParisJS.png"> </div> var image = new vs.ui.View ({id:"image_logo"}); view.init (); var slider = new vs.ui.Slider ({ id:"a_slider", orientation: vs.ui.Slider.VERTICAL, range: [0, 360] }); slider.init (); var div = document.getElementById ('demo1'); div.appendChild (slider.view);

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...

Toolkit: vinisketch.fr/toolkit

GitHub: github.com/vinisketch

Appuyez sur ← pour revenir en arrière.