Best Practices

Hinweis

Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, für die ein frameworkbasiertes clientseitiges 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-Shell (oder PhoneGap) ausgeführt wird. Die Entwickler sollten mit Folgendem vertraut sein:

  • Plugins, die standardmäßig unterstützt werden, sowie die AEM Mobile-spezifischen Plugins.
Hinweis

Ausführliche Informationen zu Plugins finden Sie in den folgenden Ressourcen:

  • Vorlagen, die Plugin-Funktionen verwenden, sollten so geschrieben werden, dass sie im Browser immer noch autoritär sind, ohne dass die Plugin-Brücke vorhanden ist.

    • Achten Sie beispielsweise darauf, auf die Funktion " deviceready "zu warten, bevor Sie versuchen, auf die API eines Plugins zuzugreifen.

Richtlinien für AEM

Die folgenden Richtlinien helfen erfahrenen AEM Entwicklern von Sites, die Vorlagen und Komponenten für mobile Apps erstellen möchten:

Strukturieren AEM Sitevorlagen zur Förderung der Wiederverwendung und Erweiterbarkeit

  • Mehrere Komponentenskriptdateien über eine einzige monolithische

    • Es stehen eine Reihe leerer Erweiterungspunkte zur Verfügung, z. B. customheaderlibs.html und customfooterlibs.html, mit denen Entwickler die Seitenvorlage ändern und dabei möglichst wenig Kerncode duplizieren können
    • Vorlagen können dann über den Sling-Mechanismus sling:resourceSuperType erweitert und angepasst werden
  • Sightly/HTL über JSP als Vorlagensprache bevorzugen

    • Dadurch wird eine Trennung von Code und Markup gefördert, Angebot, die im XSS-Schutz integriert sind, und die eine vertrautere Syntax aufweisen

Optimieren Sie die Leistung auf dem Gerät.

  • Artikelspezifische Skript- und Stylesheets sollten mithilfe der ContentSync-Vorlage für den Artikel in die Artikelnutzlast einbezogen werden
  • 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
  • Kein Verweis auf externe Skripte, die render-locking sind
Hinweis

Ausführlichere Informationen zum Render-Blockieren externer Skripte finden Sie hier.

Stellen Sie anwendungsspezifische clientseitige JS- und CSS-Bibliotheken über webspezifische

  • Vermeidung von Mehraufwand in Bibliotheken wie jQuery Mobile für die Handhabung 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 von der App unterstützt werden, sowie das Wissen, dass JavaScript-Unterstützung vorhanden sein wird. Nehmen wir beispielsweise an, dass Sie Ionic (vielleicht nur CSS) gegenüber der Benutzeroberfläche von jQuery Mobile und Onsen bevorzugen, anstatt Bootstrap.
Hinweis

Weitere Informationen zu jQuery Mobile erhalten Sie hier.

Mikrobibliotheken über Vollstapel bevorzugen

  • Die Zeit, die benötigt wird, um Ihre Inhalte auf das Glas des Geräts zu bringen, wird durch jede Bibliothek, von der Ihre Artikel abhängen, verlangsamt. Diese Verlangsamung wird noch verstärkt, wenn ein neuer Webview zum Rendern jedes Artikels verwendet wird. Daher muss jede Bibliothek erneut von Grund auf initialisiert werden
  • Wenn Ihre Artikel nicht als SPAs (Einzelseitenanwendungen) erstellt wurden, müssen Sie wahrscheinlich keine vollständige Stapelbibliothek wie Angular einschließen
  • Verwenden Sie kleinere Bibliotheken mit einem Verwendungszweck, um die Interaktivität hinzuzufügen, die Ihre Seite benötigt, z. B. Fastclick oder Velocity.js

Größe der Artikelnutzlast minimieren

  • Verwenden Sie die kleinstmöglichen Assets, die effektiv den größten Viewport abdecken können, den Sie unterstützen werden, mit einer angemessenen Auflösung
  • Verwenden Sie ein Werkzeug wie ImageOptim auf Ihren Bildern, um überschüssige Metadaten zu entfernen

Vorwärts

Weitere Informationen zu den beiden anderen Rollen und Verantwortlichkeiten finden Sie in den folgenden Ressourcen:

Auf dieser Seite