Liste de contrôle des meilleures pratiques de précréation et de mise en service

Bienvenue au début de votre parcours dans Composable Storefront ! Cette liste de contrôle résume les points clés qui peuvent avoir un impact majeur sur l’échéancier de votre projet. En vous concentrant sur ces quatre meilleures pratiques, vous serez mieux équipé pour faire face aux complexités de la création, du lancement et de la surveillance d’un site Progressive Web App (PWA) Kit réussi et éviter les pièges courants. Utilisez cette liste de contrôle pour planifier un déploiement fluide et réussi !

Quand il s’agit de personnalisation, vous êtes aux commandes. Comprenez l’étendue de la personnalisation requise pour répondre aux besoins de votre entreprise. N’oubliez pas qu’un site hautement personnalisé demande plus d’efforts, comme décrit dans ces exemples.

• Familiarisez-vous avec la conception et les fonctionnalités disponibles dans notre Retail React App. Vous devez créer toutes les fonctionnalités qui ne sont pas disponibles dans Retail React App.
• Utilisez autant que possible les composants React existants. PWA Kit utilise React ; vous avez donc accès à l’écosystème de composants React. Si vous personnalisez quelque chose, voyez s’il existe un composant Chakra pour cela. Si ce n’est pas le cas, recherchez une version open source. S’il n’existe pas de version open source, créez le composant vous-même.
• Vérifiez que nos API prennent en charge les fonctionnalités personnalisées requises et renvoient les données dont vous avez besoin. Si ce n’est pas le cas de nos API, vous pouvez :
  • Créer une API personnalisée pour renvoyer les données, ou
  • Étendre la réponse de l’API à l’aide d’un hook
• Vérifiez que les cartridges et les intégrations de votre site fonctionnent avec une implémentation headless. Pour les utiliser dans un site PWA Kit, vous pouvez exposer leurs fonctionnalités à l’aide d’API ou de hooks personnalisés.

• Les compétences pour réussir
• Premiers pas avec l’API B2C Commerce
• API personnalisées
• Personnalisation avec des hooks
• Ressources de documentation pour les développeurs B2C

Posez les bases solides d’un site stable et évolutif en suivant ces étapes.

• Décidez du nombre d’environnements Managed Runtime (MRT) de production dont vous disposerez. Le fait d’avoir plus d’environnements vous donne plus de contrôle. Mais plus vous avez d’environnements, plus il est compliqué de tous les gérer sur le plan opérationnel. Par exemple, si vous avez cinq marques qui sont toutes servies à partir du même environnement MRT, vous devez toujours les mettre à jour ensemble. Avoir moins d’environnements signifie moins de frais opérationnels. Reportez-vous à Présentation de Managed Runtime.
• Décidez d’utiliser notre réseau de diffusion de contenu intégré (eCDN) ou un CDN tiers. Reportez-vous à Quand utiliser un CDN tiers. Si vous décidez d’utiliser un CDN tiers, consultez la documentation de votre fournisseur pour plus de détails.
• Décidez de votre stratégie d’URL. La plupart des clients choisissent de conserver leurs URL existantes. Prévoyez de rediriger vos URL actuelles qui n’existeront pas sur votre nouveau site. Inscrivez-vous aux outils Google Search Console ou à d’autres outils de classement pour surveiller l’effet de votre déploiement sur votre classement SEO. Voir Routage.
• Décidez des objectifs, de l’étendue et du calendrier de votre déploiement hybride (headless échelonné). Gardez à l’esprit que plus longtemps votre site est en mode hybride, plus vous devez consacrer de temps à la complexité opérationnelle impliquée. Fixez une date d’échéance pour la transition vers un site 100 % Composable. Reportez-vous à Déploiements headless échelonnés.

Appliquez ces techniques pour optimiser l’efficacité de votre site et l’expérience utilisateur.

• Examinez le rendu côté serveur des pages d’entrée (page d’accueil, pages de liste de catégories, pages de liste de produits et pages de détails de produits) en ajoutant le paramètre ?__server_only à vos URL. Vérifiez que vos pages rendues par le serveur contiennent suffisamment de données pour les robots d’indexation et que le décalage de mise en page entre le serveur et le client est faible (idéalement inexistant). Cela peut vous aider à améliorer votre classement SEO, à confirmer que vos pages d’entrée peuvent se charger rapidement sur les appareils mobiles et à améliorer l’expérience d’achat.
• Configurez les tests de performance à l’aide de Lighthouse CI. Commencez les tests de performances à mi-parcours de votre implémentation. Cela vous permet d’identifier et de corriger les éventuelles régressions de performances (par rapport à votre site actuel) bien avant le lancement de votre site PWA Kit.
• Configurez un déploiement de code continu dans un environnement MRT hors production. Dès le début de votre travail de développement, commencez à tester votre code déployé sur MRT pour vérifier que les fonctionnalités de votre site fonctionnent comme prévu. De cette façon, vous pouvez éviter des retouches coûteuses plus tard. Reportez-vous à la section Utilisateurs d’automatisation.

Prévoyez d’utiliser l’un de ces outils pour surveiller en permanence les performances de votre site. Vérifiez également que les données générées par ces outils sont correctes en fonction des résultats attendus.

• Log Center vous permet d’examiner les erreurs et les métriques. Configurez des notifications afin de savoir quand votre boutique fonctionne anormalement et de pouvoir enquêter.
• Utilisez Active Data pour surveiller les métriques de votre site. Cela peut vous aider à analyser le comportement des acheteurs afin d’améliorer leur expérience d’achat et d’optimiser les offres de produits pour stimuler la croissance des ventes.
• B2C Commerce Reports & Dashboards fournit des données que vous pouvez utiliser pour identifier les tendances dans le temps et prendre des décisions commerciales plus intelligentes en fonction de vos données B2C Commerce.

Passez en revue le reste du workflow développeur recommandé pour la création d’un site sur Composable Storefront. Reportez-vous à Premiers pas avec Composable Storefront.