AMPConf 2019 steht kurz bevor, aber wir fangen gerade an! In dieser Reihe von Blogbeiträgen feiern wir AMPConf, indem wir hervorheben, wie das React Storefront Framework und Layer0 Entwicklern das Leben erleichtern, AMP in ihren React Apps zu unterstützen.
Halte deine Amps TROCKEN
Wir haben E-Commerce sowohl für Progressive Web Apps (PWAs) als auch für Accelerated Mobile Pages (AMP) relativ früh eingesetzt. Mit reaktionsbasierten PWAs können Entwickler im Internet ein äußerst ansprechendes Erlebnis bereitstellen, das mit nativen Apps konkurriert. Wenn es jedoch um durch Suchen generierten Datenverkehr geht, bietet AMP die schnellstmögliche Option.
Die von Google empfohlene Customer Journey besteht darin, zunächst eine AMP-Version Ihrer App bereitzustellen, um Nutzer zu durchsuchen und auf nachfolgenden Seiten zur vollständigen PWA-Version Ihrer Website zu wechseln. Und da fast die Hälfte des Traffics auf der Website von Einzelhändlern aus organischer Suche stammt, ist die Unterstützung sowohl von AMP als auch von PWA zu einer Priorität geworden.
Leider könnten PWA- und AMP-Technologien nicht stärker voneinander abweichen. PWAs verwenden moderne Bibliotheken wie React, Vue und Angular, in denen JavaScript die zentrale Rolle übernimmt, HTML und CSS zu rendern und Interaktivität bereitzustellen. AMP-Seiten hingegen dürfen JavaScript vollständig nicht verwenden und unterliegen strengen Einschränkungen sowohl für CSS als auch für HTML. Das Ergebnis ist, dass Entwickler zur Unterstützung von AMP und PWA in der Regel einen erheblichen Teil ihrer App in AMP umkodieren müssen. Und die Belastung des Entwicklungsteams endet damit noch nicht. Jede Bugkorrektur, Layoutänderung, neue Funktion usw. muss möglicherweise sowohl an die AMP- als auch an die PWA-Codebase weitergegeben werden.
Eine großartige App einmal zu schreiben, ist schwer genug. Niemand möchte dieselbe App zweimal schreiben. Entwickler hassen solche Dinge so sehr, dass sie ihr ein beliebtes Akronym gegeben haben: TROCKEN (nicht wiederholen). Als Entwickler haben wir früh in die automatische AMP-Unterstützung für das React Framework investiert, das wir für eCommerce-PWAs entwickelt haben. Auf diese Weise können Entwickler ihre progressive Web-App in React schreiben und AMP-Unterstützung ohne zusätzlichen Entwicklungsaufwand erhalten.
Und es hat für unsere Kunden sehr gut funktioniert. Anstatt ihre App neu zu erstellen, benötigen unsere Kunden für die Implementierung von AMP mit React Storefront in der Regel einen oder zwei Tage, und das meiste ist einfach zu überprüfen, ob alles wie erwartet funktioniert.
In diesem Beitrag erfahren Sie, wie React Storefront Ihnen die harte Arbeit bei der Unterstützung von AMP und PWA aus einer einzigen Codebasis leistet. Im nächsten Teil werden wir einige aufregende neue Funktionen von Layer0 vorstellen, die Ihnen helfen, AMP in einem komplexen Unternehmensumfeld bereitzustellen.
Warum tun nicht alle React Frameworks das?
Bei einer typischen React App ist es schwierig, AMP-Inhalte automatisch abzuleiten. Das liegt daran, dass die meisten React-Apps nur im Browser ausgeführt werden, AMP-Inhalte jedoch kein JavaScript (einschließlich React) enthalten können, bevor sie in den Browser gelangen. Mit anderen Worten: Sie können den Google AMP Cache nicht einfach auf denselben React Code verweisen, den Sie an den Browser senden. Es handelt sich dabei um völlig unterschiedliche Formate.
Um diese Einschränkung zu überwinden, haben wir von einer frühen Architekturentscheidung profitiert, React Storefront-Apps standardmäßig universell (manchmal auch als isomorph bezeichnet) zu machen und Server-Side Rendering (SSR) in Layer0 zu unterstützen. Mit SSR wird die Seite auf dem Server wiedergegeben, bevor sie Benutzern bereitgestellt wird. Unsere Hauptziele bei der Einführung von SSR waren zwar die Verbesserung der Leistung und der SEO, aber es ermöglichte uns auch, eine React Storefront-App auf dem Server auszuführen und dann die HTML-Ausgabe automatisch in gültige AMP-HTML-Dateien zu konvertieren.
Google benachrichtigen, dass AMP unterstützt wird
Der erste Schritt zur Implementierung von AMP besteht darin, den Crawler von Google darüber zu informieren, dass AMP-Äquivalente Ihrer Seiten vorhanden sind. In der Regel müssen Sie separate AMP-Versionen Ihrer Seiten erstellen und dann den Router Ihrer Anwendung so konfigurieren, dass sowohl AMP- als auch PWA-Inhalte auf unterschiedlichen URLs bereitgestellt werden. Mit React Storefront müssen Sie lediglich einen @withAmp Dekorator zu Ihrer obersten Seitenkomponente hinzufügen. React Storefront stellt automatisch gültige AMPHTML-Dateien für jede Seite dar, indem einfach „.amp“ zur URL hinzugefügt wird. Der @withAmp Dekorator nutzt diese Konvention, um dem Dokumentkopf das erforderliche Link-Tag hinzuzufügen.
Mit anderen Worten:
@withAmp
class Product extends Component {
...
}
Führt zu einer ähnlichen Darstellung auf Ihrer PWA-Seite:
<link rel="amphtml" href="https://www.mysite.com/p/1.amp"/>
Wenn der Crawler von Google einen Link zu /p/1 sieht, wird der AMP-Inhalt heruntergeladen und direkt aus dem AMP-CDN von Google bereitgestellt.
Beachten Sie, dass für eine korrekte SEO die AMP-Seite auch ein rel=canonical-Tag in die ursprüngliche PWA-Version der Seite einbetten muss, wie folgt:
<link rel="canonical" href="https://www.mysite.com/p/1"/>
Es ist hier zu betonen, wie wichtig es ist, dass die AMP- und nicht-AMP-Seiten mit den entsprechenden (aber unterschiedlichen) <Link->Tags zueinander verweisen. Ohne diese Einstellungen wird Google Ihre AMP-Inhalte nicht bereitstellen, und noch schlimmer, es könnte dazu führen, dass Ihre AMP-Seiten den SEO-Rang Ihrer nicht-AMP-Seiten kannibalisieren. React Storefront übernimmt die „AMP-Buchhaltung mit doppeltem Eintrag“ für Sie, sodass Sie sich keine Sorgen machen müssen, nur weil jemand vergessen hat, die richtigen Tags zu aktualisieren.
AMP-fähige Komponenten
Die Implementierung selbst der grundlegendsten Interaktivität in AMP kann sehr schwierig sein. Ein einfaches Mengenfeld in AMP könnte beispielsweise folgendermaßen aussehen:
<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>
Stellen Sie sich vor, Sie schreiben zwei Versionen von Code wie diese FÜR JEDES INTERAKTIVE STEUERELEMENT in Ihrer progressiven Web-App. Die Frist für die Markteinführung ist da!
Glücklicherweise haben wir diese harte Arbeit für Sie geleistet. React Storefront bietet grobkörnige AMP-fähige Komponenten wie QuantitySelector, die all diese blutigen Details verbergen. In React Storefront würden Sie einfach Folgendes verwenden:
<QuantitySelector product={product}/>
Das React Framework sorgt dafür, dass die AMP-Version der Komponente wiedergegeben wird, wenn Google eine AMP-Seite anfordert.
Bedingtes Rendering
In den meisten Fällen können Entwickler einfach eine der AMP-fähigen Komponenten innerhalb des React Storefront Framework verwenden, um Interaktivität in AMP bereitzustellen. Wenn Sie jedoch feststellen, dass Sie etwas bestimmtes für AMP rendern müssen, zeigt das Framework ein boolesches Verstärkerfeld im Anwendungsstatus an, das Sie verwenden können, um bestimmte Inhalte in AMP bedingt wiederzugeben.
Beispiel:
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
Die deklarative Art von AMP, Interaktionsereignisse zu definieren, unterscheidet sich völlig von der von REACT Stellen Sie sich beispielsweise vor, Sie möchten Klicks auf bestimmte Produktlinks verfolgen, indem Sie Ereignisse an Google Analytics senden. In AMP wäre dies etwa so:
<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>
Ich erspare Ihnen die React-Implementierung, aber es wird wahrscheinlich einen onClick Listener und ein paar Anrufe an GA() beinhalten. Es genügt zu sagen, dass die beiden nicht gleich aussehen werden.
React Storefront bietet eine Abstraktion, die Track-Komponente, die beide für Sie implementiert:
<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>
Server-gerenderte HTML-Datei wird in AMPHTML umgewandelt
Mit den oben genannten Strategien erreichen wir etwa 80 % des Weges, eine gültige AMP zu schaffen. Es gibt jedoch zusätzliche Änderungen, die am Dokument vorgenommen werden müssen. React Storefront transformiert das ausgehende HTML vor dem Senden und nimmt dabei mehrere Änderungen vor, darunter:
Hinzufügen von AMP-Boilerplate und ⚡
AMP erfordert, dass bestimmte Elemente im Dokument vorhanden sind. Dazu gehören ein „⚡“ -Attribut auf dem Root-HTML-Element und ein Standardelement namens AMP Boilerplate:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal
Transformation und Konsolidierung von CSS
AMP erfordert, dass alle CSS im Body eines einzelnen Stilelements angegeben werden. Die Verwendung des STYLE-Attributs und <Link rel=”Stylesheet”> ist nicht zulässig. React Storefront konsolidiert alle Stile in Ihrer Codebasis, eingebettet in mehrere <Stilelemente> oder sogar Inline-Stilattribute, in einem einzigen<, für Verstärker benutzerdefinierten> Element. Bei jeder Verwendung eines Formatattributs erstellt React Storefront eine eindeutige CSS-Klasse, die die entsprechenden Regeln enthält, wendet die Klasse auf das Element an, entfernt das Formatattribut und fügt die Klasse dem benutzerdefinierten Formatelement AMP hinzu. Mit anderen Worten:
<div style="font-weight:bold">Red Shirt</div>
Wird:
<style amp-custom>
…
.mi1 {
font-weight:bold;
}
</style>
<div class="mi1">Red Shirt</div>
Diese automatische CSS-Konvertierung nimmt Ihnen beim Schreiben von AMP-kompatiblen Seiten aus Ihrer React App weitere große Kopfschmerzen.
Markup wird bereinigt
Es gibt verschiedene andere Regeln, die AMP dem Markup auferlegt. Beispiel: Die Art und Weise, wie ReactDOM boolesche Attribute rendert, führt zu ungültigem AMPHTML. Diese JSX:
<script
async
custom-element="amp-sidebar"
src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
/>
Führt zu folgender HTML:
<script
async
custom-element="amp-sidebar"
src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
/>
Was dazu führt, dass der AMP-Validator einen Fehler wie diesen anzeigt:
Crux kann den Anteil des Telefonverkehrs für PWAs/SPAs nicht verfolgen
Wenn Sie eine Komponentenbibliothek verwenden, kann ein Teil der HTML-Datei, die von den Komponenten wiedergegeben wird, aus verschiedenen Gründen nicht mit dem AMP-Validator ausgeführt werden. React Storefront empfiehlt die Verwendung der weit verbreiteten Material-UI-Bibliothek und stellt spezifische Regeln für die Bereinigung des erzeugten HTML bereit. Hier zeigt die Verwendung eines umfassenden React Progressive Web-App-Frameworks, das von der Statusverwaltung über Komponenten bis hin zum Styling alles abdeckt, seinen Wert in Bezug auf die Steigerung der Entwicklergeschwindigkeit.
Infrastruktur für AMP und PWA
Als Entwickler, der AMP und PWA implementiert, können Sie zwei Versionen Ihrer App implementieren und diese dann über zukünftige Änderungen verwalten (was bedeutet, dass jede Korrektur an zwei Stellen zu einer Codeänderung wird) oder AMP-Inhalte automatisch von Ihren Seiten ableiten. Bei Layer0 haben wir uns für Letzteres entschieden, was für unsere Kunden sehr gut funktionierte. Die React Storefront-Funktionen, die wir bisher beschrieben haben, sind nur ein Teil des Erfolgs. Im nächsten Teil erfahren Sie, wie dieses Framework in Layer0 (Edgio) integriert wird, um AMP in einer Unternehmensumgebung zu unterstützen. Bleiben Sie auf dem Laufenden.
