Development tools

Each of the following technologies are development tools meaning that they only serve in development environments. Each one serves a different purpose, of course there are many different tools for the same purpose but I am only picking best ones with a larger community.

You don't need to know anything about the following tools, but it would be just enough to have an idea about what each one is doing and what problems it's solving.

Webpack

Well Webpack at its core is a module bundler that comes with a variety of important features.

Let’s start with the core idea of Webpack. The Web was lacking a module system meaning that we can’t do import/export natively on the browser. With webpack we are able to write a web app using this module approach and then when webpack compiles the code, it goes through our modules, load them and then create a dependency graph of our modules and then squish them into one JavaScript bundle(file) making sure modules loaded correctly and each module can only access its scope.

• It allows you to apply transformation to source code of a module using loaders.
• It allows code on demand using code splitting. For example we can perform a route based code splitting then each route would end up having only the code that it needs which helps a great deal improving performance!
• There was another awesome feature from Webpack but this was before the announcement of HTTP2 which is limiting request round trips by requesting only one JavaScript bundle. HTTP2 now can multiplex all the script tags meaning that the browser can fire off multiple requests at once over the same connection.
• Webpack Helps in development by providing an amazing plugin called module hot reloader.
• It provides a amazing development server.

Eslint

A JavaScript linting utility. Here is the official description of code linting from Eslint website:

Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn't adhere to certain style guidelines.

Linting tools parse your code, analyses it and it determines whether a set of rules are being followed. And warns you if you break those rules.

Read more

Prettier

Formatting code is a real pain and it's a waste of time and energy. Prettier allows you not to worry about that by auto formatting your code.

Node.js

Node.js is a cross-platform JavaScript runtime environment built on top of Google Chrome’s V8 Engine. It allows you to execute JavaScript code outside the Browser. Among the things that a developer can do with Node.js is accessing the file system and performing operations against his/her machine like creating command line tools and server side scripting.

npm

Npm is the default package manager for Node.js. It has an online platform where developers can find or share JavaScript tools with the community. Aslo npm has a command line interface that allows us to interact with their platform.

npm makes it super easy to install and manage dependencies

yarn

Yarn is a powerful package manager. It comes to solve a group of issues people were facing with npm before version 5, like security and speed. Yarn it's just a CLI, it does not have a package registry like npm. So Yarn is not a replacement to npm.

Git

Git is a distributed version control system. As soon as you start working with a company you have to use git to contribute to any of their projects. Development workflow was very slow and blocking before Git was created, when a developer starts working on some files, all other developers must not touch any of those files until the developer finishes the work. Git allows developers to work on different features separately at the same time using Branches without overriding each other changes. It allows us to track what we have worked on and what our coworkers are working on.

Read more

Babel

Babel allows you to write next generation JavaScript code, and behind the scenes it takes your modern Javascript code and it compiles it down into code that can be understood in different environments.

Babel is also used to compile code that is not part of the Ecmascript Standard like JSX syntax and strong typing annotations like Typescript and flow.

Read more