I’ve have been playing the JS game for years now and let me tell you, as complex as it seems, it’s worth exploring all of this.
Many Names, One Soul
ES5/6/X, ES2015/16/X: These are various editions of ECMAScript specifications. Like, ES5 is simply the fifth edition and so on and so forth. Each new edition adds new features to the language. In 2015, TC39 became overly ambitious and announced that they are going to release new features every year now. So they started calling ES6 as ES2015, ES7 as ES2016… you get the pattern! The next upcoming spec is simply referred to as ESNext.
Good programmers write code, Great programmers share code
The open source community thrives on sharing & reusing solutions. Writing all the code yourself, is not only impractical, but simply redundant and stupid.
If someone has already solved a problem, you do not solve the same problem.
You reuse their solution to solve other problems!
Library: It’s a reusable piece of code, normally solving a specific generic problem. There are tons of such libraries out there. Some worthy mentions are jQuery, Express.js, Lodash, Moment.js, etc.
Framework: Sometimes we take a bunch of libraries, glue them together with some of our own code and make them work holistically to solve a bigger yet still generic problem. Such shareable solutions are called a Framework. Some well known frameworks today are AngularJS, Vue, React+Redux and Electron.
Cool! So how do we share this libraries and frameworks with other people? Simple, we zip it and email it to all our friends.
Just kidding. Ain’t nobody got time for that!
People used various approaches like hosting it to file servers, common websites, CDN, etc. Cool. But, what happens when they modify the library?Maybe fixed some vulnerabilities; Added some more cool features
Well, as a responsible developer we need to use a versioning system and upgrade our version with each new release. To centralize and standardize all the package management and sharing, NPM was born
Package: A package is a file or directory of files that is described by a
package.json file. It includes all the metadata information about the package itself.
NPM — The registry: It is a public database of thousands of packages maintained and shared by open source community.
NPM — The CLI: It is a command line tool that helps a developer manage his project dependencies. It enables a user to install, publish & run packages.
Yarn: For the most part, Yarn is an alternative of NPM CLI. It claims to be faster, reliable and secure. Underneath, it still refers to the same public NPM repository to locate information about packages.
Developer makes code, Tester breaks code!
To list a few: Chai, Mocha, Jasmine, Jest, Enzyme, Sinon, Cypress, Protractor
The choice of testing framework will mainly depend on,
- What type testing you want to do? (Unit, Integration, UI, Code coverage)
- What other framework are you using? (React, Angular, Vue)
- Personal taste
The Advanced Stuff
Then why the hell do we need to use this Babel compiler?
When the ES6 was released, it brought in a ton of new cool features. It had an overwhelming response from community. We love shiny new features! But the problem was, not all browsers were ready just yet to support all the cool new syntax. And even if they caught up, we knew there would still be the need to support our users on older browsers. To solve this problem, a new project called 6to5 was created. It took source code written in ES6 and compiled it down to ES5. This project has come a long way from those days and now is called Babel.
TO BUILD or TO NOT BUILD
As you become an experienced developer, you realize that Programming is fun. But, everything else around it, is boring. You have to compile code, minify it, uglify it, run tests, optimize assets, bundle assets, version code, publish code, deploy code… And trust me, none of it is fun!
It’s repetitive, time consuming and quite simply put — Mind-Numbing!
So then, you start questioning your life decisions.
Is this what I wanna do all my life?
Was I really suppose to be a developer?
Where is the glory that was promised?
Was it all a lie?
Is my life a lie?
Is anything real??
Relax Neo, no need to question The Matrix, just yet.
If you really want to try playing with build tools right now, I believe, Webpack is the most popular kid in the school. It allows you to take your original source code, run it through a series of transformations and bundle it together, to create production ready build in no time.
While webpack is extremely powerful & customizable, the creators of webpack understand how daunting and overwhelming can all the configuration be. Hence to lower the entry barrier, they even support a zero configuration mode in their latest version, Webpack 4. This allows a new user to start playing with webpack with no wizard skills and dive into the configuration details at their own sweet pace.
We have barely scratched the surface here. Each of these topics have their own nitty-gritties, which I have conveniently skipped here. While they are fun to explore, I did not want to overwhelm you. Over the course of next few months, I will be writing more articles focusing on specific topics.