AMPConf 2019 est juste en train de se terminer, mais nous ne faisons que commencer! Dans cette série de billets de blog, nous célébrons AMPConf en soulignant comment le framework React Storefront et Layer0 facilitent la prise en charge d’AMP par les développeurs dans leurs applications React.
Garder vos amplis AU SEC
Nous avons été relativement précoces à adopter le commerce électronique pour les applications Web progressives (PWA) et les pages mobiles accélérées (AMP). Avec les PWA alimentés par React, les développeurs peuvent offrir des expériences Web très attrayantes qui rivalisent avec les applications natives. Cependant, en ce qui concerne le trafic généré par la recherche, AMP fournit l’option la plus rapide possible.
En fait, le parcours client recommandé par Google est de fournir d’abord une version AMP de votre application pour rechercher les utilisateurs et de passer à la version PWA complète de votre site sur les pages suivantes. Et puisque près de la moitié du trafic sur les sites Web des détaillants provient de la recherche organique, la prise en charge de l’AMP et de la PWA est devenue une priorité.
Malheureusement, les technologies PWA et AMP ne pouvaient être plus divergentes. Les PWA utilisent des bibliothèques modernes comme React, vue et Angular, où JavaScript joue le rôle central de rendu HTML et CSS et de diffusion de l’interactivité. Les pages AMP, d’autre part, sont complètement interdites d’utiliser JavaScript et ont des restrictions strictes sur CSS et HTML. Le résultat est que pour prendre en charge AMP et PWA, les développeurs doivent généralement recoder une partie importante de leur application dans AMP. Et le fardeau qui pèse sur l’équipe de développement ne s’arrête pas là. Chaque correction de bogue, changement de disposition, nouvelle fonctionnalité, etc. Peut nécessiter d’être propagé à la fois aux bases de code AMP et PWA.
Écrire une bonne application une fois est assez difficile. Personne ne veut écrire la même application deux fois. Les développeurs détestent tellement ce genre de choses qu’ils lui ont donné un acronyme populaire, DRY (ne pas répéter vous-même). En tant que développeurs, nous avons investi très tôt dans l’ajout de la prise en charge automatique des AMP au framework React que nous avons créé pour les PWA eCommerce. De cette façon, les développeurs peuvent écrire leur application web progressive dans React et obtenir le support AMP sans effort de développement supplémentaire.
Et cela a très bien fonctionné pour nos clients. Au lieu de reconstruire leur application, la mise en œuvre d’AMP avec React Storefront prend généralement un jour ou deux à nos clients, et la plupart de cela consiste simplement à vérifier que tout fonctionne comme prévu.
Dans cet article, nous allons couvrir comment React Storefront fait le travail dur pour vous pour prendre en charge AMP et PWA à partir d’une base de code unique. Dans le prochain volet, nous partagerons quelques nouvelles fonctionnalités passionnantes de Layer0 qui aident à fournir AMP dans un contexte d’entreprise complexe.
Pourquoi tous les frameworks React ne font-ils pas cela ?
Pour une application React typique, dériver automatiquement le contenu AMP est difficile. C’est parce que la plupart des applications React sont conçues pour s’exécuter uniquement dans le navigateur, mais le contenu AMP ne peut pas avoir de JavaScript (y compris React) avant d’arriver dans le navigateur. En d’autres termes, vous ne pouvez pas simplement pointer le cache Google AMP vers le même code React que vous envoyez au navigateur. Ce sont des formats complètement différents.
Pour surmonter cette limitation, nous avons bénéficié d’une décision architecturale précoce de rendre les applications React Storefront universelles (parfois appelées isomorphes) par défaut et de prendre en charge le rendu côté serveur (SSR) dans Layer0. Avec SSR, le rendu de la page est fait sur le serveur avant d’être servi aux utilisateurs. Alors que nos objectifs principaux en ajoutant SSR étaient d’améliorer les performances et le référencement, cela nous a également permis d’exécuter une application React Storefront sur le serveur, puis de convertir automatiquement la sortie HTML en HTML AMP valide en accord avec les techniques ci-dessous.
Notifiez Google que l’AMP est pris en charge
La première étape vers la mise en œuvre de l’AMP est d’informer le robot d’exploration de Google que des équivalents AMP de vos pages existent. En règle générale, vous devez créer des versions AMP distinctes de vos pages, puis configurer le routeur de votre application pour servir à la fois le contenu AMP et PWA sur des URL distinctes. Avec React Storefront, il vous suffit d’ajouter un décorateur @withAmp à votre composant de page de niveau supérieur. React Storefront rend automatiquement le format AMPHTML valide pour n’importe quelle page en ajoutant simplement “.amp” à l’URL. Le décorateur @withAmp utilise cette convention pour ajouter la balise de lien nécessaire à l’en-tête du document.
En d’autres termes, ceci:
@withAmp
class Product extends Component {
...
}
Résultats de quelque chose comme ceci sur votre page PWA :
<link rel="amphtml" href="https://www.mysite.com/p/1.amp"/>
Lorsque le crawler de Google voit un lien vers /p/1, il télécharge le contenu AMP et le diffuse directement à partir du CDN AMP de Google.
Notez que pour un référencement correct, la page AMP doit également intégrer une balise rel=canonical dans la version PWA originale de la page comme ceci :
<link rel="canonical" href="https://www.mysite.com/p/1"/>
Il convient de souligner ici l’importance d’avoir les pages AMP et non-AMP pointant les unes vers les autres avec les <>balises de lien appropriées (mais différentes versions). Sans ces configurations correctement, Google ne diffusera pas votre contenu AMP, et pire encore, vos pages AMP pourraient cannibaliser le rang SEO de vos pages non-AMP. React Storefront fait toute la « comptabilité à double entrée AMP » pour vous, vous n’avez donc pas à vous soucier de cela simplement parce que quelqu’un a oublié de mettre à jour les bonnes balises.
Composants compatibles AMP
Implémenter même l’interactivité la plus basique dans AMP peut être une énorme douleur. Par exemple, un champ de quantité simple dans AMP peut ressembler à ceci :
<amp-form>
<amp-state id="product">
<script type="application/json">
{
"id": "123",
"name": "Product",
"quantity": 1
}
</script>
</amp-state>
<input
type="text"
[value]="product.quantity"
on="input-throttled:AMP.setState({ product: { quantity: event.value } })"
/>
</amp-form>
Imaginez écrire deux versions de code comme celle-ci POUR CHAQUE CONTRÔLE INTERACTIF dans votre application web progressive. Voilà votre date limite de lancement !
Heureusement, nous avons fait ce travail acharné pour vous. React Storefront vous offre des composants AMP à grain grossier comme QuantitySelector qui cachent tous ces détails sanglants. Dans React Storefront, vous utiliseriez simplement:
<QuantitySelector product={product}/>
Le framework React s’occupe du rendu de la version AMP du composant lorsque Google demande une page AMP.
Rendu conditionnel
Dans la plupart des cas, les développeurs peuvent simplement utiliser l’un des composants compatibles AMP dans le framework React Storefront pour fournir de l’interactivité dans AMP. Si, toutefois, vous trouvez que vous devez rendre quelque chose de spécifique pour AMP, le framework expose un champ amp booléen dans l’état de l’app que vous pouvez utiliser pour rendre conditionnellement un contenu spécifique dans AMP.
Par exemple :
import React, { Component } from 'react'
import { inject } from 'mobx-react'
@inject('app')
class MyAMPAwareComponent extends Component {
render() {
if (this.props.app.amp) {
return (
// AMP content
)
} else {
return (
// PWA content
)
}
}
}
Analyse universelle
La manière déclarative d’AMP de définir les événements d’interaction est complètement différente de celle de React Imaginez par exemple que vous souhaitiez suivre les clics sur des liens de produits spécifiques en envoyant des événements à Google Analytics. Dans AMP, ce serait quelque chose comme:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"triggers": [
{
"on":"click",
"event":"product_clicked",
"selector":"#product1",
"request":"event",
"productID": "1"
}
]
}
</script>
</amp-analytics>
<a id="product1" href="/p/1" alt="Red Shirt">
<amp-img src="/images/products/1" height="100" width="100"/>
<div>Red Shirt</div>
</a>
Je vais vous épargner l’implémentation React, mais cela impliquera probablement un écouteur onClick et quelques appels à GA(). Qu’il suffise de dire que les deux ne ressembleront rien.
React Storefront fournit une abstraction, le composant Track, qui implémente les deux pour vous :
<Track event="product_clicked" productID={product.id}>
<a href="/p/1" alt="Red Shirt">
<Image src="/images/products/1"/>
<div>Red Shirt</div>
</a>
</Track>
Transformation du serveur HTML rendu en AMPHTML
Les stratégies ci-dessus nous amènent à environ 80% du chemin vers le rendu AMP valide. Toutefois, d’autres modifications doivent être apportées au document. React Storefront transforme le code HTML sortant avant son envoi, en apportant plusieurs modifications, notamment:
Ajout d’ampli-boilerplate et ⚡
AMP nécessite la présence de certains éléments spécifiques dans le document. Ceux-ci incluent un⚡ attribut “” sur l’élément HTML racine et un élément de style standard appelé le boilerplate AMP:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal
Transformer et consolider CSS
AMP exige que tous les CSS soient fournis dans le corps d’un seul élément de style. L’utilisation de l’attribut style et <link rel=”stylesheet”> est interdite. React Storefront consolide tous les styles de votre base de code, intégrés dans plusieurs <>éléments de style ou même des attributs de style en ligne, en un seul <>élément amp-custom de style. Pour chaque utilisation d’un attribut style, React Storefront crée une classe CSS unique contenant les règles correspondantes, applique la classe à l’élément, supprime l’attribut style et ajoute la classe à l’élément amp-custom style. En d’autres termes, ceci:
<div style="font-weight:bold">Red Shirt</div>
devient :
<style amp-custom>
…
.mi1 {
font-weight:bold;
}
</style>
<div class="mi1">Red Shirt</div>
Ajoutée à tous vos styles, cette conversion automatisée de CSS élimine un autre casse-tête majeur lors de l’écriture de pages compatibles AMP à partir de votre application React.
Nettoyage du marquage
Il existe diverses autres règles que AMP impose sur le balisage. Par exemple, la façon dont ReactDOM rend les attributs booléens produit un AMPHTML non valide. Ce JSX :
<script
async
custom-element="amp-sidebar"
src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
/>
Résultera en ce code HTML :
<script
async
custom-element="amp-sidebar"
src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
/>
Ce qui fait que le validateur AMP affiche une erreur comme celle-ci :
Crux ne peut pas suivre la part du trafic «téléphonique» pour les PWA/SPA
Si vous utilisez une bibliothèque de composants, une partie du code HTML rendu par les composants peut s’exécuter à l’encontre du validateur AMP pour diverses raisons. React Storefront encourage l’utilisation de la bibliothèque d’interface utilisateur Material très populaire et fournit des règles spécifiques pour nettoyer le code HTML qu’elle produit. C’est là que l’utilisation d’un framework d’application web progressif React complet qui couvre tout, de la gestion d’état aux composants et au style montre vraiment sa valeur en termes d’augmentation de la vitesse des développeurs.
Infrastructure pour AMP et PWA
En tant que développeur implémentant AMP et PWA, vous pouvez implémenter deux versions de votre application, puis les maintenir lors de modifications futures (ce qui signifie que chaque correction devient un changement de code à deux endroits) ou utiliser l’automatisation pour dériver le contenu AMP de vos pages. Chez Layer0, nous avons choisi ce dernier, qui a très bien fonctionné pour nos clients. Les fonctionnalités de React Storefront que nous avons décrites jusqu’à présent ne sont qu’une partie de la raison de ce succès. Dans le prochain volet, nous allons explorer comment ce framework s’intègre avec Layer0 (Edgio) pour prendre en charge AMP dans un environnement d’entreprise. Restez à l’écoute.
