Ridimensionamento dei contenuti su Coinbase

Di Clay Kohut, ingegnere software senior

TLDR: Nell'ultimo anno, Coinbase ha investito in strumenti per eliminare i contenuti statici nel nostro frontend web. Questa è la storia di come lo abbiamo fatto e perché è importante.

Coinbase Impara(a cura di)

Il portale educativo Coinbase, Coinbase Imparabase, lanciato alla fine del 2020. Learn contiene centinaia di guide per principianti, tutorial pratici e aggiornamenti di mercato ed è gestito da un team dedicato di redattori di contenuti.

I nostri ingegneri hanno esplorato varie opzioni per potenziare Learn. Idealmente, volevamo una soluzione che ci permettesse di integrare perfettamente i contenuti nell'esperienza di disconnessione di Coinbase.

Le opzioni ospitate per contenuti simili a blog come Medium fornivano troppa poca flessibilità.

Anche il framework WordPress lo era supponente e direttamente collegato all'interfaccia utente.

Alla fine abbiamo optato per a CMS senza testa, in particolare contentful. Contento è a piattaforma di contenuti che offre un approccio headless ai contenuti nonché estensibilità del backend per integrarsi con i nostri strumenti e modalità di lavoro preferiti. Essere "senza testa" significa che il CMS è indipendente dall'interfaccia utente: separa il contenuto dall'esperienza, fornendo semplicemente JSON strutturato al frontend, che ci consente di controllare totalmente l'esperienza del frontend.

L'integrazione con Contentful era semplicemente una questione di creare strutture dati che rappresentassero diversi tipi di contenuto (tramite l'interfaccia utente Contentful) e quindi mappare tali strutture dati sui componenti React (che gestivano effettivamente il rendering dei dati)

Indossare la tuta da volo

Con Coinbase Impara al nostro attivo e Coinbase Offerta Pubblica Diretta (DPO) all’orizzonte, è stata avviata un’iniziativa di coesione (si ritiene Progetto Flightsuit). Project Flightsuit ha cercato di conferire un aspetto coerente alle proprietà disconnesse di Coinbase, nonché di applicare standard di progettazione sulle pagine di destinazione appena create.

Durante l'analisi dello stato delle pagine di destinazione dei prodotti Coinbase, abbiamo scoperto 40 superfici di prodotti distribuite su 15 diversi repository/applicazioni frontend. I vari frontend sono stati realizzati utilizzando una varietà di tecnologie: da React with Typescript (il nostro standard attuale) ai modelli legacy Ruby on Rails, all'HTML statico.

Sfruttando l'integrazione Contentful inizialmente impostata per Coinbase Imparabase, abbiamo iniziato a creare una serie di "blocchi" che potrebbero essere utilizzati per standardizzare i layout delle pagine di destinazione (allineandoli alle nostre nuove linee guida del marchio).

I “blocchi”, noti anche come tipi di contenuto, sono componenti di alto livello che si combinano per creare pagine di destinazione. Ad esempio, un blocco “Hero” potrebbe contenere un “Titolo”, un “Sottotitolo” e un “Pulsante CTA” nel CMS, che corrisponde a un componente React sul frontend.

Creando un accurato "sistema basato su blocchi" (e rielaborando le nostre pagine di destinazione esistenti per utilizzare questo sistema), siamo stati in grado di migrare in modo efficiente quasi tutte le pagine di destinazione su un'unica applicazione frontend, basata su React e integrata con Contentful.

Una volta implementato il sistema di blocchi, la migrazione delle pagine è stata un compito relativamente semplice: trascinare/rilasciare vari blocchi tramite l'interfaccia utente Contentful e reindirizzare i vecchi percorsi delle pagine alla nuova alternativa basata su CMS.

1, 2, Automatizza

Dopo il progetto Flightsuit, il nostro team si è concentrato sul miglioramento dell'usabilità e della resilienza del CMS. Alcune lezioni apprese:

