- Advertisement -

- Advertisement -

Scaling Content material at Coinbase


By Clay Kohut, Senior Software program Engineer

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

Coinbase Study(ed)

The Coinbase academic portal, Coinbase Study, launched in late 2020. Study accommodates tons of 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 Study. Ideally, we needed an answer that might enable us to seamlessly combine content material into the Coinbase logged out expertise.

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

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

We ended up choosing a headless CMS, particularly Contentful. Contentful is a content material 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 knowledge constructions representing various kinds of content material (through the Contentful UI) after which mapping these knowledge constructions to React elements (which dealt with really rendering the knowledge)

Our preliminary CMS structure

Donning the Flightsuit

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

Whereas investigating the state of the Coinbase product touchdown pages, we uncovered 40 product surfaces unfold throughout 15 totally different repositories / frontend functions. The varied frontends had been constructed utilizing quite a lot of applied sciences — all the things from React with Typescript (our present normal) to legacy Ruby on Rails templates, to static HTML.

A peek of our “Web page Structure” overview doc

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

“Blocks,” also referred to as content material varieties, are high-level elements which mix to create touchdown pages. For instance, a “Hero” block may include 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 transforming our current touchdown pages to make use of this method), we had been capable of effectively migrate practically all touchdown pages to a single frontend software, powered by React, and built-in with Contentful.

As soon as the block system was in place, migrating pages was a comparatively easy process of dragging / dropping varied blocks through the Contentful UI, and redirecting the outdated web page routes to the brand new, CMS-driven various.

1, 2, Automate

Submit-Mission Flightsuit, our workforce targeted on bettering 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 essential. With our first move at CMS touchdown pages, we had created some knowledge constructions with superior options (corresponding to generic structure creation) which had been largely 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 potential (corresponding to routinely figuring out which structure would greatest go well with a set of content material), we may enable editors to deal with modifying somewhat than constructing.
  2. By integrating with Contentful (a 3rd celebration), our frontends turned dependent upon Contentful’s uptime. Contentful has a very constant monitor document of practically 100% uptime, however this reliance was challenged when Contentful skilled two outages because of some widespread DNS points. (To be truthful to Contentful, these outages had been additionally skilled by among the world’s largest web sites and had been the one cases we’ve seen the place Contentful was unavailable). To make sure availability of our greater visibility pages (corresponding to our homepage), we decided the perfect path ahead was to introduce a reverse API proxy which leverages the stale-if-error header, 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. Coaching new engineering groups on working with and increasing the CMS was a main focus. My workforce had turn out to be the only supply of data of an increasingly-used system and had been usually sourced to onboard new engineers to the system on a one-off foundation. To raised unfold the data of the framework, we developed the CMS Ambassador Program, which aimed to coach and produce collectively material specialists for the CMS all through the corporate. This system begins with a 1.5 hour structured workshop the place attendees study the ins and outs of integrating with the CMS. Whereas 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 inside coaching device.

A snapshot of our inside CMS Ambassador workshop

Key Outcomes

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

  • Touchdown web page creation time lowered from a mean of two weeks to lower than one day.
  • Content material change turnaround time lowered from an hour-long course of of code change/evaluate/merge/deploy to below 10 minutes, and with out engineering involvement.
  • By the top of yr, 90% of all high stage surfaces might be coated. Which means that practically all top-level, logged out product surfaces on Coinbase might be powered through Contentful by finish of yr.

These effectivity beneficial properties 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, Leonardo Zizzamia, Christopher Nascone (Eng)
  • Bobby Rasmusson, Russ Ballard (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 happen to’re all for becoming a member of Coinbase, try our Careers web page right here. Right here’s to a contented new yr!

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

Leave A Reply

Your email address will not be published.