Pourquoi devrions-nous abandonner React et nous attaquer à Angular

Je souhaite présenter une traduction d'un article plutôt intéressant de Sam Redmond , Why We Should Throw Out React and Pick Up Angular . À mon avis, l'article décrit les principales caractéristiques d'Angular. Elle peut sembler assez provocante, mais essayez de la traiter avec un peu d'humour :)

Donc, j'ai déjà écrit un peu pourquoi je pense que nous devrions arrêter d'utiliser React . Pour résumer cet article, je vais énumérer quelques problèmes que j'ai rencontrés dans React :

1. Il est populaire principalement parce qu'il y a beaucoup de « battage médiatique » autour de lui.

   
   
   
   
   

2. Il donne trop de liberté. Cela conduit à des erreurs fondamentales dans les premières étapes du développement d'applications qui n'apparaissent pas immédiatement.

   
   
   
   
   

3. Utilise beaucoup de mémoire et ne peut pas être optimisé (pas d'arborescence).

   
   
   
   
   

4. La complexité d'une application React augmente de façon exponentielle avec la taille de l'application, ce qui la rend difficile à maintenir.

   
   
   
   
   

5. Il n'y a rien de intégré (comme la gestion des formulaires). Par conséquent, vous devez écrire beaucoup de code pour compenser cela ou utiliser un tas de bibliothèques tierces.

   
   
   
   
   

6. La mise à jour de votre application vers la dernière version de React implique souvent une réécriture complète de cette même application.

   
   
   
   
   

Ce sont les problèmes les plus courants que j'ai rencontrés en travaillant sur divers projets React. Dans cet article, je souhaite partager avec vous comment Angular résout la plupart des problèmes ci-dessus et vous permet de vous concentrer sur ce que vous créez plutôt que sur la façon dont vous créez votre application.

"Tous à bord du train hype"

Angular , , Angular “” . , , Angular , React. , , Google.. AngularJs, . Google, AngularJs Angular ( Angular 2), . , , .

, Angular - , AngularJs Angular . - , .

, Angular , . Angular , . Angular , , , Angular .

,

Angular React , Angular . , React , . , Angular . -, .

, , , ( , , ). Angular , , . , , , .

, Angular CLI, Angular.

React - . React , React , . , Angular , Angular Angular CLI , .

React Angular . Angular CLI , . . . ?

ng new my-app
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , . CLI . , , , . , CLI:

1. my-app  Angular . .

   
   
   
   
   

2. , , .

   
   
   
   
   

3. end-to-end Protractor, , .

   
   
   
   
   

4. Angular (angular.json). , Angular , .

   
   
   
   
   

5. , Angular .

   
   
   
   
   

, , , “ ”. React . CLI?

, . , .

ng generate component my-component OR ng g c my-component
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , . :

1. my-component .

   
   
   
   
   

2. unit tests .

   
   
   
   
   

3. .

   
   
   
   
   

Angular

, , . ? , . stackblitz:

https://stackblitz.com/edit/angular-examples-modules

ng g m button
ng g c button
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

button. button, button, , HTML .

Angular CLI. , . - , button. button CLI . , .

, app.module.ts. , , ButtonModule app.module.ts imports @NgModule AppModule.

. <app-button></app-button> app.component.html .

Angular . , , , , . , , .

, Angular “ ”. . . , Angular.

CLI, Angular . .

ng new my-app --routing
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . , . routing, Angular . . , routing. CLI .

:

const routes: Routes = [
   {
   path: 'main',
   loadChildren: () =>    import('src/app/routes/main/main.module').then((mod) => mod.MainModule)
   },
];

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , . , , main, -, main , . , , . , , , .

, , Angular Modules . , , Angular TypeScript javascript. Angular .

, - “React TypeScript”, . React Typescript . - , TypeScript . , . React , , , TypeScript. .

Angular , , , .

@my-decorator()
export class MyClass {}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, .

, , Angular Ivy.

Understanding Angular Ivy: Incremental DOM and Virtual DOM

, DOM “ ” (tree shaking), . Angular Ivy. Ivy . .

Angular Ivy “ DOM”. , , . , .

DOM, DOM DOM, ( ). , . , .

, : “ , ”? . , :  “ , , Angular ”? , , - Angular, ! “” , , Angular.

-

, , - . , . - Angular, .

Angular ( AngularJs, ). Angular , CLI. 2018 Angular CLI - ng update. :

ng update @angular/core

. Angular . , CLI , , , . Angular , , React ( ).

, Angular CLI , , Angular . ,   , . , , , . Angular

, , , . , , .

Angular Angular CLI, . , , - . - !

- . , . React , Angular. , , Angular. ? . ? . ? . , . - , , , Angualr (tree shakable), .

, . Angular. YouTube. , . React , .

Si vous êtes une grande entreprise avec de nombreuses applications front-end et que vous obligez les développeurs à utiliser React, reconsidérez votre approche. Si vous voulez avoir une équipe de développement qui peut facilement passer d'un projet à l'autre, développer de nouvelles applications, ajouter des fonctionnalités à une vitesse vertigineuse et avoir des projets frontaux à faible coût, alors prenez le train appelé Angular. Si vous avez ce genre d'entreprise, alors React vous limitera.