Par Clay Kohut, ingénieur logiciel senior
TLDR : Au cours de la dernière année, Coinbase a investi dans des outils pour éliminer le contenu statique sur notre interface Web. C’est l’histoire de la façon dont nous l’avons fait et pourquoi c’est important.
Coinbase Learn(ed)
Le portail éducatif Coinbase, Coinbase Learn, lancé fin 2020. Learn contient des centaines de guides pour débutants, de tutoriels pratiques et de mises à jour du marché et est maintenu par une équipe dédiée d’éditeurs de contenu.
Nos ingénieurs ont exploré diverses options pour alimenter Learn. Idéalement, nous voulions une solution qui nous permettrait d’intégrer de manière transparente le contenu dans l’expérience de déconnexion de Coinbase.
Les options hébergées pour le contenu de type blog, telles que Medium, offraient trop peu de flexibilité.
Le framework Wordpress était trop opiniâtre et directement lié à l’interface utilisateur.
Nous avons fini par opter pour un CMS sans tête, Plus précisément Content. Contentful est une plate-forme de contenu qui offre une approche sans tête du contenu ainsi qu’une extensibilité backend à intégrer à nos outils et méthodes de travail préférés. Être « sans tête » signifie que le CMS est agnostique de l’interface utilisateur – il sépare le contenu à partir de l’expérience, en fournissant simplement du JSON structuré au frontend, ce qui nous permet de contrôler totalement l’expérience du frontend.
L’intégration avec Contentful consistait simplement à créer des structures de données représentant différents types de contenu (via l’interface utilisateur Contentful), puis à mapper ces structures de données sur des composants React (qui géraient réellement le rendu des données).
Enfiler la combinaison de vol
Avec Coinbase Learn à notre actif et la Coinbase Offre Publique Directe (DPO) à l’horizon, une initiative de cohésion a été lancée (réputée Combinaison de vol du projet). Project Flightsuit cherchait à apporter une apparence et une convivialité cohérentes aux propriétés déconnectées de Coinbase, ainsi qu’à faire respecter les normes de conception sur les pages de destination nouvellement créées.
En enquêtant sur l’état des pages de destination des produits Coinbase, nous avons découvert 40 surfaces de produits réparties sur 15 référentiels / applications frontaux différents. Les différentes interfaces ont été construites à l’aide d’une variété de technologies – de React with Typescript (notre standard actuel) aux anciens modèles Ruby on Rails, en passant par le HTML statique.
Tirer parti de l’intégration de contenu initialement configurée pour Coinbase Apprendre, nous avons commencé à créer un ensemble de « blocs » qui pourraient être utilisés pour normaliser les mises en page de la page de destination (tout en s’alignant sur nos nouvelles directives de marque).
Les « blocs », également appelés types de contenu, sont des composants de haut niveau qui se combinent pour créer des pages de destination. Par exemple, un bloc « Héros » peut contenir un « Titre », un « Sous-titre » et un « Bouton CTA » dans le CMS, ce qui correspond à un composant React sur le frontend.
En créant un « système basé sur des blocs » réfléchi (et en retravaillant nos pages de destination existantes pour utiliser ce système), nous avons pu migrer efficacement presque toutes les pages de destination vers une seule application frontale, optimisée par React et intégrée à Contentful.
Une fois le système de blocs en place, la migration des pages était une tâche relativement simple consistant à faire glisser/déposer divers blocs via l’interface utilisateur Contentful et à rediriger les anciennes routes de page vers la nouvelle alternative gérée par CMS.
1, 2, automatiser
Post-Project Flightsuit, notre équipe s’est concentrée sur l’amélioration de la convivialité et de la résilience du CMS. Quelques leçons apprises :
- Faire le CMS facile à utiliser pour les membres de l’équipe non techniques est extrêmement important. Lors de notre premier passage sur les pages de destination du CMS, nous avions créé des structures de données avec des fonctionnalités avancées (telles que la création de mise en page générique) qui n’étaient pour la plupart comprises et utilisables que par les ingénieurs (vainquant ainsi le principal élément de valeur du CMS). Nous avons contré cela en privilégiant avant tout l’expérience de l’éditeur. En automatisant les fonctionnalités avancées dans Contentful dans la mesure du possible (comme déterminer automatiquement quelle mise en page conviendrait le mieux à un ensemble de contenu), nous pourrions permettre aux éditeurs de se concentrer sur édition plutôt que immeuble.
- En s’intégrant à Contentful (un tiers), nos frontaux sont devenus dépendants de la disponibilité de Contentful. Content a un très cohérent historique de près de 100 % de disponibilité, mais cette confiance a été remise en question lorsque Contentful a connu deux pannes en raison de problèmes DNS généralisés. (Pour être juste envers Contentful, ces pannes ont également été rencontrées par certains des plus grands sites Web du monde et ont été les seuls cas où Contentful n’était pas disponible). Pour garantir la disponibilité de nos pages à plus haute visibilité (telles que notre page d’accueil), nous avons déterminé que la meilleure voie à suivre était d’introduire un proxy d’API inverse qui exploite le vicié-si-erreur, afin que notre CDN serve le contenu mis en cache si l’appel en amont échoue. Cela nous permet de rester éveillé même si le CMS tombe en panne (pendant X jours).
3. La formation de nouvelles équipes d’ingénieurs sur l’utilisation et l’extension du CMS était un objectif principal. Mon équipe était devenue la seule source de connaissances sur un système de plus en plus utilisé et était souvent recrutée pour intégrer de nouveaux ingénieurs au système de manière ponctuelle. Afin de mieux diffuser la connaissance du framework, nous avons développé le Programme des ambassadeurs de la CMS, qui visait à former et à rassembler des experts en la matière pour le CMS dans toute l’entreprise. Le programme commence par un atelier structuré d’une heure et demie où les participants apprennent les tenants et aboutissants de l’intégration avec le CMS. Bien que ce programme soit actuellement mené en temps réel et que des sessions d’intégration soient organisées selon les besoins, nous sommes actuellement en train de le convertir en un cours en libre-service via un outil de formation interne.
Résultats clés
Alors que 2021 touche à sa fin, nous sommes fiers de revenir sur le chemin parcouru au cours de l’année écoulée. Voici les progrès que nous avons constatés après la mise en œuvre réussie de notre CMS à l’échelle de l’entreprise :
- Temps de création de la page de destination réduit d’une moyenne de 2 semaines à moins d’un jour.
- Délai de modification du contenu réduit d’un processus d’une heure de modification/révision/fusion/déploiement de code à moins de 10 minutes, et sans intervention technique.
- D’ici la fin de l’année, 90 % de toutes les surfaces de haut niveau seront couvertes. Cela signifie que presque toutes les surfaces de produits de haut niveau et déconnectées sur Coinbase sera alimenté via Contentful d’ici la fin de l’année.
Ces gains d’efficacité ont été obtenus en grande partie grâce à l’investissement de notre leadership dans l’infrastructure et l’outillage des développeurs. Coinbase se soucie vraiment de l’excellence en ingénierie, de l’expérience des développeurs et de l’automatisation des processus de routine.
Nous n’aurions pas non plus pu y parvenir sans le travail acharné de certaines personnes incroyablement réfléchies et talentueuses (avec qui je suis incroyablement fier de travailler) :
- Leon Haggarty, Askat Bakyev, João Melo, Stephen Lee, Wilhelm Willie, Bryant Gallardo, Guiherme Luersen, Raymond Sohn (Ang)
- Bobby Rasmusson (Produit)
- Ananth Chandrasekharan, Goutham Buchi, Manish Gupta (EVP of Eng)
Nous sommes tous ravis d’entrer en 2022 avec une interface brillante et unifiée et des demandes de changement de contenu ponctuelles minimales à l’horizon. Si vous souhaitez rejoindre Coinbase, consultez notre page Carrières ici. En route pour une bonne année !
La mise à l’échelle du contenu sur Coinbase a été initialement publiée dans The Coinbase Blog on Medium, où les gens poursuivent la conversation en mettant en évidence et en répondant à cette histoire.
