From React to => Angular - a developer's guide to TypeScript modularity

In web development one of the decisions you will face is choosing between frameworks like Angular and React. I always had used React for the past 5 years, until lately when I wasn't given a choice but dive in into Angular. As part of understanding Angular I focus on the commonality of typescript between the 2 frameworks.

I'm focusing on modularity as it's the foundation, Think of modularity like organizing your fridge by fruit & vegetables instead of throwing all your fruits into one big drawer, you separate them into different sections: apples in one drawer, oranges in another basket or something etc.. In programming modularity mean breaking your applications into smaller pieces that handles specific responsibility, following in mind engineering principles like separation of concern - separating business logic from presentation.

Angular's approach - Built in Modularity
Angular already comes with structured approach right of the box.
NgNodules - the foundation
Angular uses something called NgModules to organize the application. Think of NgModule as containers that group related components, services. and other code together.
However since Angular 17, there's another way of modularity which is a hybrid approach with something called Standalone components. I will explain more as we go along.

Ng Module example
`
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FruitComponent } from './fruit/fruit.component';
import { FruitService } from './fruit/fruit.service';

@NgModule({
declarations: [FruitComponent],
imports: [BrowserModule],
providers: [FruitService],
bootstrap: [AppComponent]
})
export class AppModule { }
`

**React's Approach - Flexible modularity:
**React doesn't enforce a specific module system to organize code, so you can organize code however you like.


import React from 'react';
import { FruitCard } from './FruitCard';
import { useFruits } from './hooks/useFruits';

export const FruitList: React.FC = () => {
const { fruits, loading } = useFruits();

if (loading) return

Loading...;

return (

{fruits.map(fruit => (

))}

);
};


custom hooks for logic sharing
React uses custom hooks to share logic between components.

For transitioning from React to Angular
Angular 17 introduced a more component-centric approach with standalone components that feels much more familiar to React developers.

**Why it makes a difference?
**No NgModules traditional way needed, components can manage their own dependencies & it's simpler model, and direct imports, you can import what you need.

Key difference in modularity between Angular and React:
*Angular
*- Services are singleton by default within modules

• clear boundaries make it easy to extract reusable modules
• Modules can be easily shared between applications
• Steeper learning curve due to more concepts (modules, decorators, dependency injection)
• Once learned, provides clear guidelines for any project
• Consistency across different Angular applications
• Use Angular when working on large, complex projects and you'd prefer clear guidelines and structure.
• If you choose the non traditional path in Angular, you can use Standalone Components which is Similar to React's approach & flexible imports.

React

• components and hooks are shared across projects
• community eco system provides many reusable packages.
• Easier learning curve, start with components and gradually learn patterns
• More decisions to make about project structure & different React projects might look very different
• Use react when it's small project, you work independently. You can still also use React in very big projects, when there's internal guidelines provided where everyone can agree on a structure.

**Getting started tips:

• Angular: start with Angular Cli - it sets up the module structure for you & learn about NgModules early they are the fundamental difference and strength.
• React: start with Create React or Vite for simple setup, focus on components first.

Conclusion:
Both angular and react handle typescript modularity differently, Angular provides a structured very opinionated approach, while React provides a flexible simple approach, making it easy to start something and grow with it. I'd recommend React as a start and then transition to Angular. However, since ANgular 17, you now have more choices than ever. Angular's standalone components offer a gentler learning curve, while traditional NgModules provide structure for complex applications. React continues to offer maximum flexibility.

What matters at the end is that you choose something that excites you!