Namaste 🙏🏼

Welcome to my blog. Today I have come up with an interesting topic in the world of software development. We gonna talk about build artifacts in Angular Project.

Have you ever wondered what are these files ?

These files appear when you try to build your angular project. We gonna discover this and learn importance of build artifcats in Angular project.

Imagine a fictious world of Angular having 4 super heroes, The Code Avenger, The Web Wizard, The Browser Magician, and The Script Guardian. Lets see how they are guiding the world of Angular.

Let's dive into it!

Introduction

Whenever you try to build your angular project, there are some bunch of files generated which are typically known as angular build artifacts. There are various files generated among these, vendor.js, main.js, polyfills.js, and runtime.js play vital roles in your application's performance, compatibility, and functionality.

Lets understand file by file and try to know its importance and significance

Vendor.js : The Code Avenger

This file is like the hero behind the scenes, assembling a powerful arsenal of libraries and dependencies to save your app from chaos.

Purpose:
vendor.js is a key part of the Angular build artifacts, responsible for encapsulating third-party dependencies and external libraries. When Angular combines all these dependencies into one file, it makes the loading process more efficient. This means fewer times your browser has to reach out for different parts, making everything load faster.

The contents of vendor.js can be broadly categorized into two main types:

1. Angular Libraries:

• This includes the core Angular framework, Angular modules, services, directives, and other essential components.
• Angular libraries encapsulated in vendor.js provide the fundamental infrastructure for your application.

2. Third-party Dependencies:

• External libraries and packages that your application uses are also bundled into vendor.js.
• Examples include popular JavaScript libraries like RxJS for reactive programming, lodash for utility functions, and other dependencies specified in your project's configuration.

How it works?

• Angular's build system, such as Angular CLI, analyzes your project's dependencies based on the configuration files (package.json and others).
• It identifies the external libraries and packages your project relies on.
• The build process bundles all identified third-party dependencies into a single file, vendor.js.
• This bundling step helps minimize the number of HTTP requests required to fetch external resources when the application is loaded.

Significance:

• By bundling all external dependencies into a single file, the overall size of the file can be optimized.
• Smaller file sizes contribute to faster loading times, particularly important for improving the user experience, especially in scenarios with slower network connections.
• External dependencies usually change infrequently compared to the application code.
• Caching vendor.js allows browsers to store this file locally, reducing the need to fetch it again when users revisit the application.

Main Js : The Web Wizard

As the central figure, this script weaves the elements of your application together, casting spells to create a seamless and magical user experience.

Purpose:

Main.js is the friendly guide, steering the ship through the coding seas. It's the storyteller, turning a bunch of code into a real-life, user-friendly adventure. In the tale of your Angular journey, main.js is the main character, ensuring every piece of the puzzle fits snugly together. It's the glue that binds your app's tale, making sure every click, animation, and user journey unfolds like a well-scripted scene in the play of digital life.

The contents of main.js include

1. Application Code:

This includes all the custom TypeScript and Angular code written for your application. Components, services, directives, modules, and other custom logic are part of this file.

2. Module Definitions:

Angular applications are organized into modules. The module definitions specifying how the application is structured are included in `main.js`.

How it works?

• When a user opens an Angular application, the browser loads main.js as the entry point.
• The execution of main.js initializes the Angular framework and sets up the application environment.
• main.js is responsible for dynamically loading other parts of the application as needed.
• It initializes the Angular application by bootstrapping the root module, kicking off the process of rendering components and establishing the component tree.

Significance:

• main.js contains the logic necessary to initialize the Angular application, starting from the main module defined in your application.
• The file plays a key role in rendering the initial components of the application.
• As the main entry point, it sets the stage for the dynamic creation and rendering of Angular components.
• For large applications with lazy-loaded modules, main.js orchestrates the dynamic loading of additional code as users navigate through the application.

Pollyfills.js : The Browser Magician

This script performs magical feats, making your app compatible with various browsers by conjuring up the necessary spells and tricks.

Purpose:

Meet polyfills.js, the magical wordsmith conjured up during the mystical build process of your Angular saga. This JavaScript virtuoso isn't just any file – it's like a wizard's wand crafted to tame the wild seas of cross-browser chaos.

In the enchanted world of web development, browsers play by their own rules. That's where polyfills.js steps in, donned in a cloak of code, armed with the power of polyfills. Think of these polyfills as tiny sorceries, whispering ancient secrets to browsers that missed the memo on the latest JavaScript trends.

The contents of polyfills are

• JavaScript code that provides missing functionalities in older browsers.
• Examples include polyfills for features introduced in ECMAScript 6 (ES6) and later, such as Promises, Array.from(), and Object.assign().
• Code that emulates modern features in environments lacking native support.
• Shims are similar to polyfills but are often more comprehensive, addressing broader aspects of compatibility.

How it works ?

• During the build process, Angular's build tools analyze your project's configuration to identify which polyfills are needed based on the targeted browsers.
• The appropriate polyfills and shims are then included in the polyfills.js file.
• polyfills.js is typically one of the first scripts loaded in the browser when the Angular application starts.
• This ensures that the necessary polyfills are available before the rest of the application code is executed.

Significance:

• Different browsers have varying levels of support for modern JavaScript features. Polyfills bridge the gap, enabling your Angular application to run consistently across a wide range of browsers.
• Developers can leverage the latest JavaScript features without worrying about whether they are supported in all targeted browsers. polyfills.js takes care of ensuring compatibility.

Runtime.js : The Script Guardian

As the last line of defense, this script stands guard during the runtime, ensuring smooth execution and protecting your app from unexpected threats in the digital universe.

Purpose:

Enter the realm of runtime.js, the unsung hero born from the enchanted forge of Angular app creation. Crafted during the mystical build process, this JavaScript sorcerer is more than just lines of code – it's a living essence, a digital spirit that breathes life into your Angular adventure.

Picture runtime.js as the guardian of the Angular realm, entrusted with a sacred mission: to introduce the Angular runtime and compiler. It's like the wise elder who imparts knowledge to the app, teaching it the art of dynamic component creation and the magic of template compilation within the very heart of the browser.

The content of runtime js includes:

• The core Angular runtime that powers Angular applications.
• This runtime includes the essential components needed for Angular applications to run, such as change detection and dependency injection mechanisms.
• The compiler is responsible for translating Angular templates (HTML with Angular-specific syntax) into executable JavaScript code.

How it works ?

• Angular supports both Ahead-Of-Time (AOT) compilation and Just-In-Time (JIT) compilation.
• runtime.js is particularly crucial for JIT compilation, where templates are compiled in the browser at runtime.
• When an Angular application is loaded, runtime.js works alongside the Angular runtime to dynamically compile Angular templates into executable code.
• This dynamic compilation process allows for the creation and rendering of components on the fly.

Significance:

• JIT compilation allows for smaller bundle sizes during development, as templates are not pre-compiled into the main build.
• Developers can benefit from a faster development cycle without the need for separate compilation steps.
• The templates of Angular components, defined using Angular-specific syntax, are translated into executable JavaScript code by the compiler logic included in runtime.js.

Wooooohoooooo, that was it.. you made it and thanks for being with me till the end.

So, in this vast digital playground, our Code Avenger steps up, weaving a safety net of libraries and dependencies, like a tech superhero gearing up for battle. Meanwhile, our Web Wizard, with a touch of whimsy, brings the interactive magic to our user interfaces, painting a colorful and user-friendly canvas.

Enter the Browser Magician – the unsung hero behind the scenes, making sure our creations play nice with every browser out there. But let's not forget the quiet champion, the Script Guardian, keeping watch over the runtime show, ensuring our digital scripts run smoothly through the ever-flowing river of time.

In this grand tech tale, these digital myth-makers remind us that behind every click, every animation, and every seamless experience, there's a bit of magic and a lot of guardianship happening in the background. Here's to the tech enchanters making our digital adventures both magical and reliable!

I hope you liked my idea of converting a blog into a fictional characters and understanding their importance.

Thank you for reading,

Happy Coding, Happy life

This side Devesh Korde, signining off