First some context around what I mean by work and flow, just for clarity.
Work is anything that I aim to accomplish during the course of day-to-day coding, deploying and architecture design.
Flow covers the way in which the work is done. What tools, actions and rhythm I use to get things done.
First, the Work
To give you an idea of how it all fits together, I’ll setup a work situation and step through the flow of getting the particular work completed.
Imagine you’ve just sat down (or stood up at a standing desk) to build some functionality into a particular application. This application needs to display a list on the screen that provides information to the end user. You have a basic user story that states, “The end user wants to be able to list the geek badges they’ve attained through hackathons, contributions on github and other places.” It’s not the most detailed user story, but developers seldom get perfect user stories.
Now that I have an idea of the work that needs doing, I’ll start diving into what this entails: Where is my data, how will I get the data, and in what way should I display it?
At this point, minimum viable implementation (the simplest thing I could implement, like a minimum viable product but simpler and related to a single functionality) is to just get that data on the screen. The first step is to determine where the data is. In this case, I don’t have all the data sources but I do have an idea what the data would look like, so I’ll create some fake data to display.
Then, the Flow
At this point I’m about to get into the flow of getting the work done. This is where it starts to get interesting from a tools perspective.
I have an idea of the work, but what should I do first? Do I just start coding something? Probably not a good idea.
Do I document something? That might help, especially if others will be helping me create the functionality.
Should I just write some tests? If so, should they be behavior-driven development (BDD) based tests or test-driven development (TDD) based tests? Maybe I should take an entirely different approach?
WebStorm and Express.js
Normally for an Express.js-based application, I’d run ‘npm install express -g’ to install Express locally and then I can use the command ‘express application_name’ to put the default scaffolding for an application into a directory named after the ‘application_name’. But for this post I’m going to use WebStorm to provide a little bit of a kick start over the standard CLI command. I simply open up WebStorm and click on Create New Project on the dialog that appears.
The next dialog gives me the option to create an Express.js Application, name the project, and choose the location of the project.
Clicking OK lets me select the version of Node.js for the project, which can be downloaded from the Internet or pulled from a local archive file or directory.
Keep clicking through the Express.js Framework-based Node.js Web Application so that WebStorm will build, install npm dependencies, and open it in the WebStorm IDE. It creates a breakout of the scaffolding as shown below:
At this point I have a full project, which I’ve titled badge-ribbons-stars.
Status and Next Steps Summary
I’ve stepped through the thinking steps for figuring out the user story, what I’ve gotten from the end user, and what and which tool I’ll use to build it in. I’ve now got a simple scaffolding based on Express.js that is ready to be used for displaying a list of badges, ribbons, stars, or other gamification awards.