The Work and Flow of JavaScript Development: Getting Started

Let’s take a look into the “work” and “flow” of software development, specifically around coding with JavaScript and using Node.js. But before I get started, it’s important to provide some context around what I mean by the terms:

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?

Every time I start working on a new project, I reevaluate what my practices should be. Since I know I’ll need a number of things — fake data, a website, and to display that fake data on the website — I could easily write that up. But my goal here is to explain some practices that developers can use in a wide variety of cases, so let’s kick off with a few of my favorite tools: WebStorm (an HTML, CSS, JavaScript, and more developer IDE from JetBrains) and Express.js (a simple, minimal and extensible web application framework).

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.

webstorm01

The next dialog gives me the option to create an Express.js Application, name the project, and choose the location of the project.

webstorm02

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.

webstorm03

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:

webstorm04

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.

If you’re interested in the next steps, ping @NewRelic or@adron on Twitter and let us know you want to see more how-to write ups for the work and flow of JavaScript. I’ll also be rolling a lot of this material and more into a Pluralsight Course in about a month, so keep an eye out for that!

adronhall@gmail.com'

Adron Hall is a jovial, proactive, test & code, code & test, get things done well, software architect, engineer, code monkey, coder, and distributed systems advocate. As a coder, Hall plies a polygot language path including C#, Java, JavaScript, and Erlang lately -- as well as Pascal, Basic, Visual Basic, C++, C, COBOL, RPG, CL, and others in the past. He founded Deconstructed.io with Aaron Gray, Node PDX with Troy Howard, and more startups are in the works. You can read his blog at Composite Code (http://compositecode.com). View posts by .

Interested in writing for New Relic Blog? Send us a pitch!