Sviluppo front-end con l’archetipo progetto AEM front-end
L’Archetipo progetto AEM include un meccanismo di sviluppo front-end opzionale e dedicato basato su Webpack. Il modulo ui.frontend diventa così la posizione centrale per tutte le risorse front-end del progetto, inclusi i file JavaScript e CSS. Per sfruttare appieno questa funzione utile e flessibile, è importante comprendere in che modo lo sviluppo front-end si inserisce in un progetto AEM.
Questo documento si concentra sui pattern di utilizzo generali del modulo di sviluppo front-end e su ciò che può fare. Per opzioni di build e istruzioni tecniche dettagliate, consulta la documentazione nell’archivio GitHub dell’archetipo.
Sviluppo front-end e back-end AEM front-end-back-end
In termini molto semplificati, i progetti AEM si possono considerare costituiti da due parti distinte, ma correlate:
- Lo sviluppo back-end che guida la logica di AEM e produce librerie Java, servizi OSGi, ecc.
- Lo sviluppo front-end che guida la visualizzazione e il comportamento del sito web risultante e la generazione di librerie JavaScript e CSS
Poiché questi due processi di sviluppo si concentrano su parti diverse del progetto, lo sviluppo back-end e front-end può avvenire in parallelo.
Tuttavia, qualsiasi progetto risultante deve utilizzare l’output di entrambi i processi di sviluppo, sia back-end che front-end.
Determinazione del markup determining-markup
Qualunque sia il flusso di lavoro di sviluppo front-end che decidi di implementare per il progetto, gli sviluppatori back-end e gli sviluppatori front-end devono prima concordare il markup. In genere, è AEM che definisce il markup, fornito dai Componenti core. Tuttavia, il markup può essere personalizzato, se necessario.
Flussi di lavoro possibili per lo sviluppo front-end possible-workflows
Il modulo di sviluppo front-end è uno strumento utile e molto flessibile, ma non c’è un’opinione prevalente su come dovrebbe essere utilizzato. Di seguito sono riportati due esempi di possibile utilizzo, ma le esigenze dei singoli progetti potrebbero sicuramente imporre altri modelli di utilizzo.
Utilizzo del server di sviluppo statico Webpack using-webpack
Utilizzando Webpack puoi creare stili e sviluppare in base all’output statico di pagine web AEM all’interno del modulo ui.frontend.
- Visualizza un’anteprima della pagina in AEM utilizzando la modalità di anteprima pagina oppure specificando
wcmmode=disablednell’URL - Visualizza la sorgente della pagina e salvala come HTML statico nel modulo ui.frontend
- Avvia Webpack e inizia a creare gli stili e generare i file JavaScript e CSS necessari
- Esegui
npm run devper generare le clientlibs
In questo flusso, uno sviluppatore AEM potrebbe eseguire i passaggi uno e due e passare l’HTML statico allo sviluppatore front-end che sviluppa in base all’output HTML di AEM.
Utilizzo di Storybook using-storybook
Utilizzando Storybook puoi eseguire uno sviluppo front-end più atomico. Anche se Storybook non è incluso in Archetipo progetto AEM, puoi installarlo e memorizzare gli artefatti di Storybook nel modulo ui.frontend. Quando sono pronti per il test in AEM, possono essere distribuiti come clientlibs eseguendo il comando npm run dev.
Panoramica delle clientlibs clientlibs
Il modulo front-end è reso disponibile utilizzando una AEM clientlib.. Durante l’esecuzione dello script di sviluppo NPM, l’app viene sviluppata e il pacchetto aem-clientlib-generator prende il risultante output di sviluppo e lo trasforma in una clientlib.
Una clientlib è costituita dai file e dalle directory seguenti:
css/: file CSS che possono essere richiesti nel codice HTMLcss.txt: indica ad AEM l’ordine e i nomi dei file incss/, in modo che possano essere unitijs/: file JavaScript che possono essere richiesti nel codice HTMLjs.txtindica ad AEM l’ordine e i nomi dei file injs/, modo che possano essere unitiresources/: Mappe sorgente, blocchi di codice non-entrypoint (derivanti dalla suddivisione del codice), risorse statiche (ad esempio icone), ecc.