Best practice

NOTA

Adobe consiglia di utilizzare l'editor SPA per i progetti che richiedono il rendering lato client basato sul framework dell'applicazione a pagina singola (ad es. React). Per saperne di più.

La creazione di un'app AEM Mobile On-demand Services è diversa dalla creazione di un'app che viene eseguita direttamente nella shell Cordova (o PhoneGap). Gli sviluppatori dovrebbero avere familiarità con:

Plug-in supportati oltre ai plug-in specifici di AEM Mobile .

NOTA

Per informazioni dettagliate sui plug-in, consultate le risorse seguenti:

I modelli che utilizzano la funzionalità plug-in devono essere scritti in modo tale che siano ancora modificabili nel browser, senza che sia presente il ponte del plugin.
- Ad esempio, attendere la funzione deviceready prima di tentare di accedere all'API di un plug-in.

Linee guida per AEM sviluppatori

Le seguenti linee guida aiuteranno AEM sviluppatori esperti per i siti che desiderano creare modelli e componenti per app mobili:

Struttura AEM modelli di siti per incoraggiare il riutilizzo e l'estensibilità

Preferisci più file di script componenti su un singolo file monolitico
- Sono disponibili diversi punti di estensione vuoti, ad esempio customheaderlibs.html e customfooterlibs.html, che consentono allo sviluppatore di modificare il modello di pagina mentre duplica il minor numero possibile di codice di base
- I modelli possono quindi essere estesi e personalizzati tramite il meccanismo Sling sling:resourceSuperType
Preferisci Sightly/HTL su JSP come linguaggio modulare
- Questo favorisce la separazione del codice dalla marcatura, offre protezione XSS integrata e ha una sintassi più familiare

Ottimizzazione per prestazioni su dispositivo

Lo script specifico per l'articolo e i fogli di stile devono essere inclusi nel payload dell'articolo, utilizzando il modello di sincronizzazione dei contenuti dps-article
Gli script e i fogli di stile condivisi da più articoli devono essere inclusi nelle risorse condivise, tramite il modello di sincronizzazione dei contenuti dps-HTMLResources
Non fare riferimento ad alcuno script esterno che bloccano il rendering

NOTA

Per ulteriori informazioni sugli script esterni qui per il blocco del rendering, consultate .

Preferisci librerie JS e CSS lato client specifiche dell'app a librerie specifiche per il Web

Per evitare problemi di sovraccarico nelle librerie come jQuery Mobile per gestire una vasta gamma di dispositivi e browser
Quando un modello è in esecuzione nella visualizzazione Web di un'app, potete controllare le piattaforme e le versioni che l'app supporterà, nonché la consapevolezza che sarà presente il supporto JavaScript. Ad esempio, preferisci Ionic (forse solo il CSS) rispetto all'interfaccia utente jQuery Mobile e Onsen rispetto all'Bootstrap.

NOTA

Per ulteriori informazioni su jQuery Mobile, fare clic qui.

Preferisci le microlibrerie su uno stack completo

Il tempo necessario per inserire i contenuti nel vetro del dispositivo verrà rallentato da ogni libreria da cui dipendono gli articoli. Questo rallentamento è aggravato quando viene utilizzata una nuova visualizzazione Web per eseguire il rendering di ogni articolo, in modo che ogni libreria debba essere inizializzata nuovamente da zero
Se gli articoli non sono creati come SPA (app a pagina singola), probabilmente non è necessario includere una libreria di stack completa come Angular
Preferite librerie singole più piccole per aggiungere l'interattività richiesta dalla pagina, ad esempio Fastclick o Velocity.js

Ridurre al minimo le dimensioni del payload dell'articolo

Utilizzate le risorse più piccole possibili in grado di coprire efficacemente il più grande viewport che si desidera supportare, a una risoluzione ragionevole
Utilizzate uno strumento come ImageOptim sulle immagini per rimuovere eventuali metadati in eccesso