React vs Angular : comparatif

## Tableau comparatif rapide
| Critere | React | Angular |
|---|---|---|
| Performance | Haute | Très haute |
| Courbe d'apprentissage | Modérée | Forte |
| Écosystème | Vaste, avec de nombreux frameworks et bibliothèques | Rich et organisé par Google |
| Communauté | Large et active sur diverses plateformes | Masse importante et soutenue par Google |
| Cas d'utilisation | Applications frontales simples à moyennes performances | Applications complexes et grandes échelles |
| Typage | Typage faible (JavaScript) | Typage fort et structurel |
| Taille du bundle | Généralement plus petit | Peut être beaucoup plus grand |
| Architecture | Composant-basé, flexible | Modèle MVC basé sur des composants |

## React — Points forts
- **Performance** : React utilise le rendu virtuel pour minimiser les mises à jour du DOM.
  ```jsx
  // React
  const element = <h1>Bonjour, monde!</h1>;
  ReactDOM.render(element, document.getElementById('root'));

• Ecosystème : Large éventail de libraries et frameworks tiers.

  // React avec Redux
  import { createStore } from 'redux';
  const store = createStore(reducer);
  

• Communaute : Grande communauté active sur Stack Overflow, GitHub, etc.

  git clone https://github.com/facebook/react.git
  

• Cas d'utilisation : Applications frontales simples à moyennes performances.

  // Composant React simple
  function Welcome(props) {
    return <h1>Bonjour, {props.name}</h1>;
  }
  

• Typage : Typage faible, mais avec des outils comme TypeScript pour un typage plus strict.

Angular — Points forts

• Performance : Compilation en AOT (Ahead Of Time) pour une meilleure performance.

  // AppModule.ts
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• Ecosystème : Rich et organisé par Google, avec un grand éventail de services et outils.

  ng new my-app
  

• Communaute : Masse importante soutenue par Google et une grande communauté active.

  git clone https://github.com/angular/angular.git
  

• Cas d'utilisation : Applications complexes et grandes échelles.

  // Component.ts
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'my-app';
  }
  

• Typage : Typage fort et structurel, ce qui aide à prévenir les erreurs.

Syntaxe cote a cote

Création d'un composant

// React
import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Bonjour, {this.props.name}</h1>;
  }
}
typescript
// Angular
import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  template: `<h1>Bonjour, MonProjet</h1>`
})
export class WelcomeComponent {
  name = 'Angular';
}

Utilisation d'un service

// React avec Redux
import { useSelector } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);
  return <div>{count}</div>;
}
typescript
// Angular
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-counter',
  template: `<div>dataService.getCount()</div>`
})
export class CounterComponent implements OnInit {
  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    console.log(this.dataService.getCount());
  }
}

Gestion des événements

// React
import React from 'react';

class Button extends React.Component {
  handleClick = () => {
    alert('Clicked!');
  };

  render() {
    return <button onClick={this.handleClick}>Cliquez-moi</button>;
  }
}
typescript
// Angular
import { Component } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button (click)="handleClick()">Cliquez-moi</button>`
})
export class ButtonComponent {
  handleClick() {
    alert('Clicked!');
  }
}

Quand choisir React vs Angular

• React : Pour des applications frontales simples à moyennes performances où le rendu rapide est crucial.
• Angular : Pour des applications complexes et grandes échelles nécessitant une architecture robuste et un grand écosystème.

Verdict

• React offre une performance élevée et un large écosystème, mais peut être plus difficile d'apprendre pour les nouveaux développeurs.
• Angular propose une architecture solide et un bon typage, mais peut générer des bundles plus volumineux. Il est particulièrement adapté aux projets de grande envergure et nécessitant une maintenance intensive.