DEV Community

Cover image for How We Used to Run JavaScript — And How It Quietly Took Over the World
Azeem Teli
Azeem Teli

Posted on

How We Used to Run JavaScript — And How It Quietly Took Over the World

#webdev #programming #beginners #javascript

I still remember the first time I saw JavaScript run.

There was no terminal.
No npm install.
No “build failed” error screaming in red.

Just a browser… and an alert box.

It popped up like magic.

That moment — simple, innocent, and slightly annoying — was how an entire generation learned JavaScript. And if you’re learning JS today, the journey you’re on looks very different from where it all started.

Let me tell you that story.

The Childhood of JavaScript: When HTML Was the Playground

In the late 1990s and early 2000s, JavaScript wasn’t a “language ecosystem.”

It was more like a tiny toy glued inside HTML.

1. JavaScript Inside HTML (<script> tag)

This was the classic way.

You wrote HTML.
Then, somewhere near the bottom, you dropped a <script> tag like a secret spell.

<!DOCTYPE html>
<html>
<body>
  <button onclick="alert('Hello!')">Click me</button>

  <script>
    alert("Hello from JavaScript");
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You didn’t run JavaScript.

You opened an .html file.

And JavaScript just… ran.

No servers.
No build tools.
No configuration files.

📚 Almost every beginner tutorial started this way.
If you learned JavaScript as your first programming language, this approach probably felt natural — which is exactly why JS became so popular.
(If you’re curious why JavaScript became the go-to first language, I explored that deeply in JavaScript for Beginners: First Programming Language.)

2. Inline Event Handlers: The Wild West

Then came something even simpler — and much messier.

JavaScript inside HTML attributes.

<a href="#" onclick="alert('Clicked!')">Click</a>
Enter fullscreen mode Exit fullscreen mode

At the time, this felt powerful.

No files.
No scripts.
Just action.

But imagine wiring your entire house by taping wires on top of the walls.
That’s what inline JavaScript became.

✔ Easy for beginners
❌ Impossible to scale
❌ Hard to debug

Eventually, the industry politely agreed:
“Yeah… let’s not do this anymore.”

3. External .js Files: JavaScript Grows Up a Bit

Next came separation — the first sign of maturity.

<script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode 
// script.js
alert("Hello world");
Enter fullscreen mode Exit fullscreen mode

This was revolutionary back then.

HTML became structure.
JavaScript became behavior.

Still:

  • No modules
  • No bundlers
  • No imports

You still opened the file in a browser and hoped for the best.

Debugging Before console.log: The Age of Alerts 😄

Here’s a fun truth many new developers don’t know:

alert() was our debugger.

alert(x);
Enter fullscreen mode Exit fullscreen mode

That’s it.

You wanted to know if a variable changed?
Alert.

Loop not working?
Alert.

Logic broken?
Alert… again… and again… and again…

It was annoying.
It interrupted everything.
But it worked.

Only later did browser consoles arrive — and quietly save our sanity.

4. The Browser Console: A New Learning Playground

When developer tools appeared, everything changed.

  • Internet Explorer Dev Tools
  • Firefox + Firebug (legendary)
  • Chrome DevTools (game-changer)

Suddenly you could type:

console.log("Hello");
Enter fullscreen mode Exit fullscreen mode

And JavaScript answered back.

For learners, this felt like talking directly to the language.
For many of us, this is where JavaScript finally clicked.

5. javascript: URLs — The Weird Uncle

Some early books taught this:

<a href="javascript:alert('Hi')">Click</a>
Enter fullscreen mode Exit fullscreen mode

It worked.
It existed.
And now… it mostly lives in history books.

Unsafe.
Messy.
Forgotten.

Fast-Forward: JavaScript Today Is Everywhere

Now let’s jump ahead.

Modern JavaScript isn’t just something you “open in a browser.”

It’s something you run, deploy, ship, and scale.

And this is where beginners often feel overwhelmed — sometimes even broken.

(That emotional collision between simple JavaScript and modern JavaScript is exactly what led to The One Frontend Interview Question That Broke My Confidence After 100 Interviews.)

Let’s walk through the modern world — calmly.

Modern JavaScript: The Many Ways It Runs Today

1. Node.js — JavaScript Escapes the Browser

This was the biggest revolution.

node app.js
Enter fullscreen mode Exit fullscreen mode 
console.log("Hello from Node");
Enter fullscreen mode Exit fullscreen mode

Suddenly:

  • JavaScript ran on servers
  • Powered APIs
  • Automated scripts
  • Built backend systems

No browser required.

JavaScript wasn’t a toy anymore.
It became infrastructure.

2. Browser DevTools — Still Powerful, Still Relevant

DevTools today are insanely advanced:

  • Breakpoints
  • Network inspection
  • Performance profiling
  • Memory analysis

Yet, for learners, the console is still a safe sandbox.

Type.
Test.
Break things.
Learn.

3. Modern HTML + ES Modules

Remember when everything lived in one file?

Now we write JavaScript like grown software:

<script type="module" src="main.js"></script>
Enter fullscreen mode Exit fullscreen mode 
import { greet } from "./greet.js";
Enter fullscreen mode Exit fullscreen mode

Clean.
Scalable.
Native.

No hacks.
No tricks.

4. Package Managers: Real-World JavaScript

This is where beginners usually panic.

npm init
npm install lodash
npm run start
Enter fullscreen mode Exit fullscreen mode 
"scripts": {
  "start": "node index.js"
}
Enter fullscreen mode Exit fullscreen mode

But here’s the truth:

This is just automation.

Package managers didn’t complicate JavaScript —
they just made large projects possible.

5. Frameworks & Tooling: The Modern Stack

Today, JavaScript often runs through tools:

  • React
  • Vue
  • Angular
  • Svelte

Usually started with:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Behind the scenes:

  • Bundling
  • Hot reload
  • Optimization

Tools like Vite, Next.js, Astro quietly handle the chaos — so you can focus on logic.

6. Online Playgrounds: Learning Without Setup

For beginners, this is a blessing:

  • CodePen
  • JSFiddle
  • StackBlitz
  • Replit

No installs.
No errors.
Just code.

Perfect for experiments, demos, and teaching.

7. Beyond Node: New JavaScript Runtimes

JavaScript didn’t stop evolving.

Now we have:

  • Deno — secure, modern
  • Bun — insanely fast 
deno run app.js
bun run app.js
Enter fullscreen mode Exit fullscreen mode

Same language.
New power.

8. Serverless & Edge: JavaScript in the Cloud

JavaScript now runs:

  • At the edge
  • In serverless functions
  • Close to users

Platforms like:

  • Cloudflare Workers
  • AWS Lambda
  • Vercel Edge Functions

This is JavaScript at planetary scale.

The Real Lesson: JavaScript Never Changed — The World Did

Here’s the quiet truth:

JavaScript didn’t become complicated.

The problems got bigger.

We went from:

  • Alerts
  • Buttons
  • Simple scripts

To:

  • Global apps
  • Distributed systems
  • Real-time experiences

And JavaScript grew with us.

So if modern JavaScript feels overwhelming, remember:
You’re not failing.

You’re just standing where the road gets wider.

And every great journey starts with a simple alert box saying:

“Hello, world.”

Top comments (0)