Hackers and Slackers

Extending Your App with MongoDB Stitch

Building a JIRA Board Widget, Pt 2

Greetings and welcome to another episode of wasting your summer building apps. Today we'll continue our quest of embedding a JIRA Kanban board, but we'll be focused mostly on integrating with MongoDB Atlas and its seemingly undersold counterpart: MongoDB Stitch.

MongoDB Atlas is a straightforward product: we used it last week to create cloud database and resulting schema simply by uploading a CSV. MongoDB Stitch on the other hand seems to have been silently flying under the radar, for what seems to be a ridiculous reason: the MongoDB team seems to have been underselling itself. It took me a month of sitting on this product (which raised an 80 dollar bill, mind you) to figure out what it really achieves. Here's my attempt at a marketing pitch:

MongoDB Stitch empowers you to build applications with virtually no backend code.

It's difficult to overstate how impactful this is. Take our situation at Hackers And Slackers, for instance. We're running a Ghost blog, which is a young piece of software built by a non-profit organization: this software is constantly being updated and improved, which means if we want to modify the logic of our Node app at all, our choices are:

  1. Modify the Ghost source and refuse future updates
  2. Merge our custom backend with Ghost changes in the event of any update
  3. Build a third-party API using a platform such as AWS

Until now we've been opting for option number 3, but let me be real for a minute: AWS sucks. There, I said it. Building an API using API Gateway, Lambda functions, and managing some archaic RDS database via a desktop app that looks like it was designed for Windows 98 really kind of blows. Using AWS feels like I'm at work, and the more I think about it, the more I think that's kind of the point. Hell, maybe Amazon's ridiculous permissions were intentionally designed to be convoluted to create jobs. Thanks, but I'll let the next guy take that one.

MongoDB Stitch gives us a new fourth option: extend our app with all the repetitive boilerplate BS. I say extend not only for the phallic reference for title clickbait, but also because it empowers us to build on top of things which were previously black-boxed to us, such as this blog. Basically if you develop anything for enjoyment, go pay for Mongo Stitch right now. @MongoDB, let me know if you're hiring.

Get Stitched

I won't bore you with the general account set up stuff: nobody wants to read that. I assume you're competent enough to enter a credit card number and name a database.

Once you have a cluster ready, head over to Stitch tab to have some fun. Our instance already has an app called HackersAuthors, which is totally unrelated fresh by creating a new app called HackersJira:

Create a Stitch App

Just to recap what we've got, our cluster is called HackerData, our database is called HackersBlog, and our collection is named jira:

MongoDB Compass HackersBlog

We're calling our Stitch application HackerJira. On the next page, we'll just flick the switch and make sure our Stitch app is pointing to the right collection in the right database:

Create a Stitch App

Now, we're going to use the exact example that Stitch gives us and go from there. It's important to have the "aha" moment where everything comes together this way. We're going to copy and paste this code on to a page of our site and keep an eye on the console:

<script type="text/javascript" src="{{asset "/js/stitch.min.js"}}"></script>
<script>
  const clientPromise = stitch.StitchClientFactory.create('hackerjira-bzmfe');
  clientPromise.then(client => {
    const db = client.service('mongodb', 'mongodb-atlas').db('HackersBlog');
    client.login().then(() =>
      db.collection('jira').updateOne({owner_id: client.authedId()}, {$set:{number:42}}, {upsert:true})
    ).then(()=>
      db.collection('jira').find({owner_id: client.authedId()}).limit(100).execute()
    ).then(docs => {
      console.log("Found docs", docs)
      console.log("[MongoDB Stitch] Connected to Stitch")
    }).catch(err => {
      console.error(err)
    });
  });
</script>

Checking this on the live sites looks like this:

Stitch Output

It worked, but what exactly? The first thing the snippet tells the database to do is to upsert a row where "number" is equal to 42:

db.collection('jira').updateOne({owner_id: client.authedId()}, {$set:{number:42}}, {upsert:true})

For sanity, let's check the database to see what's up:

MongoDB Compass 42

Sure enough, there it is: a new entry has been added to our database in the JIRA collection. That's fun and all, but what about our actual data? Isn't that what we came here for? Consider the next line:

db.collection('jira').find({owner_id: client.authedId()}).limit(100).execute()

Oh, so we're only querying based on entries from the current user! (Side note: let's not ignore how cool that is in it of itself having not actually done any work). So in theory, to show all issues from this collection we'd just need to run the following, right?

db.collection('jira').find({}).execute()

Slow down there there buddy. But yes, pretty much. We just need to make read permissions public on the MongoDB Stitch side first. Back in the Stitch UI, select "mongodb-atlas" from the sidebar. Remove the existing filter:

Stitch Filters

On the "field rules" tab, open the read permissions by simply deleting what's between the brackets of the read JSON:

Stitch rules

There's no way that's all wee needed to do, right?

Stitch JIRA Working

There it is. All of our JIRA data, pulled into our website, with a single line of code. Please take a moment to reflect on this: we didn't need to make an API, write logic, or log in to any shitty policy management UIs. We didn't even need to write a query; the 'queries' are just JSON objects.

Stitching it All Together

You may be having mixed emotions right now.

On the one hand, anything is possible: we can add features like blog comments with user authentication without actually writing back-end code. In fact, even in this specific example, we could even have Stitch read from a JIRA webhook to update itself regularly. Our wildest fantasies can come true.

On the other, perhaps an existential crisis. What have we been doing with our lives until this moment, repeating the same boilerplate and relearning the same concepts as millions before us? Is this knowledge all worthless now? Does the existence of Stitch reduce our lives' greatest accomplishments to something that can now be reproduced in minutes?

All of these are fine considerations to ask one's self at this very moment. I for one am going to take a long shower, look out of a window, and perhaps return in roughly one week to build the front-end of this Kanban board.

Author image
New York City Website
Product manager turned engineer with ongoing identity crisis. Breaks everything before learning best practices. Completely normal and emotionally stable.

Product manager turned engineer with ongoing identity crisis. Breaks everything before learning best practices. Completely normal and emotionally stable.