Thursday, February 9, 2023 By Paul Scanlon

My Cockroach Labs Interview App

Next.js
React
three.js
react-three-fiber
React Query
Tailwind
NextAuth
pg-promise
CockroachDB

Hello there! In November 2022 I started a new role at Cockroach Labs, and worked as a Technical Evangelist, and here’s a little more about the role and the app i made for my interview.

If you’d like to skip ahead and see the app, there’s a preview link below. Oh and the repo is Open-source.

🚀 Live Preview
⚙️ Repo

A Bit Of Background

Rewinding the clock slightly to 2005 when I was a Flash Developer and worked in Advertising, and back then we didn’t have teams to build websites, you just kind of did everything yourself. And this has stuck with me throughout my career. Jobs that have made me unhappy were the jobs that required me to only write code.

I Like Writing Code

And I do, but I also like doing other things. I like Design, I like Illustration, Branding, Animation, Motion Graphics, Art Direction and Copy Writing, and Content Creation (which normally requires I use all of the above).

In more recent years however I’ve been eager to dust off my Advertising skills. I did a little bit of this when I was at Gatsby, but working to a release cycle of every two weeks (because that’s how often the minor framework updates were published), I rarely had more than a few weeks to put something together. That wasn’t the reason I left though. I left because I’m looking to make a permanent move to the USA, and Gatsby as a fully remote company probably wouldn’t have been able to offer this. That said, they have just been acquired by Netlify so y’no 🤷‍♂️. Although, I’d imagine providing US visa sponsorship to existing employees wouldn’t have been at the top of anyone’s to do list and could have delayed my plans to move. And who know’s if I’d have even made the cut and kept my job through the acquisition!

Anyway, best of luck to the team, you’re all the best! 💜

The Role at Cockroach Labs

When I first discussed the role at Cockroach Labs it became clear the timelines for launches were much, much longer. This, in part is due to the date based release schedule of CockroachDB, about 4 times a year, not ~24 times a year like Gatsby!

This sounded like the breathing space I’d been looking for. Not that I want to slow my pace down but because I want to ramp my production value up! I don’t wanna make shitty looking demo apps that look like they’ve been made by an Engineer, or create low-fi Tik-Tok style video content with the crazy-face YouTube thumbnails (🤮). I can’t do it, I have a background in Advertising, delivery is everything!

What is Technical Evangelism?

It’s a hybrid role, and probably a temporary title until I prove my worth 😰. I’m part of the Product Marketing Management (PMM) Team and am tasked with developing new “go to market” deliverables. To do this I’ll need to call on my whole skill set, this could be content creation, it could be demo apps, it might be motion graphics — who knows! The first two projects I’m working on don’t even use the CockroachDB database, but promote the business benefits of CockroachDB’s distributed capabilities… how do you write code to demo that?

In and around the launches I’ll be creating what I hope will be creative and imaginative thought provoking projects. I’ll no longer be focussed on the “how” a developer could do something, but “why” a business should do something.

No doubt I’ll still make demo applications, and “how to do x…” blog posts, I don’t want to stray too far from what I enjoying doing and more often than not, when I’m working through a project, lots of little “spin off” content ideas come to mind. I do enjoy the little things but what I’m really keen to explore is bigger projects that move the needle.

My Interview Demo Application

Part of the interview process required I create a demo app, and the instructions were to spend no more than 3 hours on it. I ignored this because you can’t produce a polished looking demo in 3 hours 😊.

I spent around 2 days (the weekend) designing and building this demo app which I called Edge. To be fair, I had most of the 3D Globe already, I’ve used it on my /dashboard, and a few other projects.

The tech stack for this app is as follows.

and of course,

CockroachDB

or more specifically Cockroach Cloud because I’m using CockroachDB Serverless and the app is deployed using Vercel.

There’s a few more dependencies which you can see in the package.json.

Lab Data

This is actually a problem that plagued me throughout my time at Gatsby. Whenever I needed to create a CMS Demo I’d have to spend time populating the CMS with dummy posts and images and spend time finding content so I could demonstrate how to query it and turn it into a page. This is still somewhat of a problem for creating demos using a Database, E.g. I need some data in order to query it.

So for Edge I’ve made something that technically falls under the category of “user generated content”. But instead of me or you creating “content”, all you have to do is click the “submit” button and the code does the rest. I presented the app at each stage of my interview process and asked my interviewers to submit their location while we were talking. — I got the job, so I’m assuming they all liked what they saw.

How Edge Works

