The KISS Principle, or How I Made an App in Half a Day

hack-reactor javascript development

Rabbit Holes

One day you come up with a great idea for a little project. You figure you already have all the tools and knowledge you need to get it done in a few hours, settle in with some snacks, and get started.

Things progress nicely and everything is going as planned. While working, you get an idea for a small improvement—maybe a way to make your process more “efficient”, or to make the final product “cooler.” Two days later you realize you haven’t made any more progress than you had before your “brilliant” idea and you’ve ran out of food to eat.

You fell into a rabbit hole. It can happen to anyone, anywhere, but given the abundance of open source tools available now, programmers are particularly susceptible to this sort of accident.

The one sure way of avoiding them is to keep a laser focus on your key objectives and MVP. Let’s see an example….

The Need

A couple of months ago I started working for Hack Reactor as a Class Lead—a position that allows me to implement my teaching skills in a software engineering environment. Some of my duties involve working with large groups of students, during which I employ a common teaching strategy—the Cold Call.

I tried to call on everyone randomly, but it’s extremely difficult to ensure that all students are called upon equally—especially from a virtual classroom. There are a few apps already in existence that allow you to enter a list of names and then randomly “draw” a name (or create groups etc…). However, most of these either required more set-up than I wanted, or were buggy.

The Solution

Enter Popsicle Sticks—a ridiculously simple app that allows me to choose a name at random. I didn’t have a lot of spare time to create this app, so I had to stay focused on the bare minimum I wanted the program to do—pick a name at random from a list of students.

The Process

MVP

The project began with three files: - A text file containing the names of my students (each name on a newline): students.txt - A script that read the text file, formatted the list of names as an array, and wrote the array to a new javascript file: students.js - A javascript file containing the core functions for the app—shuffling the names, picking a name, and storing the names that have yet to be chosen: popsicleSticks.js

BAM! MVP done in less than 30 minutes.

v2.0

However, it wasn’t particularly easy to use while teaching, as it required working within the terminal. So I decided to make an interface in the browser. Time for file #4: index.html. After including my script tags, I added a button that calls the pickName function and appends the chosen name to the html using vanilla javascript.

I also realized I needed a way to store the names that had yet to be chosen in memory, so that if I closed the app, I’d still ensure I interacted with every single student. Due to time constraints, I really didn’t want to have to set up a server and database. Local Storage to the rescue!

I added one more file, setup.js to configure the app using localStorage. This file added the property sticks to local storage if it didn’t already exist. The sticks property was itself an object containing the full roster of names, and the array of yet-to-be-picked shuffled names. Because localStorage only stores string values, I also had to make use of JSON.stringify and JSON.parse in the core functions.

Version 2.0 complete with less than another hour of work. (Honestly, I probably could have completed this stage in less time if I had been more familiar with localStorage before).

v3.0

Finally, I wanted to be able to quickly switch between different groups of students. I added a dropdown menu to index.html with which to pick a class, but then had to do a bit of refactoring to be able to access different groups of names from localStorage.

First, I changed the script that converts the text file list of names to a javascript array. Instead of grabbing all of the names and converting them to an array, this file now splits the file over the word ‘CLASS’, and then creates an object with the class names as keys and an array of all students as values. The following data structure is then stored in localStorage: sticks = { class1 : { fullRoster: [student1, student2, student3], toPick: [student2, student1, student3] }, class2 : { fullRoster: [student8, student9, student10], toPick: [student10, student8, student9] } }

Once this was in place, I simply pulled each key from this object to use as the options in my dropdown menu and added a function that uses the dropdown choice to grab the correct set of students.

Whamo! Version 3 done within another hour, for a total of 2.5 hours work on the app.

Note

I also added a clearMemory function so that I can more easily update my class lists and reset localStorage, but I consider this to be beyond MVP.

The Takeaway

Of course I could have made something prettier, and snappier, and just…cooler if I’d used JQuery, or React, or Angular, or Mongo. But I didn’t need any of that. My app doesn’t need to look nice. It just needs to work–and this one does. Not only that, but it’s incredibly easy for someone else to set up and use too!

Tell me, what do you think about the process I used? Would you have done something differently?

Written on November 23, 2015