Suite au partage de Single Point of Failure : votre site web indisponible à cause des scripts externes ? par un collègue @iAdvize, je souhaitais partager ici mon retour d'expérience sur cette problématique.

L'article soulève effectivement les différents problèmes posés par la dépendance sur des services tiers — que cela soit des indisponibilités ou la conséquence des blocages de scripts via ad-blockers — mais ne donne pas réellement de solutions pratiques.

Voici donc les solutions que j'ai pu mettre en place en production sur Redsmin et feu Bringr pour gérer le cas où une librairie tierce (par exemple Mixpanel ou Google Analytics) est indisponible ou bloquée. La solution se résume en deux mots: découplage et isolation.

Découplage: il est vital pour la disponibilité de l'application de communiquer avec les composants externes de manière découplée. L'application elle-même ne doit pas avoir une connaissance forte des composants externes et de ce qu'ils offrent car ils peuvent ne pas exister. Par exemple, l'objet global Mixpanel offre une méthode track pouvant être bloquée. De même, Google Analytics expose une fonction globale "ga" qui peut être indéfinie à cause d'un ad-blocker.

La solution pour assurer un découplage fort consiste par exemple à utiliser un message ou event-bus (e.g. un dispatcher ou event emitter) pour notifier depuis l'application les évènements intéressants à suivre. Pour rappel, l'intérêt de passer par un event-bus est que l'émetteur n'a aucune connaissance du ou des destinataires. Ainsi si le chargement de Mixpanel ou de Google Analytics n'a pu être effectué (à cause d'une indisponibilité ou d'un blocage d'un adblock-like) l'application émettra toujours ses évènements, il n'y aura aucun listener, l'indisponibilité des composants externes sera donc transparente pour l'application.

Isolation: nous encapsulons chaque composant externe dans un module indépendant qui est connecté avec le reste de l'application par le message ou event-bus (e.g. un event emitter). Certains ad-block peuvent laisser exister l'objet global (e.g. Mixpanel) mais supprime toutes ses méthodes (e.g. track), il est donc important d'encapsuler l'appel au composant tier (e.g. Mixpanel.track) dans un try/catch ce qui permet de ne pas bloquer l'exécution des listeners suivants à cause d'une exception.

Cette approche nous permet d'avoir Google Analytics, Mixpanel, UserVoice etc... en production sans nous soucier de la configuration du navigateur, des extensions de blocage ou des indisponibilités des composants externes.

L’outil pour ajouter sa signature HTML à Gmail utilise l’éditeur openWYSIWYG que j’apprécie particulièrement pour son côté cross-browser, open-source et son interface très léger. Seulement, même la dernière version ne supporte pas Google Chrome.

Après un bref regard sur le code, je me suis aperçu que la vérification de la compatibilité s’effectuait au niveau de la méthode isBrowserCompatible :
isBrowserCompatible: function() {
// Validate browser and compatiblity
if ((navigator.userAgent.indexOf('Safari') != -1 ) || !document.getElementById || !document.designMode){
//no designMode (Safari lies)
return false;
}
return true;
},
N’ayant pas Safari et ne pouvant donc pas vérifier si oui ou non “Safari lies” j’ai préféré simplement ajouter le support de Chrome tout en laissant le blocage de Safari. Il suffit donc de modifier le test et d'y ajouter l'expression booléen suivante :
if ((navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 ) || !document.getElementById || !document.designMode){

C’est fini ? Eh bien non, après un test cela ne fonctionnait toujours pas, Chrome retournait une erreur Uncaught TypeError: Object # has no method 'insertAdjacentHTML'. Une recherche plus tard, je découvre ce block de code :
/**
* Emulates insertAdjacentHTML(), insertAdjacentText() and
* insertAdjacentElement() three functions so they work with Netscape 6/Mozilla
* by Thor Larholm me@jscript.dk
*/
if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){ HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode){
    HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode) {.. };
    HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr) {…};
    HTMLElement.prototype.insertAdjacentText = function (where,txtStr) {… };
}

