Building Our Own Java Script

Hey everyone! I’m thrilled to be here to talk about something we all know and love—JavaScript. But here’s the twist: we’re going deeper today. You see, JavaScript might be everywhere, but how many of us actually know what’s happening behind the scenes when we hit ‘run’? It’s not magic—it’s pure engineering beauty. So, let’s take a ride through the engine room and break down how JavaScript—and interpreted languages like Python and Ruby—really work.

We all write code and see it run, but what’s the secret sauce? Today, I’ll show you the real mechanics that make JavaScript fly. It’s time to pull back the curtain and reveal how things truly work—from the first line of code to the magic that happens when it hits your screen. Spoiler alert: JavaScript’s secrets are anything but boring.

Before we jump into the deep end, a little about me, I’m Bruno, a tech leader at N26, where I help build platform engineering tools that our web engineers use to create incredible products. Monorepos, CI pipelines, and web infrastructure—that’s my world. I’m a big fan of programming languages in general, especially React—but don’t judge me too hard on my front-end skills when we hit the demo. It’s all part of the fun!

I was just watching some of the earlier talks on React Native, and honestly, my mind was blown. Did you know React Native has become this powerful? And the craziest part? The technology driving React Native is the same thing powering the browser. We’re living in a time where web technology is merging and converging in the coolest ways possible, and I’m here for it.

Yeah, you heard that right! The console objects you use every day for debugging—it’s not part of JavaScript. It’s a gift from the runtime. Wild, right? That’s just one of the quirky things about how JavaScript interacts with the environment it’s running in, and today, we’re going to uncover many more surprises.

Let’s talk about V8, the JavaScript engine powering Chrome. It’s not just fast—it’s an engineering marvel. V8 doesn’t just execute your code; it turbocharges it. When you load a website, V8 grabs the JavaScript file, shoves it into a parser, and transforms it into an Abstract Syntax Tree (AST)—a data structure that represents your program. But that’s just the start.

Once the AST is built, Ignition, V8’s interpreter, jumps into action. It walks through the AST, executing each node, but here’s where things get slick: if V8 detects that a part of your code is running hot—let’s say you’ve got a function that’s being called over and over—it passes it over to TurboFan, V8’s Just-In-Time (JIT) compiler, which turns your JavaScript into blazing fast machine code. Now, that’s what I call turning your code into a Ferrari.

Engines get a lot of love, but here’s the real secret: it’s the runtime that gives JavaScript its superpowers. The browser runtime is what gives you things like the window object, the console, and all those fancy APIs we use to interact with the web. None of those are part of JavaScript itself—they’re injected by the environment. Mind blown yet?

If you’ve ever worked with Node.js, you’ve noticed that the runtime is different. Instead of DOM manipulation, you’re working with things like file systems, HTTP requests, and sockets. That’s the runtime in action—tailored to the environment you’re running in. This is why companies like Bun and Deno are pouring resources into building faster, more efficient runtimes. They’re using different engines like Zig and Rust, but they’re still harnessing the power of JavaScript.

Alright, now that you’ve got a taste of how V8 and runtimes work, let’s zoom in and see what happens when you write a simple JavaScript statement like let result = 1. What happens when you hit ‘run’? We’re about to step into the brain of JavaScript.

Step One: Lexical Analysis—Turning Code Into Tokens
The first thing that happens is lexical analysis. The JavaScript engine reads through your code, character by character, and breaks it down into tokens—the fundamental building blocks. Think of it as the code’s DNA, with tokens representing keywords, operators, literals, and more. Without tokens, JavaScript wouldn’t know what’s what—but tokens themselves aren’t enough.

Step Two: Parsing—The Brain Behind the Scenes
Next comes the parser, which takes the tokens and builds the Abstract Syntax Tree (AST). This tree represents the structure of your code but isn’t running anything yet. It’s like a map of your program that V8 uses to understand the big picture. Once the AST is built, we move into interpretation and compilation, where the real magic happens.

Step Three: The Interpreter—Turning the AST into Action
Once the AST is ready, Ignition kicks in. It walks through the tree, node by node, and interprets what each part of your program should do. But that’s not the end. Remember TurboFan? If a part of your code is running hot, TurboFan compiles it into machine code, which makes it run even faster. It’s like watching your code go from walking to flying.

Here’s a fun thought: the engine runs your JavaScript code, but the runtime gives it all the tools to interact with the world. In the browser, that means the DOM, the console, and all those APIs we use daily. In Node.js, the runtime gives you access to file systems, networking, and much more. It’s like the difference between a car engine and the road—you need both to get anywhere!

JavaScript is changing faster than ever. Companies like Bun and Deno are building new runtimes to push the limits of what JavaScript can do. Bun is using Zig and JavaScriptCore (from Apple), while Deno is leveraging Rust. These new runtimes are built for performance and security, which means faster apps and better developer experiences.

Now, I’ve talked a lot about ASTs, interpreters, and engines, but it’s time to see it all come to life. In this live demo, I’m going to show you exactly how a JavaScript program gets broken down, interpreted, and executed. We’ll walk through the lexing, parsing, and interpreting phases so you can see the magic happen in real-time.

JavaScript isn’t just a language—it’s a journey from code to execution, and today, you’ve seen how the engine and runtime work together to make it all happen. Whether you’re building a small app or working on the next big thing, understanding how JavaScript works behind the scenes can make you a better developer.

In the end, JavaScript is more than just a language we write—it's a powerful system of engines and runtimes working behind the scenes to make our code come to life. By understanding how JavaScript is interpreted and executed, we unlock the potential to build faster, more efficient, and more innovative applications. Keep exploring the magic beneath the surface!