Home Blogs Come Layer0 genera automaticamente AMP dal tuo React PWA
Applications

Come Layer0 genera automaticamente AMP dal tuo React PWA

About The Author

Outline

AMPConf 2019 sta solo concludendo, ma stiamo appena iniziando! In questa serie di post del blog, celebriamo AMPConf evidenziando come il framework React Storefront e Layer0 semplifichino agli sviluppatori il supporto di AMP nelle loro app React.

Tenere ASCIUTTI gli ampere

Siamo stati relativamente i primi ad adottare l’eCommerce sia per le Progressive Web Apps (PWA) che per le Accelerated Mobile Pages (AMP). Con i PWA basati su React, gli sviluppatori possono offrire esperienze altamente coinvolgenti sul Web che rivaleggiano con le app native. Tuttavia, quando si tratta di traffico generato dalla ricerca, AMP fornisce l’opzione più veloce possibile.

In effetti, il percorso consigliato da Google per i clienti è quello di fornire prima una versione AMP della tua app per cercare gli utenti e passare alla versione completa PWA del tuo sito nelle pagine successive. E poiché quasi la metà del traffico dei siti Web dei retailer proviene dalla ricerca organica, supportare sia AMP che PWA è diventata una priorità.

Purtroppo, le tecnologie PWA e AMP non potrebbero essere più nettamente divergenti. I PWA utilizzano librerie moderne come React, Vue e Angular, dove JavaScript assume il ruolo centrale di rendering HTML e CSS e di distribuzione dell’interattività. Le pagine AMP, d’altra parte, sono completamente vietate dall’uso di JavaScript e hanno rigide restrizioni sia su CSS che HTML. Il risultato è che, per supportare sia AMP che PWA, gli sviluppatori in genere devono ricodificare una parte significativa della loro app in AMP. E il carico sul team di sviluppo non finisce qui. Ogni correzione di bug, modifica del layout, nuova funzione, ecc. potrebbe richiedere la propagazione sia ai codebase AMP che PWA.

Scrivere una fantastica app una volta è abbastanza difficile. Nessuno vuole scrivere la stessa app due volte. Gli sviluppatori odiano così tanto questo tipo di cose che gli hanno dato un acronimo popolare, DRY (non ripetere te stesso). In qualità di sviluppatori, abbiamo già investito per aggiungere il supporto AMP automatico al framework REACT creato per i PWA di eCommerce. In questo modo, gli sviluppatori possono scrivere la loro app Web progressiva in React e ottenere il supporto AMP senza ulteriori sforzi di sviluppo.

E ha funzionato molto bene per i nostri clienti. Invece di ricostruire la loro app, l’implementazione di AMP con React Storefront richiede in genere ai nostri clienti un giorno o due, e la maggior parte di questo consiste semplicemente nel verificare che tutto funzioni come previsto.

In questo post, illustreremo come React Storefront svolge il duro lavoro per voi nel supportare AMP e PWA da un’unica base di codice. Nella prossima puntata, condivideremo alcune nuove ed entusiasmanti funzionalità di Layer0 che aiutano a fornire AMP in un contesto aziendale complesso.

Perché tutti i framework React non lo fanno?

Per una tipica app React, la derivazione automatica del contenuto AMP è difficile. Questo perché la maggior parte delle app React sono progettate per essere eseguite solo nel browser, ma i contenuti AMP non possono avere JavaScript (incluso React) prima che arrivino al browser. In altre parole, non puoi semplicemente puntare la cache AMP di Google allo stesso codice React che invii al browser. Sono formati completamente diversi.

Per superare questa limitazione, abbiamo beneficiato di una decisione architettonica iniziale di rendere le app React Storefront universali (talvolta chiamate isomorfe) per impostazione predefinita e di supportare Server-Side Rendering (SSR) nel livello 0. Con SSR, il rendering della pagina viene eseguito sul server prima che venga servita agli utenti. Mentre i nostri obiettivi principali nell’aggiunta di SSR erano migliorare le prestazioni e la SEO, ci ha anche consentito di eseguire un’app React Storefront sul server e quindi convertire automaticamente l’output HTML in HTML AMP valido in combinazione con le tecniche riportate di seguito.

Notifica a Google che AMP è supportato

Il primo passo verso l’implementazione di AMP è notificare al crawler di Google che esistono equivalenti AMP delle tue pagine. In genere, è necessario creare versioni AMP separate delle pagine, quindi configurare il router dell’applicazione in modo che i contenuti AMP e PWA vengano distribuiti su URL distinti. Con React Storefront, tutto quello che devi fare è aggiungere un decoratore @withAmp al componente della pagina di primo livello. React Storefront esegue automaticamente il rendering AMPHTML valido per qualsiasi pagina semplicemente aggiungendo “.amp” all’URL. Il decoratore @withAmp sfrutta questa convenzione per aggiungere il tag di collegamento necessario all’intestazione del documento.

In altre parole, questo:

				
					@withAmp
class Product extends Component {
  ...
}
				
			

Risultati simili a questo nella tua pagina PWA:

				
					<link rel="amphtml" href="https://www.mysite.com/p/1.amp"/>
				
			

Quando il crawler di Google vede un link a /p/1, scaricherà il contenuto AMP e lo servirà direttamente dal CDN AMP di Google.

Si noti che per una corretta SEO, la pagina AMP deve anche incorporare un tag rel=Canonical nella versione PWA originale della pagina come segue:

				
					<link rel="canonical" href="https://www.mysite.com/p/1"/>
				
			

