Image for post
Image for post

How a Lightweight Single-Threaded Scripting Language Evolved to Revolutionize the Way We Develop Software

Sachin Sadasivan
Nov 25, 2020 · 6 min read

New-fangled languages and technologies emerge, thrive and disappear often in the software development landscape. Yet a relatively lightweight single threaded simple scripting language evolved to revolutionize the way we develop software. If a programmer went hibernation from programming a decade ago for some stage reason come back now and see JavaScript, his most likely reaction would be: “What…!?!”

He would be amazed to see web developers using JavaScript engines to run their enterprise servers, desktop application developers building Whether predication application using Node.js, not to mention mobile app developers using jQuery Mobile or React Native.

He probably would go fainted to see Node Package Manager (NPM) and NPM registry!

There are several reasons behind this incredible evolution of JavaScript in the last decade or so. Here I explain few truly fascinating features of modern JavaScript that helped it to gain popularity in software development with astonishing speed.

Simplicity

As a programming language, JavaScript has always maintained its simplicity and forgiveness to programmers and their mistakes. In many instances, JavaScript gently forgives the basic programming errors like forgetting to pass a parameter to a function. It will either ignore or relay on undefined to help you manage execution of your program with a minimum level of consistency and reliability.

Consider the below simple example:

If a developer forgot to place the argument “place” at the end of the greetAnyOne() function, JavaScript will still execute the program and produce the output by replacing “undefined” for missing argument.

Like in life, this level of forgiveness may create troubles for JavaScript engine and that is where tools and frameworks like TypeScript come for rescue.

Typescript

TypeScript is an opensource language developed by Microsoft. TypeScript is a typed superset of JavaScript.

Types provide a way to describe the shape of an object, providing better documentation, and allowing to validate that your code is working correctly. All valid JavaScript code is also TypeScript code. TypeScript code transpliles to plain JavaScript. That way we developer get the benefits of features during development and browsers get the code they still understand.

Since TypeScript is strongly typed, everything has a datatype. This enables us to develop great tooling like:

  • Inline documentation
  • Syntax checking
  • Code navigation
  • Advanced refactoring

TypeScript implements ES 2015 Class based object orientation like classed, Objects, Interfaces and Inheritance.

TypeScript thus became one of the pillars of some of the most remarkable JavaScript frameworks like Angular.

Single threaded

Yes, you read it right, JavaScript is single threaded! You must be wondering how in this universe JavaScript enable us to develop enterprise level software applications, not to mention building highly asynchronous Webservers. Webservers are historically known to be multithreaded to serve all the concurrent client requests.

Now let’s examine how standard JavaScript engine works.

JavaScript Engine

The JavaScript engine consists of two main components

Memory heap

Memory allocation happens in heap

Call stack

Call stack is where stack frames live as code executes. It is a data structure which holds the program execution. The features of Call stack is:

  • Has a single call stack
  • Can only do one thing at a time
  • Execution proceeds as follows
  1. Function is called and placed at top of call stack
  2. Function returns it is popped off the call stack

Consider the execution of the following code:

When the engine begins execution the call stack will be empty. Each entry on the call stack is called a stack frame.

When the engine starts executing the above code:

  • Starts with calling the function prepareTea()
  • This function intern calls boilWater() and addTeabag()
  • At every step of the execution, these function gets added to the Call Stack
  • They all are serial
Image for post
Image for post

Running code on a single thread has benefits, like no need to deal with resource contention and race conditions.

Running code on a single thread, however, has limitations too. What happens if a particular JavaScript function is slow?

While the Call Stack has functions to execute, the browser can’t do anything else. It is blocked it cannot render or run any other code

Consider the following code:

In this case function addTeaBag() is a blocking function. Every code intended to execute next needs to wait until the function addTeaBag() returns it’s value. The browser can’t do anything else; it is blocked! It cannot render or run any other code

Modern JavaScript engines overcome this limitation by the elegant JavaScript Event Loop architecture.

JavaScript Event loop

The Event Loop has the following simple job:

  1. Monitor the call stack and the callback queue
  2. If the call stack is empty, take the first event from the queue and push it to the call stack, which effectively runs it

This iteration is called a tick in the Event Loop.

Let’s rewrite our previous code with JavaScript Event Loop.

Here we use the setTimeout() function which ensure the function addTeaBag() is executed asynchronously — without blocking any other functions in the stack as shown in the below image.

Image for post
Image for post

Thus, this architectures is one of the cornerstones that makes JavaScript a truly single threaded non-blocking asynchronous concurrent language.

Frequent releases with powerful features

JavaScript is the language for the web and is executed by all browsers. Yet there was no continues release and update cycles until a decade ago. Things have changed now dramatically, however.

JavaScript language specification is officially called as ECMAScript (ES). Up until recently, the ES versions were defined by a sequential number. ES 3 is supported by older browsers. ES5 is supported by most modern browsers.

The ES6 specification was renamed ES 2015 and introduced many new key features such as Classes and Arrow functions. Since then a new version of the specification is released each year.

If a browser cannot support the latest JavaScript specification, that needs to be transpired to older JavaScript.

This frequent releases with powerful features make JavaScript a great choice for enterprise software development at scale.

Brower Developer Tools and Debugging

Most modern browsers provide excellent developer tools to monitor and debug JavaScript while its running. A console tab in the developer tools is always the first page to look at when we see HTML and JavaScript in action.

We can put breakpoint and debug while the code runs in production. We can even modify and experiment with Document Object Model (DOM) elements while in action.

These are few outstanding features of JavaScript and its tooling around which revolutionize the way we develop software.

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Sachin Sadasivan

Written by

An IT versatilist, a full stack developer excited about Functional, Reactive, OO Programming, Microservices, AI and Algorithms. Learning polyglot programming.

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Sachin Sadasivan

Written by

An IT versatilist, a full stack developer excited about Functional, Reactive, OO Programming, Microservices, AI and Algorithms. Learning polyglot programming.

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store