1. Realizzare il CMS facile da usare per i membri del team non tecnici è estremamente importante. Con il nostro primo passaggio alle pagine di destinazione del CMS, avevamo creato alcune strutture dati con funzionalità avanzate (come la creazione di layout generici) che erano per lo più comprese e utilizzabili solo dagli ingegneri (sconfiggendo così il principale valore aggiunto del CMS). Abbiamo contrastato questo problema privilegiando l'esperienza dell'editor sopra ogni altra cosa. Automatizzando le funzionalità avanzate di Contentful ove possibile (come la determinazione automatica del layout che meglio si adatta a un insieme di contenuti), potremmo consentire agli editori di concentrarsi su montaggio anziché edificio.
2. Integrandosi con Contentful (una terza parte), i nostri frontend sono diventati dipendenti dal tempo di attività di Contentful. Contento ha a molto coerente track record di tempi di attività pari a quasi il 100%, ma questa fiducia è stata messa in discussione quando Contentful ha subito due interruzioni dovute ad alcuni problemi DNS diffusi. (Per essere onesti nei confronti di Contentful, queste interruzioni sono state riscontrate anche da alcuni dei siti Web più grandi del mondo e sono stati gli unici casi che abbiamo riscontrato in cui Contentful non era disponibile). Per garantire la disponibilità delle nostre pagine con maggiore visibilità (come la nostra home page), abbiamo stabilito che il percorso migliore da seguire fosse introdurre un proxy API inverso che sfrutta la intestazione stale-if-error, affinché la nostra CDN possa servire il contenuto memorizzato nella cache se la chiamata upstream fallisce. Questo ci consente di rimanere attivi anche se il CMS diminuisce (per un numero X di giorni).

3. L'obiettivo primario era la formazione di nuovi team di ingegneri sul lavoro e sull'estensione del CMS. Il mio team era diventato l'unica fonte di conoscenza di un sistema sempre più utilizzato e spesso veniva incaricato di inserire nuovi ingegneri nel sistema su base una tantum. Per diffondere al meglio la conoscenza del framework, abbiamo sviluppato il Programma Ambasciatore CMS, che mirava a formare e riunire esperti in materia per il CMS in tutta l'azienda. Il programma inizia con un workshop strutturato di un'ora e mezza in cui i partecipanti apprendono i dettagli dell'integrazione con il CMS. Sebbene questo programma sia attualmente gestito in tempo reale e le sessioni di onboarding si svolgano secondo necessità, stiamo attualmente convertendolo in un corso self-service tramite uno strumento di formazione interno.

Risultati chiave

Mentre il 2021 volge al termine, siamo orgogliosi di guardare indietro ai progressi compiuti nell'ultimo anno. Ecco i progressi che abbiamo riscontrato dopo aver implementato con successo il nostro CMS a livello aziendale:

• Tempo di creazione della pagina di destinazione ridotto da una media di 2 settimane a meno di un giorno.
• Tempi di risposta per la modifica dei contenuti ridotti da un processo di un'ora di modifica/revisione/unione/distribuzione del codice a meno di 10 minutie senza coinvolgimento tecnico.
• Entro la fine dell’anno sarà coperto il 90% delle superfici di livello superiore. Ciò significa che quasi tutte le superfici dei prodotti di primo livello disconnesse su Coinbase sarà alimentato tramite Contentful entro la fine dell'anno.

Questi miglioramenti in termini di efficienza sono stati ottenuti grazie in gran parte agli investimenti della nostra leadership in infrastrutture e strumenti per sviluppatori. Coinbase si preoccupa veramente dell'eccellenza ingegneristica, dell'esperienza degli sviluppatori e dell'automazione dei processi di routine.

Inoltre, non avremmo potuto raggiungere questo obiettivo senza il duro lavoro di alcune persone sorprendentemente premurose e di talento (con ognuna delle quali sono incredibilmente orgoglioso di lavorare):

• Leon Haggarty, Askat Bakyev, João Melo, Stephen Lee, Wilhelm Willie, Bryant Gallardo, Guiherme Luersen, Raymond Sohn, Leonardo Zizzamia, Christopher Nascone (Ing)
• Bobby Rasmusson, Russ Ballard (Prodotto)
• Ananth Chandrasekharan, Goutham Buchi, Manish Gupta (EVP dell'Ing)

Siamo tutti entusiasti di entrare nel 2022 con un frontend brillante e unificato e richieste minime di modifica dei contenuti una tantum all'orizzonte. Se sei interessato a unirti a Coinbase, controlla la nostra pagina Carriere qui. Ecco un felice anno nuovo!

---

Ridimensionamento dei contenuti su Coinbase È stato originariamente pubblicato in Il blog di Coinbase Su Media, dove la gente continua la conversazione evidenziando e rispondendo a questa storia.

Source: https://blog.coinbase.com/scaling-content-at-coinbase-df75ff3208d4?source=rss—-c114225aeaf7—4