Por que deberíamos deshacernos de React y abordar Angular

Quiero presentar una traducción de un artículo bastante interesante de Sam Redmond , Why We Should Throw Out React and Pick Up Angular . En mi opinión, el artículo describe las principales características de Angular. Puede parecer bastante desafiante, pero trata de tratarla con un poco de humor :)

Entonces, ya he escrito un poco sobre por qué creo que deberíamos dejar de usar React . Para resumir este artículo, enumeraré algunos problemas que encontré en React:

1. Es popular principalmente porque hay mucho "bombo" a su alrededor.

   
   
   
   
   

2. Da demasiada libertad. Esto conduce a errores fundamentales en las primeras etapas del desarrollo de la aplicación que no aparecen de inmediato.

   
   
   
   
   

3. Utiliza mucha memoria y no se puede optimizar (no se puede cambiar de árbol).

   
   
   
   
   

4. La complejidad de una aplicación React crece exponencialmente con el tamaño de la aplicación, y esto dificulta su mantenimiento.

   
   
   
   
   

5. No hay nada integrado (como el manejo de formularios). Por lo tanto, debe escribir mucho código para compensar esto de alguna manera o usar un montón de bibliotecas de terceros.

   
   
   
   
   

6. Actualizar su aplicación a la última versión de React a menudo implica reescribir completamente esa misma aplicación.

   
   
   
   
   

Estos son los problemas más comunes que he encontrado al trabajar en varios proyectos de React. En este artículo, quiero compartir contigo cómo Angular resuelve la mayoría de los problemas anteriores y te permite concentrarte en lo que estás construyendo, en lugar de en cómo construyes tu aplicación.

"Todos a bordo del tren del bombo"

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 usted es una gran empresa con muchas aplicaciones de front-end y está obligando a los desarrolladores a usar React, reconsidere su enfoque. Si desea tener un equipo de desarrollo que pueda moverse fácilmente de un proyecto a otro, desarrollar nuevas aplicaciones, agregar funciones a una velocidad vertiginosa y tener proyectos frontales de bajo costo, entonces tome el tren llamado Angular. Si tiene este tipo de negocio, React lo limitará.