Un framework React pour un commerce électronique dynamique, contextuel et personnalisé —

Une grande expérience commerciale ne peut pas être distillée à un seul numéro. Ce n'est pas un score Lighthouse, ou un ensemble de chiffres Core Web Vitals, bien que les deux soient des entrées importantes. Une excellente expérience commerciale est un trilemme qui équilibre soigneusement les besoins concurrents d'offrir une excellente expérience client, des capacités de vitrine dynamique et des objectifs commerciaux à long terme (conversion, rétention, réengagement).

En tant que développeurs, nous sommes à juste titre obsédés par l'expérience client, nous travaillons sans relâche pour extraire chaque milliseconde du chemin de rendu critique, optimiser la latence d'entrée et éliminer les parasites. À la limite, les pages générées statiquement, livrées en périphérie et HTML semblent être la stratégie optimale. C'est jusqu'à ce que vous soyez confronté à la réalisation que la prochaine étape dans l'amélioration des taux de conversion et des objectifs commerciaux nécessite une forte personnalisation de votre vitrine.

Le voyage, souvent, commence "simplement" avec la localisation. . Mais ensuite, on passe rapidement à la tarification contextuelle, en jonglant avec la complexité d'un catalogue de produits volumineux et fréquemment mis à jour, en gérant en permanence des tests multivariés et des campagnes de promotion, et en proposant des recommandations dynamiques personnalisées aux clients. Finalement, vous réalisez que chaque page est similaire à un tableau Tetris ouvert où chaque « emplacement » peut et doit être personnalisé de manière dynamique par les préférences dynamiques des visiteurs, le tout alimenté par un ensemble de règles commerciales dynamiques en constante évolution.

Hydrogen Is Conçu spécialement pour alimenter le commerce dynamique

Je travaille chez Shopify, une plate-forme de commerce tout-en-un pour démarrer, gérer et développer une entreprise. Nous travaillons avec des millions de commerçants, et comme de nombreuses entreprises, nous obsédés les performances de vitrine.

Nous obsédons encore plus de trouver le meilleur équilibre entre les performances, les capacités et les objectifs commerciaux des commerçants. Une idée clé que nous avons apprise de tous les marchands dans cette quête est qu'à la base, le commerce doit être dynamique.

De la connexion des opérations de back-office au front-of-the-house Test A/B et personnalisation dynamique pour chaque client, la base partagée est un rendu rapide côté serveur alimenté par un accès rapide aux données de la vitrine. En plus de cette base, nous ajoutons des couches d'optimisations de mise en cache, de pré-rendu et de livraison en périphérie, et non l'inverse. ]. L'activation du commerce dynamique nécessite une intégration étroite entre le serveur et le client, une stratégie de streaming et de récupération de données optimisée, et une plate-forme de production qui fonctionne à grande échelle.

Ce sont des problèmes techniques difficiles que Shopify peut aider à résoudre et c'est pourquoi nous avons été durs. au travail sur le Cadre Hydrogène. Il s'agit d'un framework basé sur React optimisé pour le commerce et spécialisé pour être alimenté par les API et l'infrastructure Shopify :

L'avenir du commerce est dynamique et personnalisé. Chez Shopify, nous pensons que de telles expériences d'achat peuvent être rapides, peu importe où les acheteurs se trouvent et construits sans les restrictions imposées par la génération de site statique. Associé à un ensemble de composants de commerce optimisés pour Shopify et à un environnement de développement basé sur Vite, c'est le cadre rapide pour les développeurs et les clients. , et des contrôles de mise en cache intelligents. ( Grand aperçu)

Aujourd'hui, nous lançons l'aperçu public des développeurs : plongez dans les docslancez une instance de test sur Stackblitzdéposez vos retours et commentaires sur GitHub.

Obtenir un rendu initial rapide avec un rendu côté serveur en streaming, des mises à jour efficaces au niveau des composants et des transitions d'état, tout en mettant en place une stratégie de chargement et de regroupement performante pour tous les actifs est difficile et chronophage. consommatrice de travail technique. Et, bien sûr, le résultat doit être homogène et agréable – osons dire, même amusant – à développer et à entretenir.

