From Machine Code to Modern Web Applications: A Journey Worth Exploring

Chirag Jain
Engineering at Bajaj Health
8 min readJan 2, 2024

In today’s tech world, we’re all about JavaScript — the cool language that makes the web so awesome. It’s like a superhero for developers, taking the web to crazy new heights.

But, you know what’s wild? Just 20 years ago, no one even dreamt of the stuff we’re doing now with JavaScript. Imagine a world where websites didn’t move, interact, or react to your clicks. Where online games were just static pictures, and apps felt like clunky robots following pre-programmed routines. That, my friends, was the web of not too long ago. But thanks to an exponential growth of JavaScript, the digital landscape has undergone a mind-blowing transformation, evolving from basic blinking lights to the dynamic, interactive experiences we enjoy today.

Picture this: as our codebases began to grow and maintainig the codebase became a challenging task, we started building simple libraries (jQuery & Backbonejs, remember that?), then jumped into powerful frameworks like Angular and React. And guess what? We didn’t stop there. We added more layers — fancy tools to translate code like linters, formatters, tranpilers etc, and even switched to Typescript extending the capabilities of good old JS to become a Statically typed language, under the hood powered by compilers and bundlers.

It’s like building a tower of tech goodness, where each layer added more features, more complexity, more…stuff!!

But, here’s the thing — it’s moving so fast that some of us developers might be scratching our heads, wondering, “How did we get here?” Many new developers just dive into this complex world without understanding the journey — how we went from basic blinking lights to websites that do your taxes.

So, let’s take a chill 10-minute break and a quick trip back in time, shall we? We’ll check out how this whole computer science adventure began, how we stacked layer upon layer on those basic 1s and 0s, and voila — look where we are now, changing the world with supercharged web and JavaScript powers!

Invention of ICs and Microprocessors: The Journey Begins!!

This transformative journey that facilitated this digital revolution began with the groundbreaking inventions of Integrated Circuits and Microprocessors in the 1970s, marking a pivotal moment in technological history taking the foundational legacy of transistors a step ahead.

Just five decades ago, the world operated in a vastly different paradigm, devoid of the instant connectivity and accessibility that we now take for granted. The advent of Integrated Circuits, a compact assembly of electronic components on a single chip, and Microprocessors, which acted as the brain of early computers, heralded a new era.

141-PF printing calculator, built with first commercial microprocessor: Intel 4004
141-PF printing calculator, built with first commercial microprocessor: Intel 4004

Microprocessors & the Building Blocks: 1s and 0s

Our tale begins with the fundamental language of computers: binary. Everything in the digital world, from pixels on your screen to complex AI algorithms, boils down to ones and zeros.

These are like the tiny Lego bricks of the digital universe, and understanding them is like learning the alphabet of technology.

A microprocessor (the brain of a computer) is a multipurpose, clock-driven, register-based, digital integrated circuit that accepts binary data as input (in binary), processes it according to instructions stored in its memory, and provides results (also in binary form) as output.

Microprocessors

In layman terms, A micro-processor is a machine with very small parts (a lots and lots of transistors !!) that work in tandem with electrical inputs and ultimately do a job. Think of it as a simple machine that can only understand the binary instructions. These are like robots following strict, step-by-step commands, incapable of any improvisation or dynamic behavior.

These binary instructions given to these microprocessors are given as instruction sets which follows some rules. These rules are different for different processors and forms the basis of the language spoken by that micro-processor.

Some of the common languages, most famous microprocessors speaks are:

  • IA-32 (or x86–32): Used by Intel’s family of 32-bit microprocessors.
  • x86–64: Used by Intel’s & AMD Processors.
  • ARM: Used in mobile devices, embedded systems and in Mac Devices.
  • MIPS: Used in embedded systems and in consumer electronics.

Enter The Maestro: Machine Code

These binary languages (or precisely Instruction Sets), different for different processes forms the Machine Code. Microprocessors only understands these Sets of Instructions, and every program that wants to runs on your computer eventually gets converted to (more precisely: compiled to) Machine Code, and then executed by the Processor.

An Example Machine Code
An Example Machine Code

This Machine Code involved writing long, tedious strings of ones and zeros, directly telling the machine what to do at each step.

It was like giving detailed instructions to a child learning to tie their shoes, but for a complex machine!

