Crypto News

Scaling Content at Coinbase

By Clay Kohut, Senior Software Engineer

TLDR: Over the previous yr, Coinbase has invested in tooling to eradicate static content material throughout our internet frontend. This is the story of how we did it and why it’s essential.

Coinbase Learn(ed)

The Coinbase academic portal, Coinbase Learn, launched in late 2020. Learn accommodates lots of of newbie guides, sensible tutorials, and market updates and is maintained by a devoted crew of content material editors.

Our engineers explored numerous 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 akin to 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 popular 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 knowledge constructions representing several types of content material (through the Contentful UI) after which mapping these knowledge constructions to React parts (which dealt with really rendering the knowledge)

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 appear and feel throughout Coinbase logged out properties in addition to imposing 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 numerous frontends have been constructed utilizing quite a lot of applied sciences — every little thing from React with Typescript (our present normal) 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 pointers).

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

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

By making a considerate “Block-based system” (and remodeling our present touchdown pages to make use of this method), we have been in a position to effectively migrate practically all touchdown pages to a single frontend utility, powered by React, and built-in with Contentful.

Once the block system was in place, migrating pages was a comparatively easy process of dragging / dropping numerous blocks through the Contentful UI, and redirecting the previous web page routes to the brand new, CMS-driven different.

1, 2, Automate

Post-Project Flightsuit, our crew targeted on enhancing the usability and resiliency of the CMS. Just a few classes discovered:

  1. Making the CMS easy-to-use for non-technical crew members is extraordinarily essential. With our first cross at CMS touchdown pages, we had created some knowledge constructions with superior options (akin to generic format creation) which have been principally solely understood and serviceable by Engineers (thus defeating the principle worth prop of the CMS). We countered this by favoring editor expertise above all else. By automating superior options inside Contentful wherever doable (akin to robotically figuring out which format would greatest go well with a set of content material), we might permit editors to give attention to modifying somewhat than constructing.
  2. By integrating with Contentful (a 3rd occasion), our frontends turned dependent upon Contentful’s uptime. Contentful has a very constant observe document of practically 100% uptime, however this reliance was challenged when Contentful skilled two outages resulting from some widespread DNS issues. (To be truthful to Contentful, these outages have been additionally skilled by a few of the world’s largest web sites and have been the one situations we’ve seen the place Contentful was unavailable). To guarantee availability of our greater visibility pages (akin to our homepage), we decided the perfect 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 crew had turn into the only supply of information of an increasingly-used system and have 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 produce collectively subject material consultants 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 the moment pushed in real-time and onboarding classes are held as-needed, we’re at the moment within the technique of changing this to a self-service course through an inner coaching device.

A snapshot of our inner CMS Ambassador workshop

Key Results

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

  • Landing web page creation time decreased from a median of two weeks to lower than one day.
  • Content change turnaround time decreased from an hour-long course of of code change/evaluation/merge/deploy to below 10 minutes, and with out engineering involvement.
  • By the tip of yr, 90% of all prime stage surfaces might be lined. This implies that practically all top-level, logged out product surfaces on Coinbase might be powered through Contentful by finish of yr.

These effectivity positive factors have been achieved thanks largely to our management’s funding in infra and developer tooling. Coinbase actually 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 interested by becoming a member of Coinbase, check out our Careers page here. Here’s to a contented new yr!

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

Related posts

Blockchain security company Hacken deepens partnership with DeFi insurance protocol InsurAce » CryptoNinjas

Crypto Advisor

Here’s What’s In Store For Cardano In 2022

Crypto Advisor

Bitcoin In Demand, Bulls Enjoy 9% Surge

Crypto Advisor

Leave a Comment