Competenze tecniche necessarie

Questa guida illustra le principali competenze tecniche necessarie per un corretto sviluppo con PWA Kit.

In generale, si presuppone che gli sviluppatori PWA Kit abbiano una conoscenza dei seguenti aspetti:

Creazione delle applicazioni React.js universali.
Codifica in linguaggio JavaScript ES6.
Applicazione stili ai componenti di IU con CSS.
Uso di RESTful API, come Salesforce Commerce API.
Sviluppo di applicazioni web con Node.js ed Express.js.
Uso di npm per gestire pacchetti ed eseguire script.

Se si è in possesso di queste conoscenze, è possibile passare a un approfondimento. Di seguito è riportato un elenco più completo delle competenze necessarie per la creazione di un’applicazione storefront con PWA Kit. Non occorre essere esperti di ogni singolo aspetto. PWA Kit offre numerose opportunità per acquisire in modo piacevole nuove competenze molto richieste.

JavaScript

Un’app PWA Kit è codificata in linguaggio JavaScript moderno. Persino il CSS è scritto in linguaggio JavaScript.

Un’app di e-commerce headless effettua frequenti richieste di rete, pertanto è fondamentale conoscere il metodo fetch(). Si consiglia di utilizzare una libreria fetch universale (ad esempio cross-fetch) compatibile sia con un browser sia con un ambiente Node.js. Per prestazioni ottimali, è necessario essere in grado di scrivere codice asincrono con promesse (oggetto Promise) e con le parole chiave async e await.

Risorse JavaScript consigliate

Corso online: Modern JavaScript From The Beginning
Corso online: JavaScript Concurrency
MDN: Fetch API - Web APIs
fetch() cheatsheet
Il server web Express.js
Come eseguire il debug di un’applicazione Node.js
Gestione dei pacchetti npm
Utilizzo di npm-run-scripts

React.js

React è la base per tutte le app PWA Kit. La documentazione React ufficiale è un’ottima risorsa iniziale. Data la sua utilità, se ne consiglia una lettura integrale. Per un approccio più mirato a React, focalizzarsi su componenti, prop, ciclo di vita del rendering e gestione dello stato, inclusi i nuovi concetti, come quello di hook, introdotti con la versione React 16.8.

Risorse React.js consigliate

Corso online: Modern React
Componenti e prop - React
Gestione dello stato
Stato e Sincronizzazione con Effect
Contesto
Limiti di errore
Hook: Guida introduttiva, Tutorial e Panoramica di riferimento
Rendering di lato server
Hydration
Debug con React DevTools
Estensioni React come react-router e react-helmet

API

L’app riceve tutti i dati di e-commerce da Salesforce Commerce Cloud mediante le API. Si presuppone una conoscenza generale delle RESTful API, in particolare B2C Commerce API e Open Commerce API (OCAPI).

Risorse API consigliate

Ricevi la formazione

Formazione con istruttore: Sviluppo di uno storefront componibile B2C

Conoscenze e competenze supplementari

A seconda delle caratteristiche del progetto, possedere conoscenze e competenze supplementari nelle seguenti aree rappresenta un vantaggio:

Principi di architettura per applicazioni a pagina singola e modello back-end per front-end
Test delle prestazioni delle pagine web con Lighthouse e WebPageTest
Elenco di controllo PWA
Interazione con le API mediante strumenti come cURL e Postman
Reti HTTP e caching
Analisi web
Ottimizzazione per i motori di ricerca
Configurazione degli strumenti di compilazione come webpack
Esecuzione di modifiche DNS e migrazioni
Uso delle librerie JavaScript di terze parti per ottimizzare le funzionalità del sito
Tecniche di layout basate su una progettazione web reattiva mediante media query, flexbox e griglie