Clever Garden, Clever Age, Clever Presence - 100% digital

Utiliser, optimiser et servir des fichiers SVG

Jérémie Patonnier — 2012-02-15T13:53:59Z

SVG est un format d'images vectorielles qui repose sur une syntaxe XML. Il est actuellement supporté par tous les navigateurs du marché, y compris Internet Explorer depuis sa version 9. Le support de ce format s'améliorant rapidement, il devient de plus en plus utilisé. Ceci dit, le fait que ce format repose sur XML nécessite de prendre quelques précautions en termes de performance.

Rappel : Inclure du SVG dans du HTML

Si SVG peut se suffire à lui-même, le Web design moderne en fait une utilisation importante en conjonction avec les autres technologies Web que sont HTML, CSS et Javascript (à titre d'exemple, jetez donc un coup d'œil au site Vlog.it). Ainsi, avant de voir comment on optimise SVG, faisons d'abord un petit rappel sur les différentes façons d'inclure du SVG dans un document HTML.

Avec HTML, vous disposez de 4 techniques pour inclure du SVG dans le document :

la balise iframe,
la balise object,
la balise img
et, avec l'arrivée de HTML5, vous pouvez aussi mettre des balises svg directement dans du HTML.

Historiquement et techniquement, c'est la balise object qui est la plus sûre et la plus appropriée pour inclure du SVG. Elle vous permet d'éviter tous les effets de bord liés aux iframe (performances, accessibilité, etc.) tout en autorisant la propagation des événements DOM (ce que ne permet pas la balise img). Cerise sur le gâteau, elle vous permet de gérer élégamment les solutions de repli pour l'accessibilité ou, plus trivialement, de gérer les vieilles versions d'Internet Explorer. En effet, pour mémoire, si l'objet référencé par la balise object n'est pas compris par le navigateur, il affichera le contenu HTML présent à l'intérieur de la balise.

Du côté de CSS, il est possible d'inclure du SVG via :

la propriété background-image (extrêmement utile en conjonction avec la nouvelle propriété CSS 3 background-size)
la propriété content utilisée avec les pseudo-éléments ::before et ::after.

Il sera également possible à terme de l'utiliser avec la propriété CSS 3 border-image. Malheureusement, à ce jour, aucun navigateur ne supporte cette propriété correctement, en particulier avec SVG.

En résumé, navigateur par navigateur [1], ça va donner ça :

Intégration	IE	Firefox	Chrome	Opera
iframe	ok	ok	ok	ok
object	ok	ok	ok	ok
img	ok	ok	ok	ok
svg	ok	ok	ok	ok
background-image	ok	ok	ok	ok
content	ok	ok	ok	ok
border-image	non	bug	bug	bug

On notera un petit bug dans Firefox qui parfois pixelise les images SVG intégrées via CSS ou la balise img.

SVG et performance, les principaux écueils

En terme de performances, SVG souffre de deux écueils qui sont liés au fait que SVG est un format XML.

Premièrement, qui dit XML dit DOM. En effet, tous les navigateurs qui vont interpréter une image SVG vont d'abord construire un arbre DOM des éléments qui constituent cette image. Or, DOM est une API extrêmement lente qui peut consommer beaucoup de mémoire si l'on n'y prend pas garde. Ainsi, plus vous avez d'éléments dans votre image, plus son interprétation aura un impact sur les performances. Dans la mesure du possible, essayez toujours de réduire le nombre d'éléments nécessaires pour construire votre image.

Vous pouvez bien sûr toujours vous amuser à faire cette optimisation à la main, mais de vous à moi, ce n'est pas vraiment super folichon à faire. De ce point de vue, les logiciels de dessin vectoriel comme Adobe Illustrator ou Inkscape peuvent vous aider de manière assez efficace via les fonctions de « pathfinder » pour fusionner des formes entre elles ou via les fonctions de simplification des courbes qui vont vous permettre de réduire le nombre de vecteurs d'une image. L'aspect délicat étant alors de trouver le bon point d'équilibre entre le respect du dessin original et la version optimisée.

Deuxièmement, le format XML est un format texte assez verbeux. Concrètement, cela signifie qu'une image SVG est facilement plus lourde qu'une image bitmap du seul fait de son format natif.

