PayPal met au point « Zoid », une bibliothèque JavaScript, pour améliorer l’élément HTML « iframe »
PayPal met au point « Zoid », une bibliothèque JavaScript, pour améliorer l’élément HTML « iframe »
en lui ajoutant des fonctionnalités
L’élément HTML « iframe » est jusqu'à aujourd'hui l’un des composants les plus utilisés pour afficher du contenu provenant d’un autre site tiers sur sa propre page Web. Il permet d'intégrer un document Web entier dans un autre, comme s'il s'agissait d'un élément « img » ou d'un autre élément de ce type. Mais, il semblerait que les iframes, même s’ils sont régulièrement utilisés aujourd'hui, ne jouissent plus de la même popularité qu’à leur apparition dans la programmation Web. L’on dénote plusieurs limites aux iframes et Google a même proposé une alternative.
L'élément HTML « iframe » définit un contexte de navigation imbriqué qui permet d'obtenir une page HTML intégrée dans la page courante. Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur. Chaque contexte de navigation possède son propre historique et son propre document actif. Chaque contexte de navigation créé par un élément iframe représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page.
Les iframes ne font plus l'unanimité au sein des développeurs
Par exemple, en navigant sur une page web, un internaute peut voir s’afficher un élément correspondant à un autre site, mais intégré à la page sur laquelle il est. L’un des gros avantages d’un iframe est de pouvoir intégrer un contenu dans une page, tout en permettant que ce contenu qui vient d’un autre site conserve ses propres scripts et styles. Cela permet d’avoir un contenu indépendant de la page dans laquelle il est inséré. Interagir avec l’élément en iframe ne devrait donc pas avoir d’impacts sur la page Web. Il est aussi recommandé que la balise iframe soit utilisée essentiellement pour ce genre de contenu.
Néanmoins, en théorie, bien que l’on puisse ajouter autant d'iframe que possible sur autant de niveaux d'imbrication que voulus, il faut garder à l'esprit que cela peut nuire aux performances d’un site Web. Toutefois, depuis quelques années, l’élément iframe semble « s'être démodé » et a perdu l’engouement de nombreux développeurs de la communauté et même des entreprises comme Google. L’on cite aujourd’hui plusieurs inconvénients quant à l’utilisation des iframe. Certains estiment par exemple que leur chargement est lent et qu'ils créent ainsi une mauvaise expérience utilisateur.
Google a proposé <portals>, une alternative à la balise <iframe>
D’autres développeurs citent plusieurs autres inconvénients. Dans ce schéma, Google a proposé à la conférence I/O de cette année l’utilisation de nouvelles balises qu'il nomme <portal> pour remplacer les <iframe>. Selon Google, il s’agit d’une nouvelle API de plateforme Web qui vise à faciliter le chargement et la navigation sur les pages Web en rationalisant l'expérience de navigation des utilisateurs sur votre site. « Nous espérons que l’API Portals pourra répondre à certaines de ces préoccupations tout en offrant une autre fonctionnalité puissante aux développeurs Web », a écrit Google dans un document explicatif du projet.
D’après la description faite par Google de la technologie, l’API Portals a été construite pour permettre une navigation transparente entre sites ou pages. En particulier, cela permettra à une page d'afficher une autre page en tant qu'encart et d'effectuer une transition en douceur entre un état encart et un état parcouru. En d’autres termes, Google explique que l’objectif de « Portails » est d’améliorer la navigation en offrant des transitions plus rapides et plus fluides sur le Web, tout en préservant la confidentialité de l’utilisateur. L’utilisation de l’API Portals se fera à travers de nouvelles balises <portal>.
Google expert que ces balises pourront remplacer à l’avenir les balises <iframe> qui représentent aujourd’hui le standard pour incorporer du contenu ou imbriquer des pages Web les unes dans les autres. « Avant les balises <portals>, nous aurions pu rendre une autre page en utilisant un <iframe>. Nous aurions également pu ajouter des animations pour déplacer des cadres sur des pages données. Mais avec une balise <iframe>, vous n'avez pas la possibilité de naviguer dans son contenu. Les balises <portals> comblent cet écart, ce qui permet des cas d'utilisation intéressants », a déclaré Google. Pour le géant de la recherche, les balises <iframe> souffrent d’énormes inconvénients.
PayPal met au point une bibliothèque pour améliorer les iframes
PayPal, le service de paiement en ligne, partage le même avis que Google. Néanmoins, PayPal ne souhaite pas remplacer l’élément HTML iframe. L’entreprise désire plutôt l’améliorer. De quelle façon entend-elle procéder ? Les ingénieurs de PayPal ont mis au point « Zoid », une bibliothèque JavaScript graphique, afin de compléter les performances des iframe. Selon Daniel Brain, ingénieur chez PayPal, Zoid ajoute des fonctionnalités intéressantes aux iframes dont en voici quelques-unes. Zoid permet :
- d’afficher un iframe ou un popup à partir d’un domaine et de transmettre des objets et des fonctions ;
- d’ajouter un prérendu pour éviter la perception d'un rendu lent : Zoid fournit également des mécanismes de prérendus de HTML et de CSS dans des iframes et des popups, de sorte que vous puissiez au moins rendre un spinner de chargement, ou peut-être quelque chose de plus avancé, pendant que la nouvelle fenêtre charge son contenu ;
- de naviguer de l'intérieur d'un iframe vers d'autres parties de la page Web qui l’héberge (un peu à la manière de l'API Portal de Google) ;
- d'afficher plus rapidement vos composants créés avec React, Vue.js ou Angular : Zoid n'est pas conçu pour construire des composants pour votre propre site. Pour cela, vous devez utiliser des bibliothèques de composants natifs comme React. Zoid fait en sorte que ces composants s'affichent rapidement sur votre page ;
- de partager des fonctionnalités avec d'autres sites, avec lesquels vous ne pouvez pas partager des composants JavaScript natifs ;
- etc.
D’après PayPal, Zoid n'est pas conçu pour remplacer des bibliothèques comme React, qui sont responsables du rendu des composants du même domaine. Les ingénieurs de l’entreprise ont expliqué qu’en fait, le seul véritable rendu que fait Zoid, c'est les iframes et les popups. Le reste dépend de vous. Vous pouvez construire vos composants à l'aide de n'importe quel framework, bibliothèque ou motif de votre choix, puis utiliser Zoid pour exposer vos composants entre domaines. Il devrait bien fonctionner avec n'importe quel autre framework.
Toutefois, les ingénieurs de PayPal sont bien conscients qu'il y a des insuffisances. Selon les explications de Daniel Brain, il y a certains problèmes qu'une simple bibliothèque JavaScript ne peut pas résoudre. Et vous, quelle méthode ou quel remède préconisez-vous pour résoudre les différents problèmes que soulèvent les iframe ? Faut-il suivre Google en remplaçant les iframe ou faut-il encore essayer de les améliorer comme les ingénieurs de PayPal le suggèrent ?
Source : Zoid
Et vous ?
Quelles sont les insuffisances des iframes que vous connaissez ?
Voir aussi
Répondre avec citation
Envoyé par mh-cbon
Partager