Best Practices best-practices

NOTE
Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, für die ein Framework-basiertes Client-seitiges Rendering für einzelne Seiten (z. B. React) erforderlich ist. Weitere Informationen

Das Erstellen einer AEM Mobile On-demand Services-App unterscheidet sich vom Erstellen einer App, die direkt in der Cordova- (oder PhoneGap-)Shell ausgeführt wird. Die Entwickler sollten mit folgenden Themen vertraut sein:

  • Plugins, die standardmäßig unterstützt werden, und Adobe Experience Manager (AEM) Mobile-spezifische Plug-ins.
NOTE
Ausführliche Informationen zu Plug-ins finden Sie in den folgenden Ressourcen:
  • Vorlagen, die Plug-in-Funktionen verwenden, sollten so geschrieben werden, dass sie im Browser noch autorisiert werden können, ohne dass die Plug-in-Verbindung vorhanden ist.

    • Achten Sie beispielsweise darauf, auf die Funktion device zu warten, bevor Sie versuchen, auf die API eines Plug-ins zuzugreifen.

Richtlinien für AEM Entwickler guidelines-for-aem-developers

Die folgenden Richtlinien helfen zuständigen AEM-Entwicklern bei Sites, die mobile App-Vorlagen und -Komponenten erstellen möchten:

Struktur AEM Sites-Vorlagen zur Förderung der Wiederverwendung und Erweiterbarkeit

  • Mehrere Komponentenskriptdateien über eine einzige monolithische

    • Es werden mehrere leere Erweiterungspunkte bereitgestellt, z. B. customheaderlibs.html und customfooterlibs.html, mit denen der Entwickler die Seitenvorlage ändern und so wenig Kerncode wie möglich duplizieren kann
    • Vorlagen können dann über den Mechanismus sling:resourceSuperType von Sling erweitert und angepasst werden
  • Sightly/HTL über JSP als Vorlagensprache bevorzugen

    • Dadurch wird eine Trennung von Code und Markup gefördert, es bietet integrierten XSS-Schutz und eine vertrautere Syntax

Optimieren der Leistung auf dem Gerät

  • Artikelspezifische Skript- und Stylesheets sollten in die Artikelnutzlast aufgenommen werden, indem die contentsync-Vorlage dps-article verwendet wird.
  • Skript- und Stylesheets, die von mehr als einem Artikel gemeinsam verwendet werden, sollten über die Vorlage "dps-HTMLResources contentsync"in gemeinsam genutzten Ressourcen enthalten sein
  • Referenzieren Sie keine externen Skripte, die Render-Blocking sind
NOTE
Weitere Informationen zum Rendern von blockierenden externen Skripten finden Sie hier.

Stellen Sie App-spezifische clientseitige JS- und CSS-Bibliotheken im Vergleich zu webspezifischen vor

  • So vermeiden Sie Mehraufwand in Bibliotheken wie jQuery Mobile für die Verarbeitung einer großen Bandbreite von Geräten und Browsern
  • Wenn eine Vorlage in der Webansicht einer App ausgeführt wird, haben Sie die Kontrolle über die Plattformen und Versionen, die die App unterstützen wird, und über das Wissen, dass JavaScript-Support verfügbar sein wird. Nehmen wir beispielsweise an, dass Ionic (nur CSS) gegenüber jQuery Mobile und Onsen UI den Vorzug vor Bootstrap hat.
NOTE
Um mehr über jQuery Mobile zu erfahren, klicken Sie auf hier.

Stellen Sie Mikrobibliotheken den Vorzug vor dem Vollstapel

  • Die Zeit, die benötigt wird, um Ihren Inhalt auf das Glas des Geräts zu bringen, wird von jeder Bibliothek verlangsamt, von der Ihre Artikel abhängen. Diese Verlangsamung wird verstärkt, wenn eine neue Webansicht zum Rendern jedes Artikels verwendet wird. Daher muss jede Bibliothek von Grund auf neu initialisiert werden
  • Wenn Ihre Artikel nicht als SPA (Einzelseiten-Apps) erstellt wurden, müssen Sie wahrscheinlich keine Vollstapelbibliothek wie Angular einfügen
  • Verwenden Sie kleinere, einseitige Bibliotheken, die dazu beitragen, die für Ihre Seite erforderliche Interaktivität hinzuzufügen, z. B. Fastclick oder Velocity.js

Minimieren der Artikelnutzlast

  • Verwenden Sie die kleinstmöglichen Assets, die mit einer angemessenen Auflösung effektiv den größten unterstützten Viewport abdecken können.
  • Verwenden Sie ein Tool wie ImageOptim für Ihre Bilder, damit Sie überschüssige Metadaten entfernen können.

Erste Schritte getting-ahead

Weitere Informationen zu den beiden anderen Rollen und Zuständigkeiten finden Sie in den folgenden Ressourcen:

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