How I learned Apollo GraphQL, built a live web application, and produced two small open source packages in two months.

www.purplistsources.com

As I’ve mentioned in a previous post, I learn by reading a bunch of stuff. Often, I’ll read something once and decide it’s worth stashing for the future — when I or someone else might need it.

The easy way to do that is to toss the page in my Chrome bookmarks. It feels like a temporary solution, but what’s the worst that could happen?

The little arrow means there’s more…

This, I suppose. After just a couple of weeks of saving content, my bookmarks began to look ridiculous.

I previously described how a friend does the same thing, and when I need to use some of his resources, he sends screenshots to me.

This wasn’t efficient at any point! Not when he added the pages to his bookmarks, which took several clicks, nor when he shared that information with me by taking screenshots.

I looked around, trying to find the best solution to a problem like this. Things like Pocket exist and are quite useful in their own right, but they weren’t strictly about aggregating and sharing useful web content. I couldn’t find quite what I needed, which was an unobtrusive application to collate the sources I found valuable.

That was my impetus for building something. As when I wanted to listen to Medium posts, I didn’t spend much time considering whether or not other people would want to use something like this — I was just sick of the particular situation and thought there was a better way.

Also right around this time, I was hearing a lot about GraphQL from Facebook and had been hoping to cook something up to experiment with it myself. This seemed like the perfect one-two punch of building/learning for a project. I decided to dig into Apollo, which is one of the most popular open source packages for GraphQL. In addition, I was hoping to work my way through the particulars of OAuth.

And that was it. I went into this project with two goals: sink my teeth into GraphQL and figure out how to swing OAuth for a web app. Let’s begin a running tally:

Expected to Learn

  • GraphQL
  • OAuth

Until the project needed eighteen other things.

I mistakenly thought I could avoid feature bloat since I was in full-control, but it turns out I was just steering around in the storm of things needed by the project. These included:

  • Staging and production environments on Heroku
  • Drag ‘n Drop ability
  • Async WSGI server to handle webhooks
  • Chrome extension authenticated to and integrated with my web app

I listed these things in order of difficulty. For the most part, they didn’t cause me too much trouble. There was a fair bit of research and reading, but the path was relatively well-defined — read documentation and fiddle with code.

Pretty straightforward in the end, but I learned a lot and upped the number of things I gained from the project. Let’s update the running tally:

Expected to Learn

  • GraphQL
  • OAuth

Needed to Learn

  • Heroku
  • Drag ‘n Drop
  • Async WSGI server
  • Chrome extensions

With most small web dev projects like this, that’s the end of the tally. If I diagrammed my learning for every project in the same way, I’d usually be finished.

That’s because, ordinarily, the only things needing creation are the parts of the application that make it unique — e.g. database structure and a user interface. But that’s neither reusable nor interesting across different use-cases, so it gets left off the list.

This one was different!

In order to get real-time updates to users’ sources as they used the application, I needed to use webhooks in tandem with GraphQL subscriptions to push data from the server to the client. However, to my knowledge, there weren’t any packages available to handle subscriptions for a Python runtime, and I was building a Flask application running a WSGI server…

Hacking it was.

In the end, I needed to write two Python packages, this and that, in addition to overriding parts of the client side subscriptions-transport-ws package to handle Socket.IO instead of a standard WebHook implementation. I took a lot of inspiration from the work done for Node, but in the end I was on my own writing two new packages to handle GraphQL subscriptions for a Python backend.

Let’s update the list:

Expected to Learn

  • GraphQL
  • OAuth

Needed to Learn

  • Heroku
  • Drag ‘n Drop
  • Async WSGI server
  • Chrome extensions

Created

  • Open source packages for GraphQL subscriptions with a Python runtime

In total, I spent about two months working on Purplist Sources. In terms of my “things learned : time spent” ratio for projects, it was one of my most productive. I only had time for coding in the morning before work and on sparing weekends, to give some context for why it took that long. Also, there were a lot of things to consume, internalize, implement, and create for the project.

The best part is that I now use the application and it’s Chrome extension for organizing my resources daily! When people occasionally ask me how I started learning a certain aspect of software engineering, I send them a link to the place where I keep all of that information. No more bloating my browser with a mess of bookmarks. It’s all here, accessible from anywhere:

If you’re interested in the source for any of the things mentioned here, please have a look: the application itself, item 1, or item 2 of the Python packages. Feedback welcome.