IFrame ou Canvas ?

Le premier article de cette section Facebook concernera le premier choix que l'on a à faire lorsque l'on se lance dans le développement d'applications Facebook.

Dans les 2 cas, il y a du pour et du contre. Avant la sortie de la dernière version du SDK Facebook, j'aurai sans aucun doute dit Iframe sans hésiter, aujourd'hui je pense que Canvas est plus approprié dans bien des cas.

Cet article propose de faire un petit benchmark rapide des 2 solutions offertes par facebook.

Application Facebook - Canvas

Je trouve clairement qu'il y a eu progrès. Je ne sais pas ce qui s'est passé depuis quelques mois, mais le serveur répond considérablement plus vite lorsqu'on l'interroge (Application stupide de test du nouvel SDK Facebook que j'ai curieusement appelé Error Document, vous constaterez que ça vole haut ;-) ).

Avantages du Canvas

• Meilleur affichage : il n'y a pas cet IFrame redimensionnable affreuse que l'on trouve dans les applications IFrame (par ailleurs, il arrive que le redimensionnement déconne dans celles-ci),
• Utilisation du FBML (ie FaceBook Markup Language) natif exécuté par le serveur, il faut être franc, c'est bien plus fiable et il n'y a pas ce délai pénible d'attente de l'exécution du Javascript pour certaines fonctions (type internationalisation...),
• Accès au FBJS (FaceBook Javascript),
• Il reste néanmoins la possibilité d'inclure des IFrames avec le tag FBML <fb:iframe />,
• Le développement est plus souple lorsque l'on développe en composite.

Inconvénients du Canvas

• Il reste un peu plus lent que l'Iframe (sentiment personnel),
• On est obligé d'utiliser le FBJS (je sais, je l'ai mis en avantage...), c'est super chiant à déboguer car Facebook remanie les noms des objets côté serveur, mais ce n'est pas non plus infaisable,
• Pas d'utilisation de librairies JS externes,
• Niveau publicité, si vous utilisez Google Adsense, c'est plus chiant à intégrer car vous devrez nécessairement l'inclure dans une frame comme c'est le cas dans mon "Hello world", Error Document.

Application Facebook - IFrame

Avantages de l'IFrame

• Vous pouvez utiliser jQuery, PrototypeJS ou Mootools pour les amateurs, et à aucun moment vous n'êtes pas obligés de créer des objets FBJS,
• Il est plus facile d'externaliser une application IFrame (encore que, si le travail est bien fait, ça ne devrait pas être le cas),
• Vous développez votre application Facebook comme un site web classique, personne ne vous force même à comprendre comment le SDK de Facebook fonctionne à partir du moment ou vous récupérez correctement ce que vous avez à récupérer (ID de l'utilisateur Facebook, nom, prénom etc.),
• Il est plus simple de communiquer avec la page lorsque l'on envoi des requêtes HTTP avec des animations Flash,
• Toujours avec Flash, on peut facilement utiliser ExternalInterface...

Inconvénients

• L'aspect est un peu "buggy", particulièrement si vous utilisez l'API de traductions,
• Le FBML peut s'exécuter, mais c'est pénible tant ce n'est pas très souple : une seule balise <fb:fbmlserver /> par page me semble -t'il (à vérifier) ce qui peut poser problème dans certains cas : si la marche à suivre pour exécuter du FBML en mode IFrame vous intéresse : FBML dans une application Facebook IFrame
• De même les éléments FBML ne s'affichent pas directement (et fonctionnent un peu aléatoirement je trouve).

Conclusion

Chacun sa préférence, sachant que l'apprentissage de FBJS et FBML est assez facile. La documentation du SDK est plutôt mal faite je trouve...

Je dirai que cela dépend du projet concerné, je n'ai plus d'opinion arrêtée concernant le choix à faire entre Canvas et IFrame.