AMPConf 2019 sta solo concludendo, ma stiamo appena iniziando! In questa serie di post sul blog, celebriamo AMPConf evidenziando come il framework React Storefront e Layer0 semplifichino la vita agli sviluppatori di supportare AMP nelle loro app React.
Mantenere ASCIUTTI gli amplificatori
Siamo stati relativamente primi ad adottare l’eCommerce sia per Progressive Web Apps (PWA) che per 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ù rapida possibile.
In effetti, il percorso consigliato da Google per i clienti consiste nel fornire prima una versione AMP della tua app per cercare gli utenti e passare alla versione PWA completa del tuo sito nelle pagine successive. E poiché quasi la metà del traffico dei siti Web dei retailer proviene da ricerche organiche, supportare sia AMP che PWA è diventato una priorità.
Purtroppo, le tecnologie PWA e AMP non potrebbero essere più selvaggiamente 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 proibite dall’uso di JavaScript e hanno restrizioni rigide sia per 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 peso sul team di sviluppo non finisce qui. Ogni correzione di bug, modifica del layout, nuova funzione, ecc. potrebbe richiedere la propagazione ai codebase AMP e PWA.
Scrivere una grande app una volta è già abbastanza difficile. Nessuno vuole scrivere la stessa app due volte. Gli sviluppatori odiano questo tipo di cose così tanto che gli hanno dato un acronimo popolare, DRY (Don Not Repeat Yourself). In qualità di sviluppatori, abbiamo investito in anticipo nell’aggiunta del supporto automatico AMP 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 solitamente ai nostri clienti un paio di giorni, e la maggior parte di ciò consiste semplicemente nel verificare che tutto funzioni come previsto.
In questo post, tratteremo il modo in cui React Storefront svolge il duro lavoro per supportare AMP e PWA da un singolo codebase. Nella prossima puntata, condivideremo alcune nuove entusiasmanti funzionalità di Layer0 che aiutano a fornire AMP in un contesto aziendale complesso.
Perché tutti i framework React non fanno questo?
Per una tipica app React, è difficile ricavare automaticamente contenuti AMP. Questo perché la maggior parte delle app React sono progettate per essere eseguite solo nel browser, ma i contenuti AMP non possono avere alcun JavaScript (incluso React) prima che raggiungano il browser. In altre parole, non puoi semplicemente puntare la Google AMP cache allo stesso codice React che invii al browser. Sono formati completamente diversi.
Per superare questo limite, abbiamo tratto vantaggio da una decisione architettonica iniziale di rendere universali le app React Storefront (talvolta chiamate isomorfe) per impostazione predefinita e supportare Server-Side Rendering (SSR) in Layer0. Con SSR, il rendering della pagina viene eseguito sul server prima che venga fornita agli utenti. Mentre i nostri obiettivi principali nell’aggiunta di SSR erano migliorare le prestazioni e il SEO, ci ha anche permesso di eseguire un’app React Storefront sul server e quindi di convertire automaticamente l’output HTML in AMP HTML valido, insieme alle tecniche riportate di seguito.
Notificare 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 fornisca contenuti AMP e PWA su URL distinti. Con React Storefront, tutto quello che devi fare è aggiungere un decoratore @withAmp al tuo componente di 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 link necessario alla testa del documento.
In altre parole, questo:
@withAmp
class Product extends Component {
...
}
Risultati in qualcosa del genere sulla 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 dalla CDN AMP di Google.
Si noti che per un SEO corretto, la pagina AMP deve anche incorporare un tag rel=Canonical nella versione PWA originale della pagina come questa:
<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 le appropriate (ma diverse versioni di) <link> tag. Senza queste configurazioni correttamente, Google non fornirà i tuoi contenuti AMP e, peggio ancora, le tue pagine AMP potrebbero cannibalizzare il posizionamento SEO delle tue pagine non AMP. React Storefront fa tutto il “AMP double entry bookkeeping” per te, quindi non devi preoccuparti che questo accada semplicemente perché qualcuno ha dimenticato di aggiornare i tag giusti.
Componenti AMP
Implementare anche l’interattività più basilare in AMP può essere un problema enorme. Ad esempio, un campo quantità semplice in AMP potrebbe avere il seguente aspetto:
<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. La scadenza per il lancio è scaduta!
Per fortuna, abbiamo fatto quel duro lavoro per te. React Storefront ti offre componenti a grana grossa e compatibili con gli AMP, come QuantitySelector, che nascondono tutti questi dettagli noiosi. In React Storefront, è sufficiente utilizzare:
<QuantitySelector product={product}/>
Il framework React esegue il 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 eseguire il rendering condizionale 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
)
}
}
}
Analisi universale
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 le due cose non sembreranno uguali.
React Storefront fornisce un’astrazione, il componente Track, che implementa entrambi questi elementi:
<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 di HTML con rendering server in AMPHTML
Le strategie di cui sopra ci fanno ottenere circa il 80% della strada verso la resa di AMP validi. Tuttavia, è necessario apportare ulteriori modifiche al documento. React Storefront trasforma l’HTML in uscita prima che venga inviato, apportando diverse modifiche, tra cui:
Aggiunta di una piastra a vapore 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=”foglio di stile”> è vietato. React Storefront consolida tutti gli stili all’interno della base di codice, incorporati in più <>elementi di stile o persino attributi di stile in linea, in un unico <>elemento di stile amp-custom. 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 sommato a tutti gli stili, questa conversione automatica di CSS elimina un altro problema importante quando si scrivono pagine compatibili con AMP dall’app React.
Pulizia del markup
Ci sono varie 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 che determina la visualizzazione di un errore simile al seguente:
Crux non è in grado di tracciare la quota di traffico «telefonico» per i PWA/le SPA
Se si utilizza una libreria di componenti, alcuni componenti HTML sottoposti a rendering possono essere eseguiti in modo anomalo dal 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 progressivo React completo che copre tutto, 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 attraverso modifiche future (ovvero, ogni correzione diventa una modifica del codice in due posizioni) 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, esploreremo come questo framework si integra con Layer0 (Edgio) per supportare AMP in un ambiente aziendale. Resta sintonizzato.
