Javascript is growing (also evolving) fast. I mean very fast. There are tons of libraries, frameworks, compilers, bundlers or even several standards.

Even if you are developing in Javascript since the beginning, it still might be difficult to catch up with this evolution’s speed.

Here i tried to gather most of those technologies and technical terms together with their definitions, missions and relations to each other.

If you are new to either programming or web development, this post is supposed to give you some idea about Javascript and its ecosystem.

When i decided to write this post i wanted to cover everything from scratch including what ECMAScript is, its relation with Javascript and how they overlapped each other in years. During research, i found this great article:

What’s the difference between JavaScript and ECMAScript?
_I’ve tried googling “the difference between JavaScript and ECMAScript.”_medium.freecodecamp.org

First you may want to have a look at this article. It will provide you a very solid knowledge about Javascript’s history and legal status.

— ECMAScript ( or ES )

EcmaScript is not a programming language. It is a standard, a declaration or a specification that covers how an EcmaScript implementation should be designed. You can find that standard here. For a more detailed explanation on EcmaScript see the article i mentioned above.

— JavaScript ( JS )

Ok. Now we have required instructions and rules (Ecma Standard) to create a scripting language. The name of the language that we created based on the rules in that standard is JavaScript.

Things are getting weird at this point. Because it is more appropriate if we name this as an implementation instead of a language. How?

Javascript lives in the browsers (well, at least mostly). Every major browser vendor have their own EcmaScript implementation. They create their own JavaScript* *based on the rules and specifications in Ecma Standard:

All of these are JavaScript implementations created by different people in different companies. They simply create a programming language by reading Ecma Standard line by line, literally. Now we have an understanding about what JS is and how it is implemented across multiple browsers.

— Babel

The Standard forces the vendors mostly on the way of how features should be implemented. So, it does NOT say:

Hey! You have to implement every single feature that we specified here.Well, this is totally fair and understandable. After all, it is just a specification. Not a constitution. At this point, We are facing a new problem: Compatibility.

Let’s create another example scenario:

ECMA Organisation released a new version of EcmaScript. And in that version there is a new feature, let’s call it Feature X . This is a completely new feature and brings some big improvements to the language. You are super excited about this. You want to use it immediately in your next project.But guess what? There is no guarantee that all those browsers will implement this Feature X in their next release. No. Not at all.

Babel comes into play just at this very point. Babel is a Javascript transpiler (or compiler?). To be more specific, from the official website:

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environmentsThis is pretty obvious actually. What Babel does is converting your cutting-edge Javascript code into an older Javascript so that our application is supported from all major browsers. You can see some great animated code examples on Babel web site:

Babel · *The compiler for next generation JavaScript: The compiler for next generation JavaScriptbabeljs.io

A real world example for support differences between browsers would be the Service Worker API and the Safari browser. Some preliminary for service workers:

Rich offline experiences, periodic background syncs, push notifications — functionality that would normally require a native application — are coming to the web. Service workers provide the technical foundation that all these features rely on.Service Workers API first announced in 2015. It’s been around for almost 4 years. Yet, Apple still didn’t implement it to the Safari (They recently announced it in Safari Technology Preview). Yes, you created an application enriched with service workers. Well, your application wouldn’t work as expected in Safari browsers.

In the context of this example, Babel has **NO** solution for service workers compatibility. This feature is mostly (not completely) related to the browser itself instead of the language syntax.

— Node JS

Back in 2009, Ryan Dahl, a Google Engineer, came up with an idea:

What if I pull V8 Engine out from Chrome Browser and run it as a standalone environment?Well, THIS, was a huge leap for Javascript World. Actually i am pretty sure that THIS is the main reason for the popularity of JS today. Being able to use a programming language on the server-side, which is already popular on client-side. That was simply a game-changer. Since it is non-blocking, event-driven, it can handle much more traffic with less hardware. Single technology stack to build web applications. Learn JS and you are fine. Use literally the same library to parse strings for both back-end and front-end. Sounds good, right? Same package manager, same dependencies, same data types and structure…

Node.js
_© Node.js Foundation. All Rights Reserved. Portions of this site originally © Joyent._nodejs.org

