Archives de l’auteur : François

La folie Javascript

Si, au début, Javascript est arrivé discrètement, pour « égailler » un peu les pages, aujourd’hui, c’est un vrai feu d’artifice !

Bien souvent, les sites chargent plus de 15 scripts, qui représentent souvent plusieurs centaines de Ko.

Sans oublier le code javascript ajouté directement dans les pages…

Le résultat est que les pages sont lourdes : lourdes à charger, et lourdes à exécuter.

En fait, bien souvent, on importe des librairies, et on en utilise une petite sous partie.

Quel dommage, surtout quand on connait l’importance d’avoir des sites qui répondent vite…

Comment en est on arrivé là ?

En fait, c’est une dérive, largement encouragée par pas mal de boites du secteur.

Je m’explique.

Pour la plupart des entreprises, la partie technique du site e-commerce est un centre de cout, pas un centre d’investissement (dommage 😉 ).

Dans un tel contexte, l’ajout de fonctions au site est toujours une négociation difficile.

La parade ? Le Javascript !

Les boites viennent vous voir, et vous explique que leur solution est « non intrusive », et qu’il suffit d’ajouter « un petit script de rien du tout ».

Et ça marche ! En quelques heures, le site a intégré une nouvelle fonction, et cela n’a presque rien couté en intégration…

Mais voilà, tout cela à un prix : le « petit code javascript » inclus un autre fichier, bien plus gros, qui lui même fait appel à des fonctions externes… et la page a pris 20, 30% de temps de chargement en plus, sans compter les bugs « qui viennent avec » parce que certaines fonctions sont incompatibles, les unes avec les autres.

Tout cela se corrigera avec le temps, quand la qualité deviendra un critère de performance (ce qu’il est vraiment !).

La qualité, cela doit aller jusqu’au bout, jusqu’au contenu qu’on envoie sur le poste du client.

Le pire, c’est qu’il n’est pas très compliqué de faire le ménage là dedans : compiler regrouper les fichier javascript, supprimer les fonctions inutiles, compresser tout ça… Et gagner de précieuses secondes en temps de chargement !

Wizishop propose une base d’images pour sites e-commerce

En voilà une bonne idée !

Wizishop propose une « place d’échange » pour des images liées au e-commerce.

On peut naviguer par type d’image (bouton, logos, icones, illustrations), par couleur, format…

Et sur chaque image, on peut choisir le format à récupérer : JPG, PSD, …

La banque d’images est gratuite !

Bref, un service bien utile pour faire de jolis sites !

Une idée du e-commerce en HTML 5

Le HTML 5, qui devrait aboutir à une norme en 2014, est déjà bien présent dans les navigateurs modernes, Google Chrome en tête.

Le web a d’ailleurs pratiquement toujours évolué comme ça, tiré par les navigateurs plus que par la normalisation (qui est donc plutôt une normalisation « a posteriori »).

Voici quelques sites, qui, je pense, donne une idée de ce qu’on peut faire, en HTML 5 dans notre secteur du e-commerce.

Premier exemple : manufacturedessai.it

Le site propose une navigation verticale plutôt étonnante, faite de plusieurs couches (calques) transparents, ce qui donne une impression dynamique nouvelle. A tester pour comprendre ;).

Autre site  : www.gforce.be

La navigation est là encore différente, avec un slider plein écran, et les différents éléments qui apparaissent en superposition.

Autres sites intéressants :

Tout ça pour avoir un petit aperçu de ce que permet le HTML 5, et des évolutions à venir pour les sites e-commerce… A suivre de très près ;).
Au, fait, je donne une formation HTML 5 le 16 Septembre…

Afficher les pages très vite pour gagner plus

Toutes les études converges :

Plus un site est optimisé, en terme de temps de chargement, et mieux c’est pour le taux de transformation.

Les gains vont en fait au delà, puisque, pour donner un autre exemple, Google tient compte de ce paramètre dans son algo de pondération des sites : plus un site répond vite et mieux il sera indexé.

L’impact est énorme ! C’est un levier clé, et souvent plutôt accessible.

Donc, il faut faire un site qui répond très vite, et qui propose des pages légères.

Pour savoir ce qu’il faut faire, il y a des outils, soit à installer en plug in, soit en ligne.

Exemple :

pagespeed.googlelabs.com vous propose d’évaluer n’importe quelle page de votre site, et vous donne, en quelques secondes, des recommandations pour faire mieux.

Avec cet outil, Amazon a un score de 90 / 100 sur une page catégorie prise au hasard…

L’outil de Google estime que Amazon pourrait aller plus loin, par exemple au niveau du traitement sprite des images (qui est pourtant déjà en oeuvre sur le site).

Et avec votre site, vous avez quel score ?

UPDATE

L’outil de test gtmetrix.com propose un rapport encore plus complet (merci Ludo)

AB Testing : Testez votre capacité à anticiper les résultats

L’AB Testing, c’est une technologie, qui permet de tester, directement en ligne, deux versions (ou plus) d’une page.

Pour une page donnée, on soumet une première version à une partie des internautes, et une autre version à l’autre partie.

On compare le résultat attendu (clic sur un bouton typiquement), et on garde celle qui transforme le mieux.

Avantage : cela permet d’éviter de choisir pour de mauvaises raisons.

Mais avez vous besoin d’AB testing pour savoir ce qui marche le mieux ?

Si vous en doutez, je vous conseille de vous tester sur le site : whichtestwon.com

Vous allez pouvoir choisir, parmi deux images, laquelle est la mieux faite pour avoir la meilleure transformation.

Facile ?

Pas tant que ça !

Tout ceux qui ont vraiment essayé le savent : les résultats ne sont pas toujours ceux qu’on attend !

D’ou l’importance de ces technologies !

(via Adrien)

Ce qui va manquer à Apple

J’ai pu lire ici ou là qu’Apple devrait très bien pouvoir continuer sans Steve Jobs.

Peut être…

Ce qui, à mon sens, sera le plus difficile à remplacer, c’est la vision stratégique développée par Steve Jobs, et son incroyable capacité à la mettre en oeuvre.

Steve Jobs a su prendre des risques, et faire faire à son entreprise des changement radicaux sur des choix originaux.

Alors que la boite n’est pas très en forme, il lance l’iPod.

Il crée une autre énorme rupture avec l’iPhone.

Puis encore une autre avec l’iPad.

Cette capacité à développer une vision originale est très rare.

Tim Cook est sans doute un bon directeur des opérations. Il va poursuivre la route : mise à jour des produits (iphone, ipad, mac, ipod) plus fins, plus puissants, avec plus de fonctions intégrées dedans.

C’est très bien pour les 2/3 années à venir, mais si Apple avait fait ça dans les années précédentes, on n’aurais eu aucun des nouveaux produits.

Alors, qui sera le prochain visionnaire pour Apple ?

Evolution du modèle de programmation du web – Retour vers le futur

Au début, avant Internet, il y avait des ordinateurs qui fonctionnaient en mode client serveur.

Le serveur gérait principalement les données, et l’applicatif tournait sur le client.

Après, il y a eu Internet.

Comme les premieres versions du HTML étaient très pauvres, l’application c’est naturellement déportée vers le serveur. C’est ce qu’on appelle le serveur d’appication.
Dans ce modèle, le serveur fournit à peu près tout : il livre au client une page complète, que le client n’a qu’à afficher. L’intelligence côté client est très légère.
Cela ressemble à ce qu’on fait sur les gros système (CICS par exemple : vous savez, ces écrans textes avec les caractères en vert qu’on voit si on regarde les écrans des vendeurs dans pas mal de boites…).

Mais le web s’est enrichi, avec le Javascript, et la possibilité de développer des applications bien plus intelligentes, bien plus sophistiquées, et surtout bien plus agréables à utiliser.
Cela veut dire que, dans ce modèle, l’intelligence est répartie entre le serveur et le client. Plus la couche Javascript est évoluée, et plus l’intelligence est déportée vers le client.

Avec les évolutions actuelles du web, on peut légitimement penser que c’est bien le sens de l’évolution pour les prochaines années : revenir en fait à un modèle ou l’intelligence applicative est principalement sur le poste client.
Côté serveur, on gère principalement la couche des données.
Sur un modèle en trois couches MVC (modèles / vue / contrôleur), les deux autres couches, vue et contrôleur sont donc déployée sur les postes clients.

Prenons un exemple : un site e-commerce au hasard 😉

Ce que doit gérer le serveur, c’est bien l’ensemble des données du système :

  • Le catalogue, avec l’ensemble des produits, et toutes les informations associées à ce catalogue : description, prix, stock, …
  • La base des clients
  • La base des commandes

Certaines de ces données peuvent, pour des raisons de performance, être gardées sur le poste client. Exemple : la hiérarchie des produits. Mais les données qui « bougent » doivent absolument être stockées côté serveur. Exemple : le stock produit.
Tout le reste pourrait très bien être géré côté client.

Avantages de ce modèle :

L’application peut être bien plus évoluée que ce qu’on fait en web classique. On peut avoir une bonne idée de ce modèle, avec, par exemple, la navigation dans un catalogue en Ajax : quand on applique un filtre, la page n’est pas raffraichie, seuls les produits changent. C’est un peu la préhistoire du modèle que je présente.

Autre avantage : la consommation, en bande passante, est bien plus optimisée. Une fois l’applicatif chargé sur le poste client, on n’échange que les données nécessaires. Pas besoin de renvoyer l’ensemble de la template du site à chaque page.

Les technologies sont assez développées pour permettre de mettre en oeuvre ce modèle dès aujourd’hui.

