Trucs et astuces sur les services de livraison Edge pour les développeurs / Blogs / Perficient

Edge Delivery Services permet aux développeurs et aux auteurs de créer des contenus ultra-rapides et performants. des expériences numériques qui obtiennent un score parfait de 100 % selon les métriques Lighthouse de Google. Avec Edge Delivery, vous pouvez choisir parmi deux options de mise en œuvre flexibles – création basée sur des documents et WYSIWYT (What You See Is What You Get) – pour rationaliser votre flux de travail de développement et accélérer la création de contenu.

Configuration des services de livraison Edge

Ce blog se concentrera on création basée sur des documents, également connue sous le nom de Project Franklin, Helix ou AEM (Adobe Experience Manager) En direct. Pour libérer tout le potentiel des Edge Delivery Services et démarrer le développement local, veuillez vous référer à Guide complet d’Adobe pour la configuration d’EServices de livraison localement.

Avec cette fondation, nous allons discuter du développeur connaissances on création basée sur des documents dans le ultérieur section.

Trucs et astuces

Soyez un gardien de phare

L’objectif primordial est de maintenir un score Lighthouse parfait tout au long du processus de développement. Pour y parvenir, surveillez régulièrement le score aux étapes clés, telles que l’achèvement de chaque fonctionnalité ou bloc. Se référer aux diagnostics et aborder les domaines d’amélioration suggérés vous aidera à maximiser votre score.

Par exemple, regardez les éléments répertoriés dans l’image ci-dessous. En surveillant de près les performances de Lighthouse, vous réduirez considérablement le nombre de problèmes à résoudre, ce qui entraînera une liste beaucoup plus courte. Une surveillance régulière permet d’identifier et de résoudre les problèmes dès le début, rationalisant ainsi votre processus de développement.

Exemple de Lighthouse Diagnostics de Google pour un site Web.

De plus, en adoptant une approche de développement axée sur le mobile, vous pouvez minimiser les retouches et garantir une expérience utilisateur transparente sur tous les appareils. Cette stratégie proactive permettra à terme d’économiser du temps et des efforts.

Meilleures pratiques pour des tests précis du score Lighthouse

Lorsque vous testez les scores Lighthouse pendant le développement local, il est essentiel de minimiser les facteurs externes qui peuvent avoir un impact sur vos résultats. Activez uniquement les extensions de navigateur nécessaires, car elles peuvent affecter négativement votre score. Si vous ne parvenez pas à désactiver les extensions, envisagez plutôt d’utiliser l’interface de ligne de commande. Pour commencer, reportez-vous aux étapes ci-dessous.

1. Installer le phare: Exécutez la commande suivante pour installer Lighthouse globalement sur votre machine :

   npm install -g lighthouse

2. Exécuter le phare: Vérifiez votre score en utilisant la commande suivante :

   lighthouse <url>

3. Personnaliser les points d’arrêt (facultatif) : Pour tester des points d’arrêt spécifiques, transmettez les options à l’aide de la commande suivante :

   lighthouse <url> --view --chrome-flags="--window-size=<windowWidth, windowHeight>"

   Remplacer avec l’URL que vous souhaitez tester, et et avec les dimensions souhaitées.

Tirer parti du code standard pour des performances améliorées

Le code passe-partout d’Edge Delivery Services offre une gamme de fonctions conçues pour optimiser les performances du code. Pour explorer ces fonctions et mieux comprendre le code, consultez les scripts dans aem.js et script.js. Ces scripts fournissent des fonctions prêtes à l’emploi (OOTB) qui peuvent améliorer considérablement votre flux de travail de développement.

L’une des fonctions remarquables est la createOptimizedPicture()qui optimise la diffusion des images. De plus, le buildAutoBlocks() La fonction est un outil précieux pour le blocage automatique, en particulier sur les pages d’articles de blog ou lors de la création de composants communs pour des pages utilisant le même modèle. Cette fonction peut servir d’inspiration pour vos propres solutions personnalisées.

Conventions de dénomination des blocs

Pour garantir un rendu transparent, vérifiez que le nom du bloc sur le document correspond aux noms de dossier et de fichier de bloc correspondants (CSS/JS) dans le répertoire /blocks. Par exemple, si le bloc est nommé «liens vers les réseaux sociaux« , la structure des dossiers doit refléter cette convention de dénomination.

Exemple de structure de dossiers de blocs.

Sur le document, le bloc peut être référencé à l’aide des variantes suivantes, qui rendront toutes le bloc semé ci-dessus avec succès :

• liens vers les réseaux sociaux
• Liens vers les réseaux sociaux
• liens vers les réseaux sociaux
• Liens vers les réseaux sociaux

Exemple de bloc créé dans un tableau.

Notez que même si la convention de dénomination ne respecte pas la casse, elle est sensible à camelCase. Par conséquent, en utilisant «liens vers les médias sociaux » ne rendra pas le bloc correctement. Le maintien de conventions de dénomination cohérentes garantit un rendu de bloc efficace et évite les problèmes potentiels.

Découvrez la collection de blocs OOTB

Avant de construire un nouveau bloc à partir de zéro, prenez un moment pour explorez les options prêtes à l’emploi (OOTB) disponibles avec Edge Delivery Services. Les services Edge Delivery offrent une gamme complète d’exemples de blocs qui peuvent servir de base à votre projet, vous permettant ainsi d’économiser du temps et des efforts. Bien que les blocs OOTB puissent sembler comparables aux composants de base, ils remplissent un objectif distinct. Contrairement aux composants principaux, la collection de blocs du code passe-partout ne peut pas être étendue et aucune mise à jour d’Adobe n’est à prévoir. Les développeurs sont libres d’utiliser ou de réutiliser n’importe quel bloc du collection ou ceux trouvés dans le code passe-partout. En tirant parti de la collection OOTB, vous pouvez accélérer votre processus de développement et éviter de réinventer la roue.

Surmonter les obstacles liés aux nouveaux services de livraison Edge

En intégrant ces trucs et astuces dans votre routine de développement basée sur Edge Delivery Services, vous serez en mesure de surmonter les obstacles courants rencontrés par un nouveau développeur Edge Delivery. N’oubliez pas que la clé du succès réside dans l’apprentissage continu, l’adaptabilité et la volonté d’explorer de nouvelles approches.

Restez curieux !

Plus de contenu sur les services de livraison Edge !

Nouveau chez Adobe : composabilité de nouvelle génération

POC des services de livraison Adobe Edge