— Webpack

Webpack is an open source Javascript module bundler.

webpack/webpack
_A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts…_github.com

Ok, what is a module bundler and why we need it? Let’s continue with an example scenario:

We are building a web application consists of several components and pages. And we are using different helper libraries and third-party components across our application. We,

  • want to use SASS for our styles,

  • want to minify / uglify our code,

  • don’t want to deal dozens of imports and references

  • want to integrate Babel to use latest EcmaScript features

  • want all of them with minimum effort and configuration. This is exactly what webpack does. You can achieve all of above or even more with just one single configuration file. It can transform your code and dependencies and generate single bundled file that contains everything needed to your application works:

  • bundle.min.js

  • bundle.min.css That’s it. Just import those two files in your base html file and we are good to go.

Of course this is a very basic example. You can do much more with webpack. But i hope this gives you some base knowledge about webpack and other module bundlers outside. And yes, there are plenty of them. Here some:

— Electron

First official definition:

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript.Electron is created by Cheng Zhao at Github to support and improve the development of Atom Editor. It is based on Node JS and Chromium. You can read more about its history and technical background here:

Thanks to Node JS, we had the chance to create server-side applications with JS. With Electron, we take this a step further: Writing desktop applications in JS.

And yes, it is cross-platform. Single code base. Write your application once, run it everywhere. Package your application for desired operating system. It supports Mac OS, Linux and even Windows. Although everyone moving to web, desktop applications are still preferred by many. And from developer perspective, it is so much pain to create an application for all major operating systems by writing the code in different environments. Too much development time, effort and budget. Even if you are Microsoft:

Some apps built on Electron. https://electronjs.org/This is just the warm up. Let’s move on.

— React

You probably hear or see this word very often. What is React?

React is a JavaScript library for building user interfaces.First of all, React is NOT a framework. It is a library created by Facebook in 2013. It is V in MVC (Model-View-Controller) pattern. Though you can turn it into a framework by using some third-party helper libraries and components like react-router and redux.

You can create complex applications without losing the control over your code. One of the greatest feature of React is component system. You can create reusable smart or dumb elements to build your application more efficiently.

I strongly recommend you to take a look React’s website and start with its tutorial:

React - A JavaScript library for building user interfaces
A JavaScript library for building user interfacesreactjs.org
If you want a quick start into React with zero configuration you can start with create-react-app.

Besides React, it is quite possible that you may heard technologies like Angular or Vue.js. In fact, they have their own solutions for the same goal:

Building well-structured applications efficientlyBelow you can find a very detailed comparison between React, Vue and Angular:

ReactJS vs Angular5 vs Vue.js — What to choose in 2018?
_Some time ago we published an article with a comparison of Angular 2 and React. In that article, we showed pros and…_medium.com

— React Native

Following by React which is a JavaScript library for building user interfaces, Facebook released a framework: React Native:

React Native · A framework for building native apps using React
A framework for building native apps using Reactfacebook.github.io

As you might guess from the name, it is a framework for building native mobile applications with React and Javascript. Note that this is not something like PhoneGap, Crosswalk or any other hybrid environment that takes your web application and makes it feel like a mobile app by putting it inside a WebView.

From the official website:

With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.What does it mean? Well, you just write your mobile application according to the rules defined by React and React Native. And your code is translated to the target platform code based on your desire. Java for Android, Objective-C for iOS.

And another great feature is the support for native code. You want to optimise some part of your application? Or you need to get close to native level due to some performance requirement? Just implement your feature with native language and use it inside React Native.

Again, singularity. One codebase for both platforms with native-like performance.

Additionally, both Angular and Vue have their own mobile frameworks in their ecosystem:

Conclusion

Finally, i suggest you to follow some web sites to hear recent developments not only in Javascript but all development world:

I tried to provide some basic knowledge and awareness about the current state of Javascript. There are tons of technologies and technical terms coming up everyday. It is really hard to be up to date. I just wanted to pick fundamental ones.

If you find any misleading, wrong or incomplete part please leave a comment. Any kind of feedback would be appreciated.

Thanks for reading!