En fait, ça ne serait pas une bonne idée ;).

Pourquoi ?

Parce que ce modèle n’est pas très « SEO friendly ». Comment google peut il indexer un truc pareil ?

La réponse est connue, c’est la même que pour le Flash : il faut faire deux versions du site. Une « dynamique » et une sans javascript. C’est accepté par Google, car la version sans Javasript est bien accessible à ceux qui le souhaitent, et c’est en particulier le cas pour les mal et non voyants.

L’autre problème, c’est que, même si les technologies permettent « théoriquement » de mettre en oeuvre ce modèle, les outils, les frameworks ne proposent pas encore les bons outils pour faire ça sans avoir à tout réinventer.

Donc, c’est un peu tôt pour se lancer à fond là dedans, mais cela donne, je pense, une bonne idée de « là ou l’on va ».

(article issu d’une discussion passionnante avec Pieroxy)

Le navigateur permet d’exécuter des applications natives !

Ce titre ne vous évoque peut être rien, mais pourtant, c’est un changement fort !

Au début, le navigateur, c’est pour afficher des documents Web en HTML.

Mais la tendance, depuis pas mal de temps en fait, c’est de « tout faire passer par le navigateur ».

C’est une « guerre », que j’avais appelé, il y a quelques années, la guerre des pixels.

La question est : qui contrôle les pixels sur les écrans des clients ?

Normalement, quand on achète un PC, c’est le système d’exploitation qui « règne » sur les pixels.

Mais si on fait tout passer par le navigateur, le système d’exploitation est « masqué », et celui qui a la main, c’est le navigateur.

C’est bien l’enjeu du Chromebook…

Et c’est aussi comme cela que j’analyse l’annonce de Google, de permettre de faire tourner des applications C ou C++ directement dans le navigateur.

En fait, le navigateur se comporte comme une sorte de machine virtuelle, dans laquelle il est possible d’exécuter du code natif.

Natif ? Natif pour le processeur. Il faudra donc compiler une version différente pour chaque type de processeur.

Par contre, le navigateur recouvre l’ensemble des accès du système d’exploitation. Il n’y a aucun lien entre l’application et ce système, ce qui permet au code généré de tourner sur n’importe quel OS.

C’est, de mon point de vue, une étape majeure, qui permet de renforcer le « pouvoir » du navigateur par rapport au système d’exploitation.

Au fait, ça sert à quoi de faire tourner des applications natives ?

Avec Javascript, on peut déjà faire à peu près tout ce qu’on veut. C’est vrai, mais ça rame. ça rame forcément, par rapport à un code natif, parce que Javascript arrive dans l’ordinateur au format texte, qu’il faut analyser, compiler à la volée et exécuter. Tout cela étant bien plus lent que l’exécution d’un code natif. Pour s’en convaincre, il suffit de faire tourner de belles démos HTML5, et de surveiller la consommation CPU… Le résultat est clair : Javascript est terriblement gourmand en ressource CPU. L’exécution d’un code natif devrait régler ce problème.

Tient, au fait, pour mémoire, cette idée n’est pas si nouvelle que ça… Microsoft avait proposé de faire tourner des applications directement dans IE (ActiveX). ça marchait bien mais c’était basé sur une techno propriétaire et n’offrait aucune sécurité. Si l’application voulait reformater le disque, cela ne posait aucun problème.

Une autre alternative, c’est Java, avec les Applets. Cela fonctionne, mais c’est moins performant, puisque le java n’est pas natif par rapport au processeur. Et puis, c’est comme ça, Java n’a pas su s’imposer comme langage universel client (cela reste une solution pro côté serveur).

La proposition de Google semble corriger tous ces problèmes. Maintenant, pour que ça soit une techno vraiment intéressante, il faut qu’elle soit mise en oeuvre sur les autres navigateurs.

Voici une vidéo de présentation par Google :

(via ReadWriteWeb)

Formation à venir en septembre

Bon, c’est pas tout ça, j’ai des formations sur le feu 😉

Deux rendez vous avec le Benchmark Group sur septembre :

HTML 5

Quels sont les enjeux pour cette nouvelle norme, déjà utilisée et pas encore normalisée ?

Comment s’y préparer ?

Que peut on en attendre ?

1/2 journée, le 16 septembre prochain pour voir tout ça.

Pour voir le programme, c’est par ici.

Choix des composants clés pour monter sa plateforme e-commerce

C’est la deuxième session de cette formation que je trouve tout à fait passionnante.

Comment « monter » sa plate forme e-commerce ?

Quels sont les bons composants à intégrer ?

Comment s’interfacer avec les autres systèmes de l’entreprise ?

Quels technologies choisir ?

…

Bref, pleins de questions clés.

La formation a lieu le 21 septembre.

Pour voir le programme, c’est par là.