DEV Community: Paresh Awashank

Rule Engines

Paresh Awashank — Wed, 11 Mar 2026 05:06:17 +0000

‘Rule Engine’ In the name itself it has a word ‘Engine’ and it may be because many times it handles complex processing to produce the desired output from the provided inputs. Now why I choose this topic to write a blog on??? Because recently I came across one scenario in which the client loss the revenue only because of one small flaw in the Rule Engine, and many time it is better to learn from the other’s mistake and hence I thought to wright something on the ‘Rule Engine’!

So, the analogy behind the word Engine (which we normally use for the mechanical objects) is, both Mechanical Engines and Rule Engines converts some inputs into the desired outputs. The mechanical Engine converts fuels into the motion, and Rule Engine converts the data into the decision or in simple word Mechanical engine powers machines and Rule Engine powers decisions.

Rule Engine is treated as a ‘Brain’ of the business process and hence it is an important part if the software system. It consists of the rule on the provided input to process the data and give the output. There are many different types of rule engines with complex definitions you will find on the internet, but I would like to talk about it in the simple words. So as per my understanding we can divide the Rule Engines in two types based on the place it is written in, ‘SQL Based Rule Engine’ and ‘Code Based Rule Engine’.

SQL Based Rule Engine
In this type of rule engine, most of the business rules are written on the database level using Stored Procedures, SQL Functions, Triggers etc. The data comes into the database tables and based on the data and using different conditions using filters, joins, case statements the system produces the output. This is the most common approaches where the database is used heavily.
Some of the advantages of the SQL Based Rule engines are,

Faster execution as the logic works directly on the database side
Centralized rules handling on the database level
The rules are easy to manage and handle when they are more related to the data Along with the advantages, there are disadvantages as well,
When the number of rules get increases, it becomes difficult to handle, and the queries get increasingly complex and hence becomes difficult to maintain
One change in the query sometimes impact on multiple rules

Code Based Rule Engine
As the name says, in the code-based rule engines, the business rules are written the application code programming languages like C#, Python, Java etc. Here the rule conditions are written using the programming language syntax for conditions like If-Else, Case Statements, Configurations etc. This approach is mostly used when the rules are more complex and need frequent changes and need to be flexible.
Some of the advantages of the Code Based Rule engines are,

It has a better readability
The rules are written in the structured way
We can write the unit test cases to test the rules and the changes
It is flexible to implement new changes The disadvantage for this approach is, if the rules are hidden in the assembly, it is difficult to see as they are hidden in the code.

Irrespective of type of the Rule Engine, the biggest change with the Rule Engine is managing the rules properly. Over the time, the business keeps adding the new conditions, exceptions and new cases. And because of this, the rule engine becomes increasingly complex. Hence below are some best practices we can implement while building or managing the rule engines,

Keep the rules modular – Avoid writing rules in one query on in one code block, rather divide them into the logical blocks
Documentation – Document the Rule Engine rule and changes properly. You can use of the technic like ADR (Architecture Decision Record) etc.
Maintaining the Priority/Order – Keep the Priority/Order of the rules in mind as rules are mainly condition based
Test the Edge Cases – Make sure to test all the edge cases and negative scenarios along with the other affecting applications (regression testing).
Maintain the Logs – Logging is helpful in tracing the issues or the flow

Conclusion
A rule engine is a Brain of the application; it is a decision-making code part of the application. One small mistake in the rule can cause the major financial or functional impact. So whenever, we design or modify a rule engine, we must be very careful, test is thoroughly and design it in a way that it is clear, modular, maintainable and reliable. Because at the end of the day it is not a SQL Based or Code Based – It is a core logic that drives the business decisions!!

Happy Coding!

AutoGen Vs LangGraph Frameworks

Paresh Awashank — Thu, 02 Jan 2025 04:15:38 +0000

We all know AI is growing very fast and a part of our Elastik Team’s culture ‘Learn and Grow’, we learn something new every quarter. In Q4 of 2024, we made some really good progress in our AI custom application ‘AI Wizard’ to convert it from RAG based framework to the Multi-Agent Framework. We had so many discussions and brainstorming sessions around it to finalize the design and the frameworks to use for it and finally chose two multi-Agent frameworks ‘AutGen’ and ‘LangGraph’ to start with so that we can compare the different parameters between them like performance, ease of use, time required to build the new features etc. So, we decided on two teams and provided them with two different learning paths to start learning on these frameworks and build one POC each to understand how it works. Once we got confidence, we started the actual implementation and converted the application within the sprint of 3 weeks successfully. As I was also involved in this conversion project, I was also kept a goal to learn the AI Agent and Multi-Agents framework, and in this blog, I would like to write some details on what are these frameworks and what are their key features. So, let’s start.