Vale la pena sottolineare qui l’importanza di avere le pagine AMP e non AMP che puntano l’una all’altra con i tag di collegamento appropriati (ma diverse versioni di) <> . Senza queste configurazioni correttamente, Google non servirà il tuo contenuto AMP, e, peggio ancora, potrebbe portare le tue pagine AMP a cannibalizzare il livello SEO delle tue pagine non AMP. “React Storefront fa tutto il “doppio ingresso di contabilità AMP” per te, quindi non devi preoccuparti di questo perché qualcuno ha dimenticato di aggiornare i tag giusti.”

Componenti AMP AWARE

Implementare anche l’interattività più basilare in AMP può essere un problema enorme. Ad esempio, un campo quantità semplice in AMP potrebbe essere simile al seguente:

				
					<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>
				
			

Immagina di scrivere due versioni di codice come questa PER OGNI CONTROLLO INTERATTIVO nella tua app web progressiva. Ecco la scadenza del lancio!

Per fortuna, abbiamo fatto quel duro lavoro per te. React Storefront ti offre componenti AMP-aware a grana grossa come QuantitySelector che nascondono tutti questi dettagli cruenti. In React Storefront, è sufficiente utilizzare:

				
					<QuantitySelector product={product}/>
				
			

Il framework REACT si occupa del rendering della versione AMP del componente quando Google richiede una pagina AMP.

Rendering condizionale

Nella maggior parte dei casi, gli sviluppatori possono semplicemente utilizzare uno dei componenti AMP-aware all’interno del framework React Storefront per fornire interattività in AMP. Se, tuttavia, è necessario eseguire il rendering di qualcosa di specifico per AMP, il framework espone un campo amp booleano nello stato dell’app che è possibile utilizzare per il rendering condizionato di contenuti specifici in AMP.

Ad esempio:

				
					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

Il modo dichiarativo di AMP di definire gli eventi di interazione è completamente diverso da quello di React Ad esempio, immaginate di voler tenere traccia dei clic su specifici collegamenti di prodotti inviando eventi a Google Analytics. In AMP, questo sarebbe qualcosa come:

				
					<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>
				
			

Ti risparmierò l’implementazione di React, ma probabilmente coinvolgerà un ascoltatore ONCLICK e alcune chiamate a ga(). Basti dire che i due non sembreranno niente di simile.

React Storefront fornisce un’astrazione, il componente Track, che implementa entrambe le opzioni:

				
					<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>
				
			

Trasformazione del rendering HTML del server in AMPHTML

Le strategie di cui sopra ci fanno ottenere circa il 80% del modo per rendere valido AMP. Tuttavia, è necessario apportare ulteriori modifiche al documento. React Storefront trasforma l’HTML in uscita prima di inviarlo, apportando diverse modifiche, tra cui:

Aggiunta di amp-boilerplate e. ⚡

AMP richiede la presenza di alcuni elementi specifici nel documento. Questi includono un attributo “⚡” sull’elemento HTML radice e un elemento di stile standard chiamato boilerplate AMP:

				
					<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal
				
			

Trasformazione e consolidamento dei CSS

AMP richiede che tutti i CSS siano forniti nel corpo di un singolo elemento di stile. L’uso dell’attributo di stile e <del link rel=”stylesheet”> è vietato. React Storefront consolida tutti gli stili del codebase, incorporati in più <elementi di stile> o anche attributi di stile inline, in un unico <elemento amp-custom di stile> . Per ogni utilizzo di un attributo di stile, React Storefront crea una classe CSS univoca contenente le regole corrispondenti, applica la classe all’elemento, rimuove l’attributo di stile e aggiunge la classe all’elemento di stile amp-custom. In altre parole, questo:

				
					<div style="font-weight:bold">Red Shirt</div>
				
			

diventa:

				
					<style amp-custom>
  …
  .mi1 {
    font-weight:bold;
  }
</style>
<div class="mi1">Red Shirt</div>
				
			

Se aggiunto in tutti i tuoi stili, questa conversione automatica di CSS elimina un altro grosso problema durante la scrittura di pagine compatibili con AMP dall’app React.

Pulizia del markup

Ci sono diverse altre regole che AMP impone al markup. Ad esempio, il modo in cui ReactDOM esegue il rendering degli attributi booleani produce AMPHTML non valido. Questo JSX:

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

Il risultato sarà questo HTML:

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

Il risultato è che il validatore AMP mostra un errore simile al seguente:

Crux non è in grado di tenere traccia della quota di traffico “telefonico” per PWA/SPA

Se si utilizza una libreria di componenti, alcuni HTML renderizzati dai componenti potrebbero essere eseguiti in modo non conforme al validatore AMP per vari motivi. React Storefront incoraggia l’utilizzo della libreria dell’interfaccia utente dei materiali ampiamente diffusa e fornisce regole specifiche per la pulizia dell’HTML che produce. È qui che l’utilizzo di un framework di app Web REACT progressivo completo che copre ogni aspetto, dalla gestione dello stato ai componenti e allo stile, mostra davvero il suo valore in termini di aumento della velocità degli sviluppatori.

Infrastruttura per AMP e PWA

In qualità di sviluppatore che implementa AMP e PWA, è possibile implementare due versioni dell’app e mantenerle in seguito a modifiche future (il che significa che ogni correzione diventa una modifica del codice in due punti) o utilizzare l’automazione per ricavare contenuti AMP dalle pagine. A Layer0 abbiamo scelto quest’ultimo, che ha funzionato molto bene per i nostri clienti. Le caratteristiche di React Storefront che abbiamo descritto finora sono solo una parte della ragione di quel successo. Nella prossima puntata, esamineremo come questo framework si integra con Layer0 (Edgio) per supportare AMP in un ambiente aziendale. Resta sintonizzato.