Mengapa kita harus membuang React dan menangani Angular

Saya ingin menyajikan terjemahan dari artikel yang agak menarik oleh Sam Redmond , Why We Should Throw Out React dan Pick Up Angular . Menurut pendapat saya, artikel tersebut menjelaskan fitur utama Angular. Dia mungkin terlihat sangat menantang, tetapi cobalah untuk memperlakukannya dengan sedikit humor :)

Jadi, saya sudah menulis sedikit tentang mengapa saya pikir kita harus berhenti menggunakan React . Untuk meringkas artikel ini, saya akan membuat daftar beberapa masalah yang saya temui di React:

1. Ini populer terutama karena ada banyak "hype" di sekitarnya.

   
   
   
   
   

2. Dia memberi terlalu banyak kebebasan. Hal ini menyebabkan kesalahan mendasar pada tahap awal pengembangan aplikasi yang tidak segera muncul.

   
   
   
   
   

3. Menggunakan banyak memori dan tidak dapat dioptimalkan (tidak dapat digoyahkan).

   
   
   
   
   

4. Kompleksitas aplikasi React tumbuh secara eksponensial dengan ukuran aplikasi, dan ini membuatnya sulit untuk dipelihara.

   
   
   
   
   

5. Tidak ada bawaan (seperti penanganan formulir). Oleh karena itu, Anda perlu menulis banyak kode untuk mengkompensasi hal ini atau menggunakan banyak perpustakaan pihak ketiga.

   
   
   
   
   

6. Memperbarui aplikasi Anda ke versi terbaru dari React sering kali melibatkan penulisan ulang sepenuhnya aplikasi tersebut.

   
   
   
   
   

Ini adalah masalah paling umum yang saya temui saat mengerjakan berbagai proyek React. Dalam artikel ini, saya ingin berbagi dengan Anda bagaimana Angular memecahkan sebagian besar masalah di atas dan memungkinkan Anda untuk fokus pada apa yang Anda bangun, daripada bagaimana Anda membangun aplikasi Anda.

"Semua naik kereta 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 , .

Jika Anda adalah perusahaan besar dengan banyak aplikasi front-end dan Anda memaksa pengembang untuk menggunakan React, pertimbangkan kembali pendekatan Anda. Jika Anda ingin memiliki tim pengembangan yang dapat dengan mudah berpindah dari satu proyek ke proyek lainnya, mengembangkan aplikasi baru, menambahkan fitur dengan kecepatan sangat tinggi, dan memiliki proyek front-end berbiaya rendah, maka gunakan kereta yang disebut Angular. Jika Anda memiliki bisnis semacam ini, maka React akan membatasi Anda.