Machine code was powerful, but it was also incredibly difficult and error-prone. It was only accessible to a small group of specialized programmers, limiting the potential of computers to a select few.

As this machine code varied for every other processor, was very difficult to understand and write making it prone to errors, and the number of machines increasing exponentially, we eventually required to develop some mechanisms through which we could write code in one common format for every machine.

These problems inspired computer scientists to innovate the processes through which we could convert the code written in a human readable common format into CPU understandable Machine Code, and to develop that common format itself. This led to the invention of Assembly Language!!

Abstraction: Bridging the Gap by Assembly Language

Thankfully, someone realized the need for a bridge between humans and machines. Enter Assembly Language, the first step towards abstraction.

Assembly language replaced binary code with symbolic names and instructions, making it easier for programmers to understand and write.

Think of assembly language as giving the child picture instructions, instead of just written ones. It wasn’t perfect, but it was a vast improvement!

Machine Language vs Assembly Language.
Machine Language vs Assembly Language

Higher Ground: High-Level Languages Era

While assembly language was a significant improvement over machine code, it still required programmers to have a deep understanding of the computer architecture. This led to the era of development of higher-level languages, which were easier to learn and use but required additional translation steps before being executed by the computer.

This era started with languages like FORTRAN & COBOL, and eventually turned to Pascal and C built on top of Assembly language.

After these in the 80s, when programmers started writing tons and tons of code, the handling of the codebase became a new challenge giving rise to Object-oriented paradigm which gave birth to several programming languages like C++ and Java.

A huge amount of great softwares even today are built with C++ & JAVA.

The Web’s Spark: Rise of Markup & Scripting Languages

With the World Wide Web being invented by Tim Berners-Lee, a new era of innovation started in the 90s

This gave rise to the development of scripting languages like Python and PHP!! Web development & markup languages like HTML, CSS, and JavaScript gained prominence during this era.

These languages were mostly built on top of C/C++, adding one more layer and moving further far away from microprocessors.

JavaScript Takes the Stage:

Now, let’s zoom in on the web. In the early days, websites were static documents, like digital brochures. But then came scripting languages like JavaScript, adding a spark of interactivity.

Suddenly, webpages could respond to user actions, update content dynamically, and even run simple games.

It wasn’t long before JavaScript emerged as the dominant web scripting language. Its ease of use, flexibility, and powerful libraries made it the tool of choice for developers wanting to add life and animation to their websites.

Building the Stage: Frameworks and Libraries

As the web evolved, so did JavaScript. Powerful frameworks like Angular and React appeared, providing pre-built structures and tools to make web development faster and more efficient.

Imagine these frameworks as ready-made stages, where developers can focus on the performance and creativity of their plays instead of building the stage from scratch.

Beyond the Browser: JavaScript’s Expanding Universe

JavaScript’s Expanding Universe

But JavaScript didn’t stay confined to the browser. With tools like Node.js, it ventured into the world of servers, powering real-time applications and even mobile apps!

It’s like the actor who not only excels on stage but also takes on film roles, expanding their reach and impact.

The Journey Continues: A Future of Innovation

Today JavaScript has come a long way. Its impact on the web is undeniable, shaping the interactive and dynamic experiences we enjoy online. It has transformed the entire web, turning the static Web Pages to complete Browser Based Applications.

JavaScript is still evolving, with advancements like WebAssembly pushing the boundaries of performance and functionality. The future holds even more exciting possibilities, from immersive VR experiences powered by JavaScript to the integration of artificial intelligence into web applications.

Why This Journey Matters

We have witnessed a transformative journey fueled by innovation, progressing from the foundational era of microprocessors to the pinnacle of high-level languages, each layer building upon the other, delicately crafting a tapestry of abstractions.

Understanding this journey, from blinking lights to brainwaves, isn’t just about techy stuff. It’s about human ingenuity, the constant push to create something new and amazing.

It’s a reminder that even the most complex things start with simple building blocks, and that with a little imagination and collaboration, we can achieve anything!

So, the next time you click on a dynamic website, play an online game, or use a cutting-edge web app, remember the incredible adventure behind it. Remember the 0s and 1s, the pioneering programmers, and the constant thirst for innovation that brought us from dusty books to virtual reality cat cafes.

Let’s keep exploring, dreaming, and building the future, one line of code at a time!!

--

--