What Are These Frameworks?

AutoGen: It’s a user-friendly framework designed to simplify the process of creating multi-agent systems. It focuses on easy integration and customization, making it ideal for beginners and smaller teams.
LangGraph: This framework emphasizes structure and scalability, allowing developers to create complex systems with a clear flow of communication between agents. It’s great for large projects where you need detailed control over agent interactions.

What are the Key Features?

1. Ease of Use

AutoGen: This is a plug-and-play experience. Using this you can quickly set up agents with vey less coding. When you have a short time, this is a perfect tool.
LangGraph: This requires comparatively more initial setup, and you will need to define the detailed workflows for this.

2. Flexibility

AutoGen: This provides the pre-built templates and tools, and hence it may feel like limited for the customization.
LangGraph: This is the most flexible and hence most of the customizations are possible with this.

3. Scalability

AutoGen: This is mostly suitable for small to medium projects. For large projects might require additional workarounds.
LangGraph: As this is mainly require for the flexible and customizable applications, even if you have number of agents or workflows it’s possible with this.

4. Learning Curve

AutoGen: As this require minimal coding and as it is based on the pre-built tools it is easy to learn.
LangGraph: It has a learning curve but it add really good value in the developer’s knowledge base.

When to Choose What?
Use AutoGen if:
- You want to finish the project quickly.
- You are new to AI development.
- Your project is small.

Use LangGraph if:
- You are working on a large and complex system.
- You are comfortable with more advanced coding.

What is the takeaway?
AutoGen and LangGraph are both very powerful tools to build multi-agent frameworks, and both has their own key features. As per my analysis, based on your project requirements you can choose either of them. If your project is small, easy and if the developers are new then you can use AutoGen, where on other side if the project is largen with lots of scenarios and if your developers are skilled, then you can choose LangGraph!

Happy Coding!

Angular 16 - Developer Specific Features

Paresh Awashank — Tue, 03 Oct 2023 16:49:47 +0000

Hello There! Continuing my Angular versions new features learning series, and this the time for the current latest Angular version Angular 16. So far Angular is adding so many interesting features in previous launches and lets see what it is offering in this version. You can find my previous version blogs here - Angular 15, Angular 13&14 & Angular 12. Lets see the Angular 16 new developer specific features now.

Angular Signals

In this release, Angular has introduced the first reactivity primitives and those are ‘Signal’, ‘Computed’ and ‘Effect’. The signals are used to set or update the values and notify the consumer the values have been changed. It can hold a simple value or a complex data structure. Here is the example of signal

//declare signal
const  color = signal(‘Red’);

//get the signal value
console.write(‘The selected color is ’ +  color()); //Output - Red

//set the signal value
color.set(‘Green’); .
console.write(‘The selected color is ’ +  color()); //Output - Green

There are more functions which signal provide like, update, mutate etc.

The **Effect **is used to notify consumers that the signal’s value is changed. For example,

effect(() => { console.log(`The current color is: ${color()}`); });

And this callback will execute when the signal value is changed. Effects are rarely used in an application code but there are few scenarios where it can be used, like syncing data in local storage etc.

Enhanced Hydration

Basically, Hydration is the process of restoring the server side rendering application on the client side. This enhancement in Angular can improve the page load performance. Initially, when Angular was rendered on the page, the framework would discard the existing DOM nodes and used to re-render them from scratch. But now, developers can opt-in Angular reusing these existing DOM nodes.

Faster Build with the esbuild

Angular 16’s CLI builder is based on the esbuild. An esbuild claims ‘An extremely fast bundler for the web’ This new thing is improving the build time significantly in this new version. To enable this feature, developers need to add the configuration in the angular.json