Or sous Chrome l’objet HTMLElement ET sa méthode insertAdjacentElement existe mais pas la méthode insertAdjacentHTML. Cette condition n’était donc pas validée. Il suffisait de modifier la condition comme ceci pour que openWYSIWYG supporte Chrome :
if((typeof HTMLElement!="undefined" && (!HTMLElement.prototype.insertAdjacentElement || !HTMLElement.prototype.insertAdjacentHTML))){
Remarque: il est préférable ici de ne pas agir en fonction du navigateur (donc un test sur le user-agent) mais plutôt sur la présence ou non de la fonctionnalité sur le navigateur. En utilisant cette méthode on code ainsi de façon plus générique et les scripts deviennent compatibles (ou inversement) avec les mises à jour des navigateurs.

Ps : En bon webnaute j’ai proposé cette modification sur le forum dédié afin qu’elle soit intégrée à la prochaine release.

Vous l’avez peut-être vu, un nouveau service vient de voir le jour sur internet : DomainR. Il fait exactement la même chose que DomainFinder et c’est d’ailleurs cela qui me chagrine un peu. Le minimum quand on reprends l’idée de quelqu’un d’autre c’est de l’améliorer, surtout quand cette idée est assez originale. C’est donc pour cela que j’ai décider de faire un petit comparatif entre ces deux services, ceci, bien entendu dans la plus grande objectivité possible (du moins je vais essayer).

Le nom

En effet, Domainr est déjà un nom plus “tendance” pour un service de ce genre. Et c’est un fait, DomainFinder est un nom que j’ai du trouvé dans l’empressement, ce qui m’intéressai à la réalisation de ce projet était les fonctionnalités que j’allais y mettre et non ce qu’on en percevrait au premier regard c’est à dire le nom et le design.

Le design

Lorsque j’ai découvert DomainR, c’est la première chose qui m’à frapper, une simple textbox, aucun bouton, un texte descriptif et un logo. Simple et clair c’est l’essence même d’un service web 2.0. C’était bel et bien mon idée initiale à la création de DomainFinder mais quand je le regarde maintenant je me dit qu’il y a beaucoup trop d’informations complémentaires. Le footer de DomainFinder n’est pas assez clair, trop brouillon, contenant des éléments de tailles différentes. L’utilisation de cadres pour séparer les zones à l’écran et leurs dispersions (en haut à gauche, en haut à droite, au milieu, en bas à gauche et en bas à droite) empêche l’utilisateur d’avoir une vision globale de la page.

DomainR - DomainFinder

Le concept

Pour le moment DomainR est une simple copie du concept de DomainFinder, l’utilisateur propose un mot, une expression, et le service cherche les domaines, sous domaine correspondant.

Les fonctionnalités

• La vérification de disponibilité des domaines : sur une même expression, par exemple “francois guillaume”, DomainFinder indique la disponibilité de chaque domaine alors que DomainR n’informe que pour 2 domaines.
• Le nombre de résultat : DomainFinder fourni l’intégralité des possibilités ce qui n’est pas le cas de DomainR (voir capture). Ainsi sur l’expression “let’s rock”, DomainR donne 4 résultats et DomainFinder 10.
• Les extras : DomainFinder permet à l’utilisateur de recevoir par email les résultats de sa recherche, DomainR permet d’avoir des informations supplémentaires sur le TLD (Top Level Domain) via des sites extérieurs.

En pratique

Après 6 requêtes sur les deux services, DomainFinder fourni deux fois plus de résultat et indique 33% de domaines valides (ou non) en plus.

Le document recueillant les différents tests est disponible sur Google Document pour les intéressés. Certains diront que seulement 6 tests ne permettent pas d’avoir une bonne idée et c’est tout à fait vrai. Mais en vu des premiers résultats, je ne pense pas que DomainR puissent avoir une quelconque chance (en terme de résultat j’entends) contre DomainFinder.

L'API de Twitter s'est beaucoup épaissi depuis son commencement pour notre plus grand bonheur ! Mais il manque toujours une fonctionnalité. En effet nous devons passer par le site pour pouvoir voir si nous avons de nouvelles demandes de following (dans le cas de compte Twitter privé) pourquoi l'API ne propose pas une liste des requêtes de following ? Ainsi on pourrait permettre aux utilisateurs d'accepter (ou non) directement depuis leurs applications favorites (twhirl, spaz ...) les followers prétendants.

J'ai envoyé cette demande à l'équipe de Twitter.

Un rapide Feedback sur Firefox 3 RC1 :

• Il arrive un moment dans la navigation où il m' est impossible d' accéder à une page web lorsque celle-ci est directement entrée via la barre d' adresse le seul moyen pour y accéder est par un lien hypertexte, je suis donc obliger de redémarrer le navigateur pour pouvoir utiliser à nouveau la barre d' adresse, ce bug existait déjà sous Firefox 2.
  
• La recherche rapide depuis la barre d'adresse est extrêmement intéressante cependant il faudrait prévoir un bouton qui permettrait de supprimer une entrée à la volée. Si j' entre monsite, on me propose http://monsite.com et je voudrais http://www.monsite.com mais, cette proposition arrive toujours en deuxième. Il serait donc intéressant d' ajouter un bouton pour supprimer l' entrée "http://monsite.com".
• De la même façon, la gestionnaire de mot de passe devrait autoriser un mot de passe à être utilisé sur : tout le domaine; un seul sous-domaine spécifique etc... Par exemple, un mot de passe enregistré sur http://www.monsite.com ne s' affichera pas sur http://monsite.com, or il s' agit du même site ! Un effort est donc à faire sur ce point qui est pour moi essentiel.
  

J'ai demandé au staff de Dropbox, de pouvoir savoir directement depuis l'infobulle de notification (qui informe d'un changement sur le dossier partagé) qui à effectué l'action.

Car actuellement, lors d'un changement dans le dossier que l'on partage avec d'autres personnes, on ne voit que l'action effectué (ajout/modification/suppression) mais pas qui l'à effectuée.
D'où cette demande de fonctionnalité.

J'attends donc une réponse.