Pour éviter ce problème, il vous faut compresser vos images. SVG supporte très bien la compression avec des résultats parfois spectaculaires (il n'est pas rare de voir des taux de compression de l'ordre de 70% à 80% avec une simple compression GZip). Pour cela, vous avez deux options :

produire du SVG compressé via GZip (qu'on identifie souvent avec l'extension .svgz au lieu de .svg)
demander à votre serveur Web de compresser le SVG à la volée lorsqu'il le sert.

La première option a l'avantage de réduire la consommation de CPU de votre serveur, tout en permettant de compresser le SVG au maximum, car les calculs de compression sont fait avant même la mise en production de vos fichiers.

De son côté, la deuxième option permet de gérer dynamiquement la compression en se basant sur de la négociation de contenu HTTP, afin de toujours servir aux navigateurs un format de compression qu'ils sont capables de gérer (GZip, Deflate, etc.).

En creux, les avantages de la première méthode sont les inconvénients de la seconde, et vice et versa.

Configurez votre serveur

Point essentiel quand on sert des fichiers SVG, vérifiez toujours que votre serveur Web envoie les en-têtes HTTP qui vont bien. En particulier, vérifiez toujours que le type MIME envoyé est bien image/svg+xml. Sans ça, certains navigateurs refuseront tous simplement d'afficher l'image, et les plus taquins vous afficheront un bel arbre XML lambda !

Si vous servez des fichiers compressés avec GZip, pensez bien à envoyer l'en-tête HTTP qui le signale, sinon, là encore, les navigateurs n'afficheront rien et les plus joueurs vous proposeront de télécharger le fichier.

Si vous utilisez le serveur Apache, il suffit d'ajouter ces deux lignes dans la configuration du VirtualHost (ou dans un fichier .htaccess) :

AddType image/svg+xml svg svgz
 AddEncoding gzip svgz

Optimiser SVG lui-même

Au niveau du document SVG, il est également possible de réaliser un certain nombre d'optimisations qui peuvent en améliorer les performances.

Un petit avertissement avant de rentrer dans les détails : ces optimisations nécessitent du temps et ne sont pas toujours automatisables. Elles sont donc coûteuses en ressources, or, on sait tous ce que cela implique dans un projet. Prenez donc le temps de peser le pour et le contre avant d'entamer une optimisation du code. Dans la mesure du possible, je vous indiquerai le coût de chacune de ces optimisations.

Réduisez les décimales

Les outils de dessins génèrent souvent des fichiers avec une précision trop importante (parfois plus de 6 chiffres après la virgule pour les valeurs chiffrées). Il est assez facile de réduire cette précision sans perte visuelle (2 à 3 chiffres après la virgule).

Coût de l'optimisation : Faible car facilement automatisable

Supprimez les balises inutiles

Les outils qui génèrent du SVG ont vite tendance à abuser des métadonnées (les balises title, desc, metaData). À moins qu'elles ne soient indispensables pour des questions d'accessibilité ou de référencement, vous pouvez les supprimer sans risque. Le cas des balises g ou svg, qui sont des conteneurs génériques, est un peu plus délicat car leur usage est parfois nécessaire. Il faut donc voir au cas par cas.

Coût de l'optimisation : Moyen, car même si c'est facilement automatisable, une part de travail manuel peut être nécessaire.

Préférez la balise path aux formes de base

La syntaxe de l'attribut d de la balise path est très compacte et s'optimise facilement (en particulier en utilisant les notation de coordonnées relatives), il est donc conseillé de préférer cette balise aux balises des formes de base qui sont souvent plus verbeuses.

Coût de l'optimisation : Élevé, car elle dépend fortement de votre outillage, de votre savoir-faire et du degrés d'optimisation que vous souhaitez atteindre.

Externalisez les attributs de présentation dans des feuilles de style

Certains attributs SVG peuvent s'utiliser comme des propriétés CSS. Ainsi, ils peuvent être facilement externalisés dans des feuilles de styles externes qui seront mises en cache par les navigateurs. Les sélecteurs CSS permettent également de mutualiser facilement les propriétés communes à certains éléments, ce qui limitera la verbosité de SVG.

Coût de l'optimisation : Moyen, car il repose sur le même outillage et le même savoir faire que pour les pages HTML. Cependant, il nécessite d'être bien pris en amont, surtout si vos fichiers SVG sont volumineux ou générés par des éditeurs d'images qui ne connaissent pas CSS.

