DEV Community: Santosh Yadav

Open Source, Open Heart: My Next Big Step

Santosh Yadav — Sun, 04 Jan 2026 19:24:28 +0000

Hey friends I wish you all a happy new year and hope you had a great time with your family, and I hope 2026 brings some great news in your life. I wanted to share a career update with all of you.

The important announcement

I am happy to announce I am joining CodeRabbit 🤩 as Principal Developer Advocate, Open Source.

I first came to know about CodeRabbit via Twitter, and later my friend and my new manager Aravind joined them, I was able to hangout with Aravind and CodeRabbit founders at 2024 GitHub Universe,

Aravind had a chat with me about how the team is planning to sponsor many more OSS Developers, I was able to connect Aravind with some of amazing Open Source Developers during last one year. I know Aravind since early 2021 and we even got the chance to meet during my trip to India in 2023.

This year I read CodeRabbit wants to share $1 million in Open Source Sponsorships I realized how much the vision of CodeRabbit and what I like to do for Open Source Community (as I have donated more than $10,000 of my own money so far) aligns.

During GitHub Universe 2025, I met some people in the team Erik, Hendrik and our CEOs(Harjot and Gur).
For me when I look for a new job, I always prefer working with nice people, and that's exactly what I found while speaking to everyone. Everyone is nice and believe in the product. Aravind mentioned he wants me to do what I am passionate about, and Arvind is one of the nicest person I have known, and I really wanted to work and learn from him.

On 14th of November, just after my 39th birthday I received the offer and I decided to accept the offer and finally decided to follow my passion which will be my full-time job.

I am looking forward to collaborate with more people and communities in Code Review space and learn from each one of you.

Send me a DM if you want to learn more about what I do and how we can collaborate in future.

Long-time dream

I started contributing to Open source in 2019 and soon I started writing and speaking at meetups/conferences. Which was followed by becoming GDE for Angular and GitHub Stars.

2019 was a great year for my professional career, I was able to invest lot of time doing open source as there was very limited work at the job, and my manager asked me do whatever I like, I invested that time getting involved more in the community.

But in 2020 it became difficult as I moved to another job, where I had to move more focus and I soon met with another burnout.

I decided to take a break and I envisioned my dream role, which was to help developers and its something I enjoy doing, but there was no answer, do such role exist? Out of curiosity I sent the below tweet

// Detect dark theme var iframe = document.getElementById('tweet-1279345084178153472-128'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1279345084178153472&theme=dark" }

My friend Wassim was very helpful and shared that's exactly what he does and such role exists and it's called develop advocacy and explained me difference between Developer Relations and Developer Advocacy the roles I kept hearing about a lot after 2020 and I think you all maybe aware of it too.

But soon I found COVID was at peak and it's better to stick with the job I had.

After becoming GitHub Star in November of 2020, I decided to write about my journey and shared that Developer Advocate is the role I want to do one day.

// Detect dark theme var iframe = document.getElementById('tweet-1479562904835747841-256'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1479562904835747841&theme=dark" }

I was able to do it partially at celonis, I spoke at so many conferences at one point of time, my friends used to think I am a developer relation engineer.

My time at Celonis

After 3+ amazing years at Celonis, I decided to move on and accept a new opportunity. At Celonis I joined a team which ended up making a huge impact, we started building our monorepo growing from less than 20 projects to 430 projects by the time I left and under 100k lines of code to 4 million+ lines of code and helped increase overall realiability of Celonis product.

I was also lucky to follow my passion and speak at more than 20+ conferences across the world and my managers and team were always supportive of it.

I got diagnosed with diabetes type 2 last year, due to which I had to limit my community commitments, I once again realized I cannot continue doing so many conferences, live stream, and podcast while having a full-time job. 2024 and 2025 were mostly about focusing on my health.

[Boost]

Santosh Yadav — Sun, 27 Apr 2025 20:44:48 +0000

Giorgio Boa for Playful Programming Angular

Apr 25 '25

Angular's proxyConfig: Unlock a senior-level technique used by only 10% of developers

#angular #webdev #programming #javascript

Comments 8

5 min read

The Tree Shaking Journey in Angular: A Deep Dive

Santosh Yadav — Mon, 23 Dec 2024 17:08:33 +0000

Hey friends, how are you doing? This year, I tried a new Angular version and wanted to experiment with how the tree shaking works with the latest version, especially once the standalone components came into the game. The result surprised me, so let's learn what has improved and what you need to do to improve your build time and optimize your production bundle.

What is Tree Shaking?

Before we jump into the topic, let's understand tree shaking. The build tools we use can remove unused/dead code from your final production bundle; this is what we mean by tree shaking. Most Javascript tools today support tree shaking out of the box.

Let's take the code below, for example, where we have two methods, add and sub.

export function add(a,b){
    return a+b;
}

export function sub(a,b){
    return a-b;
}

Let's say we only consume the add function. What happened to the sub function? The build tools are smart enough to remove it from the final prod bundle, so you only get add, which is used in our code.

What is Nx

This blogs is not about Nx, but as we are going to use it, we should know about Nx, Nx is a build tool with monorepo support and can help improve your build time and optimize CI time.

Angular secondary-entrypoints

One more term used in this blog is secondary-entrypoints, I recommend watching this stream I did you YouTube

Tree Shaking with Angular libraries

For an extended period, tree shaking with Angular libraries is supported when using secondary-entrypoints, which is supported by ng-packagr.

And if you use Nx, Nx provides a secondary-entrypoints generator to work with the libraries.

Most of us use the above tools when we want our Angular application to drop dead code or do tree shaking.

But what if you dont need to do this anymore? Dont need a big statement, but you only sometimes need to do secondary-entrypoint for tree shaking.

Please use the standalone component by default. I am showing examples with the module if you cannot use standalone yet. This means you are not on Angular 14 or above. You will not see the tree-shaking advantages, but you can make your code future-proof, and as soon as you upgrade to Angular 16, you will get tree-shaking out of the box.

Let's dive into the code

I suggest writing some code to understand the entire tree-shaking process. For this purpose, I will use an Nx workspace to manage multiple projects, as it is my go-to tool for writing new code.

Create A New App

npx create-nx-workspace

✔ Where would you like to create your workspace? · tree-shaking-demo
✔ Which stack do you want to use? · angular
✔ Integrated monorepo, or standalone project? · integrated
✔ Application name · hello-world
✔ Which bundler would you like to use? · esbuild
✔ Default stylesheet format · css
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? · No
✔ Test runner to use for end to end (E2E) tests · none
✔ Which CI provider would you like to use? · skip
✔ Would you like remote caching to make your build faster? · skip

Library with single module exporting multiple components

One practice I have seen often in large codebases is having a God module. It's a made-up name, but the idea is to have one module export all the library's components. Talk is cheap; let's see the code to understand what we mean by God modules.

With Nx, we will keep our libraries under the libs folder; just a small piece of information with Nx 16 and above, you can keep your library anywhere within the workspace. Go ahead and run the below command to create god-module-lib if you notice we are passing the standalone=false flag as we want to use module for this library

npx nx generate @nx/angular:library --directory=libs/god-module-lib --buildable=true --name=god-module-lib --standalone=false --no-interactive

Let's add a few dummy components in this library and export via the module.

