From Angular to Machine Code: Understanding the Code Journey
Written on
Chapter 1: The Angular Code Journey
Have you ever considered the journey your Angular code embarks on before being executed on a machine? This article will take a closer look at the various tools that facilitate the smooth and efficient operation of Angular code within a browser.
In this discussion, I will focus primarily on the widely-used JavaScript execution environment, V8.
Section 1.1: The Role of the Angular Compiler
To start, let’s delve into the Angular Compiler, which has evolved from the original 'ngc' to the more advanced Ivy (comprising 'ngtsc' and 'ngcc') since Angular 9. The Angular Compiler is responsible for processing Angular-specific features, including decorators, templates, and styles. Its key functions include:
- Compiling Angular templates and styles into JavaScript.
- Extracting metadata from Angular decorators (like '@Component' and 'Injectable') and converting them into static object properties.
- Generating additional code necessary for rendering and creating objects.
The 'ngtsc' extends the TypeScript compiler ('tsc') and employs its transformers and plugins to convert Angular-specific code into TypeScript-compatible syntax. Ultimately, it acts as a transpiler that translates one source language to another, though we won’t delve deeply into that topic here.
Section 1.2: The TypeScript Compilation Process
Angular utilizes the TypeScript compiler ('tsc') to compile code into JavaScript. As previously mentioned, Angular enhances this compiler by adding hooks before and after the compilation phase to validate and optimize the TypeScript code. Once Angular completes its processing, the TypeScript compilation phase begins, producing JavaScript that is ready to be executed in a browser.
Chapter 2: The JavaScript Engine
Now that we have our JavaScript code, it requires a JavaScript engine for execution. All modern browsers include such engines, with Chrome utilizing the V8 engine.
The V8 engine functions as a virtual machine, akin to the Java Virtual Machine (JVM), requiring bytecode for execution. To facilitate this, V8 offers various compilers and interpreters. A notable interpreter is Ignition, which translates JavaScript into bytecode and interprets it line-by-line.
At last, the V8 virtual machine executes this bytecode on the native machine. However, running code in a virtual machine can be slower; hence, V8 includes optimization compilers to enhance performance.
Section 2.1: Optimization Compilers in V8
For frequently executed functions, V8 compiles these directly into machine code, as machine code execution is significantly faster than bytecode. Over the years, several optimization compilers have emerged, including Crankshaft, TurboFan, SparkPlug, and Magleve. These compilers optimize specific code paths rather than compiling the entire codebase. The interpreter, like Ignition, gathers metadata to inform the optimization process.
This on-demand compilation, conducted at runtime rather than before, is known as Just-In-Time (JIT) compilation.
With that, our code reaches its final stage, executing directly on the machine. 😌
Explore the fundamentals of Angular and its deployment process in this introductory video, perfect for those beginning their journey with Angular.
This tutorial provides a comprehensive overview for beginners, focusing on Angular and TypeScript, guiding you from the basics to practical implementation.
Want to hire me as a Web Development Freelancer or Tutor? Email Me!
Thank you for being a part of the In Plain English community! Before you leave, please remember to clap and follow the writer!
Follow us: X | LinkedIn | YouTube | Discord | Newsletter
Check out our other platforms: Stackademic | CoFeed | Venture | Cubed
If you're tired of blogging platforms that require you to navigate algorithmic content, try Differ.