Rubber Ducks and JavaScript

Today I redesigned a JAMstack application that I wanted to write about. The project is called the Rubber Duck Code Challenge and is Open Source.

If you’re not familiar with JAMstacks, they are basically a new JavaScript-based architecture that is composed of the following:

JavaScript (J): JavaScript running entirely on the client handles any dynamic programming during the request/response cycle (e.g. Vue.js, React.js).

APIs (A): Reusable APIs accessed over HTTP with JavaScript abstract all server-side processes or database actions (e.g. Twilio, Stripe).

Markup (M): Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps (e.g. Gatsby.js, Webpack).

direct quote from Astasia Myers post The JAMstack: Its Pretty Sweet.

The Rubber Duck Code Challenge is actually a rewrite of my project overwatch-challenge, which I’ve written about in previous posts:

Why the name Rubber Duck? The application is a play on the “Debugging with a Rubber Duck” idea where devs talk to a Rubber Duck to work out their programs (here’s the wiki article if you’re not familiar).

The central idea of my project is to gamify learning. I had originally designed it for a team I previously worked with, but decided do a rewrite and open it up to the greater dev community.

How is the application a JAMstack?

  • It relies on Firebase’s NoSQL database (firestore)
  • It uses an API built with Firebase that is serverless
  • It is hosted with Firebase
  • The only real maintenance is the Angular client and JavaScript Firebase API
  • In general, it leverages Google’s Firebase services in lieu of me building out all the infrastructure manually myself

Firebase API

Using Firebase Cloud Functions and the ExpressJS library, I built an API to use with the application. The basic endpoints cover the Create, Read, Update, Delete (CRUD) operations that accompany the application. I also created database triggers which send notifications to the associated Slack Channel for team interactions, and sends notifications based on database triggers when:

  • Users are registered
  • Activities are created
  • High Scores are tallied

For more details on how to build an API with Firebase, I recommend checking out my Angular-In-Depth post on Building an API with Firebase.

Deployment

The project also makes use of CircleCI for deployment and includes a multi stage pipeline with:

  • linting
  • unit testing with Karma
  • e2e testing with Cypress

If you haven’t worked with Cypress before, I highly recommend checking out Michael Karén’s post on How to get started with Cypress and my post on How Cypress Makes Testing Fun.

By leveraging Firebase and the associated services, I was able to focus my efforts on the design and architecture of the application. This made it easier and saved me the headache of having to work on infrastructure etc.

I know this post is relatively short, but just wanted to highlight how cool (and fun) working with the JAMstack Architecture is. Hope you check out my application, and learn more about the JAMstack architecture!

If you’d like to participate in the Rubber Duck Code Challenge, feel free to register yourself with the links above. I plan to tally scores every Friday!

Feel free to leave comments or connect with me on Twitter at: https://www.twitter.com/andrewevans0102

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s