JavaScript landscape | beginner guide

Prerequisites for this article: none.

Have you ever felt overwhelmed by the JavaScript jargon? Or asked yourself, "What on earth do these words mean?" VanillaJS, ECMA, ECMAScript, ES6, React.js, Vue.js, AngularJS, TypeScript, Node.js, and many more fancy terms - but what do they mean? This article aims to demystify these terms, prioritizing simplicity and ease of understanding.

Vanilla JavaScript | Core language

Vanilla JavaScript is the origin of all of that; it is the classic language without any frameworks or additions.

Note: Learning Vanilla JavaScript in depth before jumping into learning frameworks is much better than skipping the core language basics to learn a framework.

But what is the organization that standardizes JavaScript? Since JavaScript code runs in the browser (actually, it is used in many other contexts, but let us assume that it only runs in the browser), who is responsible for how the different browsers interpret this JS code? Here, ECMAScript comes into play.

ECMAScript

ECMAScript is the specification that standardizes JavaScript. The European Computer Manufacturers Association (ECMA) defines how browsers should interpret JavaScript. Different versions of ECMAScript (like ES6, ES2015, ES2020) introduce new features and improvements to the language.

Remember the article on object nature? When we mentioned that classes (prototypes but in the shape of OOP classes) are added to JavaScript in the ES6 version.

To clarify, ECMAScript with its versions is nothing but Vanilla JavaScript with its different versions over the years. ECMA is the organization that decides these versions and how the browser interprets the language in general.

TypeScript

It is JavaScript with some new features and additions not in the Vanilla JS. I.e, typescript adds static types to JavaScript, enhancing code quality and maintainability. TypeScript files use the .ts extension.

JavaScript frameworks: React, Vue, and angular

Frameworks provide a structured way of building applications. They abstract away common tasks, making development more efficient.

• React (React.js): A library for building user interfaces, particularly single-page applications. Combines HTML with JavaScript in its syntax.
• Vue (Vue.js): Similar to React, but offers a simpler learning curve.
• Angular (AngularJS): A comprehensive framework for building dynamic web applications, using TypeScript and a component-based architecture.

Node.js

Node.js extends JavaScript's reach from the browser to the server. It allows you to write server-side code using JavaScript, making it possible to use a single language for both client-side and server-side development. (This means that it allows you to use JavaScript in the backend, too! Not only the front-end part)

To sum up

This beginner's guide to the JavaScript landscape simplifies complex terms into understandable concepts. It explains Vanilla JavaScript as the core language without frameworks and introduces ECMAScript as the specification standardizing JavaScript. By clarifying these fundamentals, the article aims to help beginners grasp the JavaScript ecosystem more easily.

References:

• JavaScript Essential Training course - LinkedIn Learning