"architect": { "build": { "builder": "@angular-devkit/build-angular:browser-esbuild",

Standalone Component Migration and Scaffolding

The standalone components were first introduced in Angular 14 and they became more stable in Angular 15. Now Angular 16 has introduced the migration semantic and standalone migration guide and these tools are very useful in reducing the time required to move the code to standalone components. Also you can generate the whole new angular application with standalone components with below command

ng new --standalone

Required Inputs

This is the easy way to mark the component or directive input as required. This new feature was newly introduced in Angular 16. Below is an example,

export class EmployeeDetails {
  @Input({ required: true }) employeeName: string;
}

The above are some interesting developer specific new features introduced by the Angular 16. There are also few breaking changes developer needs to keep in mind while upgrading to the version 16

Supported Node version for Angular 16 is node.js v16 or v18
Supported Typescript version for Angular 16 is TS version 4.9 or later.
Angular compatibility compiler (ngcc) is removed - The view engine was removed in Angular 13 and now ngcc is removed in version 16.
Angular package format changed.
ReflectiveInjector has been removed.
Updated behavior for Router.createUrlTree.

Conclusion

So these are the details on the angular version upgrade, developer specific changes. Same as the previous version upgrades, angular has brought new and interesting features in Angular 16 as well! Looking forward for more in the future!!

Happy Reading! Happy Coding!

Open AI: Fine Tuning vs Text Embedding

Paresh Awashank — Fri, 30 Jun 2023 09:59:34 +0000

We all know nowadays AI is booming everywhere, and it has divided people in two categories, one in favor of AI and others are against it. Some people are saying it will help people to complete their tasks quickly and others are saying it will make people lazy. But whatever the debate is, I personally feel that it completely depends on the mindset of the person who is using it and utilizing its power in the correct way. It is kind of the same thing as the ‘knife’ if it is in the criminal's hand it may harm people but if it is in the cook's hand, it will help in creating delicious food. Personally I feel it has awesome advantages and it definitely helps software developers like me, and hence I am trying to become more involved in AI and its applications. And as a part of it, this quarter I kept my quarterly SMART goal to understand the difference between two methodologies to train OpenAI with the custom dataset. As we all know that the OpenAI has information available till March 2021 which was publicly available by that time. So now, if you want to train OpenAI with your custom data, it has provided some ways to do it. Fine Tuning and Text Embedding are two of them. Let's understand what they are.

Fine-Tuning: Customizing Language Models Fine-tuning is a process of training a pre-existing language model on a custom dataset as per user’s requirement to make OpenAI information more suitable for the specific applications. OpenAI's fine-tuning process involves taking a pre-trained base model and training it further on a dataset that is specific to the custom application. Here are some benefits of the Fine Tuning training approach.

Reduces Time for Training - As we saw in an introduction that the Fine-Tuned models are pre-trained models and hence it allows users to leverage the knowledge and parameters learned during pre-training. And hence it requires less resources and also reduces the time than training the models from the start.

Transfer Learning - Again, as the Fine-tuning models are pre-trained, they can learn very effectively and efficiently. This transfer learning allows for better performance even if the target task has limited training data.

Customization- Fine tuning allows users the ability to customize models and its behavior according to specific custom requirements. Developers can modify the model’s response or output format as per the requirement of an application. This kind of control over models allows great flexibility and adaptability.

Along with the above advantages, Fine-Tuning also has few disadvantages as well, and below are the some of them,

Limited Generalization - Even the fine tuning modes are highly optimized for the specific tasks it was trained on but it may lack the broader understanding and generalization capabilities of the original pre-trained model. The fine-tuned model may not perform as well on tasks or domains outside of its limited training scope.

Overtraining - Fine-tuning a model on specific data can end into overtraining, where the model can perform poorly on unseen or slightly different data.

Dependency on Pre-training - Fine-tuning is completely dependent on the pre-trained model. If the pre-training process has issues, it can impact the efficiency of the process.

Embedding Open AI APIs: Generalized Language Models An embedding is a list of some numbers. When we train AI with any information, then each block of data is stored a vector which is nothing but each block represented as some floating number. Text embedding refers to the process of representing text data in a numeric format where words or documents are mapped to vectors. Here are some benefits of the Text embedding approach.

Dimension Reduction - In general, dimension reduction is the transformation of data from a high-dimensional space into a low-dimensional space so that the low-dimensional representation retains some meaningful properties of the original data. Text embedding techniques can effectively reduce the dimension of text data. Instead of representing each word or document as a high dimensional thing, the text embedding compresses the information into lower dimension vectors.

Transfer Learning - Similar to Fine-Tuning, pre-trained text embeddings can be transferred to new tasks or domains with data. This transfer learning speeds up the training process and enhances the performance of models.

Improved Generalization - Text Embedding captures the contextual meaning of the words which enables better generalization compared to simple representation of data. This enhances the performance of various natural language processing.

Below are the some of disadvantages of Text Embedding,

Loss of some fine information - Because of the dimension reduction approach of the Text Embedding, some fine grained information loss. Some characteristics of words or documents may not be captured in the required way in lower dimension vectors.

Limited Coverage - The pre-trained text embeddings may not cover all the words it phrases in given text data.

Context Related Limitations - The Text Embeddings depend on the context and the surrounding words in the particular document. This can create a problem of different embedding of the same word or phrase in different documents.

Summary -

It's important to note that the advantages and disadvantages of both Fine-Tuning and Text Embedding can vary depending on the specific use case, dataset, and requirements. Proper understanding of these factors is very important for effective and responsible utilization of these techniques.

Happy Reading!

Angular 15 New Features

Paresh Awashank — Sun, 04 Jun 2023 17:09:13 +0000

This has been the 3rd quarter in a row now, I am focusing on learning new things Angular brings in its major upgrade. So far I learned Angular 12, 13 and 14 and this time I am focusing on Angular version 15. Angular version 15 was released in November 2022 and basically it is an update to Angular 14. It has few new features and it is more stable than the previous versions. Now let’s focus on some of the new and interesting things Angular is offering in version 15.

Standalone Components - In Angular 15, the standalone components are more stable. Standalone components were first introduced in Angular 14 and you can find more details here about what are standalone components and how it made the developers life easy.

NgOptimizedImage Directive is Stable - NgOptimizedImage directive was submitted as a “developer preview” feature in Angular version 14.2, and now it is fully operable in Angular 15. This helps to reduce the download time of the images in your application. This improves image loading performance by enforcing best practices. NgOptimizedImage ensures that the loading of the Largest Contentful Paint (LCP) image is prioritized by:

Automatically setting the fetchpriority attribute on the image tag
Lazy loading non-priority images by default
Asserting that there is a corresponding preconnect link tag in the document head

Stack Traces are more Helpful - Another feature which will make developers life easy is that the stack trace in Angular are cleaner and hence more useful to understand the debugging stack.

Strict Mode Enhancements - Angular 15 introduces enhanced strict mode settings, which provide additional checks and stricter enforcement of coding practices. With stricter templates, type checking, and error handling, developers can catch potential bugs and issues at compile-time, resulting in more reliable and maintainable code. It also helps developers to catch the bug.

Enhancement in Angular Materical - The new version introduces a wide range of new components, including data tables, expansion panels, and sliders, expanding the options available for developers to create rich and interactive user interfaces. Also, many existing components are refactored based on the Angular Material Design Components (MDC) for the Web.

Improved Angular CLI - The Angular Command Line Interface is more improved in Angular version 15. It introduced several productive enhancements including faster compilation time, enhanced error reporting etc. These updates empower developers to generate code, and perform common tasks more efficiently.

Conclusion: Angular 15 introduces lots of exciting features and improvements, further solidifying its position as a leading JavaScript framework. From performance enhancements, Stack trace enhancement and strict mode improvements, Angular 15 empowers developers to build faster, more reliable, and highly interactive web applications. By staying up to date with the latest versions of Angular, developers can use the power of these features and deliver exceptional user experiences. But don’t forget that the major upgrades also come with some breaking changes as well, so before you upgrade to the Angular version 15, you might need to review and refactor parts of your Angular application.

Happy Reading!

What is New in Angular 13 & 14

Paresh Awashank — Mon, 03 Apr 2023 05:43:58 +0000

Hey there.. I am back… From the last couple of quarters I am focusing on different new things in Angular. A couple of years back, I started working on Angular for the first time with version 9 and from last year I am trying to keep myself upgraded on Angular even if I need to work on older versions sometimes as a part of my daily project work.So to keep this learning as a practice, initially, I learned Angular 12 and wrote a blog on my learning and new things in Angular 12, then in this quarter I learned new things in Angular 13 and 14. Few weeks back I also explored the Angular upgrade from Angular 9 to Angular 14 and wrote a blog on the same.
In this blog I will be writing what are the new things Angular has included in Angular 13 and Angular 14. For this blog, I took a reference from an Angular official document and few other information sources on internet.

So, let's start with ‘What is new in Angular 13’. Angular 13 is released in November 2021

Node JS older than 12 is No longer supported - Angular 13 now only supports Node JS version 12.0 or greater. The latest version of Node.js when Angular 13 released was the 16.13.0. There are some breaking changes due to this update.

Typescript 4.4 support Module - In Angular 13, the support for TypeScipt is added from 5th October 2021. The TS versions older than 4.4.2 are no longer supported.

APF Changes - The Angular Package Format(APF), has been streamlined and modernized to better serve developers. Also, the APF support to Node Package Exports updated, and this will help developers for inadvertently relying on internal APIs that may change.
RxJS Version Updated - Basically in Angular, RxJS is used for the Subscriber and Observable. It is also used for State Management in Angular. In Angular 13, the version of RxJS is upgraded from 6.x to 7.4.

Improvements to Angular CLI - In Angular 13, now supports the use of persistent build cache. The persistent build cache is a feature that caches build results on disk (under the .angular/cache folder). And this results in up-to 68% improvement in build speed. Users will need to make changes in angular.json to enable this.

View Engine is no Longer Available - I have explained what is View Engine in my Angular 12 Blog. In Angular 13, View Engine is completely replaced with the Ivy Engine. It is the next generation compilation and rendering pipeline. The reason behind removing the View Engine is ‘Performance’ and hence after removing the View Engine, angular 13 became a little lighter.
IE11 Support Completely Removed - In Angular 13, the Internet Explorer 11 (IE11) support was completely removed, and because of it Angular 13 became lighter because it required the polyfill files which are now removed because of this.
Improvements in Validations - In Angular 13, now we can enable Email, Max, Min etc validations dynamically.

Other Changes - There are few more changes in Angular 13 below,
- Validation error messaging improved
- Resolved bugs in $localize and now it become more stable
- Improved the TestBed which will enable better job of tearing down test modules

Now, let’s talk about the Angular 14 new features. Angular 14 was released in June 2022. Below are the new things in Angular 14

Standalone Components - Standalone Components are the components which do not depend on other things. Now in Angular 14, no need to import the modules in the Module.ts file file which was required before to do. Developers now can import it directly in the component.ts file. To make this change, developers need to use ‘--standalone’ param while generating the new component. This will add the ‘standalone: true’ property in the @component directive of the newly generated component. The benefit of this new feature is, if developers have multiple components which use the different modules, no need to add them in module.ts, rather developers can add them only in required components.
Extended Developer Diagnostics - In previous versions than Angular 14, if there was an error in the file, it was only showing in the code behind file but was not if I am defining the HTML UI template. Now, in Angular 14, it will also show in the HTML template with the details.
Page Title Accessibility - In previous versions than Angular 14, it was very difficult to change the title of the page, but now it is very easy to set it up dynamically.
Typed Angular Form - In Angular 13, in the reactive forms, the system was allowed the untyped form controls without any error, but now from Angular 14, it will give developers an error message if the developer uses the Untyped form. To resolve it, developers will need to use the class name ‘UntypedFormControl’
Angular CLI Enhancement - There are some enhancements in the Angular CLI over the previous versions,
- ng analytics - Now, your angular project can be directly connected with google analytics to check the information. By default it is disabled but you can enable it if you want.
- ng completion - When running the commands, developers generally make typos, to resolve this problem the Angular CLI will provide you the auto-completion for your command and will will reduce command line typo errors
- ng-cache - Now you can enable/disable the browser cache using the command line.

Summary- So, based on the above discussion, one thing is very much clear that Angular is adding a number of interesting and advanced features in every major release which will make the developers life easy by providing developer specific features; better experience by providing analytical and performance related features. And it is still continuing, so as a developer we can definitely keep an eye on the each major release and keep upgraded the project and the ourself.

Happy Reading!!

What is New in Angular 12

Paresh Awashank — Mon, 03 Apr 2023 05:27:26 +0000

Hello All, in this quarter (Q3 2022), I set my learning goal to learn Angular 12 because of the project requirement. I completed the course with an assignment and then I also checked the Angular official blog site to understand what is new in Angular 12. I previously worked on older versions of angular and hence I could understand them easily. I am writing this blog based on the official angular blog details and with my analysis on related areas, so that it will be easy to understand the changes in simple words. So, let's start. I have added the details pointwise as per my understanding below,

Big Step in Shifting from View Engine -> Ivy Ivy and View Engine are basically the compilers. In Angular, the compiler compiles the Angular code into JavaScript (The Browser understanding scripting language). Ivy Compiler was introduced in Angular from Angular version 9 with default Engine and before that, only View Engine was used. To make the system faster, Angular has deprecated the View Engine, and this will be completely removed in future major releases. Now, what is Depreciation? So, there are two similar words ‘Deprecate’ and ‘Sunset’. Deprecation means the things will work with it, but you will get the warning for it. And Sunset means it is no longer available and you cannot use it. So, View Engine is now deprecated, and they are moving closer to the Ivy compiler. The advantage of Ivy is, it doesn’t compile the previously compiled code again & again unless there is any change and it also reduces the bundle size, so it reduces the compilation time and run time as well due to less bundle size. Also, AOT (ahead of time) compiler is enabled in Ivy by default which helps fixing the errors on time.

Improvement in Styling The major improvement in the styling in Angular 12 is Support of inline Sass. Earlier if you wanted to use Sass, you needed to use it externally, but now it is available in @component decorator. Sass is Syntactically Awesome Style Sheet and it is an extension to the normal CSS. Also, the latest version of Angular now supports Tailwind CSS. Tailwind CSS makes it quicker to write and maintain the code of your application and it uses the utility-first framework, which means it provides a low-level utility classes to build the design for example ‘bg-yellow-200’ will replace ‘background-color: rgba(229, 231, 235, 1);’, ‘m-4’ is replacement for ‘margin: 1rem;’ and so on.

Protector – Yes or No This is not an actual change, but this is just a thought process Angular has kept in front of the community about whether the Protector (which is an end-to-end testing framework) should be available in future or not because of it’s less use. So, after review and analysis Angular will take decision in upcoming versions whether to keep or remove the Protector framework

Nullish Coalescing operator support The Nullish Coalescing operator (??) was widely used in Typescript and it was very helpful to the developer to minimize the code to check null/undefined/blank values. Now the same operator is available in Angular Version 12. For Example,

Old Code
{{age !== null && age !== undefined ? age : calculateAge() }}

New Code
{{ age ?? calculateAge() }}

Transition from old i18n Message IDs I18n or Internationalization is the process of making your web application compatible with rendering text in multiple different languages. There were some problems using this i18n message ids and hence Angular is replacing it with the new canonical message ids which are more reliable and error free and this format will reduce the unnecessary translation invalidation.

Deprecating support of IE 11 Angular keeps themselves up to date. Hence removing support for old browsers, allow Angular to focus on providing modern solutions and better support to users. So, in Angular 12 the deprecated warning message is included, and the complete support is removed in Angular 13

So, these are some major changes along with some other changes in Documentation, Strict Mode in CLI, Webpack5 Support, ng build command for production etc. are available now in Angular 12 and there are more available in current latest versions of Angular. Many more changes are on the way in upcoming versions so that the development is more and more exciting!

Happy Reading!

Angular Version Upgrade - My Experience

Paresh Awashank — Wed, 28 Dec 2022 10:44:25 +0000

Before writing this Blog, I was very curious about the Angular Version Upgrade process because I had never done it before even if I worked on Angular projects in past organizations. This time finally the moment came and in one of the technical calls, my client informed us that they are planning to upgrade the all Angular project to the latest versions. As this conversation happened before 30th November 2022, Angular 14 was the latest version at that time (now it is Angular 15). Because I was waiting a long time to learn this activity; without wasting any time I raised my hand and conveyed my interest in involving myself in this activity. At the same time the Q4 was about to start; we have a great culture ‘Learn N Grow’ at Elastik Teams and as a part of it we set at-least 3 goals each quarter. One is a learning goal, second is project related goal and last but not the list is the goal related to giving back to the community. And then I decided to keep the goal to upgrade two angular projects to the latest version (version 14).

So, I started my analysis to upgrade the Angular projects. I was assigned two relatively less complex projects to start with. One project was at Angular version 11 and another was at Angular version 9. Hence I decided to start with the project with version 11 because that would be easy to upgrade 3 versions (11 to 14). So based on it, I searched for the process of Angular version upgrade on the internet and I found the official Angular website which provides the detailed explanation and steps to be performed for upgrading from any version to any higher version.

Here the actual upgrade process started for Version Upgrade 11 to 14. There is no recommended way to upgrade directly from more than one upgrade at a time, for example, in my case, I should not directly upgrade from 11 to 14, rather it should be step by step, from 11 to 12, then 12 to 13 and at last 13 to 14. Angular has provided the different configurations to choose different options, like ‘Complexity of the Project’ where you can select either Basic, Medium and Advanced level. Also it provides an options to choose Other Dependencies like

I use ngUpgrade to combine AngularJS & Angular
I use Angular Material
I use Windows

Based on the options selection, it changes the steps to follow. As per my requirement I selected ‘Basic’ complexity and option #2 and #3 from the other dependencies because the project was using Angular Material and on Windows. Even if I followed every step mentioned in the checklist, there are few additional things I needed to do and I would like to discuss them with you.

Comparatively, the upgrade from 11 to 14 was smooth for me because of the less complex project and less breaking changes as well. Below are some extra steps than the steps provided by official website, which I followed

Need to choose correct Node.js version before run the update command, in my case, I needed to install node version 14.20.0
I Needed to run the ‘npm install’ command every time I completed the major upgrade process like from 11 to 12, 12 to 13 and 13 to 14, if not I was getting errors for some dependencies.
If you are using git or any repository for your project, you will need to check-in/commit the changes made by each major upgrade. Otherwise, the update command won’t execute and throw an error.

Next upgrade project was from Angular version 9 to 14. Again, as mentioned above, it is not recommended to upgrade directly from 9 to 14, we will need to update the versions step-by-step. The configuration for this time is the same as in the last project, except the versions. I kept the node version also the same, that is 14.20.0. The upgrade process itself updated a number of places with new compatible code. Also, I followed all the same steps as the previous upgrade in this upgrade and below are some more extra steps I needed to perform.

If you are getting an incompatible peer dependency related error, then for each major Angular upgrade command, you will need to use ‘--force’ flag at the end of command
If you are getting a python related error which says ‘Can't find Python executable "python", you can set the PYTHON env variable.’ then execute below command

npm install -g windows-build-tools

The latest installed typescript version (4.6.4) along with the upgrade process, makes the type casting rules more strict and you will get errors for mismatched data type assignments. For me, I got errors if Date typed variables assigned to date Strings etc. In that case I needed to convert the string into date explicitly. Also you will get an error if any property is used elsewhere before initialization etc.

And after completing all the steps mentioned above, I successfully upgraded the projects to the Angular version 14.2.12 and Angular Material version 14.2.7.

Apart from the above experience I learned a few more things about the version system in the package.json file. For example the difference between tilde(~) and caret(^) symbols in prefixes of the package versions. So, the version in the package.json is always in the form of major.minor.patch. **Tilde **freezes the major version and minor version and updates the package to the latest bug fixes or patch version, where **Caret **freezes the major version and updates the minor version along with the patch.

Angular official update guide has provided very detailed information and covered all the points needed to follow while upgrading the project, but above are some extra steps I needed to follow which can be very subjective to the project application or environment you are using, but I hope this information may help in similar scenarios as above. Thanks.

Happy Reading!

Data Migration of Encrypted data

Paresh Awashank — Thu, 07 Jul 2022 09:57:53 +0000

This blog is about the process of data migration of the encrypted data from one application to another application which uses different cryptographic algorithms, without affecting the current functionality. This requirement came into picture when I was working on the project to refactor the application from one framework to another. The old framework was having inbuilt Encryption and Decryption methods written in encapsulated classes with no access for the source code. Hence it was very difficult to ‘break the wall’ to implement the same logic used for Encryption and Decryption.

Then I discussed the same problem with some experts. And finally after doing lots of analysis and a number of discussions, I got the solution. So, instead of breaking an existing wall, I decided to ‘construct a new wall’, which will behave exactly the same as the old one.

So, I decided to create an utility which will do the data migration for the Encrypted data (like passwords and credit card numbers), but with some different Encryption Algorithm, in such a way that all the functionalities using the old system data or the code written for encryption/decryption will work as is, without making any modification.

After doing some more analysis on the latest cryptographic algorithms, I came across the technique which is being widely used nowadays, which is ‘Advanced Encryption Standard (AES)’. This is a symmetric block cipher, chosen by the US government to protect the information. Symmetric cipher is the type of encryption, where a single key is used for both encryption and decryption. In the old system the keys were already stored for the previously used algorithm and I planned to use the same keys for the new methodology also. Block Cipher takes a block of plaintext and generates a block of ciphertext. In AES, it converts plaintext into a block of 128 bits and returns ciphertext as a block of the same 128 bits.

The AES algorithm uses the different key sizes based on different versions of the algorithm. So, it supports 128 bit, 192 bit and 256 bit keys for three different versions. I planned to use the version with a 128 bit key, but here I face one challenge because the length of the keys already created in the old system was not enough to create the 128 bits key, and hence in the logic I needed to add some extra characters on the run time to an existing key.

Then I created the utility, which first takes the copy of old encrypted data in another new column, so that if anything wrong happens, I can use the backup to restore the data back to the original column, then it converts old encrypted data into plaintext using the old decryption algorithm. Then the new method with the AES algorithm converts the plaintext into a new ciphertext using a new encryption algorithm and replaces the old ciphertext with the new one. Once all data migration was done, I just needed to replace the old decrypt method with a new Decrypt method which uses AES and that’s it! Everything worked as expected!

Happy Reading!!

‘Materials UI’ or ‘Chakra UI’ what is better for React?

Paresh Awashank — Mon, 27 Sep 2021 08:52:00 +0000

Introduction:
Now a days in IT, React JS framework is the most favorite framework for developing the Single Page Applications. React is an open-source JavaScript library that helps you to build top interface for both the Web as well as Mobile apps. Along with React Library, it is equally important to choose the UI library for react, which will provide the number of prebuild controls like buttons, list, grids etc. with great styling features and control properties which can be easily configured.

In this blog we will compare two React UI component libraries ‘Material UI’ and ‘Chakra UI’, which comes under top 10 React JS supporting UI libraries and we will see what is the better to use among them. We will mainly compare them based on three factors ‘Ease of Modification’, ‘Ease of Use’ and ‘Reliability’ and also few others.

Analysis:
First of let’s talk about ‘Ease of Modification’ with these two UI libraries, the Chakra UI is having clean class names structure. Now what does that mean, for example if you see the HTML source code build in both libraries, you will see the material UI adds so many classes to each HTML tags created for material component, where Chakra UI adds comparatively less classes. Also, Chakra UI provides easy manual manipulation in CSS classes, where Material UI has way more options to do it for way more components than Chakra UI. In additions, Material UI components has more feature and properties which make them more Flexible.

Then let’s talk about second point of comparison, which is ‘Ease of Use’. Since Material UI is having lot more controls and their too many numbers of properties, this will naturally lead to more time to understand them and decide which component to use in some scenarios. Since Chakra UI is newer, it is currently easier to pick up controls from it. In terms of documentation, both options have good documentation but I think material UI will win in it, but it takes more time to go through. So, both libraries are easy to use but Chakra is easier than Material UI.

Now the last point ‘Reliability’, here in terms of reliability and active community, there is no competition and Material Ui is the definite winner here. Material UI has 70.9K starts as of now on GitHub and strong community makes it most popular UI framework. The Chakra UI is created only 2 years back and currently having over 20.6K stars as of now on GitHub, but during this short period of time Chakra UI has earned a lot of positive comments from top React developers as it is very extensible and customizable.

Along with the three criteria’s (‘Ease of Modification’, ‘Ease of Use’ and ‘Reliability’), for Responsiveness, with Material UI we need to add sperate code to make the controls responsive, where the Chakra UI provides a built-in support with very few code changes. Also, Chakra UI provides some built -in themes like Night Mode which makes applications night vision compatible and saves more energy when user use these kinds of themes in compare with bright themes.

Below are some top clients of Material and Chakra UI,

Material UI
1. Spotify
2. Amazon
3. NASA
4. Netflix
5. Unity
6. ShutterStock
Chakra UI
1. Bonton
2. LUGGit
3. Development
4. Webridge
5. Vytruve Web Platform
6. Orbital Chat
7. PLUGIN Corp.
8. You Got Bud
9. Write0

Conclusion:
So, after this analysis, which one should you choose? Basically, if your app is smaller or medium size, and if you want something quicker, the Chakra UI would be the definite choice for you. Because it is easy to learn and lightweight. Material UI has long term reliability and if you want you create larger applications you can go with Material UI as it has scalability and grate active community.

Happy Reading!!