Project Development Environment & Starter Kit

Najam Ul Abideen Tariq
Aug 22 · 7 min read

Hi everyone! I am Najam Ul Abideen Tariq, currently Managing Director at New State. I have had experience of kick-starting two startups over the period of three (03) years. My first startup was a software house by the name of HybridLogics (Ptv) Ltd. We provided IT enabled services mainly in web technology stacks and hybrid mobile applications. I served initially as a SCRUM Master Project Manager for first year and then as a Managing Director there for second year. After that I left it for a new experience by the name of New State (also a start up and yes … also a software house). But that’s just enough for now. Lets get to the topic.

Disclaimer: For all those who are reading this. Its my first post… so I would try to be as to-the-point as I can be and at the same time would try to cover all necessary details.


“What do we do now?”

During my initial SCRUM Master years I faced a problem which usually technical people do face in the most unexpected of times during the project i.e deciding the right tools and plan of action for development operations.

Now… looking for the tools and implementing them might not be that of a hassle. But planning and having foresight to have them written down is…

I faced this too and I used to bump on “What do we do now?” number of times. For example, every experienced manager knows that in a project there would come a time when size of the code to be deployed to the servers needs to be as small as it can get. The solution is NOT looking for the tool to minify and incorporating it into the development life cycle, cuz now we have come to realize that we need to (not that it won’t work). But because that’s just the symptom of what should have been sorted out before hand by the technical lead/manager or system architect.

So I came by a tutorial in PluralSight of Node.js from which I compiled a checklist of things to consider for the setting up of a development environment for projects. Although this checklist might not be generic and does only focus on JavaScript projects but the steps in general can somewhat be true for other languages as well.

Tools, Technologies & Methodologies

So before you start any project, you need to develop your own checklist of what you might need in your project and what tools would be most suitable for that project.

Lets consider that we are setting up the environment for a small MEAN stack To-Do web application, just to understand the list items better.

Editor/IDE

“An integrated development environment (IDE) is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of at least a source code editor, build automation tools, and a debugger.” Wikipedia

This is as per the suggestion of developers in the project but also considering what features it might bring. I used VSCode (Visual Studio Code), because its the top editor around in terms of everything and there is no one who would argue with me on that. Developers also use Brackets (I did… initially and then left it, simply because it was way slow), WebStorm, Atom and many many more.

Package Manager

A package manager is a programming language’s tool to create project environments and easily import external dependencies. Again, an easy choice would be npm (node package manager) for any JavaScript project. There are other package managers in the market like Bower and Chocolatey to name a few.

Bundling

Its a process of putting all the code which is in multiple files, into a single file. The tool that puts your code and all its dependencies together in one file is called a “Bundler”.

ScriptBundle is used for C# and ASP.NET projects. For JavaScript projects, I used Webpack.

Minification

“Minification is the process of minimizing code and markup in your web pages and script files. It’s one of the main methods used to reduce load times and bandwidth usage on websites.” — Imperva

I used to achieve this via Webpack. Look No Further! I used it because apart from just bundling, it automatically minified the code as well. Not only that, it can be easily integrated into the node scripts.
You can check out other tools like UglifyJS, YUI Compressor and JSMin.

Source Maps

It’s a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying, you generate a “source map” which holds information about your original files. When you query a certain line and column number in your generated file you can do a lookup in the source map which returns the original location.

This task can be achieved via generating source maps with Webpack.

Transpiling

Its a specific term for taking source code written in one language and transforming into another language that has a similar level of abstraction.

For example, we commonly use TypeScript in place of pure Javascript in Angular projects. To convert the TypeScript code into JavaScript, we require a “Transplier”. And the process of conversion is called “Transpiling”.

No… its not “Webpack again?” … its Babel!

Web Server (Development)

“A web server is a system that delivers content or services to end users over the internet. A web server consists of a physical server, server operating system (OS) and software used to facilitate HTTP communication.”Techopedia

In our case, we are talking about the “software used” part. As we are considering a MEAN environment, we choose Express.js

For those of you who dont know… it’s a web application framework for Node.js (Because we are considering MEAN environment), released as free and open-source software under the MIT License.

Linting

Its a process of analyzing the code for potential errors. Simple…

Usually its done during the compilation and/or building process. Some compilers do something similar to this automatically as part of their compilation process, like Visual Studio. In Python, Pylint is used. For JavScript projects though different tools are integrated and there are many out there of which few famous ones are Grunt, ESLint and JSLint. I have used ESLint along with eslint-watch.

Automated Testing

So now at this point we will ask six (06) questions with our self:
1- Which framework to be used?
Me: Mocha

2- What to use for Assertions?
Me: Chai

3- Helpers to be used?
Me: JS DOM (JavaScript DOM)

4- Where to run tests?
Me: In Node.js

5- Where to put tests?
Me: Create “/tests” folder in the root directory of the project folder. All the tests would be in the newly created “/tests” folder

6- When to run tests?
Me: Whenever you save the project’s progress

And that’s it, do the above and you are good to go.

Continuous Integration

Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day. Each check-in is then verified by an automated build, allowing teams to detect problems early.” — ThoughtWorks

You can use AppVeyor, for Linux you can use Travis CI.

Automated Building

This is the process which automates the build creation of a software and the associated processes including: compiling computer source code into binary code, packaging binary code, and running tests.

I used Webpack for this. There are plethora of tools for this. Literally… Check this Wikipedia page to see the list.
https://en.wikipedia.org/wiki/List_of_build_automation_software

For error tracking we can integrate Track JS into our project.

Automated Deployment

“ Application-release automation refers to the process of packaging and deploying an application or update of an application from development, across various environments, and ultimately to production.” Wikipedia

We can use Jenkins, Teamcity, Gitlab, Heroku, Surge, Bambo. I have experience of using Gitlab, Heroku and Surge.

The Checklist

So… our checklist in a glimpse:

  • Editor
  • Package Manager
  • Bundling
  • Minification
  • Source Maps
  • Transpiling
  • Web Server (Development)
  • Linting
  • Automated Testing
  • Continuous Integration
  • Automated Building
  • Automated Deployment

Follow us on Twitter 🐦 and Facebook 👥 and join our Facebook Group 💬.

To join our community Slack 🗣️ and read our weekly Faun topics 🗞️, click here⬇

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author! ⬇

Faun

The Must-Read Publication for Aspiring Developers & DevOps Enthusiasts

Najam Ul Abideen Tariq

Written by

Managing Director at New State (http://newstate.io) | Entrepreneur | Sustainability Enthusiast | Project Manager | Business Analyst

Faun

Faun

The Must-Read Publication for Aspiring Developers & DevOps Enthusiasts

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade