JS in AMP: JavaScript in pagine AMP

AMP (Accelerated Mobile Pages) limita la possibilità di utilizzare JavaScript per incrementare le performance delle pagine Web. Tuttavia, il progetto JS in AMP si pone l’obiettivo di fornire un ambiente vincolato per Javascript che permette di eseguire componenti UI interattivi all’interno di una pagina AMP. JS in AMP consente ad esempio di ottenere il rendering delle componenti React sotto forma di elementi UI di una pagina AMP.

Oltre permettere il rendering delle componenti UI JavaScript, JS in AMP permette di mantenere inalterate le caratteristiche di AMP, come l’elevata sicurezza e le feature relative alla privacy, e segue i suoi principi di design, come la preferenza rivolta alla user experience rispetto alla developer experience e il supporto per la “graceful degradation“.

AMP in JS consente ad un 3P (custom) JavaScript di essere eseguito in un Web worker che riceve gli eventi dell’utente tramite una pagina e invia le richieste attraverso postMessage.

Il 3P JavaScript viene eseguito in una sandbox built-in e nel DOM virtuale del worker. Questo “worker DOM” offre delle API che permettono di mutare la sua struttura, come i metodi setAttribute() e appendChild() e le inoltra alla pagina come mutation requests.

La pagina, in turno, esegue tali richieste attraverso un “sanitizer” (utilizzato sia per scopi di sicurezza che per preservare gli oggetti invarianti della UX/user experience di AMP) ed infine produce le mutazioni sulla struttura del DOM reale. Questa funzionalità verrà offerta in una nuova estensione di AMP attraverso <amp-script>.

Per preservare il caricamento istantaneo nativo di AMP, <amp-script> supporta un rendering ahead-of-time, simile al rendering server-side: il markup HTML per lo stato iniziale del render di 3P JS viene prodotto come elemento figlio di <amp-script> ed “idratato” (con riferimento al successivo completamento dei dati di un oggetto che esiste in memoria) a runtime.

Questa strategia assicura che la latenza necessaria alla creazione del Web worker ed all’esecuzione di 3P JS non impatti sulle performance dell’applicazione.

Via JS in AMP