Conclusion

Comme toute technologie Web, SVG nécessite un savoir-faire qui lui est propre. Ceci étant, en vous reposant sur vos connaissances en HTML/CSS et en suivant les quelques conseil de cet article, vous pourrez rapidement utiliser SVG dans un contexte de production sans avoir à vous soucier des performances. Amusez-vous bien !

[1] Notez que je ne cite pas Safari, mais c'est la même chose que Chrome. En ce qui concerne IE, il s'agit bien sûr de IE9 ;)

Netvibes et les présidentielles ...

Frédéric Bon — 2012-02-14T16:41:46Z

Le rachat surprise de Netvibes par Dassault Systèmes a été annoncé il y a quelques jours

Si l'on peut se féliciter que cette ex-jeune pousse reste dans le giron de l'industrie française du logiciel, on doit également faire un constat très préoccupant sur la capacité de la France à faire émerger des leaders du Web. Parce que sous réserve que mes informations soient correctes, c'est tout de même pas brillant cette aventure, alors que Netvibes a apporté de vraies innovations sur le marché Web et une vraie valeur d'usage pour bien des utilisateurs.

Quelques points :

Netvibes aurait été rachetée 20 M€ (http://www.kelblog.com/article-netv...), ce montant permettrait aux investisseurs de récupérer leur mise ... autrement dit, investisseurs si vous voulez gagner de l'argent ... évitez le secteur du numérique en France
Le CA Netvibes (2,7 M€ en 2010) reste anecdotique. Pourquoi ? Alors que Netvibes a bénéficié de financement important et que la boite était sur le haut de la vague ? Est-ce un problème purement interne à Netvibes ou un problème plus structurel : frilosité du tissu économique français numérique, difficulté à exporter les technos françaises ... ?
Dassault Systèmes a-t-il bien compris le marché du Web qui impose transparence et adhésion des communautés ? Je m'explique, Dassault Systèmes justifie son achat en expliquant "Netvibes aidera les clients à détecter des informations critiques telles que l'opinion de leurs propres clients, l'image de leur marque, le rythme d'adoption d'un produit par ses premiers utilisateurs. Tout écouter et apprendre de tous permettra aux entreprises d'agir en temps réel " ... Super. Je m'empresse donc de tester le service Netvibes Premium prévu à cet effet ... Et rien ne marche depuis 5 jours. Franchement, pas super crédible tout ça. Wake-up ! On a changé de monde, monsieur "Brick" et madame "Mortar".

Maintenant que Netvibes vient allonger la longue liste des "non-succès" du Web français (Dassault Systèmes ne fera jamais exploser Netvibes sur le Web), continuons-nous à regarder les trains super-soniques des leaders du Web ? Profitons des présidentielles pour interroger nos candidats sur comment ils vont favoriser le lancement du TGV français du Web.

Un nouveau validateur pour le w3c

Aurelien Masfrand — 2012-02-08T14:08:16Z

Le W3C nous fait la surprise d'une nouvelle version de son validateur http://validator.w3.org/nu l'ancien est toujours valide http://validator.w3.org/ mais celui à l'avantage de gagner en clarté (avis très personnel). La page est valide html5 pour notre plus grand bonheur, à voir ensuite à l'usage si cela sera plus pratique ou pas. En tout cas c'est un très bon réflexe d'avoir conservé l'ancienne version, certains préférerons toujours ne pas changer.

PostGIS et son utilisation avec un framework moderne

Paul Mallet — 2012-02-02T13:07:29Z

Pour rappel, PostGIS est une extension ajoutant des fonctionnalités géospatiales au systeme de gestion de base de données PostgreSQL, en se basant sur la spécification OpenGIS. Si votre application manipule des repères ou zones géographiques, des objets géométriques ou des distances, c'est donc un outil à ne pas négliger.

Malgré ses 10 ans d'existence (dont 6 en version stable), PostGIS reste très peu utilisé dans les projets Web, souvent à cause de son intégration compliquée au sein des différents frameworks. Nous allons voir ici que ce n'est pourtant pas toujours le cas, en décrivant son installation et son utilisation au sein d'un projet Play ! Framework

Installation & Configuration

Les consignes ci-dessous se basent sur la distribution Ubuntu 10.04 et sur la version 8.4 de PostgreSQL, mais l'installation varie assez peu pour les autres distributions et/ou versions, des paquets étant disponibles soit nativement, soit sur internet (voir http://trac.osgeo.org/postgis/wiki/... pour plus d'informations).

