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:
| Pacchetto | Descrizione |
|---|---|
| commerce-sdk-react | Libreria di hook React per il recupero dei dati da Salesforce B2C Commerce. |
| internal-lib-build | Strumenti interni utilizzati da altri pacchetti nel repository pwa-kit. |
| pwa-kit-create-app | Strumento per la generazione di progetti PWA Kit basati su modelli di progetto. |
| pwa-kit-dev | Strumento di riga di comando per sviluppare, creare e implementare progetti PWA Kit. |
| pwa-kit-react-sdk | Libreria di componenti e utility che supporta la pipeline di rendering. |
| pwa-kit-runtime | Libreria di ambienti di runtime che consentono alle applicazioni Node.js di essere eseguite su Managed Runtime. |
| template-express-minimal | Modello di progetto essenziale per app eseguite su Managed Runtime. |
| template-retail-react-app | Modello di progetto che include uno storefront JavaScript isomorfo. |
| template-typescript-minimal | Modello di progetto a configurazione automatica per le applicazioni TypeScript create con gli SDK di PWA Kit. |