Home Blogs Comment Layer0 génère automatiquement AMP à partir de votre PWA React
Applications

Comment Layer0 génère automatiquement AMP à partir de votre PWA React

About The Author

Outline

AMPConf 2019 vient de se terminer, mais nous ne faisons que commencer ! Dans cette série d’articles de blog, nous célébrons AMPConf en soulignant comment le framework React Storefront et Layer0 facilitent la vie des développeurs pour qu’ils prennent en charge AMP dans leurs applications React.

Gardez vos amplis AU SEC

Nous avons été relativement tôt à adopter dans le commerce électronique à la fois pour progressive Web Apps (PWA) et Accelerated Mobile pages (AMP). Avec les PWA optimisés par React, les développeurs peuvent offrir des expériences très attrayantes sur le Web 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 le site Web des détaillants provient de la recherche organique, la prise en charge des programmes AMP et PWA est devenue une priorité.

Malheureusement, les technologies PWA et AMP ne pourraient pas être plus largement divergentes. Les PWA utilisent des bibliothèques modernes telles que React, vue et Angular, où JavaScript joue un rôle central dans le rendu HTML et CSS et dans 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é aux bases de code AMP et PWA.

Écrire une grande 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 chose qu’ils lui ont donné un acronyme populaire, DRY (Do Not Repeat Yourself). En tant que développeurs, nous avons investi tôt dans l’ajout de la prise en charge automatique des AMP au framework React que nous avons créé pour les PWA de commerce électronique. 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 difficile pour vous dans la prise en charge de AMP et PWA à partir d’une seule base de code. Dans le prochain épisode, 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 le font-ils pas ?

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 Google AMP cache 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 visant à rendre les applications React Storefront universelles (parfois appelées isomorphes) par défaut et à prendre en charge le rendu côté serveur (SSR) dans Layer0. Avec SSR, le rendu de la page se fait sur le serveur avant d’être servi aux utilisateurs. Bien que nos principaux objectifs 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, de concert avec les techniques ci-dessous.

Informez Google que AMP est pris en charge

La première étape vers la mise en œuvre d’AMP est de notifier le crawler 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 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 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ésultat :

				
					<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 depuis le 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 l’une vers l’autre avec les balises de lien appropriées (mais différentes versions de) <> . Sans ces configurations correctement, Google ne servira pas votre contenu AMP, et pire encore, il pourrait en résulter que vos pages AMP cannibalisent le rang SEO de vos pages non AMP. React Storefront fait toute la « comptabilité AMP à double entrée » pour vous, vous n’avez donc pas à vous soucier de cela simplement parce que quelqu’un a oublié de mettre à jour les bonnes étiquettes.

Composants AMP Aware

La mise en œuvre de l’interactivité même 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 celui-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 grossiers comme QuantitySelector qui cachent tous ces détails mortels. Dans React Storefront, vous utiliseriez simplement:

				
					<QuantitySelector product={product}/>
				
			

Le framework React se charge 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 avez besoin de 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
      )
    }
  }
}
				
			

Universal Analytics

La manière déclarative d’AMP de définir les événements d’interaction est complètement différente de celle de React Par exemple, imaginez que vous souhaitez 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 va probablement impliquer un auditeur onClick et quelques appels à ga(). Qu’il suffise de dire que les deux ne se ressemblent 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 obtiennent 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 qu’il ne soit envoyé, en apportant plusieurs modifications, notamment:

Ajout d’amp-boilerplate et ⚡

AMP exige que certains éléments spécifiques soient présents dans le document. Ceux-ci incluent un attribut «⚡» sur l’élément HTML racine et un élément de style standard appelé AMP Boilerplate :

				
					<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 <du lien 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 de style amp-custom> . Pour chaque utilisation d’un attribut de style, React Storefront crée une classe CSS unique contenant les règles correspondantes, applique la classe à l’élément, supprime l’attribut de style et ajoute la classe à l’élément de style amp-custom. 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>
				
			

Lorsqu’elle est 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 au 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 HTML:

				
					<script
  async
  custom-element="amp-sidebar"
  src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
/>
				
			

Le validateur AMP affiche alors une erreur comme celle-ci :

Crux ne peut pas suivre la part du trafic «téléphone» pour les PWA/spas

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 HTML qu’elle produit. C’est là que l’utilisation d’un framework complet d’applications web progressives React qui couvre tout, de la gestion d’état aux composants et au style, montre vraiment sa valeur en termes d’augmentation de la vélocité 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 correctif 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 article, nous allons explorer comment ce framework s’intègre à Layer0 (Edgio) pour prendre en charge AMP dans un environnement d’entreprise. Restez à l’écoute.