Que vous installiez ou non une vitrine pour un nouveau marchand, ou créer une expérience client qui sera visitée par des millions de personnes, l'objectif d'Hydrogen est d'éliminer la plomberie technique indifférenciée et noueuse et de vous permettre de démarrer rapidement et de vous concentrer sur la création de valeur marchande.

Par exemple, un quelques éléments critiques que Hydrogen résout :

Déverrouiller de telles fonctionnalités et les faire fonctionner correctement ensemble exigeait que nous travaillions sur le terrain avec l'équipe principale de React pour aider à définir et à prototyper des composants de serveur ; Écosystème Vite sur le streaming côté serveur ; L'équipe Aurora de Google sur l'intégration des outils de conformité et d'interface de ligne de commande qui vous permettront de rester sur la bonne voie avec les meilleures pratiques modernes :

« L'équipe Chrome de Google est ravie de voir Shopify continuer à améliorer les performances Web à grande échelle. Grâce à nos collaborations pour améliorer les performances prêtes à l'emploi, telles qu'une optimisation d'image plus intelligente, nous pensons qu'il est possible d'obtenir une excellente expérience utilisateur qui profite aux marchands de Shopify et à leurs clients. "

– Addy Osmani, Chrome Engineering Manager

Bien sûr, Hydrogen est également livré avec un ensemble de composants prédéfinis et optimisés qui savent comment parler à l'API Shopify Storefront et vous permettent de vous concentrer sur la présentation – la valeur marchande différenciée – au lieu de la plomberie.

Curieuse d'essayer ? Notre aperçu développeur est disponible sur shopify.dev/custom-storefronts/hydrogen. Faites-le faire un tour, faites-nous savoir ce que vous en pensez ! le faire fonctionner à une échelle de production capable d'absorber de grandes vagues de trafic, entraînées par des ventes flash ou des campagnes sociales en petits groupes, est un tout autre défi opérationnel énorme.

« Cela fonctionne vite et je ne vois aucune erreur. sur ma machine […] "

– a déclaré chaque développeur.

C'est là qu'Oxygen entre en jeu. Oxygen est un nouveau runtime de travail JavaScript hébergé par Shopify V8 Isolate qui exploite toutes les capacités de plate-forme, d'opérations et de connaissances en matière de sécurité que nous avons développées au cours d'une décennie + de mise à l'échelle de millions de vitrines. Nos marchands existants n'ont jamais à penser à la complexité de la mise à l'échelle de l'infrastructure pour une vente flash record, et les vitrines Hydrogen n'auront pas non plus à le faire. , passez à la production, et Shopify s'occupe de tout le reste. ( Grand aperçu)

Sous le capot, le runtime Oxygen s'exécute sur des clusters géo-distribués avec des données Shopify colocalisées à quelques millisecondes ; l'accès rapide aux données est essentiel pour permettre un commerce dynamique rapide et la colocalisation des données et le rendu est notre arme (pas si secrète). Un saut de réseau, le CDN de Shopify ajoute une livraison périphérique optimisée avec une protection spécialisée dans le commerce contre les acteurs malveillants et les robots commerciaux qui fonctionnent désormais souvent à une échelle capable de DDoS de nombreuses vitrines.

Oxygen est en préversion d'accès anticipé avec certains marchands. Restez à l'écoute pour en savoir plus en 2022 !

L'hydrogène et l'oxygène sont les éléments constitutifs du commerce moderne

L'expérience de nos marchands montre que le commerce est dynamique, contextuel et personnalisé. Cela ne signifie pas que certaines, ou peut-être même des parties substantielles de certaines vitrines, ne peuvent pas être mises en cache et servies depuis le bord. Ce n'est pas un débat entre dynamique et statique. Vous avez besoin des deux.

Notre vision avec l'hydrogène et l'oxygène est de déverrouiller le meilleur des deux mondes et de rendre la construction et l'exploitation du prochain million de vitrines modernes – dynamiques, contextuelles et personnalisées – plus faciles et plus coûteuses. -efficace et amusant.

(vf, il)