Clever Geek Handbook

Reactを捨ててAngularに取り組むべき理由

私はによってかなり興味深い記事の翻訳提示したいサム・レドモンド、私たちが反応して最大角度を選んで捨てるべき理由を。私の意見では、この記事はAngularの主な機能について説明しています。彼女はかなり反抗的に見えるかもしれませんが、少しユーモアを交えて彼女を治療してみてください:)





だから、Reactの使用をやめるべきだと思う理由についてはすでに少し書いています。この記事を要約すると、Reactで発生したいくつかの問題をリストします。





  1. 周りに「誇大広告」がたくさんあるのが主な理由で人気があります。





  2. 彼はあまりにも多くの自由を与えます。これにより、アプリケーション開発の初期段階で根本的なエラーが発生しますが、すぐには表示されません。





  3. 大量のメモリを使用し、最適化できません（ツリーを揺るがすことができません）。





  4. Reactアプリケーションの複雑さは、アプリケーションのサイズとともに指数関数的に増大し、これにより保守が困難になります。





  5. （フォーム処理のように）何も組み込まれていません。したがって、これを何らかの形で補うため、または多数のサードパーティライブラリを使用するために、多くのコードを作成する必要があります。





  6. アプリケーションを最新バージョンのReactに更新するには、多くの場合、そのアプリケーションを完全に書き直す必要があります。





これらは、さまざまなReactプロジェクトで作業しているときに遭遇した最も一般的な問題です。この記事では、Angularが上記の問題のほとんどを解決し、アプリケーションの構築方法ではなく、構築しているものに集中できるようにする方法を紹介します。





「すべて誇大宣伝列車に乗って」

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.





AngularCLIを使用する開発者
, Angular CLI

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 , .





多くのフロントエンドアプリケーションを使用している大企業で、開発者にReactの使用を強制している場合は、アプローチを再検討してください。プロジェクト間を簡単に移動したり、新しいアプリケーションを開発したり、驚異的な速度で機能を追加したり、低コストのフロントエンドプロジェクトを作成したりできる開発チームが必要な場合は、Angularという列車に乗ります。あなたがこの種のビジネスをしているなら、Reactはあなたを制限します。







More articles:


All Articles