npx nx generate @nx/angular:component --path=libs/god-module-lib/src/lib/table/table --export=true --standalone=false --module=god-module-lib.module.ts --no-interactive --dry-run 

npx nx generate @nx/angular:component --path=libs/god-module-lib/src/lib/button/button --export=true --standalone=false --module=god-module-lib.module.ts --no-interactive --dry-run

In the next step, let's use this module in our Application; as the Application is created with the standalone flag by default, we will not find any modules, let's add GodModuleLibModule to our app.component.ts

import { GodModuleLibModule } from '@tree-shaking-demo/god-module-lib';

@Component({
 imports: [ RouterModule, GodModuleLibModule],
})
export class AppComponent {
 title = 'hello-world';
}

and let's use button component in the template app.component.html

<lib-button/>

Once added, let's run the build with the sourceMap flag, which we will use to generate the bundle report:

nx run hello-world:build:production --sourceMap

npx source-map-explorer dist/apps/hello-world/browser/*.* --html report/hello-world.html

Once you open the report, you will find 395 Bytes of code from the GodModuleLibModule. It only includes the button component code we use in our template. Now, do the same exercise on the Angular version you are using. I tried with Angular 14, and I got the code for both the Button and Table.

Angular is becoming smart at identifying dead code. If you have code with GodModule exporting multiple components, your app will still benefit from tree shaking.

But there is a catch again: What if we have modules for the Button and Table components that are being exported from GodModuleLibModule?

Convert Library to use multiple Angular modules

Now, in this exercise, we will split Table and Button to have their modules and re-export them via the GodModuleLibModule

Let's add ButtonModule under the button folder and TableModule under table.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from './button.component';

@NgModule({
 imports: [CommonModule],
 declarations: [ButtonComponent],
 exports: [ButtonComponent],
})
export class ButtonModule {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TableComponent } from './table.component';

@NgModule({
 imports: [CommonModule],
 declarations: [TableComponent],
 exports: [TableComponent],
})
export class TableModule {}

and update index.ts file

export * from './lib/god-module-lib.module';

export * from './lib/button/button.component';
export * from './lib/button/button.module';

export * from './lib/table/table.component';
export * from './lib/table/table.module';

Lets run the build and generate the report again

nx run hello-world:build:production --sourceMap

npx source-map-explorer dist/apps/hello-world/browser/*.* --html report/hello-world-individual-module.html

Oh, wow. The bundle size is almost double; it's 701 Bytes now, and you can see the code for the table. The module is part of your bundle, though it's unused.

Let's move to another exercise, drop the module, and use a standalone component.

Convert lib to use a standalone component

To convert to standalone, we do have a migration from Angular, but this is a small app; we can do it manually let's delete GodModuleLibModule ButtonModule, and TableModule files

Now go to button.component.ts and table.component.ts and update the below line

 standalone: false --> true,

after this update, your index.ts

export * from './lib/button/button.component';

export * from './lib/table/table.component';

It is much cleaner right now. We are just importing the components.

Next, go to your app and update the import in app.component.ts

import { GodModuleLibModule } from '@tree-shaking-demo/god-module-lib';

To 

import { ButtonComponent } from '@tree-shaking-demo/god-module-lib';

and 

imports: [GodModuleLibModule --> ButtonComponent],

We are all set to rerun the build and report, and wow, we have only 234 Bytes, and it includes only Button Code.

nx run hello-world:build:production --sourceMap

npx source-map-explorer dist/apps/hello-world/browser/*.* --html report/standalone.html

Using a publishable library

Let's create a library and publish it to see how tree shaking works:

npx nx generate @nx/angular:library --directory=libs/ng-publishable --publishable=true --importPath=@ngx-santosh/ng-publishable --no-interactive

Let's add a few components; we will go with standalone components:

npx nx generate @nx/angular:component --path=libs/ng-publishable/src/lib/accordion --export=true --no-interactive

npx nx generate @nx/angular:component --path=libs/ng-publishable/src/lib/grid --export=true --no-interactive

Let's publish the library and use GridComponent in our Application:

import {GridComponent, AccordionComponent} from '@ngx-santosh/ng-publishable';

@Component({
 imports: [GridComponent],
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrl: './app.component.css',
})
export class AppComponent {
 title = 'hello-world';
}

And add the Grid component to the template.

<lib-grid/>

lets run the build and generate the bundle again

nx run hello-world:build:production --sourceMap

npx source-map-explorer dist/apps/hello-world/browser/*.* --html report/hello-world-publish-libs.html

We still get the tree shaking with publishable libraries. The final code contains only 248 Bytes of grid component code, and once you add more components, you only pay for those components.

Another advantage of the secondary-entrypoint is if we are using any third-party library, such as lodash, Angular build can drop lodash if the component where lodash is used is not part of the code. What happens if we are using lodash but dont have a secondary-entrypoint? Does tree-shaking still work? Good news, yes, it will work without the secondary entry point.

Library with secondary-entrypoints

Why should we still read this section and go with secondary-entrypoints even though we have only been able to get the minimal code in the production bundle with standalone components in the exercise so far?

Remember, once your library becomes too big and has hundreds of imports, which is a common scenario for most developers working on the design system.

If you are not publishing your library on artifactory, I recommend splitting them into smaller libraries; if you are using Nx, you can get the build cache, which will help you improve your build and test times.

But for publishable libraries, where we need to bundle all code into a single package and publish on an artifactory, splitting to smaller libs is not an option; in this case, I recommend going with secondary-entry points.

Another advantage of the secondary-entrypoint is if we use any third-party library, such as lodash, Angular build can drop lodash if the component where lodash is used is not part of the code. What happens if we are using lodash but dont have a secondary-entrypoint? Does tree-shaking still work?
Good news, yes, it will work without the secondary entry point.

Some closing notes

If you are using Angular 14 or below, the exercise we did may not work to reduce your bundle size, but my recommendation is to start adopting standalone. Once you migrate to Angular 15, use ng g @angular/core:standalone to get the minimal code in your final production bundle.
The above suggestion applies to your application and library code.
For libraries with a lot of components,
- I recommend splitting them into smaller libs.
- If it is publishable, I recommend going with secondary-entrypoint.
With Latest Angular language service you get warning in IDE if you are importing unused Component
The new Angular compiler can warn you during build if you have unused import

The angular compiler is improving, and it's great to see we dont need to always reach out to secondary-entrypoints with libraries to get the advantage of tree shaking, so what are you waiting for? Adopt a newer version of Angular and get small bundles and better tree shaking.

I am also happy that developers can focus more on writing code and stop worrying about making the libraries tree shakable when using Angular.

You can find the code used in this exercise below

So go ahead and try this on our codebase and share your story. Did it help you and your team shave off some KBs from your prod bundle?

Shout out to my GitHub Sponsors for supporting my work on Open Source.

Never forget where you come from

Santosh Yadav — Sun, 10 Sep 2023 19:55:42 +0000

Photo by ROCCO STOPPOLONI on Unsplash

Last week, I was traveling to speak at CityJs + HalfStack Conf Belgrade, and suddenly, I realized how lucky I am to live this life.

I could not hold my tears in my flight from Vienna to Belgrade.

I went back in time when

I walked 8kms to my college so that I could save 8 INR/ 0.096 USD, so I can buy a vada pav for lunch.
Avoid taking shared auto while returning home from work so I could save some extra money for my daughter's treatment.
Could not afford to buy a bed and mattress to sleep on.
lived in tiny room in a slum.

I also realized how lucky I am to spend so much time with my wife and daughter.

There was a time.

I used to work more than 80 hours a week in a startup and used to be in the office for days.

I am lucky that I can hug my daughter every day.

I was so close to losing her.
I remember when she was born, I couldn't hold her in my arms, and I was scared for the next few months if I could ever do that.
I remember holding her in my arms when she came back from the hospital, and never wanted her to let go.

The realization that I lived a life once, where everything was a dream, and now I am living that dream.

This is what keeps me grounded and makes me realize that I should never forget where I came from.

I realized how lucky I am to live a life where I can fly to other countries without thinking about money.

The important lesson here is to remember where you came from and always be grateful for what you have.

For many, the life you are living is a dream.

Thank you to everyone for being part of my journey.

Thanks to my wife, who was always with me in my bad and good times.
Thanks to my daughter, who loves me the most.
Thank you to my friends who always support me.
Thank you to the Angular and Tech community for showing love and support.

Thanks to the GDE (Google Developer Expert) program for all the support (Travel and Stay) so I can present my talks at the conferences.

Thanks to my employer and friends at Celonis, I can manage my time traveling and caring for my family between work.

Shout out to my GitHub Sponsors for supporting my work on Open Source.

Angular: The Framework of Past, Present, and Future

Santosh Yadav — Thu, 06 Apr 2023 22:34:23 +0000

Photo by Drew Beamer on Unsplash

I started using Angular in 2017 when version 4 was released. And I have seen this framework growing since then. In this blog, let's see why Angular is a framework of Past, Present, and Future.

AngularJS and the Start of Angular

AngularJS was released in 2010 and was one of Google's first Open Source front-end frameworks. It was open-sourced and lived for 12 years before reaching the end of life in 2022.

AngularJS introduced a new way to write the html templates. It introduced directives like "ng-for, ng-if," which paved the way for many other frameworks and rendering engines.

The AngularJS team quickly realized it's difficult to maintain a vast codebase written in JavaScript. And a rewrite of AngularJS called Angular was announced in 2014.

Choosing the best tool for the job

Angular is known for deep diving into the existing tools before picking the best for the job. Let's see the tools chosen by the Angular team over the years.

Past

When Angular development started, Angular Team decided to use Typescript, which was very new in 2014, and many didn't like it. Some chose not to use it and moved to another framework where they could use Javascript.

But everyone has realized the true power of Typescript over the years, and most developers now choose and prefer Typescript over Javascript.

2014 was the time many build tools for Javascript started appearing. I remember using Grunt and Gulp. Even when the early version of Angular appeared (2.0), SystemJS was used, and developers had to configure everything independently. With Angular 4.0 Angular team introduced Webpack and CLI, and all the configuration was hidden from the developers. Webpack served as the best and most stable tool over the years. It became a tool trusted by many other frameworks and developers.

There was a time the Angular team considered introducing Bazel as the build tool. Bazel is a great tool, but introducing it might have complicated the development effort, as it is hard to understand. The angular team decided not to take that path.

Present

Angular still uses Webpack and has experimental support for esbuild. The team realized its time to move on and chose other tools better than Webpack.

CLI has improved over the years, enabling smooth migrations between Angular versions. Check out https://update.angular.io/

Future

After considering many build tools, Angular will invest in esbuild, which will be used for building Angular applications.

But vite is the hottest tool now; you said, yes team decided not to use it as it was not the best fit for building Angular applications. Still, it will serve applications using vite when you are doing the dev build.

Rendering Engines

Angular uses a compiler to build and produce the final build output, which generally goes through multiple tools. One of them is the rendering engine; the Angular team has iterated over the rendering engines numerous times, and Ivy is the current generation which has unblocked the Angular team to introduce great features like the Standalone component.

Focus on Reactivity

Past

Angular wanted developers to write more reactive code from Day 1 and chose the best tool present RxJs. For APIs like HTTP and Router, Angular used RxJs internally; even for EventEmitter RxJs Subject was used.

Present

RxJs usage has grown over the years, and more and more developers are using this powerful library. Still, many developers asked for Angular without RxJs. Many want better integration of Angular with RxJs.

Future

The angular team is experimenting with Signals, and there will be a public RFC soon. Signals will reduce the learning curve, which was required for RxJs. Still, it will also introduce APIs to better integrate with RxJs.

Change Detection

Past

Change Detection has always been a very critical part of any framework. The angular team introduced zone.js very early to take care of change detection.

Present

Angular still uses zone.js, but soon it started giving performance issues for large apps, and developers had to figure out how to improve the performance. OnPush change detection strategy is widely used to improve performance. Libraries like RxAngular allow you to disable zone.js but need some refactoring.

Future

We, developers, should focus on writing more quality code rather than caring about change detection. Yes, this is the policy the Angular team has decided to go with. With the introduction of Signals, zone.js will become optional, and you can care less about Change Detection strategies.

Do not leave anyone behind policy.

Angular has a release cycle of 6 months, which means there will be a new major release every 6 months. And the version has support for the next 18 months, which means if you have been on an Angular version for more than 18 months, chances are the version is not supported anymore.

But Angular has your back. For any new version release, Angular CLI offers an automatic migration. You need to run ng update and relax.

You can read the docs to update Angular between multiple versions

ng update

Great Set of features

Over the years, the Angular team has interacted more with the community and worked on some excellent features.

inject function

One of the most loved features of Angular is DI (Dependency Injection). We all love it. With inject, function Angular team made the developer experience even better.

Let's see an example before and after:

@Component({
  selector: 'app-employee-details',
  templateUrl: './employee-details.component.html',
  styleUrls: ['./employee-details.component.scss'],
})
export class EmployeeDetailsComponent {

  modes$ = this.route.queryParamMap.pipe(
    map((params: ParamMap) => params.get('mode'))
  );
  userName$ = this.route.paramMap.pipe(
    map((params: ParamMap) => params.get('username'))
  );

  employeeId$ = this.route.paramMap
    .pipe(
      map((params: ParamMap) => params.get('employeeId'))
    );
  constructor(private route: ActivatedRoute) { }

}

With inject function

@Component({
  selector: 'app-employee-details',
  templateUrl: './employee-details.component.html',
  styleUrls: ['./employee-details.component.scss'],
})
export class EmployeeDetailsComponent {
  modes$ = inject(ActivatedRoute).queryParamMap.pipe(
    map((params: ParamMap) => params.get('mode'))
  );
  userName$ = inject(ActivatedRoute).paramMap.pipe(
    map((params: ParamMap) => params.get('username'))
  );

  employeeId$ = inject(ActivatedRoute).paramMap.pipe(
    map((params: ParamMap) => params.get('employeeId'))
  );
  constructor() {}
}

Template:

<h1>
   Employee Details for EmployeeId: {{employeeId$ | async}}
</h1>

<h2>Current Mode: {{ modes$ | async }} </h2>

Standalone components

The angular community has been asking Angular Module less Angular for a long time. I still love Angular Modules, it still has their place when structuring your apps, but we can usually work without them. Not having Angular Modules reduces the mental modal and learning curve. So now we have Standalone Components, Standalone Component does not require to be registered with any Angular Modules, and it still has backward compatibility, meaning you can use them in an Angular Module.

import { Component, OnInit } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
  standalone: true, // Standalone flag to differentiate between component with module
  imports:[
    MatTableModule,
    MatPaginatorModule,
    MatSortModule
  ] // you can import Angular Module, Standalone Component/Directive/Pipe here
})
export class UserComponent implements OnInit{

  constructor() {
  }

}

Standalone APIs

To take the Standalone Component experience to the next level, Angular introduced Standalone APIs, its already available for Router and HttpClient, and even libraries like NgRx also introduced the Standalone APIs.

Let's see the code sample below to use Standalone APIs for Http and Router


providers: [
    provideHttpClient(),
       provideRouter(
      routes,
      withDebugTracing(),
      withEnabledBlockingInitialNavigation() //required for SSR
      withHashLocation(),
      withPreloading( PreloadAllModules),
      withRouterConfig({
        onSameUrlNavigation: 'reload',
      })
    ),
]

Standalone Component Migration

Of course, we now have Standalone Components but think about the effort you and your team have to go through to convert all components to Standalone, dont worry; the Angular teams have your back, run the below command and migrate all components, directives, and pipes to Standalone, Happy migration.

ng generate @angular/core:standalone

functional guards

Router guards are great, but we had to write a service every time we had to write a guard. It all changed with the introduction of the functional guard. Guards can be a function now. No need to write a class anymore.

const authGuard: CanMatchFn = () => {
  const authService = inject(LoginService);
  const router = inject(Router);

  if (authService.isLoggedIn) {
    return true;
  }

  return router.parseUrl('/login');
};

New Image Directive

It's 2023, and images are among the most critical reasons for bad LCP(Largest Conentful Page). You dont need to care about this anymore with the introduction of the NgOptimizedImage directive.

Listening to Community

Optional ZoneJS

If you are an Angular developer, you know what zone.js is. It is responsible for all the magic in Angular around change detection.

But it starts giving performance hits in large enterprise applications, and enterprise is where Angular shines.

Finally, we will have an optional zone for our Applications. Signals are coming to Angular, and it will make zone.js optional, and a good thing it's backward compatible. It means you can still have an existing app with zone.js and run these new components, which are signals side by side. There are ways to disable zone.js, but it's not very straightforward.

In the below sample signals: true property will land soon, but not available with 16.0.0-next.7 version

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-counter',
  standalone: true,
  signals: true, // you can still try this code by commenting this line
  imports: [CommonModule],
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss']
})
export default class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(n => n + 1);
  }

}

<p>counter works!</p>
{{ count() }}

<button (click)="increment()">Increment</button>

But Signals will bring more than just optional zone.js. you can read more on the RFC

https://github.com/angular/angular/discussions/49685

https://github.com/angular/angular/discussions/49684

https://github.com/angular/angular/discussions/49682

https://github.com/angular/angular/discussions/49683

https://github.com/angular/angular/discussions/49681

SSR and hydration

SSR in Angular has many issues today. SSR in Angular is less famous than other React or Vue-based SSR frameworks. The Angular team has started improving the SSR experience and released the first feature.

// Detect dark theme var iframe = document.getElementById('tweet-1643324830761259008-425'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1643324830761259008&theme=dark" }

Typed Forms

Angular has types of forms ReactiveForms and Template Driven forms. The community wanted forms to be typed for a long time, and it finally landed in Angular 14.

Yes, you can create typed forms now, and chances are you are already using them.

  form: FormGroup = this.fb.group({
    name: new FormControl<string>(''),
    salary: new FormControl<number>(0),
    age: new FormControl<number>(0),
    dob: new FormControl<Date>(new Date()),
  });
constructor(private fb: FormBuilder) {}

Conclusion

I tried to summarize all the fantastic things Angular is going to bring to you as a developer. I am looking at a great future investing in Angular as I did six years ago when I picked up Angular and transitioned from a .Net developer to Angular Developer.

Investing my time in learning and supporting the Angular framework was worth it in the Past, which is still rocking in the present, and I am sure with features like Signals, it will keep shining in the future.

How we built This is Learning Community

Santosh Yadav — Mon, 27 Feb 2023 00:15:51 +0000

Photo by Clay Banks on Unsplash

This is Learning was started in 2020 by @layzee. I presented how we built this community at the GDE summit in Berlin in Jan 2023. Over the last 3 years, this-is-learning and this-is-angular have grown over 150+ contributors and more than 2.5M views.

How It Started

In 2020 @layzee had a vision of starting a publication that is free and open to everyone. And he wanted to ensure everyone was free to express their views, and there should not be any gatekeeping.

I also joined the publication when it started, so I was one of the early contributors to this community.

Joining TIL as Co-Founder

In 2020 I was running my show called Tech Talks with Santosh, where I was streaming every week. After doing it for a year, I was getting burned out. I also called my friend Amandeep, and he suggested it's better to collaborate as you won't be able to scale it up.

When I was thinking about collaboration, there are 2 things I can do.

Onboard someone to run Tech Talks with Santosh together, but the show was in my name, and I wanted to keep using this channel in the future.
Collaborate with @layzee as I have known him since 2019, and admire his work for the community.

I decided to reach out to Lars and proposed that I join this-is-learning, and Lars was convinced, as we can focus on more areas other than blogs.

During our call, we exchanged thoughts on the values of the community,

We both wanted to ensure we kept the community free from any influence from outside.
Which means we will never take sponsorship.
Anyone interested in sharing knowledge can join the community with no gatekeeping.
Keep the bar low. No one needs to be an expert to join our publication; dedication and effort matter.

Other Initiatives

After joining the this-is-learning as co-founder, we decided to bring more initiatives to grow the community.
We started

This Is Tech Talks Podcast (https://www.youtube.com/@ThisisTechTalks)
This is Learning Newsletter (https://thisislearning.substack.com/)
Community Discord Server (https://discord.gg/REY2x8SJYk)
This is Angular guides (https://this-is-learning.github.io/rxjs-fundamentals-course/)
NgRx Essentials (https://this-is-angular.github.io/ngrx-essentials-course/)
RxJS Fundamentals (https://github.com/this-is-learning/rxjs-fundamentals-course)

How we added more contributors

Growing a community takes work. Our motto was to have a community that promotes Free, open, and honest software education.

To grow the community, we started reaching out to folks on Twitter and LinkedIn, and we reached out to the community members who were already writing blogs.

Reaching out to community members works excellently for us. Most of the community members writing and publishing our blogs came via this channel.

We also got some great contributors, like Deep, who took the initiative and started writing the newsletter, which he has been writing for over a year.

We also have Jay, who joined us as co-host for our podcast.

And 100s of other contributors who are very active in writing for the publication.

Where are we now

The community is growing monthly, and we have seen incredible growth over the years.

The community servers crossed 300 members, and our private discord of contributors struck 150+ members.

The blog post crossed 2.5M reads.

The podcast crossed 350 subscribers and 8k views.

How to join
We run multiple initiatives, and you can help the community in several ways.

Write blogs for TIL or TIA
Podcast.
Newsletter
Help writing educational content on GitHub (https://github.com/this-is-learning)

If you want to be part of the community reach out to Me or Lars , our community discord is open to everyone.

My year in review

Santosh Yadav — Wed, 14 Dec 2022 23:02:02 +0000

Photo by Mantas Hesthaven on Unsplash

This is going to be challenging to write. This year felt like my last 10 years combined. If you follow me on Twitter, you already know this was not the best year I had. I was expecting things to go right. We (my partner and me) gave it a lot of thought, and we decided to move to a new country. I could get a DevRel job in the future, and we will have a better life for our daughter. End of 2021 was doing all the documentation to move to Germany, which was very stressful.

Thanks to my friend Serkan for helping me get this Job.

Start of 2022

Finally, after all the processes, it was time to move, and I took my flight on 14th January 2022 to reach Germany. Due to a delay in my family’s Visa, I decided to move alone first to find a house for us, and they will join me in March.

The setback with the move

My family was able to get a visa appointment in March. I was growing restless as this was the first time in 13 years we were not together for so long.

Even after getting the appointment, our documentation was incomplete, and we got a month to submit all documents. The relocation agency assigned by my new employer did a lousy job.

I got COVID in March 2022, which made me feel more homesick, it was a tough time, as I had to manage alone, and my friend Serkan helped me with groceries.

Also, I started struggling financially because of multiple reasons:

I had savings of around 14k USD for the next few months, but I forgot I needed to pay taxes. I paid 9k USD in taxes after I moved.
I took a pay cut to move to Germany, expecting once my family joins me, I will have to manage my expenses in Germany.
Due to a delay in my family visa, I had to pay for rent in 2 countries and groceries and utilities.
I tried to reach out to some of my friends for financial help but decided not to take that path. I took some help from Vijay. He was generous to help whenever needed.

Glad I had some shares, which I sold to support my family for the next few months and sent some money from Germany.

Setback with Job

After coming to Germany, I struggled to get my family to Germany and find a house to stay in, because of which I couldn’t give my 100% to the Job.

Also, there were no Angular projects to work on for a long time, my friend Serkan tried to keep me busy with some Angular work, but things didn’t work out.

I also went into defensive mode whenever there was any issue in the project and I was asked questions. The reason was I already had burnout, and it was at its peak.

I asked my employer if I could travel to India to see my family, but it was never approved. They had the fear that I would not come back.

Fear of losing everything

I worked hard over the years to reach a point where my family and I could have a stable life.

I wrote about my life journey

// Detect dark theme var iframe = document.getElementById('tweet-1479562904835747841-969'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1479562904835747841&theme=dark" }

My family’s Visa was delayed every month, and the relocation agency had no idea about it. Even things not going well at work made me scared.

Many things went wrong:

With my job not working out, I wanted to quit but was scared of what in case I needed to go back to India.
My wife and daughter also had difficulty managing everything alone in India.
I was scared to write code, and I started hating code.

There were 2 options I could see:

Leave the job and go back to India and start from ZERO again.
Work at the Job for the next 2 years, which I was not enjoying.

But I learned some valuable lessons:

I was trying to force myself to enjoy the work, which I was not.
I realized it’s good to quit sometime rather than suffer.
I realized that staying at this job won’t do any good for my employer and myself.
I thought quitting this job would make me a loser, and I should fight to make it work. I was wrong. Quit if you are not enjoying it.

Help from friends

I was in depression for many months, and it felt like Twitter was the only place where I could be more open and talk to my friends.

After seeing my tweets, many friends reached out and spoke to me.

Special shout-out to Lars and Tanay; they both used to follow up on my situation, ask if I am doing okay, and have regular chats/calls.

Tanay is from India, so he guided me with the rules and regulations related to the Job in Germany. Finally, I got enough confidence to apply for a new job. He even recommended to the people in the DevRel community, one of them leading to a Job offer.

I met Lars at his house in Denmark in May and was so happy to see him and his family, especially his daughters. While leaving his home, his daughter hugged me, and I cried a lot after Lars dropped me at the station. It was close to 5 months by that time, not seen my daughter and partner.

Moving to the new house

In June, I finally got a house in a village in Germany. The home is far away from Hamburg City, but gorgeous and peaceful.

Meeting new friends

In Hamburg, I tried to meet new people from the Indian community, but people were not so welcoming. After moving to the new place, I learned about some Indian people around my house, and I met 2 friends who are more of a family now.

Anuj and Sajith helped me with any documentation work related to my family’s Visa and my resident permit.

They invited me to their house to have dinner, and I could finally spend time with people who understood what I was going through and were ready to help.

Anuj even helped me financially, as I had to pay some money back to my employer when I left the job and was very short on cash to pay my rent the next month.

Things changing for Good

Sometimes it’s God’s plan to send you to the right place. Moving to this new city made a few things simpler for me:

As this a village unlike other cities where you have to wait for months to get City registration done, I got it done in a day. I dont even need an appointment.
Got my resident permit appointment in less than 10 days.
My family’s Visa process moved ahead and looked positive after 7 months.
For my daughter’s school, I quickly got admission to a German Public school as there are fewer kids here in the village.

New Job

After completing my probation, I decided to leave my job and start with Celonis (We are hiring ), my new employer. During my interview process with Celonis, they really made me feel this is the place where I will be trusted and appreciated. The interview process felt more like a discussion and was one of my best experiences.

Gaining confidence

After joining, I was scared and very low on confidence. I decided to talk openly with my colleague Yazan. I told him he has to keep some patience, as I am scared to write even a single line of code.

The kind of support I got from him is commendable. He was always ready to help, jump on calls to discuss, showing trust in my work.

I am a changed man after joining Celonis. My confidence is back. I can contribute more to the community and at work with more confidence.

Family Visa

After moving to this new job, the first thing I wanted to do was travel to India. But before I could plan my travel, we got the good news, we were asked to submit the travel date and resident permit.

I received my resident permit a week after this mail. My partner and I decided I dont need to travel to India now, as we are already short on money, and they can come as soon as they get the Visa.

The conferences months

After not so good start to 2022, till August, I had no plan to speak at conferences/meetups. I just wanted to stay away from code and community. But I realized things were changing now, my family was about to receive the Visa, and I had a job where I was making more money now, and it was a great place to work.

After joining Celonis, things started getting better.

I got my resident permit, so I could travel outside Germany.
My manager at Celonis was okay with me returning to India for a few weeks to see my family.
We got a more solid response from the Embassy on the approval of Visas for my family.

Nx Conf

After joining Celonis, I was offered an opportunity to speak at Nx Conf. As it was only my first month at Celonis, I reached out to my manager Bardh to check If I could do it. Bardh was so helpful; he asked me to do it and suggested the topic.

Also, he asked me if I wanted to represent Celonis at conferences. Which I was more than happy to do.

Now I am doing some DevRel stuff for Celonis. Even though we dont really have a DevRel role, I manage my work, travel to conferences, and talk about my favorite tools, Nx and Angular.

After Joining Celonis, I traveled to the below conferences between Oct and Dec:

Ng-DE as an attendee
Nx Conf — Presented my talk on “Nx at Celonis”
Firebase Summit as an attendee
JSPolandConf — Presented my talk “Be Smart choose Nx”
Madrid Celonis Office — Presented my talk “Be Smart choose Nx”
NgRome — Presented my talk “Angular Router MasterClass”
DevFest Hamburg — Presented my talk “Be Smart choose Nx”
Angular London — Presented my talk “Be Smart choose Nx”

I took many photos with friends and met many of them for the first time. The first talk I gave at Nx Conf in Phoenix was my 14 years into Tech, my first visit to the USA, and my first in-person talk after Feb 2020.

I was honored to share the stage with many amazing folks from the community.

and many more....

Angular Course Launch

I planned to release my Angular Course but kept delaying it due to burnout. Finally, after many months and after things became stable with job and family visa, I reached out to FreeCodeCamp, for my future courses, which I wanted to post on their YouTube channel. They liked my Angular Getting Started course, and we decided to collaborate.

In September, my course was published on FreeCodeCamp, and I got great feedback from the community. This was my gift to the community for helping me during my burnout.

Reunion

I booked my family flight ticket for 22nd October. I came from the US on 20th October after attending Nx Conf and Firebase summit.

I was very excited to see my family after 10 months. We were happy that we were together now.

I decided to take them for a short vacation to Berlin and Poland. I had a talk in Poland next week after they arrived.

What’s Next

Things are going good at my new job. I can follow my passion for the community, contribute to the work where I am respected, and make decisions to improve our software processes.

I am looking forward to 2023. I want to contribute more to the community. I will try to speak at many conferences next year and work on my Angular Courses, which will be free.

My main focus would be ensuring my family settles down well in Germany. We are still buying and setting up our new house, which was almost empty before they arrived.

And as I said before, To quit is not an option.

My Course on Angular Getting Started

Santosh Yadav — Wed, 27 Jul 2022 18:17:00 +0000

Photo by Nick Morrison on Unsplash

I had planned an Angular Course for the community for a very long time, last year I even decided to stream it. But all efforts were unsuccessful.

There was too much in my plate, I decided to move to a new country, which caused lot of changes in my plan.

New Plan

I decided to publish it around May again, but due to other factors and depression. I decided to put it on hold again. The plan was to publish it as paid course, but with pay what you want model.

Finally Publishing It

I decided to leave my job in the mid July, which gave me some free time. I decided to utilize this free time and publish the course.

Why this course is Free

Lot of people may have this question why free, when I had decided to make it paid.

There is one reason - community, Last 7 months were really rough for me, staying away from your loved ones is hard, specially when they are stuck in different country and you can not visit them.

During this time, I got so much support from community, I decided to do something in return.

This is my small way to say think you for everything you all have done for me.

Where to get this course

You can access it on YouTube

What if you want to pay

This course will remain free forever, but if you decide to support my work, so I can invest more time creating content for community, you can use GitHub Sponsors link below:

https://github.com/sponsors/santoshyadavdev

Finally thanks to some amazing folks for sponsoring me:

Chau Tran - https://twitter.com/Nartc1410
Anand Chowdhary - https://twitter.com/AnandChowdhary
Sunil - https://twitter.com/sunil_designer
Trung Vo - https://twitter.com/tuantrungvo
Umair Hafeez - https://twitter.com/_UmairHafeez_
Pavan Kumar Jadda - https://twitter.com/pavankjadda
Pabio - https://twitter.com/PabioHQ
Maarten Tibau - https://twitter.com/maartentibau

AngularJS vs Angular

Santosh Yadav — Sun, 19 Jun 2022 21:59:56 +0000

NOTE As I write this blog post, the AngularJS has already reached EOL. It's been 10 months now.

Introduction

I came across AngularJS for the first time around 2014 by my friend who created a small mobile App using Ionic. He was very excited and said we should choose AngularJS for our next project. I also like the framework because I wrote Jquery for 2 years and Razor templates. And AngularJS lets me write HTML templates and avoid the complexity of writing Jquery code by giving easy API.

Fast forward to the end of 2015, I convinced my manager to let me write our new Application in AngularJS we took 3 months but ended up delivering it in 4-5 months as we were doing it for the first time.

And AngularJS was my first front-end framework.

Writing AngularJS full-time

Around 2016 I moved to a new Job and started using AngularJS for the front-end with .Net with our backend and creating APIs. I started teaching AngularJS beginning Jan 2017.

Coming across Angular

While writing AngularJS code and teaching it, I came across the Angular framework. Yes, they are 2 different frameworks. In 2017 Angular Version 4 was released. I started reading the docs and fell in love with Typescript. It felt very natural as I had been writing .Net code for years. And on top of it, it had the CLI available, and no manual configuration for including the webpack was needed.

Yes, I was way ahead of today's influencers who are unaware these 2 are different frameworks. I started learning and came across courses from Deborah Kurata around March 2017 I started teaching Angular and stopped teaching AngularJS. Even started getting good gigs to teach Angular.

AngularJS Vs Angular

Enough of my backstory; let's talk about how these 2 frameworks differ.

Language: AngularJS was written in Javascript. When the Angular team decided to create Angular, they announced they would be using Typescript, which got backlash from the community. Till they realized its true power after 4 years, and now all frameworks use it. Later Typescript type was created for AngularJS.
Template Engine: Both frameworks used HTML as a template and provided some Built-in directives, with Angular being superior in type checking.
API: AngularJS and Angular have some equivalent APIs, like HTTP, forms, and routing. AngularJS had one of the most advanced router before any other framework.
CLI: AngularJS has no official CLI. Angular introduced CLI with version 4.
Feature Complete: Angular is more feature complete, including the Unit Testing framework and the build tools. Unlike AngularJS, where you had to do it manually.
Releases: As informed, AngularJS reached EOL in Jan 2022, and no official support has been provided. On the other hand, Angular has an active development and releases major versions every 6 months.
Migration: Migration from AngularJS to Angular is not as difficult as one may think. Angular has a section dedicated to helping you migrate to the latest Angular version. Migrating to a new Angular version is easy thanks to Angular CLI, which offers automated migration support. Angular CLI takes care of all the migration, and it takes a few hours to upgrade until and unless you are many versions behind. Also, Sam has a course to help you upgrade from AngularJS to Angular.

Why confusion between AngularJS and Angular

You might be wondering why so much misinformation is out there on Angular. Some blame goes to the team as well, let me explain.

When AngularJS was released in 2009, there was no npm, and frameworks were used by including scripts directly from CDN or your local file system. When npm became the official way of consuming Javascript packages, the AngularJS team decided to distribute it via npm, guess what they named it?

Yes, you guessed it right
Angular

It was distributed as Angular on npm.

The current Angular framework is distributed as @angular/core.

Even if you search for Angular npm on google, you get the below search result. The AngularJS is the first link, which helps a little now, as the message on top includes a link to Angular Core, which was not there a few years ago.

What you can do

This blog is in no way to convince you to start using Angular. This is only for information purposes and to stop spreading misinformation about the Angular framework.
If someone tells you next time if Angular has reached EOL, you can guide them to this blog.

Conclusion

This blog takes a dig at people spreading hate and misinformation being spread about the Angular framework. The misinformation spread by such influencers is causing confusion in new learners. Sometimes, they miss the opportunities to become part of the community supporting it.

I may be too blunt writing it, but I respect all the content creators sharing fantastic knowledge. But I am tired of hearing from some influencers, "Angular is dead." No, the problem is you are not investing time researching or googling.

Direct appeal to those, please stay away from spreading false information or misleading new developers.

References

I am Hiring

Also, I am hiring Angular developers for my team in Germany and Spain. If you are interested, send me a DM on Twitter

How GitHub is Improving Developer Experience

Santosh Yadav — Thu, 14 Apr 2022 11:25:47 +0000

Photo by Annie Spratt on Unsplash

In the last couple of years, the number of developers contributing to Open Source has grown exponentially. The Github team deserves all praise. The Developer Experience is much better than what it used to be. They are lowering the entry barrier for new developers to come and contribute to Open Source. Let's go through some great tools introduced and some amazing changes around GitHub, which improved the Developer Experience and made GitHub an undisputed leader.

Tools

Let's go through the tools introduced in the past few years.

Codespaces

One of the biggest problems developers face is setting up the development environment. As someone contributing to multiple Open Source projects, it's a pain, and I am sure many of you will agree with this. GitHub came up with Codespaces. You setup the development environment in a single click; it's amazing, isn't it? And can use it online, too; press "." and it spins up your environment on the cloud. Many Open Source developers have access to use it for free. For enterprises, you need to pay to use it, and the pricing is much cheaper than buying a high-end laptop.

GitHub Actions

After NodeJS, this is the best thing Developer Community got. Before GitHub Actions, it was a pain to setup the CI/CD, and everyone, especially Open Source maintainers, knows this. With GitHub Actions, you can setup CI/CD for your project with ease, and even you don't need to leave the github.com. With so many Actions created by the community, you can setup your essential CI/CD within a few minutes. So what are you waiting for? Go ahead and utilize this feature, and you can publish your Actions on marketplace

Code Search

Searching code on GitHub was a pain; it was slow, confusing, and sometimes we used to get results we were not looking for. GitHub launched GitHub Code Search which makes code search faster and more accurate; you can select which repo you want to search code for,

You get a lot of filters for the correct code.

Copilot

I am sure you already know what Copilot is and what it can do for you. I still get amazed by what it can sometimes do; I write a single character and press the tab, and it writes the exact code that I am thinking, even better. Many developers got the access and are enjoying it, and it has improved my productivity for sure. Also, try Copilot for writing blog posts; you will be surprised.

GitHub CLI

No, I am not talking about Git, which we use; GitHub decided to release its CLI because why not? This is the era of CLI. You can open a PR, see a PR status, see all issues, etc.
You can download it from here

GitHub Sponsors

Not a tool but a fantastic addition to the ecosystem, funding for Open Source is a tricky topic. Many large enterprises use them but don't care to support them. GitHub sponsors are trying to fill that gap, so organizations and developers know what projects they rely on and choose to sponsor projects or open-source contributors. With GitHub Sponsors, developers keep the entire money as GitHub does not charge any fee.

You can get more details here

## GitHub Mobile App

What if you are traveling and there is an emergency, and you need to review and merge PR. GitHub mobile app has matured over the year and is available for both Android and Apple phones. It has most of the features you need to review, merge and read the code.

Download if from here

Github.com

Dark theme

Everyone I know was rooting for this feature. GitHub finally launched a dark theme. We have multiple themes to choose from; you can also sync them with the system setting.

Fetch Upstream

Keeping a fork in sync with the remote branch was always a pain. With this feature, GitHub just solved an immense pain for 1000s of contributors on GitHub.

Projects (Beta)

Everyone using GitHub relies on other tools like Jira and Azure DevOps for project management. For enterprises, it is easy to pay for a project management tool. For open source maintainers, not so much; they rely on GitHub issues. With Projects, they will be able to plan in a better way.

Discussions

If you are Open Source maintainers, you know how much pain it was to manage questions and RFCs using GitHub issues. Open Source maintainers pushed developers to use StackOverflow, but was it the best choice? Open Source projects miss so much valuable content available somewhere else. In case some question on SO leads to a new Bug or a feature?

Discussions are the best place to have QnA and RFCs, and it allows to convert Discussion to issues as well. It means all information is available in the repository. Also, maintainers know who is helping the project more by getting involved in QnA.

To enable Discussions for the repository, Go to Settings, and you will find the below option.

List

I am sure, like me, many of you star a lot of repositories on GitHub. But do you remember why you starred those repositories or which one you starred once you have starred many of them?

I don't, so I was pleased when List was introduced. You can add a starred repository to an existing list or create a new List so you remember why you starred the repo.

Special Repository

GitHub has a special repository. Create a repository with the same name as your username to use it. You can use this repository to customize your GitHub profile; you can visit my profile to see an example.

https://github.com/santoshyadavdev

Also, if you want to customize yours, don't miss this free course By Eddie

Update PR with remote Branch

Another big pain while doing PRs was, what if your PR takes some time to merge and the master is already ahead? Of course, you update your branch with the main branch, and you have to do it manually, which wastes the developer's time. GitHub came up with an option to update your PR with a single button click, thus saving a lot of time for developers.

Command Palette (Feature Preview)

Want to navigate through GitHub quickly? Use the new Command Palette. To open the command palette; use the below keys:

macOS: ⌘ k or ⌘ opt k
other: Ctrl k or Ctrl alt k

This feature is not enabled for everyone. Go to the Feature Preview tab to see if you have access to this feature.

Pull Request File Tree (Feature Preview)

It is difficult to find and review a file when you change many files within a PR. Sometimes, the file is at the bottom of the screen, and reviewers have to scroll to see the files. With this feature, we get the files changed within the review tab, and it's easy to navigate and look for changes in a file.

GitHub Releases

Creating a release note is essential. It tells the users of your projects/product what the changes introduced in the new release are.
Open Source maintainers have used different approaches for years. Thanks to GitHub releases, you can do it from the repository itself. Once you draft a new release, you can choose your tag name against which branch you want to draft the release, and it will pick up all the issues included in the new release.

Example: https://github.com/ngx-builders/source-map-analyzer/releases/tag/3.0.1

You can watch my latest video as I created a new release for my Open Source Package

Code Navigation

I read Open Source code to understand what they do, and sometimes the reference to some functions is in another file. Before the code navigation feature landed on GitHub, the only way was to go to that file and read.
It was time-consuming with code navigation it's easy to move to another file where the code exists.

Community Initiative

Stars Program

In 2020 GitHub launched the GitHub stars Program to recognize the developers educating and inspiring the developers across the globe. Unlike most programs, this Program is unique, as developers worldwide can nominate you. The perk of being one of the stars, you get to give early feedback for new features and interact with a fantastic team.

Also, no one can beat the GitHub in swag, and I have almost my entire streaming setup given by GitHub. It supports you as well, so you can continue your community effort.

Conclusion

These are a few tools and features; there are many. I recently found I can follow organizations on GitHub now. GitHub is pushing a lot of great features. Let me know which one is your favorite, and I know it isn't easy to choose.

Shoutout to my GitHub sponsors for supporting my work:

https://github.com/fahadqazi
https://github.com/jackbridger
https://github.com/ssunils

Why and How we migrated to Nx from Angular CLI

Santosh Yadav — Fri, 18 Mar 2022 12:51:49 +0000

Photo by Luca Bravo on Unsplash

Note: Due to NDA, we won't mention the client's name.

We finished migrating to Nx from Angular CLI last year, and it was one of the biggest restructure we did. This post will cover why we decided to do it and what we did.

Our challenges

Code Sharing: We had code shared across the applications. We had most of the reusables as part of our App, and we kept adding more reusable code as part of our main Application.
Refactoring: We had started perf optimization as mentioned. It was challenging to refactor the codebase in the existing state. It was challenging to determine which part of the code needed to touch. Or where to add a new feature.
Build Time: Our build time was high; we had to wait a lot of time post every PR/MR. More build time means more time stuck at a task and fewer changes to shipping every release cycle.
Adding new features: It was challenging to add new features in the App that was already too big.
Code Review: It was hard to add code owners with a single app holding all the codebase.

The above pain points gave us a clear idea that NxDevTools is the best option for us, and we should go ahead with it.

Why we did it

It was a big decision to move to Nx from Angular CLI. We had a single project for the main app created using Angular CLI and some smaller separate applications within the same workspace before migrating to Nx. It was like a massive piece of code sitting inside a single code base, so we had a lot of challenges migrating, and even more, if we never migrated to Nx.

When I joined the team, there was a decision to tackle the performance issues in the App, so we had a lot of refactoring of code coming soon.

What is Nx

Nx is a DevTools for managing mono-repos. The advantage of using mono-repos is you can create and manage multiple applications inside a single workspace and maintain/share libraries.
Nx does more than a mono-repo. It gives you access to the devkit to write your generators and builders/executors (custom command).

Nx also provides caching for your builds, so you don’t have to compile your unchanged code every time you run your build. And Nx Cloud is a fantastic product if you want to get the caching advantages on your CI pipeline.

Concern before we started

Before starting the migration, it was essential to identify what part of the code needed to be moved from App and created as libraries.

We decided to do the following:

Breaking everything was not what we wanted to do. We decided in the first iteration we would only move a big folder named common/legacy, which had a most reusable code base, and create a new library.
As soon as we moved the large legacy folder to another library, we ended up with another issue. The plan to move legacy code was the right choice in the end. The problem was an increase in the bundle size, and it grew exponentially. And we couldn't go ahead with this.

We were on the drawing board again, and we decided to assemble and discuss.
We had the below choices:

I had used secondary entrypoints in the past. My suggestion was to go with secondary entrypoints.
- This sounds like the best idea, and I will go with this option in most cases.
- The problem was we had extensive code to be moved to libraries.
- If we went with this option, it might have taken us more than a year considering the large codebase, as we had three people team and only me doing this full-time.
Considering the complexity of Solution one, we decided to go with another solution
- We decided to use wild card paths in tsconfig.base.json like below "@domain/common-legacy/*": ["libs/common/legacy/src/lib/*"]
- This was a good idea as we import only what we need.
- But it has its challenges

Little about the Solution

We decided to split the entire migration into 3 parts:

Move the common/legacy and solve the issue we come across.
Move the rest of the code after the first step is a success.
Take care of Circular Dependency.

Solution as part of the initial Solution

We dont need to create secondary entrypoints less work. We can just have folders for each component/module/service/ etc. And use it as

import { HomeModule } from '@domain-common-legacy/home.module'

We dont get the entire lib as part of the bundle. We only get the code that we need. Keeping bundle budget under control. And as we move new code, we need to configure the path correctly.
But it introduced an issue, the libraries created were not buildable. But we decided to move ahead as having buildable libraries was not part of Part 1 of this migration process.
We decided to disable the Circular Dependency checks.

The Final solution

Once we figured out how our initial Solution works, we decided to go through the codebase, identify all the features we have and split them into libs.

We identified most of the features we have consist of 3 parts:

feature/common: Common components/directives used within the feature and other features.
Core: We lazy load our features, so we don't end up with a large bloated application. The core-libs consisted of components/services/directives/modules which are part of the lazy-loaded feature and not shared outside.
State: Every feature has a state, we use NgRx for global state and RxAngular for handling local state, the state library holds the NgRx code for feature and is sometimes shared with other features.

We also decided the shared code will be part of a folder called core so we have

core/directive
core/shared-components
core/state
core/model

and many more, these libs are used across the libraries and multiple applications inside the organization.

What after creating Libraries

As I mentioned, creating libs was only part one of the entire migration. During this exercise, we figured out a huge chunk of state management/ NgRx code with our main bundle.

We decided we could parallelly handle this by splitting them and only loading the states we need as part of the main code.

We started with around 2.9MB in the main bundle down to 2.30MB with the build for the evergreen browser.

Handling Circular Dependency

Once we were done creating libraries, we ended up with 180+ libraries, which we had started with a single application.

Now it was time to handle the Circular Dependency issues. It was not possible to do it in one go.
So we decided to start with core libs and figured out, the large codebase responsible for the Circular Dependency issues was part of core-libs, mostly interfaces/services and states.

We kept the Circular Dependency check disabled, even though we were fixing one of the mistakes we made.

We realized we could enable the check for new code, and we enabled the check for an entire repo by adding in the root eslint config and disabled it for all the libs which had Circular Dependency. In this way, now new libraries can only be merged if they dont have a Circular Dependency issue.

We decided to enable the Circular Dependency check for libraries as we kept fixing it.

The Circular Dependency fix required us to create more libraries and finally, we ended up with more than 250+ libraries.

Building Libraries

As we mentioned earlier, one of the issues with the approach as we can not build these libraries.

Our teammate decided to take this matter into his own hands and ended up writing a builder to build all the new libraries created with this approach.

Matt also wrote a Library Generator so we create all the libraries using the same structure, so we don't end up with entire libs as part of the bundle.

What we achieved

After this migration, we have

Code Owners: We decided to create a CODEOWNERS file to split the responsibility for code review and which group owns the specific part of the code.

Custom eslint rules: As a part of our process, we have some checks for our code review process; moving to Nx allowed us to convert all those checks to custom eslint rules, saving more time for us.
Easy to refactor code: We fix/add a lot of code weekly, and having those libs made our life easier, as now it's easy to find out which part of the code needs to be touched.

Conclusion

The choice to move to NX worked well for us, and we were able to identify features and move them to libraries, giving us the advantage of having small PRs. Also, we could identify the unused and duplicate code.

Adding custom rules and code owners was a great help for us. We were able to identify the code we needed to review.

Please share your experience on Twitter migrating to Nx and how it helped you.

You can Join Nx Community Slack: https://go.nrwl.io/join-slack

Special thanks to Juri for giving his precious time to review this article. Love you and your work Juri 💙

Shoutout to my GitHub Sponsors

Moving to Germany

Santosh Yadav — Fri, 14 Jan 2022 13:00:26 +0000

If you follow me, you know I have worked as a consultant for the last year. I have decided to take the next step in my career and move to Hamburg this week.

It was a difficult choice, and I wanted to stay in india and grow with the community; the Indian tech community will always have a special place in my heart. I became GDE; you all voted me to be the First GitHub star from India and gave me lots of love.

Some personal and professional decisions led to this.

Better community outreach: Being in Europe will give me access to a broad community, as the timezone in india sometimes affects the participation in many conferences and meetups.
My future ambitions: It is not a secret that I want to work as a Developer Advocate one day. Last year, I got a few calls, but many discussions due to salary and location expectations didn't go ahead.

I will not miss the Indian community at all, I will keep rooting for you all, and if you need any help from me, I am just a DM away. I was lucky to meet a few of you before moving.

Six years ago, I came to Pune and got everything I came looking for in this City: a better life for my family, money, and peaceful life. Wish us that we get the same thing in a new country as we start a new chapter of our life.