Panoramica di PWA Kit

Questa panoramica introduce brevemente le parti principali dell'architettura di PWA Kit e fornisce un contesto utile per comprendere le rimanenti sezioni della documentazione di prodotto.

Retail React App è un'app React renderizzata sul lato server e ottimizzata per l'e-commerce. Rappresenta un punto di partenza per la creazione di uno storefront con funzionalità chiave, quali:

  • Creazione di bundle di codice, suddivisione di codice e transpilazione
  • Libreria di componenti con applicazione di temi
  • Sistema di applicazione stili basato su JavaScript (CSS in JS)
  • Script per automatizzare le attività di sviluppo di routine
  • Processo di lavoro dei servizi e manifesto per le funzionalità PWA (Progressive Web App)
  • Gruppi di test

Lo storefront di Retail React App include pagine e funzionalità di e-commerce standard, ad esempio pagina di elenco prodotti (PLP), pagina di dettagli prodotto (PDP), carrello e checkout. Ogni aspetto dello storefront è progettato per essere ottimizzato ed esteso con codice personalizzato.

Per ulteriori informazioni, consultare la guida completa sull'architettura → Retail React App.

Per creare la migliore esperienza acquirente possibile, gli storefront PWA Kit utilizzano un sistema di rendering e routing che esegue lo stesso codice sorgente in due contesti diversi: sul lato server e sul lato client. Il rendering di lato server esegue l'ottimizzazione per la velocità di caricamento pagina iniziale, mentre il rendering di lato client permette transizioni di pagina fluide e un'interfaccia utente reattiva.

Il sistema di rendering e routing è definito da Retail React App con la propria configurazione server Express e una gerarchia di componenti React. In questo sistema è possibile:

  • Aggiungere nuovi componenti di pagina e modificare quelli esistenti
  • Fornire dati ai componenti di pagina dalle richieste API o dall'interazione utente
  • Definire schemi per il routing delle richieste URL ai componenti di pagina
  • Personalizzare l'output di tutte le pagine

Per ulteriori informazioni, consultare le guide complete sull'architettura → Rendering e Routing.

Il PWA Kit è un progetto open-source ospitato su GitHub.

Il repository GitHub per PWA Kit è impostato come monorepo (singolo repository) con diversi pacchetti, inclusi modelli di progetto, librerie, SDK e altri strumenti.

Per agevolare la navigazione nel repository, di seguito è riportata una panoramica di ogni pacchetto contenete:

PacchettoDescrizione
commerce-sdk-reactLibreria di hook React per il recupero dei dati da Salesforce B2C Commerce.
internal-lib-buildStrumenti interni utilizzati da altri pacchetti nel repository pwa-kit.
pwa-kit-create-appStrumento per la generazione di progetti PWA Kit basati su modelli di progetto.
pwa-kit-devStrumento di riga di comando per sviluppare, creare e implementare progetti PWA Kit.
pwa-kit-react-sdkLibreria di componenti e utility che supporta la pipeline di rendering.
pwa-kit-runtimeLibreria di ambienti di runtime che consentono alle applicazioni Node.js di essere eseguite su Managed Runtime.
template-express-minimalModello di progetto essenziale per app eseguite su Managed Runtime.
template-retail-react-appModello di progetto che include uno storefront JavaScript isomorfo.
template-typescript-minimalModello di progetto a configurazione automatica per le applicazioni TypeScript create con gli SDK di PWA Kit.