L'installation se fait grâce à deux paquets :

sudo apt-get install postgis

sudo apt-get install postgresql-8.4-postgis

Une fois ces deux paquets téléchargés, l'installation de PostGIS sur votre machine est terminée. Néanmoins, vous ne pouvez pas encore utiliser ses fonctionnalités avec votre base de données : pour cela, quelques manipulations supplémentaires sont encore nécessaires :

1.Connexion en tant qu'administrateur de serveur PostgreSQL

sudo su postgres

2. Activation du langage PL/SQL sur votre base de données :

createlang plpgsql my_geo_database

3. Ajout des fonctions PostGIS dans la base de données :

psql -d my_geo_database -f /usr/share/postgresql/8.4/contrib/postgis-1.5/postgis.sql

psql -d my_geo_database -f /usr/share/postgresql/8.4/contrib/postgis-1.5/spatial_ref_sys.sql

4. Changer le propriétaire des tables créées (et ainsi les rendre accessibles depuis vos applications)

psql my_geo_database -c "ALTER TABLE geometry_columns OWNER TO my_user"

psql my_geo_database -c "ALTER TABLE spatial_ref_sys OWNER TO my_user"

Ça y est, votre base de donnée est prête ! Voyons maintenant comment l'utiliser dans un projet Play !

Utilisation dans Play ! Framework

Imaginons une application Web répertoriant les célèbres cabines téléphoniques anglaises(lien), et fournissant un certain nombre de services au visiteur, notamment basés sur la géolocalisation.

Une fois le projet Play initialisé, la première étape est de télécharger les quelques librairies (JAR) nécessaires à l'utilisation de PostGIS :

Le JAR PostGIS, fournissant le connecteur JDBC ainsi que les classes utilisables dans l'application.

Hybernate spatial et Hybernate spatial postgis qui fournissent le dialecte JPA permettant d'utiliser PostGIS conjointement à Hibernate.

Une fois les JAR ajoutés au répertoire lib/, réfléchissons à la conception du modèle de l'application. Commençons simplement en créant une classe PhoneBox, avec comme attributs un label, une latitude et une longitude :

public class PhoneBox extends Model {
 
 public String label;
 public double latitude;
 public double longitude
 
 public PhoneBox(String label, double latitude, double longitude) {
 this.label = label;
 this.latitude = latitude;
 this.longitude = longitude;
 }
 }

Une cabine téléphonique est un élément assez petit (sur une carte du moins) pour être considéré comme un point (par opposition aux polygones). Ca tombe bien, PostGIS utilise justement cette notion de Point :

import org.postgis.Point;
 
 public class PhoneBox extends Model {
 
 public String label;
 public Point location;
 
 public PhoneBox(String label, double latitude, double longitude) {
 this.label = label;
 this.location = new Point(longitude, latitude);
 }
 }

Nous avons donc remplacé le couple latitude / longitude par un seul attribut de la classe Point et modifié le constructeur afin d'instancier cet attribut à partir de ces mêmes latitudes et longitudes.

Comme beaucoup d'autres frameworks Java, Play ! se base sur Hibernate pour gérer la persistence des objets en base de données. Malheureusement, Hibernate ne reconnait pas nativement les types utilisés par PostGIS : C'est là que va intervenir la bibliothèque Hibernate Spatial, installée précédemment.

import org.postgis.Point;
 
 @Entity
 @Table(name = "phonebox")
 public class PhoneBox extends Model {
 
 @Column(name = "label", length = 100, nullable = false)
 public String label;
 
 @Column(name = "position", columnDefinition = "GEOMETRY")
 @Type(type = "org.hibernatespatial.GeometryUserType")
 public Point location;
 
 // pas de changement au niveau du constructeur
 }

En plus des annotations usuelles, l'attribut columnDefinition de l'annotation @Column détermine le type du champ en base de données, et l'annotation @Type détermine quand à elle la classe à laquelle Hibernate doit se référer pour gérer la persistance de l'attribut, ainsi que les requêtes HQL le concernant.

Après avoir relancé l'application, on peut voir que la table phonebox a bien été créée dans notre base de données, avec les champs correspondants.

Ajoutons rapidement quelques cabines téléphoniques pour voir leur représentation dans la base de données :

Les objets sont donc correctement enregistrés avec leurs données. On peut remarquer que le champ location est représenté par une chaîne de caractère peu lisible, c'est le cas avec PostGIS pour tous les champs de type geometry.

Une fois nos cabines téléphoniques disponibles, voyons ce que PostGIS nous offre comme possibilités d'utilisations. Une fonctionnalité pourrait par exemple consister à récupérer les n cabines téléphoniques les plus proches d'une position donnée. Pour cela, nous allons utiliser une requête SQL utilisant les fonctions PL/SQL ajoutées plus tôt :

public static List closest(double latitude, double longitude, int nb)
 {
 TypedQuery q = JPA.em().createQuery("SELECT p FROM PhoneBox p ORDER BY ST_DISTANCE(ST_MAKEPOINT(:longitude:latitude,), position)", PhoneBox.class);
 
 List list = q
 .setParameter("latitude", latitude)
 .setParameter("longitude", longitude)
 .setMaxResults(nb)
 .getResultList();
 
 return list;
 }

La fonction ST_MAKEPOINT sert, comme son nom l'indique, à créer un point à partir des latitude et longitude fournies en arguments ;
la fonction ST_DISTANCE, quant à elle, récupère la distance entre deux objets géométriques (quels qu'ils soient).

En ordonnant les résultats de la requête en fonction de cette distance, on obtient bien les cabines attendues. En les affichant sur une carte Google Maps (les latitudes et longitudes sont directement récupérées depuis l'objet Point) :

Mais PostGIS ne se limite pas seulement au calcul de distances ! Le nombre de fonctions à disposition est assez impressionnant, et couvre énormément de cas d'usages. Pour s'en rendre compte, il suffit de regarder quelques projets où PostGIS a été mis à l'ouvrage :

La ville de Boston utilise PostGIS pour stocker ses données "ouvertes" et les rendre disponibles à la consultation :

L'IGN, stocke également une partie de son immense base de données sur PostgreSQL/PostGIS, avec des interfaces Web et natives à destination de ses chercheurs :

Mais attention, malgré toutes ses qualités, PostGIS n'est pas bon à utiliser dans tous vos projets géospatiaux : dans la plupart des cas (et souvent pour les plus basiques), passer par une API tierce (Google, Bing, OSM...) apportera une simplicité et un découplage bienvenus.

Futures perspectives

Actuellement, la version stable de PostGIS est la 1.5. La version 2 est sur les rails, et apportera son lot de nouveautés, notamment au niveau de la topologie et du support de la 3D, ainsi qu'un nettoyage de rigueur des fonctions dépréciées.

Pour plus d'informations sur cette seconde version, je vous renvoie vers les présentations suivantes ayant eu lieu lors lors de la dernière session PostgreSQL en Juin dernier :

L'e-commerce reste lent

Boris Schapira — 2012-01-27T11:03:52Z

StrangeLoop vient de publier son rapport annuel de sur la performance Web des sites e-commerces. Se basant sur le classement Alexa, ils ont moyenné les performances de plus de 2000 sites. Les résultats sont plutôt surprenants.

1. L'e-commerce est lent. Avec une moyenne à 10s, les sites e-commerce les mieux classés sont encore très lents. Les sites commerçants les plus rapides comme Nike.com ou Amazon.com ne sont donc que des arbres qui cachent la forêt.

2. Il faut vendre tout de suite, pas plus tard. Alors que le temps moyen de chargement associé à une première visite s'est amélioré, celui associé à une seconde visite (avec cache) s'est dégradé. Les commerçants souhaitent donc offrir la meilleure expérience immédiate, quitte à négliger les visites ultérieures. En 2012, il faut vendre vite : la fidélité ne rapporte plus.

3. La Perf ne rapporte pas. Les sites les mieux classés sont plus lents, leurs pages sont plus lourdes et ils respectent de moins en moins les bonnes pratiques du Web. Il est regrettable que ce classement n'inclue pas les chiffres d'affaire mais toujours est-il que cela nuance l'idée reçue selon laquelle un site plus rapide est mécaniquement mieux classé.

4. Les CDN ne sont pas synonymes de performance. Alors que de plus en plus de sites utilisent des CDN pour livrer leurs ressources, les performances ne sont pas au rendez-vous. Cela veut dire soit que les commerçants se reposent sur un CDN pour assurer la performance, soit que les sites les plus lents (pour diverses raisons autres qu'un problème de ressource) ont davantage tendance à recourir aux CDN, d'où leur surreprésentation. Dans les deux cas, le constat est le même : utiliser un CDN ne permet pas de se passer d'une réflexion interne.

Article sur le blog de StangeLoop

Retour du ParisJS du 25 janvier

Damien Alexandre — 2012-01-26T10:27:16Z

Comme tous les mois avait lieux hier une ParisJS - cette fois hébergée par l'agence Megalo dans le 17éme arrondissement à Paris.

Nous y avons parlé de CoffeeScript avec une présentation détaillée de la solution. C'est une technologie intéressante mais je ne suis pas encore convaincu au point de l'utiliser sur des projets clients. Toute la partie "debug" me semble un peu fragile (mais c'est en phase d'amélioration).

S'en est suivie une présentation du TDD en Javascript, rien de nouveau pour moi de ce côté. Présentation claire et intéressante, avec plein de bon conseils sur la mise en place de tests.


Photo par Nicolas Sommacal

David Thevenin nous a ensuite présenté son Toolkit de développement mobile (VS-Toolkit). L'outil en lui même ne m'intéresse pas beaucoup mais les contraintes et problématiques liées au javascript sur mobile était instructives.

Les deux (et demi) dernières conférences sont celles qui m'ont le plus intéressées, car on y parlait de WebGL.

Cedric Pinson nous à fait un retour passionnant sur la création de Nouvelle Vague. Les techniques utilisées pour les ombres, les nuages, mais aussi le scénario... pleins de problèmes qu'on a jamais eu à traiter avec du web standard. Les slides sont ici

Si la 3D dans le navigateur vous intéresse aussi, vous connaissez surement three.js (au moins de nom). Et bien sachez qu'il existe un boilerplate pour commencer à jouer avec ce moteur 3D en moins de 30 secondes ! Jerome Etienne a été encore plus loin en développant un builder pour ce boilerplate, et il nous en a fait la présentation.

La soirée s'est poursuivie sur des bières et des pizzas, un grand merci aux organisateurs et à Megalo donc - je vous invite à vous JETER sur les places le mois prochain car ça part très vite !

html5please.us

Jérémie Patonnier — 2012-01-24T16:36:36Z

Les gens derrière html5boilerplate.com viennent de mettre en place un chouette site : html5please.us. Son objectif est de permettre de savoir quelles technologies issues de HTML5/CSS3 sont utilisables dans quel contexte. Sur le papier, c'est génial. Dans les faits il faut quand même se méfier un peu pour éviter les grosses catastrophes. 2 exemples : WebGL est catalogué comme une technologie "sûre"... ben désolé, mais non. Il y a trop peu de support navigateur et même avec les navigateurs qui la supportent, il n'y a pas de garantie car cela dépend des drivers installés sur la machine qui fait tourner le tout. Donc pour moi, ce devrait être "à utiliser avec précaution". Autre exemple : SVG peut être utilisé avec des polyfill pour IE. Ok, sauf que suggérer l'utilisation de canvg pour IE conduit à devoir aussi utiliser également FlashCanvas... autant dire qu'avec ce combo, vous venez de tuer votre navigateur en bonne et due forme. Donc, une très bonne initiative, qui donne une bonne visibilité, mais soyez toujours critique vis à vis de votre propre contexte projet.

Un connecteur Magento intégré à eZ Publish : enfin une solution au couplage CMS/e-commerce ?

Matthieu Severe — 2012-01-24T14:54:17Z

Interakting lance la commercialisation de son connecteur eZ Publish/Mangento dans le market eZ Publish (reservé aux clients entreprise donc). Le parti pris est de garder eZ Publish comme point d'entrée et d'intégrer les vues Magento dans son layout. La solution semble intéressante et pourrait combler une demande pour les sites e-commerce avec un fort besoin de gestion de contenus. Plus d'informations

Web Storage, le stockage de données côté client

Damien Alexandre — 2012-01-17T13:24:31Z

Les applications Web sont de plus en plus complexes, et utilisent de plus en plus Javascript. Un des points faibles du développement de ces applications est le stockage de données sur le poste du client. Ce problème est résolu avec l'API HTML5 Web Storage.


Logo Web Storage

HTML5 change la donne en terme de stockage de données. Alors qu'à une époque, tout ce qui devait être stocké passait par le serveur Web, il est maintenant possible de s'en passer intégralement.

Nous faisons déjà du stockage côté client avec les cookies, mais ils sont limités à 4Ko et ont quelques défauts (sécurité, difficultés à gérer le multi-tab...). Web Storage est bien plus puissant et facile à manipuler.

Les différentes technologies de stockage

Le Web Storage a déjà fait couler beaucoup d'encre et 3 standards sont apparus :

Web Storage qui nous intéresse aujourd'hui, il permet de stocker des chaînes de caractères sous une clé alphanumérique ;
Web SQL Database qui porte une vraie base de donnée relationnelle dans le navigateur (mais qui a été abandonné par le W3C) ;
Indexed Database qui est un peu entre les deux. Il permet aussi le stockage de clé / valeurs mais est indéxé comme une base de donnée et rend donc possible des recherches sur valeur (sans devoir itérer sur tous les enregistrements comme avec Web Storage).

Web Storage est la seule des trois à être déjà disponible relativement partout :

Vous pouvez faire le test sur cette petit démo.

Web Storage, comment ça marche

Le principe est vraiment très simple : c'est un stockage sous la forme clé / valeur. Il y en a deux différents :

stockage uniquement pour la durée de la session (et uniquement pour cette instance du site, un autre onglet sur la même page n'est pas affecté) ;
stockage permanent.

Pour chacun de ces stockages, on a un objet manipulable, respectivement sessionStorage et localStorage. Les deux objets exposent la même API.

C'est tout ce dont vous avez besoin pour utiliser le stockage côté client.

Les navigateurs les plus récents ont déjà ajouté à leurs outils d'inspection de quoi manipuler les données stockées avec Web Storage :


L'inspecteur de Chrome


Firebug dans Firefox

Nous pouvons l'utiliser alors ?

Comme nous avons pu vous le montrer en introduction, certains navigateurs encore très présents (IE7) ne supportent pas localStorage. Heureusement pour nous un plugin jQuery existe ! Il utilise alors Gears, userData (sous IE) ou en dernier recours, les cookies. C'est une solution complète qui doit encore faire ses preuves mais qui pose déjà une bonne base. Comme toute nouvelle technologie, c'est en fonction de vos besoins et de vos visiteurs que le choix doit se faire - si comme Facebook vous décidez de ne plus supporter IE7 [1], ou si vous développez un site mobile uniquement, vous êtes alors prêt à utiliser Web Storage !

Voici quelques raisons justifiant l'utilisation de Web Storage dans le développement d'applications :

permettre à l'application de fonctionner en mode hors-ligne (stocker les données saisies en local et les synchroniser avec le serveur une fois connecté) ;
améliorer les performances (mettre en cache des données) ;
se passer d'un développement serveur ;
stocker par instance et non par domaine (contrairement aux cookies) ;
ne pas transmettre les données sur le réseau (contrairement aux cookies encore une fois) ;
disposer d'un espace de stockage important (5 Mo).

Certains points négatifs sont aussi à prendre en compte :

les données stockées sont vulnérables (visibles et modifiables par le client) ;
elles sont stockées dans un seul navigateur et il n'est donc pas possible d'y accéder depuis un autre ordinateur ou navigateur.

Quoi qu'il en soit, nous avons un nouveau jouet qui marche déjà un peu partout - il est temps de repenser notre approche du stockage côté client en prenant sérieusement en compte cette nouvelle fonctionnalité des navigateurs.

[1] La Timeline de Facebook n'est pas compatible avec le navigateur de Microsoft.

e-Reputation à l'Espace Clubs de la CCIT de Rennes (16.01.12)

Frédéric Bon — 2012-01-09T09:42:47Z

Clever Age est invitée par l'Espace Clubs de la CCIT de Rennes à animer une conférence sur l'e-Reputation le 16 Janvier 2012 à 19h. Frédéric Bon abordera le thème : "e-Reputation : les enjeux d'une gestion active de la présence sur le Web (risques à surveiller : manipulation technique, de l'identité, de l'information etc) et méthodologie pour mesurer et suivre sa présence dans le temps"

- La vie de nos agences