Best practice best-practices

NOTE
L’Adobe consiglia di utilizzare l’Editor SPA per i progetti che richiedono il rendering lato client basato su framework di applicazione a pagina singola (ad esempio, React). Ulteriori informazioni.

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 devono avere familiarità con:

  • Plug-in supportati come plug-in predefiniti e plug-in specifici per dispositivi mobili Adobe Experience Manager (AEM).
NOTE
Per informazioni approfondite sui plug-in, consulta le risorse seguenti:
  • I modelli che utilizzano la funzionalità del plug-in devono essere scritti in modo tale da poter essere creati nel browser senza che sia presente il bridge di plug-in.

    • Ad esempio, assicurati di attendere che pronto all'uso prima di tentare di accedere all’API di un plug-in.

Linee guida per gli sviluppatori AEM guidelines-for-aem-developers

Le seguenti linee guida aiutano gli sviluppatori AEM competenti per i siti che desiderano creare modelli e componenti per app mobili:

Strutturare modelli di siti AEM per incoraggiare il riutilizzo e l’estensibilità

  • Preferisci più file script di componenti rispetto a un singolo file monolitico

    • Vengono forniti diversi punti di estensione vuoti, ad esempio customheaderlibs.html e customfooterlibs.html, che consentono allo sviluppatore di modificare il modello della pagina duplicando il minor numero possibile di codice di base
    • I modelli possono quindi essere estesi e personalizzati tramite Sling’s sling:resourceSuperType meccanismo
  • Preferisci Sightly/HTL a JSP come linguaggio di modelli

    • L’utilizzo di questa opzione favorisce la separazione del codice dal markup, offre una protezione XSS integrata e una sintassi più familiare

Ottimizza per prestazioni su dispositivo

  • I fogli di stile e gli script specifici dell’articolo devono essere inclusi nel payload dell’articolo, utilizzando il modello dps-article contentsync
  • 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 a script esterni che bloccano il rendering
NOTE
Ulteriori informazioni sugli script esterni che bloccano il rendering qui.

Preferisci librerie JS e CSS lato client specifiche per l’app rispetto a quelle specifiche per il web

  • Per evitare il sovraccarico in librerie come jQuery Mobile per gestire un'ampia gamma di dispositivi e browser
  • Quando un modello viene eseguito nella visualizzazione web di un’app, puoi controllare le piattaforme e le versioni che l’app supporterà e sapere che sarà presente il supporto JavaScript. Ad esempio, preferisci Ionic (solo CSS) rispetto a jQuery Mobile e Onsen UI rispetto a Bootstrap.
NOTE
Per ulteriori informazioni su jQuery mobile, fai clic su qui.

Preferisci le micro librerie a quelle full stack

  • Il tempo necessario per inserire i contenuti nel vetro del dispositivo viene rallentato da ogni libreria da cui dipendono gli articoli. Questo rallentamento si aggrava quando si utilizza una nuova visualizzazione web per eseguire il rendering di ogni articolo, pertanto ogni libreria deve essere inizializzata di nuovo da zero
  • Se i tuoi articoli non sono generati come SPA (app a pagina singola), probabilmente non devi includere una libreria full stack come Angular
  • Preferisci librerie singole più piccole che consentono di aggiungere l’interattività richiesta dalla pagina, ad esempio Clic rapido o Velocity.js

Riduci al minimo le dimensioni del payload dell’articolo

  • Utilizzare le risorse più piccole possibili in grado di coprire efficacemente il riquadro di visualizzazione più ampio supportato, a una risoluzione ragionevole
  • Utilizza uno strumento come ImageOptim sulle immagini per rimuovere eventuali metadati in eccesso

Come procedere getting-ahead

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

recommendation-more-help
2eeeb575-8007-40cc-a72d-206fbc4ddd4b