DartおよびTypeScriptでのAngular2アプリケーションのバージョンbeta.0への移行プロセスの比較

翻訳者からのメモ：著者からのソーシャルネットワークエントリによってこの記事を翻訳するように促されました。エントリは次のとおりでした。「＃dartlang 11.7 KBの＃Angular2はJSバージョンよりも小さい。両方から圧縮できた」 それは、翻訳された言語を圧倒しました。それは、独自の作業、ブラウザ間の互換性、Angular以外のライブラリの束をハックし、JSの勝者ではなく両方のオプションのugさと縮小の後です。 当然のことですが、結果のサイズと速度とともに、言語の利便性に費用を支払う必要があります。 合成テストでは、翻訳結果は純粋なJSよりもパフォーマンスが速く、実際の作業ではパフォーマンスの違いは目立ちません。 合計すると、組み立てられたDartプロジェクトのサイズはJSプロジェクトとほぼ等しくなり、作業速度はほぼ同じになります。 最新のDart更新により、任意のJSライブラリを複数の行で接続できます。 そして、ダートに書くことは喜びです。 最後の声明の一部は、翻訳された記事、楽しい読み物によって明らかにされています。



過去半年間、JavaScriptおよびTypeScriptプロジェクトに取り組むことができました。 その前に、私は約1年間Dartで働きました。 2015年4月以来、私の共著者と私はAngular 2に関する本に取り組んでおり、このフレームワークは3つの言語JS、TS、Dartによって公式にサポートされています。 主にTSを使用しますが、Angular 2 for Dartの状態を定期的に確認します。



1週間前、Angular 2はベータ版になりました。 Angular 2のパイオニアと愛好家は、これまでに7つのアルファバージョンがリリースされたことを知っています。 これにはいくつかの重大な変更が伴いましたが、そのための更新は非常に苦痛でした（このためのアルファ版はありません）。 そして、バージョンbeta.0の本のすべての例を更新し終えた後、Angular 2がDartでどのように動作しているかを調べることにしました。



alpha.35から変更されていない小さなアプリケーションを使用して、beta.0にアップグレードすることにしました。 Dartでの私のアップグレードエクスペリエンスは、TSとは根本的に異なります。TSを皆さんと共有したいと思います。



Dartアプリケーションの更新



事前に、更新プロセスは簡単で、他のDartプロジェクトの通常の更新手順が含まれていると言えます。 それにもかかわらず、私は自分の経験をDartの経験のない人と共有したいと思っています。



テストアプリケーションは非常にミニマルです。ソースコードはtytsにあります。 Dartファイルで構成されています。

import 'package:angular2/angular2.dart'; import 'package:angular2/bootstrap.dart'; @Component(selector: 'my-app') @View(template: '<h1>Hello from Angular 2!</h1>') class AppComponent {} main() => bootstrap(AppComponent);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

pubspec.yaml（package.jsonと同等）：

 name: ng2_dart_upgrade dependencies: angular2: 2.0.0-alpha.35 browser: any transformers: - angular2: entry_points: web/main.dart
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

alpha.35からbetta.0にアップグレードするには、次の2つのことを行う必要があります。



1）pubspec.yamlで、angular2のバージョンを変更します。

 angular2: 2.0.0-beta.0
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2）pub upgradeを実行して、新しいバージョンとすべての依存関係を取得します。

以上です。 実行中のアプリケーションをテストできます。

その前にTSまたはJSのAngular 2プロジェクトをbeta.0に更新した場合、これがDartで非常に簡単に行われていることに驚くでしょう。 そして、そのような経験がない人のために、一般的な用語で状況を概説させてください。



alpha.35とbeta.0の間のすべての変更をリストするわけではありませんが、主なものは次のとおりです。



JSおよびTS Angular2アプリケーションは、サードパーティのライブラリ（zone.js、rxjsなど）に依存していますが、これらもアルファ段階にあります。 また、beta.0への移行に伴い更新されたため、いくつかの問題が発生しました。 Angular2にはサードパーティの依存関係がないため、Dart開発者はこれをバイパスしました。



