Scaling Content at Coinbase

Scaling Content at Coinbase

By Clay Kohut, Senior Software Engineer

TLDR: Over the previous 12 months, Coinbase has invested in tooling to remove static content material throughout our net frontend. This is the story of how we did it and why it’s vital.

Coinbase Learn(ed)

The Coinbase instructional portal, Coinbase Learn, launched in late 2020. Learn comprises a whole lot of newbie guides, sensible tutorials, and market updates and is maintained by a devoted workforce of content material editors.

Our engineers explored varied choices for powering Learn. Ideally, we needed an answer that may permit us to seamlessly combine content material into the Coinbase logged out expertise.

Hosted choices for blog-like content material resembling Medium supplied too little flexibility.

The WordPress framework was too opinionated and instantly tied to the UI.

We ended up choosing a headless CMS, particularly Contentful. Contentful is a content platform that delivers a headless method to content material in addition to backend extensibility to combine with our most well-liked instruments and methods of working. Being “headless” means the CMS is UI agnostic — it separates the content material from the expertise, merely offering structured JSON to the frontend, which permits for us to completely management the frontend expertise.

Integrating with Contentful was merely a matter of making information buildings representing several types of content material (by way of the Contentful UI) after which mapping these information buildings to React elements (which dealt with really rendering the information)

Our preliminary CMS structure

Donning the Flightsuit

With Coinbase Learn below our belt and the Coinbase Direct Public Offering (DPO) on the horizon, a cohesion initiative kicked off (deemed Project Flightsuit). Project Flightsuit sought to convey a cohesive feel and appear throughout Coinbase logged out properties in addition to implementing design requirements throughout newly created touchdown pages.

While investigating the state of the Coinbase product touchdown pages, we uncovered 40 product surfaces unfold throughout 15 totally different repositories / frontend purposes. The varied frontends had been constructed utilizing a wide range of applied sciences — every thing from React with Typescript (our present commonplace) to legacy Ruby on Rails templates, to static HTML.

A peek of our “Page Architecture” overview doc

Leveraging the Contentful integration initially arrange for Coinbase Learn, we started to create a set of “blocks” which might be used to standardize touchdown web page layouts (whereas aligning round our new model tips).

“Blocks,” often known as content material varieties, are high-level elements which mix to create touchdown pages. For instance, a “Hero” block would possibly include a “Title”, “Subtitle” and “CTA Button” within the CMS, which corresponds to a React part on the frontend.

A “Hero Block” information construction (left) and the corresponding React part (proper)

By making a considerate “Block-based system” (and transforming our present touchdown pages to make use of this technique), we had been in a position to effectively migrate almost all touchdown pages to a single frontend software, powered by React, and built-in with Contentful.

Once the block system was in place, migrating pages was a comparatively easy job of dragging / dropping varied blocks by way of the Contentful UI, and redirecting the outdated web page routes to the brand new, CMS-driven different.

1, 2, Automate

Post-Project Flightsuit, our workforce targeted on enhancing the usability and resiliency of the CMS. A couple of classes realized:

  1. Making the CMS easy-to-use for non-technical workforce members is extraordinarily vital. With our first cross at CMS touchdown pages, we had created some information buildings with superior options (resembling generic structure creation) which had been largely solely understood and serviceable by Engineers (thus defeating the primary worth prop of the CMS). We countered this by favoring editor expertise above all else. By automating superior options inside Contentful wherever potential (resembling robotically figuring out which structure would greatest swimsuit a set of content material), we may permit editors to deal with enhancing somewhat than constructing.
  2. By integrating with Contentful (a 3rd get together), our frontends grew to become dependent upon Contentful’s uptime. Contentful has a very constant observe report of almost 100% uptime, however this reliance was challenged when Contentful skilled two outages as a result of some widespread DNS issues. (To be honest to Contentful, these outages had been additionally skilled by a number of the world’s largest web sites and had been the one cases we’ve seen the place Contentful was unavailable). To guarantee availability of our increased visibility pages (resembling our homepage), we decided the most effective path ahead was to introduce a reverse API proxy which leverages the stale-if-error, to ensure that our CDN to serve cached content material if the upstream name occurs to fail. This permits us to remain up even when the CMS goes down (for X variety of days).
Above: Our CMS structure earlier than and after including the cached reverse proxy

3. Training new engineering groups on working with and lengthening the CMS was a major focus. My workforce had turn into the only real supply of information of an increasingly-used system and had been typically sourced to onboard new engineers to the system on a one-off foundation. To higher unfold the data of the framework, we developed the CMS Ambassador Program, which aimed to coach and convey collectively material specialists for the CMS all through the corporate. The program begins with a 1.5 hour structured workshop the place attendees study the ins and outs of integrating with the CMS. While this program is at present pushed in real-time and onboarding classes are held as-needed, we’re at present within the strategy of changing this to a self-service course by way of an inside coaching software.

A snapshot of our inside CMS Ambassador workshop

Key Results

As 2021 involves an in depth, we’re proud to look again at how far we’ve come over the previous 12 months. Here is the progress we’ve seen after efficiently implementing our company-wide CMS:

  • Landing web page creation time lowered from a mean of two weeks to lower than one day.
  • Content change turnaround time lowered from an hour-long course of of code change/assessment/merge/deploy to below 10 minutes, and with out engineering involvement.
  • By the tip of 12 months, 90% of all high degree surfaces will probably be lined. This implies that almost all top-level, logged out product surfaces on Coinbase will probably be powered by way of Contentful by finish of 12 months.

These effectivity good points have been achieved thanks largely to our management’s funding in infra and developer tooling. Coinbase really cares about engineering excellence, developer expertise, and automating routine processes.

We additionally couldn’t have achieved this with out the laborious work of some astoundingly considerate, gifted people (every of whom I’m extremely proud to work with):

  • Leon Haggarty, Askat Bakyev, João Melo, Stephen Lee, Wilhelm Willie, Bryant Gallardo, Guiherme Luersen, Raymond Sohn (Eng)
  • Bobby Rasmusson (Product)
  • Ananth Chandrasekharan, Goutham Buchi, Manish Gupta (EVP of Eng)

We’re all excited to enter 2022 with a shiny, unified frontend and minimal one-off content material change requests on the horizon. If you’re eager about becoming a member of Coinbase, check out our Careers page here. Here’s to a contented new 12 months!

Scaling Content at Coinbase was initially printed in The Coinbase Blog on Medium, the place persons are persevering with the dialog by highlighting and responding to this story.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: