Open in app

Sign in

Write

Sign in

Mastodon

Exploring the JavaScript Ecosystem: Popular Tools, Frameworks, and Libraries

Ever tried developing your own JavaScript application and found yourself in the maze of gazillion packages?

Mirza Leka
46 min readAug 12, 2020

Since it’s inception in 1995, JavaScript has massively evolved and is one of the most widely-used programming languages. Today we’ll put the pieces together and give a brief overview of each of the popular JavaScript libraries.

Introduction

The JavaScript ecosystem is huge, so I prepared a variety of topics for you to choose what interests you the most. A lot of the content is copied from the official documentation, to which I left links throughout the article for those who want to take a deeper look.

So what is JavaScript?

JavaScript is a lightweight, interpreted, prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.
JavaScript initially started as a language for the web browser, developed by Brendan Eich in 1995. Today JavaScript is one of the most influential languages, which has spread its roots into the backend and mobile development, machine learning, and many other branches.

In 2009, Ryan Dahl developed a JavaScript runtime called Node.js, which pushed the JavaScript language into a whole new direction. This lead to the creation of the first JavaScript Stack. No longer was JavaScript used only for animations and UI manipulation. With new inventions also came new problems and the right tools to solve them.

Node.js and NPM

Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a web browser. It’s built upon Chrome’s V8 JavaScript engine and is designed to build scalable and real-time network applications.

Npm (Node Package Manager) is the largest ecosystem of open source libraries in the world. Npm is a package manager for the JavaScript language and is the default package manager for the JavaScript runtime environment Node.js.
It consists of a command-line client, also called npm, and an online database of public and paid-for private packages called the npm registry.
The npm registry has become the center of JavaScript code sharing, and with more than one million packages, and many more are added every day.

Package Managers

A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer’s operating system in a consistent manner.

It’s no secret that npm is quite a popular package manager, but it’s not the only one. There is also a Bower and nowadays you’ll often come across Yarn as well.

The way a package manager works is you find any package in the registry and install it through the command-line, both globally and locally. The package manager does all the required setup for you. Then you can use this package in any Node.js or React or Angular app. You name it.

Each of these package managers has one goal, to set up a third-party module, but does so in a different manner.
With so many modules at hand, how do you know which one to choose? Behold Npm Trends. Npm Trends is a site that shows statistics of each package and also allows us to compare number downloads for different modules.

Source

Under the surface

JavaScript Engines

Since JavaScript is a high-level language and thus is not understandable by a computer, we use a computer engine to convert our code into a machine code that computers can understand. If you’re following the world of JavaScript, there is no doubt you’ve heard the word V8. Every major web browser has its own JavaScript engine.

  • V8 (Google Chrome, Opera, Edge)
  • Spidermonkey (Firefox)
  • Chakra (Internet Explorer)
  • JavaScript Core (iOS, Safari)

It’s also worth mentioning that Microsoft Edge was using the Chakra engine and was recently rebuilt as a Chromium-based browser and uses Blink and V8 engine.

Node.js is built on Google’s V8 engine (which is a mix of C++, Web Assembly, and JavaScript) and Libuv, a multi-platform C library.

JavaScript was initially designed to run in the browser and it was not meant to run on the server, read and write computer files, nor connect to the database. This is where the V8 engine comes into play. V8 extends JavaScript by adding additional features to preform lower-level operations as C++ does.

But there is also Libuv.
Libuv is a library that is primarily developed for use of Node.js with its focus on asynchronous I/O. What this means for Node.js is that it is lightweight and very fast because of it’s non-blocking IO based on event loops.

Node.js is a single-threaded language which in the background uses multiple threads to execute asynchronous code with the help of the Libuv.
- Vlado Tesanovic

Babel

When developing a web application you may type something or paste a piece of code and run it, only to find out later that your browser doesn’t understand that command and it’s not yet supported. Older browsers and even the modern ones are not able to adapt to all changes that are constantly been added to the JavaScript language. This is why Babel is so important.

Babel is a compiler that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments.
Even better, with Babel, we can use features that are still not available in any browser and features that are currently in development and add them to our apps.

Babel isn’t just a wrapper for modern JavaScript, but also type annotations (like TypeScript and Flow), JSX and React.
So when you run your React, Vue, or TypeScript code, Babel compiles it to a JavaScript version that your browser will understand.

On the opposite side of the spectrum is Lebab. While Babel is used to turn Modern JavaScript code into an ECMAScript 5 compatible, Lebab does the opposite. Lebab takes your ES5 code and converts it into the ES6/ES7 equivalent. It’s a great way to clean your code and learn new handy tricks.

Running Babel time and time again can be a tedious task. Only if there was a tool to automate it…

Module Bundlers and Task Runners

Module Bundlers and Task Runners are the tools that sit inside every modern JavaScript framework and get invoked whenever you run a build or hit save. This means that we can set up a configuration to run Babel every time we make a change.

Although modern web browsers are powerful, they can only understand HTML, CSS, and plain JavaScript. That said web browsers don’t support formats like Sass/Less, TypeScript, JSX, etc. Sass is compiled into CSS, TypeScript into JavaScript, and so on.

Module Bundling

We’re all well familiar with the script tags that we write in index.html in order to embed a client-side script into our app. At first, we were adding just JavaScript or Jquery if we used it, but as time went on, the number of script tags would grow with each new library or framework we’d include in our project.

Not only that this was untidy, but the order of these scripts matters.
Module Bundlers ditch this approach. They allow us to import any package or library into any file we want using ECMAScript 2015 Import/Export syntax. As a result, the output is just one bundled file that we include using a script tag.
Even better, we can write a configuration to manually import all JavaScript and CSS files. This is especially effective when you split your bundle into a number of tiny chunks with random names.

It’s worth mentioning is that as of recently JavaScript also has support for dynamic module imports, but the scope is limited to only custom-made JavaScript modules.

Automation

This is by far the biggest reason why these tools exist. No need to manually rewrite the same script to compile files again and again in order to see your changes in the browser. Every time you save, your compiler will rerun, read the code, discover any potential errors and if everything checks out, recompile and reload the browser for you. All of that just by saving a file.

Plug & Play

These tools usually come with a zero-configuration setup, meaning that you are not required to manually configure stuff, but if you’re like me and you like to experiment, I’m happy to say that there are so many plugins around you that can help create a unique configuration that best fits your app. These include:

etc.

To put things in perspective, Gulp and Grunt are well known Task Runners, while Browserify, Rollup, Parcel, and Webpack serve as Module Bundlers. As mentioned earlier, with so many plugins around you can automate, compile, and bundle using just one tool like Webpack.
Also, you can have different configurations for different uses, like
fast-compiled app for development and slow, but compressed for a production environment.

The bigger picture

You’re probably asking yourself, why even bother with all of this when all these tools are already configured and maintained inside every React, Svelte, Angular, etc. application? Well…

  • Server-Side Rendering. Tools like Create-React-App or Angular’s CLI app are designed to work with Client-Side Rendering in mind. When working with SSR it’s a common practice to write your own configuration.
  • Not only that is nice to know how things work behind the scenes, but also it’s effective when you want to do your own thing outside of the scope of what Angular or Vue configuration has already given you.
    You can use npm or yarn to install React, ReactDOM, TypeScript, Babel, and configure everything on your own.
  • Frontend development is bigger than any framework or library. You can build anything you want without using any popular Frontend framework and still import third-party modules just like in the Node.js app.

With that in mind, we can use tools like Webpack-Bundle-Analyzer. It allows us to visualize the size of Webpack output files and give us a detailed overview of all the packages we’re using in our app.

Source

Frontend Stack

One of the reasons why JavaScript is so popular is that it can be used nearly everywhere. From pop-ups that appear in your web browser (BOM) to interacting with anything you see on the UI (DOM) all the way to the servers, which will touch upon later.

UI Technologies

On top of the pyramid, we have JavaScript which on its own can manipulate the UI. However, most of the time you won’t be reinventing the wheel using vanilla JavaScript, but rather switch to a known library or a framework that comes with a set of functionalities and design patterns out of the box. Well, known tools out there are:

  • Jquery was the king for years. With its motto “write less do more”, Jquery is a library that was used to manipulate the DOM in the time when JavaScript wasn’t as powerful as it is today. It simplified the process of creating animations and introduced Jquery AJAX, which simplified the JavaScript built-in XMLHttp request.
    There is also a list of interesting plugins like Jquery UI with built-in support for elements like accordion or calendar, Jquery Validation, for simplified form validations, and so on.
    Jquery is still been used today.
  • Angular is a front-end framework used primarily for building single-page component-based applications. It was originally introduced as Angular.js and it was one of the technologies that founded first-ever JavaScript stack, the MEAN Stack. Angular.js was later recreated as Angular 2 and rebranded as Angular.
    Angular rewrote the implementation from the original Angular.js, and that is especially noticeable with the introduction of TypeScript. Angular has it’s own implementation of lots of JavaScript features, like using Angular Http library instead of standard JavaScript XHR.
    CLI installation of Angular also comes with the Rx.js library, which improves on Angular in many ways.
    Google is releasing a new version of Angular nearly every 6 months.
  • React is an open-source JavaScript library for building user interfaces. It consists of React and ReactDOM and uses JSX (JavaScript XML). With JSX we can write both HTML and CSS inside JavaScript files. React can be used with TypeScript alongside JSX.
    Initially, React components were built using the class syntax and we used tools like Redux to manage states across multiple components, but nowadays React has a built-in way to manage the state using a Hooks and Context-API.
    Unlike Angular CLI, React doesn’t come with a bunch of fancy gimmicks out of the box. If you want to add additional functionality, like
    React-Router for example, you need to install it separately.
  • Vue is a progressive framework for building user interfaces using HTML and JavaScript. The goal of Vue.js is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible.
    Vue.js is focused on the view layer only. It is therefore very easy to pick up and to integrate with other libraries or existing projects.
    Vue.js makes it really easy to bind data to your HTML. It supports directives and two-way data binding from Angular and it can also work with JSX that is mostly used with React
  • Svelte is another framework for building web applications. Svelte is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.
    But Svelte is also a compiler. Instead of relying on the Virtual DOM, Svelte brings reactivity to JavaScript that surgically updates the regular DOM.
  • Ember is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device. Ember apps come with a built-in development environment with fast rebuilds, auto-reload, and a test runner.
  • Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub.
    With Web Components, you can create and share custom elements that work on any site, interoperate seamlessly with the browser’s built-in elements, and play nicely with frameworks of all kinds.
  • Stencil is a simple compiler for generating Web Components and progressive web apps (PWA). It’s used to generate small, blazing-fast, and 100% standards-based Web Components that run in every browser.
    Stencil combines the best concepts of the most popular frameworks into a simple build-time tool. It takes popular features such as Virtual DOM, Typescript, and JSX to create standard-based Web components that can be used with every popular frontend framework out of the box (Angular, React, Vue).
  • Crank uses the same JSX syntax and diffing algorithm popularized by React, allowing you to write HTML-like code directly in your JavaScript.
    All components in Crank are just functions or generator functions. No classes, hooks, proxies, or template languages are needed. You can also use async/await directly in components, and race components to display fallback UIs.

Template Engines

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
— Expressjs.com

What this means is that we can write variables, conditions, and loops directly inside HTML or actually template version of HTML. Another benefit is that we can interact with the template directly from the backend. So If we’re using Express, we can communicate with the UI by passing values inside the template, without setting up endpoints and needing to use Ajax or Fetch API to retrieve those values.

Popular template engines:

And many others.

Static Site Generators

JavaScript language also uses lots of interesting Static Site Generators, for each major frontend framework:

Content Management System

A content management system is a software application that can be used to manage the creation and modification of digital content.
Wordpress is probably the most well known CMS that is written in PHP.
In JavaScript we have Strapi.

Strapi is an open-source, Node.js based, headless CMS used to manage content and make it available through a fully customizable API. Strapi is 100% Javascript and it’s really fast. It is designed to build practical, production-ready Node.js APIs.

Data Visualization Tools

When developing applications often you will find yourself in a situation where you need to present a piece of data on the screen. Instead of always using plain text to describe every detail to a consumer, we draw graphs and pie charts and this is where data visualization tools come into play.

It all starts with a JavaScript Canvas API.
The Canvas API provides a means for drawing graphics via JavaScript and the HTML canvas element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

While the Canvas API largely focuses on 2D graphics, the WebGL API
(Web Graphics Library) is a JavaScript API, which also uses the canvas element, for rendering high-performance interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.
WebGL is essentially a web browser’s interface of OpenGL for doing graphics operations in the browser.

P5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!
Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.

Chart.js is a data-visualization tool that provides simple and flexible JavaScript charting for designers & developers. It’s like D3.js, but for charts and supports various chart types: bar, line, area, pie, bubble, radar, polar, and scatter.

Data-Driven Documents (or D3.js) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets.
It’s often used for things like bar charts and pie charts much easier than using HTML canvas, but the possibilities of D3 go beyond that.

Three.js is a cross-browser JavaScript library used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL to draw 3D. It also provides Canvas 2D, SVG, and CSS3D renderers.

State Management Tools

The idea of a state management tool is to give us an alternative approach to share data between components. Instead of passing variables from parent component to its child, we create a central state (store) or series of connected smaller ones, which all components have access to and are able to interact with it by pushing or retrieving data from the state.

This pattern is the same across all state management tools, but the implementation will differ from one type to another, especially if you use TypeScript. Popular state managers:

It’s also worth mentioning that some libraries have their own way to share data between non-related components, like Rx.js Behavior Subject or React’s Context API.

Source

Backend Stack

Command Line Interface

Node.js comes with a slew of interesting features out of the box. One of those is the Process global object, which provides information about and control over the current Node.js process. Things like events, channels, environment variables, just to name a few, but what I really want to point out is argument parsing, which almost like everything in Node.js has been simplified using NPM packages. This is where packages like Yargs, Commander, Minimist, and Inquirer come into play.

Using Yargs we can ask user questions when using a command line. This gives the option to pass an argument with a value whenever you run your Node.js app via CLI, the same way you could pass a port to ng serve
(e.g: ng serve — port=4444) when running an Angular app and force Angular to run your app on the desired port. From that point, we can customize what happens next when the right argument is passed in.
Yargs also has support for TypeScript.

Web APIs

Although Node.js out of the box gives us ways of handling APIs, we very rarely use Node.js alone when building production applications.

On top of the food chain is Express, the most popular Node.js framework for building web APIs. Express can be used for SOAP, REST, and GraphQL. Express can be used for file uploads, it can compress files, parse body from the request (full list of middlewares) and it can also be integrated with Typescript with @types/express module.

Another way of using TypeScript and Express is via module named
ts-express-decorators which, as the name suggests, has built-in support for decorators.

Koa is a framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.

Nest.js is a progressive Node.js framework for building efficient, reliable, and scalable server-side applications. It uses modern JavaScript, is built with TypeScript, and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).
So if you’re coming from the world of Java or C languages or if you have experience with building Angular apps, you’ll feel right at home.

Feathers is a lightweight web-framework for creating real-time applications and REST APIs using JavaScript or TypeScript. Feathers can interact with any backend technology, supports over a dozen databases, and works with any frontend technology.

Other popular choices include Meteor, Full-Stack framework for building web, mobile, and desktop applications, Marble, a framework for building server-side applications, based on TypeScript and Rx.js, Restify, a framework for building semantically correct RESTful web services, etc.
The list goes on.

Graph APIs

GraphQL is a query language for APIs that provides a complete and understandable description of the data in your API and gives your frontend the power to ask for what exactly it needs and nothing more.

When working with GraphQL we can use the previously mentioned framework, Express-GraphQL, which provides a simple way to create an Express server that runs a GraphQL API.

Then there is Apollo Server.
Apollo Server is an open-source, spec-compliant GraphQL server that’s compatible with any GraphQL client. It’s used to build a production-ready, self-documenting GraphQL API and it’s a great fit with microservices architectures, a serverless environment, and can be used alongside Express.

Graphql-Yoga is another fully-featured GraphQL Server focused on easy setup, performance, and great developer experience.
Graphql-Yoga comes with built-in support for file uploads, GraphQL subscriptions using WebSocket, and works with all GraphQL clients.

GraphQL Client is a tool that allows us to write GraphQL queries on the frontend. It can be used with any popular frontend framework and also vanilla JavaScript.
The most well known GraphQL Client is Apollo Client.

Graphiql is an in-browser GraphQL IDE designed for testing GraphQL queries in the development environment. It works with Express-GraphQL and overall experience is similar to Postman.
Apollo Server has its own GraphQL test environment named as
GraphQL Playground.

WebSockets

The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user’s browser and a server.

The closest thing JavaScript has to a WebSocket is a built-in Broadcast Channel API. Without any server running in the back, the Broadcast Channel API allows basic communication between browsing contexts
(windows, tabs, frames, or iframes) and workers on the same origin.
This includes things like text messages or detecting user actions in other tabs.

When working with WebSockets on the backend, there are two libraries that stick out, SocketIO and WS (WebSocket). Using either tool we can create
real-time chat applications, multiplayer video games, real-time analytics, and much more.

Server-Side Rendering

When talking about Client-Side rendering, we are rendering content in the browser using JavaScript with a bare-bones page content placed inside an HTML. When you create a new React or Angular application using a CLI, these applications are built with Client-Side rendering in mind.
Server-Side rendering is the ability to get fully render an application on the server and then sent it down to the client.

This technique speeds up the initial load of the application, in cases when users are using outdated devices or have a slow network, as your HTML file already contains a page content. SSR also has a greater emphasis on SEO (search engine optimization), which provides a better user experience.
It does come with a fair share of drawbacks too.

Server-Side Rendering with frontend frameworks can be achieved in combination with Express.js using the universal library, like Angular Universal. A more common way to create a server-side rendering project is to use libraries like Next.js for React or Nuxt.js for Vue.

Source

Databases (ORMs & Drivers)

A database is a data structure that stores organized information. Most databases are built using SQL, query language used for accessing and modifying information in a database, and contain multiple tables, which may each include several different fields. There is another type of database which do not require standard tables and SQL. These databases are known as NoSQL and are gaining popularity by the day.

SQL Databases

Object-relational-mapping (ORM) is the idea of being able to write database queries using a paradigm of your preferred programming language.
— Mario Hoyos

With ORM we define the structure of data and make sure that the database only accepts that type of data.
When working Node.js and relational databases, such as MySQL, Postgres, SQL Server, MariaDB, etc, we can use an npm module to structure the data in our own way. That module is Sequelize, a promise-based Node.js ORM.

Prisma is an open-source database toolkit. It replaces traditional ORMs and makes database access easy with an auto-generated query builder for TypeScript and Node.js. Prisma simplifies writing GraphQL queries against the database, but besides that, Prisma also works with REST and GRPC.
Prisma currently supports several SQL databases, as well as AWS Aurora.

NoSQL Databases

Another interesting concept is Object-Document Mapping (ODM), which is the ORM for non-relational (document-oriented) databases. In the case of MongoDB, the most commonly used ODM is Mongoose, a Node.js ODM.
For those who prefer using TypeScript, there is a module which is a mix of TypeScript and Mongoose called Typegoose.

Another type of database you might be using is Firebase. Although Firebase can be used with Node.js, the most common use cases cover backend-less apps with popular Frontend tools, such as AngularFire For Angular apps or React-Redux-Firebase for React ones.

RxDB (Reactive Database) is another NoSQL-database for JavaScript applications on the web and desktop. RxDB provides modules for realtime replication with any CouchDB compliant endpoint and also with custom GraphQL endpoints.

When working with a database like Redis, you can take advantage of the Redis-Commander, Redis web management tool for Node.js.

Two sides of the coin

Then there is TypeORM, ORM that works with both SQL and MongoDB, TypeScript and JavaScript, Node.js, Electron, React Native, etc.
The goal of TypeORM is to provide additional features that can help you develop any kind of application that uses databases — from small applications with a few tables to large scale enterprise applications with multiple databases.

Drivers

It’s important to mention that in order to use any type of database in your application you need to install an npm driver for that database. These include:

and other.

Besides storing data in databases, there is an npm module for storing data in the user’s local-storage module. Since Node.js is executed outside of the browser, data stored in local storage will be saved in a folder on your computer.

Machine Learning

Machine learning is the study of computer algorithms that improve automatically through experience. ML involves computers discovering how they can perform tasks without being explicitly programmed to do so.

TensorFlow is an end-to-end open-source platform for machine learning. It has a comprehensive, flexible ecosystem of tools, libraries that simplify building and deploying ML-powered applications.

TensorFlow is built on C++ and is often used with Python and data science, but it can be used with other languages as well, including Node.js. This is possible because these languages work on the system and execute C++ on GPU.

But for web, this wasn’t possible, at least not until DeepLearn.js came. DeepLearn.js is essentially a JavaScript version of TensorFlow.
While languages like Python, Java, and other run math operations of TensorFlow using C++ on GPU, DeepLearn.js uses JavaScript to run its operations on the browser via WebGL and ultimately run TensorFlow on the browser.

The DeepLearn was later rebranded as TensorFlow.js. TensorFlow.js is a WebGL accelerated, browser, and Node.js based JavaScript library for training and deploying ML models.

As with everything in JavaScript, there is always an alternative and that is Brain.js. Brain.js is a GPU accelerated library of Neural Networks written in JavaScript for Browsers and Node.js. It provides multiple neural network implementations as different neural nets can be trained to do different things well.

Source

Cross-Platform Development

Mobile development

Mobile apps have been around for quite some time and if there was one major drawback to developing mobile applications it was that each platform required its own set of technologies that could not be applied elsewhere. Android applications are built with Java and Kotlin, iOS with Objective-C and Swift, while C# is used for UWP.

The next big shift was to create a technology that would rule them all, allowing you to develop applications for all major platforms using a single language. That’s why technologies like Flutter (Dart), Xamarin (C#) grow in popularity today and JavaScript language is no exception.

Native Applications
A native app is an app for a certain mobile operating system (smartphone, tablet, etc.). With JavaScript we can build native apps in a number of ways:

  • Titanium is an open-source framework that allows the creation of native mobile apps on platforms including iOS, Android, and Windows UWP from a single JavaScript codebase, developed by Appcelerator.
  • React Native is a mobile a framework based on React, used to develop applications for Android, iOS, web, and UWP.
  • NativeScript is an open-source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript.

Hybrid Applications
While native applications are created for a particular platform, the hybrid development process relies on cross-platform functioning.
Hybrid applications are developed once and can be packaged into a web desktop, or mobile application.

  • Ionic is an open-source mobile UI toolkit for building high quality, cross-platform native, and web app experiences. Ionic is engineered to integrate seamlessly with all best frontend frameworks, including Angular, React, Vue, or even no framework at all with vanilla JavaScript.
  • Developed by the same team as Ionic, Capacitor turns any web app into a native app so you can run one app across iOS, Android, and the Web with the same codebase. Capacitor works with a wide range of technologies including Svelte, React, Vue, Angular, Jquery, and others.
  • Cordova is a framework for building hybrid apps using HTML, CSS, and JavaScript. Cordova wraps your code into a native container that can access the device functions of several platforms. These functions allow you to easily write one codebase to target nearly every phone or tablet on the market today including Android, iOS, and UWP.

Progressive Web Applications
A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript (Angular, React, Vue, Svelte). It is intended to work on any platform that uses a standards-compliant browser.

Progressive web applications are built and enhanced with modern APIs to deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

Desktop development

Electron is an open-source software framework developed and maintained by GitHub that allows the development of desktop GUI applications using HTML, CSS, and JavaScript or using any popular frontend framework. It combines the Chromium V8 engine and the Node.js runtime.

What this means is that Electron uses Common JS syntax to import modules, both on the client-side and the backend. Yes, we can import modules on the client-side as well (and in between script tags of an HTML file) to handle the communication between front and back.
When we run our application, Electron app spawns multiple independent processes. Communication between processes is handled through
Inter-Process Communication, just like in Google Chrome.

Aside from that, when working Electron we have access to Node.js built-in modules and Chrome Dev Tools.

As of recently, React Native can be used to build desktop applications for both Windows and Mac. And as mentioned before, we can deliver cross-platform desktop applications using hybrid frameworks.

Source

Game Development

Let’s talk about games! JavaScript being primarily a web language is not (yet) capable of creating games the likes of Unity, Frostbite, or Unreal Engine.

The simplest way to create a game in JavaScript is to use JavaScript Canvas API. The cool thing about the Canvas API is that you can do whatever you want using vanilla JavaScript, with obvious downside is that you will have to reinvent the wheel every time.

That’s why we rely on frameworks and one of the popular game frameworks is Phaser. Phaser is a free software 2D game framework for making HTML5 games for desktop and mobile.
Phaser uses both a Canvas API and WebGL renderer internally and can automatically swap between them based on browser support. This allows for fast rendering across desktop and mobile. Behind the scenes, Phaser uses the Pixi.js library for rendering.

Pixi.js is an HTML5 creation engine. The aim of Pixi.js is to provide a fast lightweight 2D library that works across all devices. The Pixi.js renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. It’s also fast.

Create.js is a suite of modular libraries and tools which work together to create interactive content on open web technologies via HTML5. Create.js combined builds are minified version of:

GameQuery is an easy to use Jquery plug-in to help make JavaScript game development easier by adding some simple game-related classes. If you know how to use Jquery you almost know how to use GameQuery!

Three.js can be used for game development as well. Combined with WebGL we can make 3D games that will run in all modern browsers, including mobile devices.

Source

Security

Application Security

One of the ways to secure your Node.js application is to use a library called Helmet. Helmet helps you secure your Express apps by setting various HTTP headers. It’s not a silver bullet, as it says in the Helmet docs, but it can help.

Helmet comes with a set of built-in middlewares for various malicious attacks like Cross-Site Scripting, Clickjacking, even things like DNS prefetching, Content Security Policy, Client-Side Caching, HTTP Strict Transport Security, etc.

Csurf is a Node.js module used for CSRF protection. It works with either session-middleware or a cookie-parser module.

To limit incoming repeated requests for your API there is a package called Express-Rate-Limit. It’s just one of the ways to implement protection against DDoS attacks. Rate-limiting requests can be handled with another popular module called Express-Brute and it can be done on the reverse-proxy server level as well, for example with Nginx.

ORM should have built-in protection from database injection attacks, but it’s never a bad idea to add another layer of protection.
SQL-injection, as the name suggests, is a module that detects SQL injection attacks and stops them by sending 403 as a response.

Modern front-end frameworks, like Angular and React, also have a built-in sanitization against XSS attacks.

There is a tool called Safe-Regex that helps you detect vulnerable regex patterns.

Lastly, when building an application there are usually special credentials that your app might be using, like database strings, passwords secrets, access tokens, and those need to be secured.

The best way to hide secret credentials is to use environment variables and to handle the work there is a module called Dotenv. Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Another package with a similar purpose is a module called
Env-Cmd.

Authentication and Authorization

Now that we learned some ways to secure our application from the outside threat, we’ll switch our attention to hashes, sessions, and OAuth.

Hashes

A hash is a function that converts one value to another. Hashing data is a common practice for cryptography (like protecting passwords), compression (lossy file compression), indexing, etc.

Let’s start with Node.js and inside we have Crypto, core Node.js module. The crypto module provides cryptographic functionality that includes a set of wrappers for OpenSSL’s hash, HMAC, cipher, decipher, sign, and verify functions. It essentially allows us to create cryptographically secured hashes, encrypt, and decrypt.

Another way to make hashes is to use a Secure Hash Algorithm, like using the SHA256 npm module. SHA256 algorithm generates an almost-unique,
fixed-size 256-bit (32-byte) hash.

A more common way to hash passwords is to use a Bcypt npm module. Unlike many alternatives, Bcrypt is designed to be slow, making passwords more resistant to a dictionary attack. It also uses salt when generating passwords. With salt, we add a random string of characters to a password before starting a hash. The greater the salt value, the longer hash will take, and harder it’ll be to crack the password.

Cryptographic hashes are one-way functions (meaning that once a value is hashed we can’t revert the hash to the original form), so when signing a user we hash and compare the password send down to server with the one saved in the database. If both values are exactly the same, it means the password is valid and the user is safe to sign in.

JWT and Sessions

Session-based authentication is one in which the server creates and stores the session data in the server memory and then sends the session id via cookie to the client’s browser. During authentication, the session id is then sent on subsequent requests to the server and the server compares it with the stored session data and proceeds to process the requested action.

When working with session-based authentication in Node.js it’s a common practice to use express-session module to handle the session and
cookie-parser, a cookie parsing middleware that allows you to parse Cookie header and populate request cookies object.

JSON Web Tokens (JWT) are an open, industry-standard method for representing claims securely between two parties. JWTs are signed with a secret upon creating and then verified during authorization using the same secret.
JWT can contain an unlimited amount of data, can last forever or set to expire and can be shared among multiple servers, without the need to share a session or anything to authenticate you. Every token consist of three parts:

  • Header
  • Payload
  • Signature

When working with JWTs with Node.js you can use a jsonwebtoken node module. It allows you to sign, refresh, and blacklist tokens.

Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped into any Express-based web application. Passport allows multiple authorization options and favors JWT and has a lot of boilerplate already set up.

OAuth
Open Authorization, or simply OAuth, represents the authorization between different services. This mechanism is used by companies such as Amazon, Google, Facebook, Microsoft, and Twitter to permit users to share information about their accounts with third-party applications or websites.

Passport recognizes that each application has unique authentication requirements. Authentication mechanisms, known as strategies, are packaged as individual modules. Applications can choose which strategies to employ, without creating unnecessary dependencies.
Passport provides a comprehensive set of strategies to support authentication using a username and password, Facebook, Twitter, Steam, and more.

Strategies are installed separately from the Passport library.
If you want to authenticate users with Google, for example, you just need to install passport-google-oauth20. The same goes for other providers.
From this point on you can set a redirect URL, serialize and deserialize users, etc. and all of this can be done with Passport.

With Cloud, we can authenticate our applications without ever touching the backend. Services like Firebase Authentication, Azure Active Directory, AWS Cognito serve as identity management providers, which are a great fit for frontend and mobile applications.

Maintaining Packages

Node.js has a handful of commands that helps us track our packages.
npm outdated is a command that checks which modules in our package.json file are outdated.
Another useful command is the npm audit.

Audit performs a security review of your project’s dependency tree and reports information about security vulnerabilities in your dependencies. It can also help fix a vulnerability by providing simple-to-run npm commands and recommendations for further troubleshooting.

Another way to fix vulnerabilities is to use a module named Snyk.

Scaling, Deploying, and Monitoring

Single Node.js server can handle several thousands of requests at once, but what happens to a Node.js server when requests start coming from different sources, such as from users from different parts of the world? This is the part where we need to consider expanding our application by caching or scaling. There are three ways to scale Node.js applications:

  • scale by cloning services
  • scale by sharding databases
  • scale by using microservices

Cloning services (horizontal duplication)

Node.js being a single-threaded non-blocking runtime means that whenever we run a Node.js application, by default we start a single process.
This does not mean that Node.js can do only one thing at the time. With it’s non-blocking IO and Event Loop, which can process multiple asynchronous requests and simultaneously execute the code on the main thread.
Node.js also has long term support for Worker Threads since version 12.

Another way to run a Node.js is by forking. We can fork multiple processes, as Node.js is designed to build distributed applications with many nodes, thus the name Node.js.

Forking helps us start multiple instances of our Node.s application and can also be combined with a built-in cluster module, which we can use to spin up multiple clusters of our application based on the number of CPU cores we have and then fork a new process every time one of the existing worker processes dies.

There are other ways to perform load balancing in Node.js with tools like Nginx, Kubernetes Ingress, and others.

Sharding databases (data partitioning or splitting)

Sharding is a database architecture practice of separating one table’s rows into multiple different tables, known as partitions. Each partition has the same schema and columns, but also entirely different rows. Likewise, the data held in each is unique and independent of the data held in other partitions.

Microservices (functional decomposition)

The idea behind using Microservices is to split each major functionality into smaller applications that are designed to handle only specific features. Each service can be built separately and can run, scale, and be deployed independently, while been designed to work together.

In Node.js the simplest way to create microservices is to split our applications into multiple parts, each running on its own port. Then we connect these services together via a network, but there is also an npm module that can help us do that.
Learna is a tool that helps you split and manage our application using multiple repositories, each containing its own npm modules.

We can manage communications between microservices (such as notifications, alerts on downtime, etc.) in a number of ways:

Deploying JavaScript Apps

What is the benefit of creating a web application if you can’t show it to others? When choosing a cloud provider it’s important to choose a service that best suits your needs and that you can afford.
If your application is primarily focused on the frontend you can deploy the backend-less application (static site hosting) on sites like:

Those who enjoy crafting their own backend can host sites on:

and others.
Each of these cloud providers has its own way of configuring Node.js applications, so be sure to check out the docs before publishing your code.

JavaScript in the Cloud

No matter what type of application you’re building if it’s going to live on the internet, you need Cloud. In the previous section, I listed out some of the cloud services that provide hosting services, but this time we’re diving deeper into DevOps.

Let’s kick things off with SDKs. Each major cloud provider has a software development kit full of fun services that will run in the browser and Node.js:

Node.js also has its own take on containers with Docker module and
Kubernetes-Client module.
Of course, the highlight of the story here is the Serverless Framework. With the Serverless Framework, you can easily build applications comprised of microservices that run in response to events, auto-scale for you, and only charge you when they run.

The Serverless Framework uses new event-driven computing services, like AWS Lambda, Google Cloud Functions, Azure Functions, and more. It’s a command-line tool, providing scaffolding, workflow automation and best practices for developing and deploying your serverless architecture.

Process Managers

Process Managers allow us to monitor the running services locally and in production and run common system administration tasks. These tasks include starting and stopping application, reloading server instances without downtime, logging performance metrics, etc.

Top three choices for monitoring Node.js applications are:

We can also deploy applications using process managers. With PM2 we can split our application into processes and load balance, just like we’d do with cluster module, only that with PM2 we don’t need to write the code ourselves.

Big cloud providers like AWS have their own way of monitoring applications. With AWS CloudWatch we can monitor all the processes in our application and with AWS SNS we can send push notifications whenever a certain event fires.

Another great monitoring service is Sentry. Sentry SDK covers all fronts, allowing you to monitor and track errors in CLI, react-native, web browser, and Node.js applications.
Other services like Raygun, help you track errors in your Express.js application, but if your app is primarily focused on the frontend there is TrackJS, a service that will help you detect bugs in your web app.

Source

Testing

All Code Is Guilty Until Proven Innocent.
- Anonymous

As a software developer, I never realized the importance of testing until I started working on larger projects. As with everything else in JavaScript, testing tools are varied and quite similar in implementation.

Unit and Integration testing

If you’re an Angular developer there is no doubt you haven’t come across Jasmine. Jasmine is a standard testing tool for Angular but can be used with other Frontend frameworks. It can also be used with Node.js.
The most common use case of Jasmine is with test runner Karma, but you can also run tests in headless mode.

While Jasmine can be used with React and Vue, a more common testing tool is Jest. Jest is currently the hottest JavaScript testing library. It can be used with Node.js, it can be used in headless mode with another library called Puppeteer and it’s usually used with Enzyme.

Enzyme allows us to perform a shallow rendering when testing. What this means is that we can isolate a component when testing it them without been concerned about child components our component might have.

My first experience with testing was with Node.js and a tool called Mocha. Mocha is easy to learn but provides very little tools to work with. For that reason, we have Chai, another testing library that enhances Mocha’s functionalities. Mocha can be used to test UI of course and like Jest and Jasmine, it can be used for both unit and integration testing.

Node.js also comes with a built-in testing module, called Assert. The Assert module provides a set of assertion functions for verifying invariants, but in a much smaller scope than the previously mentioned tools.

End to End testing

End-to-end testing is a methodology to test an application flow from start to end and simulate the real user scenario and validate the system under test.

When searching for an E2E testing framework, the first choice you might come across is Protractor, an end-to-end testing framework for Angular and Angular.js applications. Under the hood, Protractor uses JavaScript wrapper of Selenium WebDriver.

Another very common choice for E2E testing is Cypress. Cypress is fast, easy to use, modern testing framework. It can be hooked with Angular, React, Vue, you name it. It improves testing upon Protractor in nearly every way.

Finally, if you are focused on building a backend app with Node.js, Puppeteer is your friend. Puppeteer is a testing framework built on Google’s V8 engine and is used for web-scraping, server-side rendering, and of course end-to-end testing.

Marbles Testing

This is a special group of unit testing that is done using Marbles diagrams.
Marble diagrams are a way to visually represent Observables.
Rx.js Observables are a powerful and elegant way to compose asynchronous code and with Marbles diagrams, we can test asynchronous operations in a synchronous and dependable manner.

The marble represents a value being emitted and transformed through the passage of time. With that in mind, we can set up the test cases to fail or pass and test accordingly. This can be achieved in multiple ways. One such is using a library called Jasmine-Marbles.

Load testing

Load testing determines a system’s performance under a specific expected load. This purpose of load test is to ensure smooth functioning of the software under real-life load condition, such as application behavior when multiple users access it simultaneously.
— Guru99

Easy way to load test your application is to use a module called Loadtest. It runs a load test on the selected HTTP or WebSockets URL.
Loadtest can come in handy if you have a load-balanced server and you want to test how the load is been distributed across workers. Loadtest also helps with integration tests.

The more professional way of testing load is using a library called Artillery. Artillery is a modern, powerful & easy-to-use solution for load testing and functional testing. Artillery supports both REST and Graph and is useful for shipping scalable backends, APIs & services that stay performant and resilient under high load.

Source

Linting, Debugging, and Logging

There is a saying that you’re as good as a developer as your linter says you are.
Linter is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. This makes sure that you and your team members write clean and consistent code.

To add a linter to your project, install the linter via npm, and then create a config file where you’ll define all the rules you want. You also need to download a linter extension for the IDE you’re using.

Most popular linters are:

Debugging and Logging

One of my favorite ways to debug is to use console. It’s a built-in debugger that runs in the browser and Node.js. Another built-in way to debug is to use a debugger statement.

A more effective way to debug is to use dev tools of your favorite web browser, such as Chrome Dev Tools. And if you are working with React, Angular or Vue, be sure to install proper dev tools in your browser:

If your app is using Redux or a similar state management system like NgRx, what you can do is install Redux Dev Tools, which will help you track your state as your app runs.

As I said earlier, we can use a console with Node.js, but it’s lacking a few features, like colors. For that reason, we have an npm package called Chalk, which we can use to style our log messages. Furthermore, we can style Node.js CLI with emojis using a Node-Emoji npm package.
We can also use a debugger statement in Node.js and we can also debug Node.js with Chrome Dev Tools.

Another very effective Node.js logger is Morgan. Morgan is an HTTP logger that logs all HTTP requests hitting our APIs. We set up Morgan as a middleware, so it gets invoked with every request and then adds a few options about when on what to log.
Winston logger is designed to be a simple and universal logging library with support for multiple transports.

There are many other ways to debug JavaScript. Feel free to surf the web for more awesome choices.

Source

Utilities

No matter how skilled developer you are, when developing a serious project, there is at least one utility tool you’ll use that will make your life easier. This is the list of utilities that will help you develop better apps:

  • Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Animate multiple CSS transforms properties with different timings simultaneously on a single HTML element with the ability to play, pause, control, reverse, and trigger events in sync.
  • Async.js is a utility module that provides straight-forward, powerful functions for working with asynchronous JavaScript. While vanilla JavaScript only supports callbacks, Promises, and Async Await, Async.js extends this feature with the list of new possibilities allowing us to do parallel execution, async waterfalls, retries, and many other actions.
  • Lodash is a JavaScript library that provides utility functions for common programming tasks using the functional programming paradigm. Whether you want to filter an array by the unique element, pick properties from an object, check the size of a collection or invoke a function when the user has stopped typing, all these tricks that would take you some time to figure out how to put pieces together are already built-in to Lodash.
    Lodash helps developers to write more concise and maintainable JavaScript.
  • ReactiveX (Rx.js) is a library for composing asynchronous and
    event-based programs by using observable sequences. Rx.js allows us to treat all data as a stream and transform that data as it flows through time. What this means is that when we’re working with asynchronous events we can use Rx.js operators to manipulate the data (map, filter, reduce), but also delay, schedule, or unsubscribe from source (Observer, Schedulers, Subjects).
    Rx.js can also be used with React using the Redux-Observable library and Express.js using RxXpress.
  • Moment is a library for parsing, validating, manipulating, and displaying dates and times in JavaScript. It simplifies usage and formatting of dates much better than the built-in JavaScript Date object.
    Moment also has support for different timezones, with
    Moment-Timezone module.
  • Node-Fetch is an implementation of web browsers Fetch API for Node.js environment.
  • Axios is a Promise based HTTP client for the browser and Node.js. Axios is very similar in implementation to Fetch API, but unlike Fetch API, which returns Promise on it’s first call and then data after Promise is resolved, Axios returns the data right away.
  • Multer is a Node.js middleware for handling multipart/form-data, which is primarily used for uploading files. There is also an Express-FileUpload middleware for Express.js applications.
  • Howler.js is an audio library for the modern web. It supports a wide range of browser-ready files, it allows you to control everything from play, pause, and seek to rate, fade, loop… and works on both old and modern browsers.
  • Math.js is an extensive math library for JavaScript and Node.js. It features a flexible expression parser with support for symbolic computation, comes with a large set of built-in functions and constants, and offers an integrated solution to work with different data types like numbers, big numbers, complex numbers, fractions, units, and matrices.
  • Validator is a library for string validations and sanitizers. Validator comes with a list of interesting validations for things like email validation, JWT token validation, credit card number, and so on.
    There is a similar version of the package called Express-Validator.
  • Nodemon is a utility that will monitor for any changes in your source code and automatically restart your server upon saving changes.
  • UUID is a 128-bit number used to identify information in computer systems. In terms of an npm module, UUID is used to generate random strings.
  • JavaScript Image Manipulation Program (Jimp) is an image processing library for Node. Using Jimp we can set the quality of an image, resize it, crop it, apply the color effect, etc.
  • Sharp is another image processing image library that which allows us to do more of the same as Jimp and also to convert file from buffer to image and back.
  • Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and modern streaming formats, as well as YouTube, Vimeo, and even Flash.
    It supports video playback on desktop and mobile devices.
  • Http-Errors is a library for better error handling. It can be used with Express, Koa, and other Node.js frameworks.
  • Super Expressive is a JavaScript library that allows you to build regular expressions in almost natural language. Super Expressive provides a programmatic and human-readable way to create regular expressions.
    So if you find a Regex too cryptic and you don’t feel confident with writing expressions, this library will help you achieve your goals using plain English.
  • Reveal is an open-source HTML presentation framework. It’s a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.
  • Concurrently, as the name suggests, is a package that allows us to run multiple npm processes concurrently, like for example running Express server on one port, React on the other, with a single npm script.
  • Find is an npm module built on top Node.js built-in fs module
    (file-system). Its main purpose is to help you find a file or directory on your computer both asynchronously and synchronously.
  • Typed.js is a module that types. We enter in any string, then watch it animate by typing itself at the speed we’ve set, backspace what it’s typed, and begin a new sentence for however many strings we’ve set.
Source

Spin-Offs

By now we have learned that JavaScript can be used to build almost anything on any platform, but did you know that JavaScript can also be cast into another language?

TypeScript is an open-source language that builds on JavaScript and extends it by adding static types to the language. Much like Java and C languages, TypeScript restricts developers to use typed variables like string, number, boolean, array but also introduces things like Dictionaries, Generics, Enums, Interfaces, Classes, Tuples, giving each functionality more context.

TypeScript was primarily been used with Angular (as it’s included via Angular CLI), but it soon found it’s way into other libraries like React and Nest.js.

With TypeScript, we can take advantage of the latest ECMAScript features. TypeScript code is transformed into JavaScript code via Babel and runs in a browser and Node.JS.

Flow is a library for checking of JavaScript code. It is often used with React. Much like TypeScript, Flow lets you annotate the variables, functions, and React components with a special type syntax, and catch mistakes early.

LiveScript is a programming language which compiles to JavaScript. It adds many features to assist in functional style programming and it also has many improvements for object-oriented and imperative programming. LiveScript has a straightforward mapping to JavaScript and allows you to write expressive code devoid of repetitive boilerplate.

CoffeeScript is a programming language that compiles to JavaScript. It adds syntactic sugar inspired by Ruby, Python, and Haskell in an effort to enhance JavaScript’s brevity and readability.
The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable, pretty-printed, and tends to run as fast or faster than the equivalent handwritten JavaScript.

Source

Documenting JavaScript

JSDoc is a markup language used to annotate JavaScript source code files. Using comments containing JSDoc, you can add documentation describing the application programming interface of the code you’re creating.
Once your code is commented, you can use the JSDoc tool to generate an HTML website from your source files.

JSDoc assumes that you will want to document things like modules, namespaces, classes, methods, method parameters, and so on.
The benefit here is in IntelliSense. Just like with TypeScript, when invoking a documented method, the code editor will automatically suggest to us what types of parameters a method expects, what it returns, what methods we can attach to variables, and so on.

While JSDoc can be used on frontend and backend, there is a cool tool for built for documenting RESTful APIs called Swagger.
The Swagger module provides tools for designing and building
Swagger-compliant APIs entirely in Node.js. It integrates with popular Node.js servers, including Express, Hapi, Restify, and Sails. With Swagger, you can specify, build, and test your API from the very beginning. It allows you to change and iterate your design without rewriting the logic of your implementation.

Source

Awesome APIs

In this module, we’ll look into public services that can be integrated with JavaScript or Node.js to build awesome apps.

And many others.

Source

Node.js Operating System

Node-OS is an operating system powered by Node.js and npm. Node-OS is built on top of the Linux kernel and uses Node as a primary runtime and npm as a primary package manager.

Deno

Deno is a new runtime for JavaScript and TypeScript, built on Rust language and the V8 JavaScript engine. It promises to revolutionize the way we develop JavaScript applications with more focus on security and productivity.

It’s not a replacement for Node.js, but rather an alternative. Deno is still in its early stages and we are yet to see how the events between Deno And Node.js will play out.

Source

JavaScript Maintainers

JavaScript is developed by Brendan Eich and it’s no secret that it took him only 10 days to finish it. Since then language took so many twists and turns, but today is among the top three most popular programming languages.

The OpenJS Foundation is made up of 32 open-source JavaScript projects including Appium, Dojo, Jquery, Node.js, Electron, and Webpack. Their mission is to support the healthy growth of JavaScript and web technologies.
They also have Node.js certifications certification program, with exams covering application and service development.

Technical Committee 39 (TC39) is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript. Basically TC39 is in charge of adding new features to JavaScript.

TC39 also allows other developers to contribute and propose new features they want to use in JavaScript. Each feature goes through multiple stages where it’s tested and reviewed before it gets added to the language. Make sure to check out their Github page to know what Javascript features to expect in the future.

Then there a V8, group of developers tasked to adding new features to the JavaScript language and Node.js since Node.js is built on the V8 engine.

State of JS is a website that keeps track of all JavaScript libraries, frameworks, tools, and upcoming trends. They hold a survey at the end of every year and allow developers to express their opinions on the JavaScript tools they use.

Mozilla Developer Network (MDN) site provides information about Open Web technologies including HTML, CSS, JavaScript, and APIs for both web sites and progressive web apps.

JavaScript Weekly is a free email service that delivers the latest JavaScript news and articles every week. Make sure to subscribe to it if you want to stay up to date with the JavaScript language and technologies.

Source

Journey into JavaScript

I stumbled on a JavaScript about four years ago by accident, by taking a course on Java and I didn’t realize it’s potential until I completely sank my teeth in. One thing I know for sure is that I would get nowhere if I wasn’t surrounded by the right people and used the right resources.
In this section, we’ll take a look into where you can learn more about JavaScript.

JavaScript Books

There is no friend as loyal as a book.
― Ernest Hemingway

The same can definitely be said for JavaScript books. No matter how much of a JavaScript badass you consider yourself as these books will prove you wrong. Each is full of tricks that one should know to master the language.
Popular choices:

And many others.

JavaScript Teachers

JavaScript is definitely one of the fastest-growing programming languages. With so many changes it’s hard to stay up to date. That’s why in this section I’m going to list as many JavaScript teachers as I can remember that will ease your JavaScript journey and make it more entertaining.

And others.

JavaScript Editors

The best way to learn is to write it down. These are the top tier JavaScript IDEs:

This is where this article ends, but its certainly not the end of JavaScript. There are thousands of other modules I haven’t mentioned and probably never even heard of. What excites me the most about JavaScript is that there is always something else, something new and fresh, and looking ahead, I can’t wait to see where JavaScript is going next.

And with that, I’m switching into Blazor & .NET framework.
Just kidding! There are more JavaScript stories coming. Make sure to hit the follow button. You definitely don’t want to miss it.

If you like my work you can support me with a cup of coffee

Until next time!

JavaScript
React
Angular
Nodejs
Web Development

--

--

Mirza Leka

Written by Mirza Leka

759 Followers

Web Developer. DevOps Enthusiast. I share my experience with the rest of the world. Follow me on https://twitter.com/mirzaleka for news & updates #FreePalestine

Help

Status

About

Careers

Blog

Privacy

Terms

Text to speech

Teams