JavaScript Universe for newbs

Viral Shah
Oct 27, 2018 · 7 min read

If you are a new aspiring developer of 2018, you may have heard of this language called JavaScript. It’s only a ubiquitous language that the WorldWideWeb literally cannot survive without. Today, it allows you to create Web apps, Mobile apps and even Desktop apps.

Great! So you are sold & cannot wait to start learning it. You start googling “Javascript development tutorials” and within a few clicks, you are overwhelmed; lost in this jargon-net of fancy acronyms & logos.

Fancy logos in JavaScript 2018

I feel your pain my fellow newb developers! Starting out development in JavaScript today can be extremely daunting.

Starting out development in JavaScript today feels like playing a boss fight in a new PS4 game — at Hard level, with little Health & no XP

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.

So in this article, I’m going to give you a quick tour of the Javascript world and hopefully by the end of it, it won’t all seem so unfamiliar and scary.


Many Names, One Soul

JavaScript has had many names historically —Mocha, Livescript, JScript etc. Not all names are worth remembering now. However, some of these names keep popping up everywhere today and we need to tackle them.

ECMAScript: Its the specification that standardizes JavaScript. Technically, Javascript is a dialect of ECMAScript. TC39 is the committee that maintains ECMAScript specifications

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.

Typescript: It refers to another language developed by Microsoft. It is a super-set of JavaScript that adds a few features like optional static typing.

Node.js: It is not a library of JavaScript, nor is it a different language. It’s a JavaScript runtime. Imagine it like a container that allows you to run JavaScript code. For the longest time, the JavaScript code was only run on the browsers. Node.js brought JavaScript coding to the server side — with access to all cool stuff like Filesystem, Network, Sockets, etc. Underneath it is written partly in JavaScript and partly in C++

Java: It is a completely different programming language and has no connection to JavaScript today. Historically, JavaScript was envisioned to work in complement with Java. Hence, the name similarity.

“Java is to Javascript what Car is to Carpet” — Chris Heilmann


Code Sharing & Bundling in JavaScript

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!

In JavaScript world, we share these solutions in form of libraries, frameworks, packages, etc.

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.

NPMThe registry: It is a public database of thousands of packages maintained and shared by open source community.

NPMThe 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.


Testing in Javascript

Developer makes code, Tester breaks code!

Before releasing a new version of software, it is important to test the integrity of the code. There are various solutions designed to help a developer write tests and maintain code base. There are all kinds of testing frameworks in javascript ecosystem.

To list a few: Chai, Mocha, Jasmine, Jest, Enzyme, Sinon, Cypress, Protractor

The choice of testing framework will mainly depend on,

  1. What type testing you want to do? (Unit, Integration, UI, Code coverage)
  2. What other framework are you using? (React, Angular, Vue)
  3. Personal taste

The Advanced Stuff

Babel — in my humble opinion — is one of the best thing to ever happen to JavaScript. Babel is a JavaScript compiler.

Wait — But I thought, JavaScript is not a compiled language. It is an interpreted language!

Yes, that is correct. JavaScript is not a compiled language.

Then why the hell do we need to use this Babel compiler?

For the non-JavaScript stuff. Babel enables us to use the next generation JavaScript today! It takes a source code and compiles it to another source code. Hence, sometimes also called a Transpiler!

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.

Today Babel allows us to use new, experimental & proposed features in our code with syntax that is not currently supported by the browsers. It is a toolchain that allows us to transform syntax & selectively add polyfills for the target environments we choose. It empowers a developer to create his own super-set of the Javascript language. A lot of other projects like React, JSX, Typescript, Flow, etc.. owe their success to Babel. Today & for the foreseeable future, Babel will also continue to heavily sway the decisions taken by TC39 for ESNext


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.

JavaScript community has you covered. Welcome — Build Tools. They come in all shapes and sizes. There is Webpack, Gulp, Grunt, Browserify, Yeoman, etc. Each tool is unique, yet similar. They all have their idiosyncrasies, but in simple words, these are all automation tools that were created to make your life as a JavaScript developer easy.

These are the advanced concepts — the dark alleys of JavaScript World. If you are a junior developer in a team, you will probably never have to deal with configuring these tools; maybe just run a command or two, here and there. But when you inevitably progress — climb the proverbial ladder of the software development world — you will have to get your hands dirty.

Webpack

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.


I hope after reading this article, you now have some idea about the JavaScript Ecosystem. I hope the Fear of Jargons is now replaced by Curiosity.

Note:
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.

Viral Shah

Written by

Passionate Programmer, Wishful Writer, Rookie Gamer, Potential Philosopher

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