Sencha a créé Fastbook, une application HTML5 qui mock de manière très proche l'application native de Facebook et affichant des performances similaires sur iOS et Android dans le but de démontrer que "HTML5 est prêt".
Mark Zuckerberg, le CEO de Facebook, disait il y a quelques mois: “la plus grosse erreur que nous ayons fait en tant que société a été de miser sur le HTML5 au lieu du natif, car le résultat n'était pas au rendez-vous”. Facebook a donc décidé de créer des applications natives pour iOS et Android, la seconde ayant été lancée il y a moins d'une semaine. L'argument avancé était que "HTML5 n'est pas prêt", car pas assez rapide et difficile à utiliser pour développer du fait d'un manque d'outillage correct.
Deux développeurs de Sencha, une boîte connue pour la création d'outils et de frameworks HTML5, ont décidé de démontrer que HTML5 est prêt en créant Fastbook en quelques mois sur leur temps libre. Fastbook est une application HTML5 qui imite l'application native de Facebook et qui accède aux données réelles de Facebook via son API. (Il est recommandé de tester l'application depuis un terminal mobile car elle ne semble pas fonctionner sur les navigateurs de bureau.)
La courte vidéo ci-dessous montre un test comparant l'application native de Facebook face à Fastbook, à la fois sur iOS/iPhone 4S et Android/Galaxy Nexus. Etonnamment, l'application HTML5 fait aussi bien que sa concurrente native quand il s'agit de charger le flux d'actualités et de défiler dans celui-ci, et elle dépasse même la native dans plusieurs domaines :
- L'application HTML5 met en cache les données lorsqu'on passe d'une vue à l'autre. Au contraire, l'application native recharge le flux à chaque fois
- Fastbook utilise des listes imbriquées infinies pour les commentaires, procurant ainsi une meilleure expérience utilisateur
- Fastbook possède en plus l'affichage en mode paysage
- Sur Android/Galaxy Nexus l'application HTML5 charge les données plus rapidement que ne le fait la native.
Les créateurs de Fastbook pensent qu'une application HTML5 a un comportement décevant lorsqu'elle est architecturée avec "l'approche du développement de site web" et en n'utilisant pas les "outils adaptés pour le développement d'applications.”
Ils ont aussi découvert que l'application native de Facebook avait au moins deux défauts majeurs :
- C'est encore une application hybride : “Le Flux d'Actualités a été migré en natif ainsi que la page de profil, mais beaucoup d'autres UIs de l'application n'étaient que de simples requêtes HTTP GET vers m.facebook.com. Aujourd'hui, l'application “native” de Facebook est un hybride web / natif : une partie du contenu est générée sur m.facebook.com et affichée dans une UIWebView et une partie est faite de composants natifs en Objective C.”
- Elle transfère bien plus de données qu'elle n'en a besoin, environ “15KB à 20KB de JSON gzippé est transféré pour chaque dizaine d'éléments, dont grande partie n'est pas utilisée pour le rendu des vues.” Après avoir nettoyé les données FB sur un serveur proxy, l'équipe de Sencha a pu réduire le trafic de 90%.
Pour faire fonctionner cette démo, Sencha a dû améliorer leur framework Touch :
- Ajout d'un nouveau composant Infinite List pour les pages avec un nombre d'objets inconnu. Cette liste contient un petit nombre de noeuds DOM qui sont réutilisés pour rendre les objets précédents/suivants. Cela aide à réduire l'empreinte mémoire et réduit drastiquement le temps de rendu pour les grosses pages.
- Ajout d'un nouveau composant Sandbox Container “qui détache programmatiquement les vues complexes et les rend dans leur propre iframe, ce qui partitionne le DOM.“ L'avantage : le Flux d'Actualités est maintenant plus rapide car celui-ci, la Timeline et la vue Story sont dans des containeurs séparés.
- Meilleur intégration avec la Task Queue existante qui “empêche la concurrence de requêtes de lecture et d'écriture dans le DOM, éliminant ainsi les re-layout non nécessaires. Ceci, combiné avec la nouvelle technique de sandboxing, contribue à réduire significativement les layouts coûteux des vues complexes comme la Timeline et le Flux d'Actualités.”
- Ajout d'une nouvelle classe AnimationQueue qui retarde certaines tâches couteuses lorsque le CPU est inactif. Cela améliore le défilement : lorsque l'utilisateur fait défiler le flux d'actualités rapidement, le chargement d'images et le rendu sont suspendus jusqu'à ce que le mouvement s'arrête, ensuite seulement il reprend.
- Fastbook utilise les WebWorkers qui permettent de récupérer des données dans un thread séparé de celui qui gère l'UI, ce qui permet de conserver un défilement plus fluide.
Si HTML5 n'était pas à la hauteur l'été dernier, la démo de Sencha montre que le HTML5 peut maintenant être aussi rapide qu'une application native, prouvant ainsi que HTML5 est “prêt” même pour de grosses applications web comme Facebook.
Sencha a lancé HTML5 Is Ready, un concours d'applications offrant $20,000 de récompenses en cash et matériel pour les développeurs “prêts à montrer à quel point les applications peuvent être géniales lorsque de bons développeurs avec de bons outils s'associent avec HTML5.