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

Introduzione

Per ulteriori informazioni sugli altri due ruoli e responsabilità, consulta le risorse seguenti:

In questa pagina