Angularで最も使用されるクラス、アノテーション、ディレクティブの一部は、パブリックAPIをより適切に整理するために他のモジュールに移動されました。 この理由の一部は、ES6のモジュラーエコシステムの未熟さとベストプラクティスの欠如です。 対照的に、Dartライブラリ（ES6のモジュールの類似物）は、言語の作成以来存在していました。 ライブラリがパブリックAPIを公開する形式に関して、特定の規則があります。 Angularはこれらの規則に従っており、最近の変更はDartアプリケーションに大きな影響を与えていません。 本質的に、最小限のアプリケーションでは何も変わりません。



Angular2によるバインディングの実装を支援するZone.jsは、angular2-polyfills.jsの一部になりました。 このコードを最初に実行して、ページに追加する必要があります。 この変更により、JSアプリケーションで混乱と多くの問題が発生しました。 Dartから生まれ、プラットフォームの一部として作成されたゾーンは、すぐに使用できます。



Reflect-metadata.jsは、ES2016の一部として提案されているリフレクションAPIを実装するライブラリです。 現在は、angle-polyfills.jsの一部でもあり、コード内の対応する変更を引き出します。 同時に、Dart pubトランスフォーマーは、リフレクションコードをアセンブリ中の静的な同等物に置き換え、reflect-metadata.jsは単に必要ありません。



Angular2の観察可能なオブジェクトは、APIの基盤です。 ObservableタイプもES2016標準の一部として提案されています。 ただし、現時点では、RxJSがこのギャップを埋めています。 Angularは完全に書き直されたRxJS 5を使用します。これはベータレベルで活発に開発されています。 RxJSのベータ版では、JSおよびTSプロジェクトに対応する変更を必要とする大きな変更が導入されました。 また、Dart Streams（Observablesの特別なケース）はSDKの一部であり、RxJSは必要ありません。 DartのストリームがRxJSのオブザーバブルを置き換えることができると思わない場合は、次のようにします。



Angular 2はTSで記述されており、ES2015の機能に依存しているため、es6-promise.jsやes6-shim.jsなどのレイヤーが機能する必要があります。 これらのライブラリのバージョン制限により、アップグレード中に深刻な問題が発生しました。 そして何だと思う？ Dartアプリケーションもこれらのレイヤーを必要としません。 Dart2jsコンパイラーは、すべてのブラウザー間の互換性の問題を処理します



Angularパッケージの新しい構造では、スクリプトをロードする特定の順序を順守する必要があります。 たとえば、zone.jsを最初にロードし、次にsystem.js、次にRx.js、es6-shim.js、es6-promiseをロードしてから、Angularコードをロードできます。 UMDを使用すると、順序が変わる場合があります（UMDは、Angularプロジェクトのアセンブリのターゲットとして選択できる別のJSモジュール形式です）。 これは、追加する必要がある唯一のスクリプトがmain（）関数を持つファイルであるという理由で、Dartを操作するときに覚えておく必要さえないようなものです。



おわりに



おそらく、ユビキタスマントラ「すべてがDartに含まれている」があなたを悩ませるかもしれませんが、上記を見てください。それはある種の抽象的なプレゼンテーションや「Hello world」ではありません。 Angularは、世界で最も人気のあるWebフレームワークの1つです。 何百万行ものコードがAngularJSで書かれており、Angular2でさらに書かれていることを期待しています。 したがって、このマントラを過小評価しないでください。



TSやJSを強制終了して、すぐにCookie側（Dart）に切り替えることは強制しません。 Dartには欠点があります。 しかし、開発のしやすさとDartでの開発のスリルは、JSの世界では本当に見逃したものです。 うまくいけば、時間の経過とともに、JSエコシステムがギャップを埋め、開発の生産性が向上することを願っています。