Clicking the “Submit” button calls a Serverless Function, which grabs the ip address from the req object. It then uses the ip address to find the geographical location, looks this up to get the latitude and longitude, and then POSTs the details to a CockroachDB database ready to be consumed by the app.

The locations aren’t overly accurate and probably won’t be you exact location. I wasn’t sure where they were coming from so asked Vercel. Here’s their reply to my question.

My understanding of this is that we use MaxMind as a database to cross-reference the IP information and get a latitude/longitude for the request and then we output that. Maybe the best way to describe this is just an estimate of a user’s location based off of IP information using geolocation services accessed via Vercel — Vercel Sales Engineer

To give you some idea about how close the edge really is, when I submit, the function returns a location that is 28 miles up the road from me in a different town. So if you wanna anonymously submit your “edge” I can start to get a picture of where in the world these edges are.

Why Edge?

Edges have been been a hot topic in the last few years and if you’ve not heard the term before, here’s loosely what it means.

An edge is a geographical location of a server within a Content Delivery Network (CDN). A CDN is a network of computers, usually owned by someone like Google, Amazon, or a popular one in the world of Jamstack web development, Fastly. Hosting solutions like Vercel, Netlify, Gatsby Cloud (and many, more) use these CDN’s to deploy a website’s static assets, E.g images, HTML, and CSS, and the closer these assets are to you, the smaller the distance they have to travel down the phone line, and the faster a website will load.

Whilst this is great for static assets there’s a problem with JavaScript. Or more specifically, Serverless Functions. Serverless Functions in Jamstack web development are like special mini servers but because they are executable they can’t be deployed in the same way across the CDN. They can however be configured to run in different regions.

Serverless Functions differ to the traditional way “servers” work because Serverless Functions aren’t running all the time which can help significantly reduce operational costs. They can however, in some cases, cause problems with slower response times owning to cold starts and / or distances between the user and the region the function is deployed.

Serverless Functions can be used to make server-side requests to other services, services like a database to retrieve data to populate a website or application. For example, your Twitter timeline is made up of data that is stored in a database, not static assets distributed globally on a CDN.

Databases, typically can’t distribute data to hundreds or thousands of geographical locations because databases act like a single source of truth and duplicating or replicating this data across multiple geographical locations to be nearer to you is a very difficult thing to do.

Regions

However, CockroachDB is one of only a few databases that is making steps in the right direction and has developed smart technology that can manage replication of data and move it around different regions of the world, and thus closing the gap between you and the data.

The Edge app is as attempt to map where in the world these CDN edge locations are and, and at a later date I plan to surface more information for the locations of where Vercel’s Edge functions can run. However, and I’ll quote Vercel verbatim:

Most Node.js APIs are not available — Edge Functions Limitations

These limitation currently mean that you can’t use Vercel Edge Functions with most Databases, including CockroachDB.

There is one saving grace though.

Unlike other database solutions CockroachDB is “cloud native” which means it can be deployed to multiple cloud providers running in multiple regions. For example, with CockroachDB you could run your database on both Amazon Web Services (AWS) and Google Cloud Platform (GCP) and take advantage of each of their regions respectively. This can result in the faster transfer of data to users. You can see on the following links where the AWS and GCP regions are, and with CockroachDB, architects can configure their services to meet their customers where they are. If you were to deploy a server or Serverless Function to the same geographical locations (which would cost a lot) the end result would likely match, or be close to speeds commonly associated with Edge Functions.

All of this is an attempt to solve the difficult problem of: distance from data to you.

The shorter the distance, the faster the data is available and the better it will be for both users and businesses alike. This benefit scales up for giant companies like Twitter and NetFlix who are both CockroachDB customers!

Of course, speed isn’t the only concern. Data consistency is also a big issue, replicating data around multiple regions comes with a risk. For high paced changes like transferring money from one bank account to another can mean, for a short while the amount in one bank account might be different to the amount shown in another. CockroachDB’s smart technology is solving this problem too! However, speed vs consistency are somewhat at odds with one another — but that’s an explanation I’ll save for another time.

So, the next time you’re watching a junk reality TV show on NetFlix, or doom scrolling on Twitter, spare a thought for all those little Cockroaches transferring the data to you in the most efficient way possible!

Evidence

As you can see, explaining this using only the written word is quite difficult, and its my hope that by using a “show, don’t tell” approach to storytelling we’ll be better able to explain the complexities and business benefits to the technical, and the not-so technical in a more engaging, informative or imaginative way.

So c’mon, give that “submit” button a click and let me see your Edge.

Hey!

Leave a reaction and let me know how I'm doing.