Best Practices best-practices
- der universelle Editor zum visuellen Bearbeiten von Headless-Inhalten.
- der Inhaltsfragmenteditor zur formularbasierten Bearbeitung von Headless-Inhalten
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 den folgenden Themen vertraut sein:
- Standardmäßig unterstützte Plug-ins und Adobe Experience Manager (AEM) Mobile-spezifische Plug-ins.
-
Vorlagen, die Plug-in-Funktionen verwenden, sollten so geschrieben werden, dass sie weiterhin im Browser autorisiert werden können, ohne dass die Plug-in-Brücke vorhanden ist.
- Warten Sie beispielsweise auf die Funktion deviceReady, bevor Sie auf die API eines Plug-ins zugreifen.
Richtlinien für AEM-Entwickler guidelines-for-aem-developers
Die folgenden Richtlinien helfen kompetenten AEM-Entwicklerinnen und -Entwicklern für Sites, die Mobile-App-Vorlagen und -Komponenten erstellen möchten:
Strukturieren Sie AEM-Site-Vorlagen, um die Wiederverwendung und Erweiterbarkeit zu fördern
-
Mehrere Komponentenskriptdateien sollten einer einzigen monolithischen Skriptdatei vorgezogen werden
- Es werden mehrere leere Erweiterungspunkte bereitgestellt, z. B. customheaderlibs.html und customfooterlibs.html, mit denen der Entwickler die Seitenvorlage ändern und dabei so wenig Kern-Code wie möglich duplizieren kann
- Vorlagen können dann über den Mechanismus „sling:resourceSuperType von Sling erweitert und werden
-
Sightly/HTL gegenüber JSP als Vorlagensprache bevorzugen
- Die Verwendung dieser Option fördert die Trennung von Code und Markup, bietet integrierten XSS-Schutz und verfügt über eine vertrautere Syntax
Für Leistung auf dem Gerät optimieren
- Artikelspezifisches Skript und Stylesheets sollten mithilfe der Inhaltssynchronisierungsvorlage dps-article in die Artikel-Payload aufgenommen werden
- Skript- und Stylesheets, die von mehr als einem Artikel gemeinsam verwendet werden, sollten über die Vorlage dps-HTMLResources contentSync in gemeinsame Ressourcen aufgenommen werden
- Referenzieren Sie keine externen Skripte, die Render-Blocker sind
Bevorzugen Sie App-spezifische Client-seitige JS- und CSS-Bibliotheken gegenüber Web-spezifischen
- So vermeiden Sie Overhead in Bibliotheken wie jQuery Mobile für eine große Bandbreite an 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-Unterstützung vorhanden ist. Beispielsweise sollten Sie Ionic (nur CSS) gegenüber jQuery Mobile und Onsen UI gegenüber Bootstrap bevorzugen.
Mikrobibliotheken gegenüber Full-Stack bevorzugen
- Die Zeit, die benötigt wird, um Ihre Inhalte auf das Glas des Geräts zu bringen, wird von jeder Bibliothek verlangsamt, von der Ihre Artikel abhängen. Diese Verlangsamung wird noch verstärkt, wenn eine neue Web-Ansicht verwendet wird, um jeden Artikel zu rendern, sodass jede Bibliothek von Grund auf neu initialisiert werden muss
- Wenn Ihre Artikel nicht als SPA (Single Page Apps) erstellt wurden, müssen Sie wahrscheinlich keine Full-Stack-Bibliothek wie Angular einfügen
- Bevorzugen Sie kleinere, universelle Bibliotheken, die Ihnen helfen, die Interaktivität hinzuzufügen, die Ihre Seite erfordert, wie Fastclick oder Velocity.js
Minimieren der Größe der Artikel-Payload
- Verwenden Sie möglichst kleine Assets, die effektiv den größten von Ihnen unterstützten Viewport mit einer angemessenen Auflösung abdecken können
- Verwenden Sie ein Tool wie ImageOptim auf Ihren Bildern, damit Sie überschüssige Metadaten entfernen können
Vorwärtskommen getting-ahead
Weitere Informationen zu den beiden anderen Rollen und Zuständigkeiten finden Sie in den folgenden Ressourcen: