Recently in our main application built with Angular 19, we encountered a perplexing issue: after deploying to a WebLogic server, certain functionalities on the UI broke completely without any error messages. Below is the technical deep dive into how we diagnosed and resolved the issue, which revolved around unexpected empty chunk files generated during the Angular build process.

Introduction — When the Error First Appeared​

Some of the functionalities on the UI broke completely. There was no console errors or warnings. The angular production build was successful without any errors, yet the deployed frontend failed immediately.

This was specific to Weblogic server. The application worked fine on any other server like Tomcat, websphere etc.

This led us into a detailed debugging journey across build pipelines, server configurations, and module graphs.

Angular Design Patterns and Best Practices​

Why choose Angular ?​

1. Batteries Included

• Angular development team has already made serveral decisions for you.

2. Google Support

• Angular is backed by Google, which means it has a large community and a lot of resources available.

3. Community

• Angular has a large community of developers who are willing to help you with any questions you may have.

4. Tooling

• Eg. Angular CLI, Testing

5. Typescript

• TypeScript is a superset of the JavaScript language that adds type checking and other features to the language, ensuring a better developer experience and security for web development.

6. RxJS

• Library for reactive programming using Observables, which makes it easier to work with asynchronous data streams.
• RxJS also provides mechanism for state management, which is a common requirement in modern web applications.

7. Webpack

• Webpack is a very powerful and versatile bundler, and it is thanks to it that the framework manages to make some interesting optimizations such as tree shaking and lazy loading of bundles

What are AI Agents?​

AI agents are (semi) autonomous systems that interact with environments, make decisions, and perform tasks on behalf of users.

• Autonomy: Can perform tasks without continous human intervention
• Decision-making: Use data to analyze and choose actions
• Adaptation: Learn and improve over time with feedback

Eg. ChatGPT is an Agent on top of an LLM (like GPT-4o)

Agents vs LLLMs​

Agent - Perform specific tasks and makes decisions based on its environemnt LLMs - Focuse on understanding and generating human-like text

Why AI Agents might be Essential​

• Automate repetitive tasks, freeing up human resources for more complex activities
• Hande dynamicand real-time environments like finance or customer service
• Tailor user experience based on individual preferences

Artificial Intelligence​

AI is a vast field focused on creating intelligent systems that can perform tasks usually requiring human intelligence, such as perception, reasoning, and decision-making. It encompasses a range of techniques and approaches, including machine learning, deep learning, and generative AI.

Machine Learning (ML)​

ML is a subset of AI focused on developing methods that enable machines to learn from data and enhance their performance on specific tasks. It is commonly considered the simplest form of AI.

Neural Networks​

A neural network is a computational model inspired by the human brain, consisting of interconnected layers of nodes or neurons that process and transform data through learned patterns and weights. It is commonly used in machine learning to recognize complex patterns, make predictions and solve tasks by training on large datasets.

Deep Learning​

Deep learning is subset of machine learning that utilizes multi-layered neural networks to automatically learn and extract features from large datasets. These deep network can model complex patterns and perform tasks such as image and speech recognition with high accuracy by heirarchically processing data through multiple layers.

Computer visiion​

Computer vision is a field of artificial intelligence that enables computers to interpret and understand visual information from the world, such as images and videos. It involves the use of algorithms and models to analyze and make decisions based on visual data, often mimicking human visual perception and cognition.

What started as a curiosity turned into a desirable hobby. After having discovered Canva in 2022, I started taking insipiration from various designs in Canva and Pinterest and created simple graphics for Watsapp Status and Instagram. Having this on hands experience, it helped me understand how to make something attractive and eye catching within a limited space and with limited use of words.

I enjoy spending hours on canva, but at the same time, I have gained creative and valuable skills while doing it on hands.

I came across this course from Robin Williams about principles of Great design and it surely benefited me from my existing knowledge. The course is well structured and here are some of the important points taken from the course.

The principle of Proximity​

Group related items together. Physical closeness implies a relationship. Proximity does not mean that everything is close together - it means elements that are intellectually connected should be visually connected.

In light of recent events, there's been some confusion about the polyfill.io service and polyfill.js. This article aims to clarify the differences and address some concerns.

The Polyfill.io Incident​

News recently surfaced about the polyfill.io service injecting malicious code into JavaScript assets fetched from their domain. This article provides a detailed account of the incident.

Understanding Polyfills​

According to MDN, a polyfill is a code snippet, typically JavaScript on the web, that provides modern functionality on older browsers lacking native support. For instance, if you want to use the latest JavaScript APIs like array filter or map—supported by Chrome but not IE7—you'd need a polyfill to ensure seamless functionality.

8 Years ago…

AngularJS was very popular library and talk of the town.

The Software product had a requirement of providing a search solution with display of tabular data / pagination etc. with some UI animation.

It was decided by the tech lead and the management to go with AngularJS and there could be various reasons for it, possibly:

• AngularJS was popular framework
• Going forward all the new features in this software product had to be developed using AngularJS
• It is always exciting to work on a new technology irrespective of figuring out if it actually is needed.

This feature was released and praised, but over the years, there have been no instances of this library being used for any other features, reasons:

• Continued usage of the legacy framework, it being the obvious choice
• The rising popularity of Angular2 over AngularJS causing lack of time and interest.
• Lack of resources / technical skills in AngularJS

So, this huge product had AngularJS as a low hanging fruit, used only for one single feature.

However, security fixes to AngularJS library were patched whenever available.

In this blog post, I am thrilled to share the story behind my proudest Pull Request (PR) yet. PR#458 wasn't just another contribution but a significant milestone in my journey as a software developer. It was a challenging task that pushed me to my limits, and in overcoming those challenges, I learned valuable lessons that have shaped my approach to coding.

By the Numbers​

Before we delve into the story, let's take a moment to appreciate the sheer scale of this Pull Request. It comprised nearly 10 individual commits, introduced close to 2,800 new lines of code, and astonishingly, resulted in the deletion or modification of over 314,400 lines across almost 1,000 files.

History​

The project I worked on has a rich history spanning almost two decades, evolving from a Windows application to a browser-based web app with a diverse tech stack. This enterprise application has made careers of many software engineers, which means this codebase had been touched by many software engineers. With wide tech stack such as CPP, Java and Dojo framework on the UI, over the years, it accumulated tech debt, and my role primarily focused on UI enhancements and refactoring.

The need for a change​

The accumulation of tech debt prompted a thorough review of the codebase to identify areas for improvement:

• Removal of unused assets and code snippets.
• Refactoring of legacy code to improve readability and maintainability.
• Elimination of support for outdated browsers.
• Streamlining of build scripts to remove unnecessary generated files.

Working on legacy code has its own advantages and in this post I want to talk about how I enjoy and appreciate working on code that is dated as old as 15+ years.

You do not always get to start a project from scratch. Any software product usually evolves over time and ensuring that all the future developments are robust requires considerable efforts.

With technology, digitization and access of internet, things are moving ahead at rapid pace. I feel that User experience (UX) is the most valuable skill that everyone should possess.