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.
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.
“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.
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”.
“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.
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.
Its a specific term for taking source code written in one language and transforming into another language that has a similar level of abstraction.
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.
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.
So now at this point we will ask six (06) questions with our self:
1- Which framework to be used?
2- What to use for Assertions?
3- Helpers to be used?
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 (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.
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.
For error tracking we can integrate Track JS into our project.
“ 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.
So… our checklist in a glimpse:
- Package Manager
- Source Maps
- Web Server (Development)
- Automated Testing
- Continuous Integration
- Automated Building
- Automated Deployment
To join our community Slack 🗣️ and read our weekly Faun topics 🗞️, click here⬇