Angular 8で何を探すべき

Angular 8で何を探すべきかは開発者の世界で驚かすことに失敗したことはありません。 予想どおり、Angular 8がリリースされ(2019年5月下旬)、優れたいくつかの主要なアップグレードが行われました。 Angular 8の重要な機能を一緒に見ていきましょう。

Angular Ivy

Angular 8では、新しく開発された高速なレンダリングエンジン「Ivy」が搭載されました。Ivyは2018年5月のng-conf 2018で発表され、モバイルデバイスでも十分に動作するほど小さく高速で、開発者にとって利用しやすいシンプルなAPIなどを備えたレンダリングエンジンとして開発が進められてきました。

なぜIvyを作る必要があったか? なぜRenderer2じゃダメだのか? というのは3つ理由があります。Smaller、Faster、Simplerです。

Smallerはその名の通り小さくします。何を小さくするかと言うとバンドル後のアプリケーションのサイズですね。Rendererによって今まではTree Shakingできなかった部分をTree Shakingできるようにすることで、バンドルサイズを大きく減らせると。使っている機能だけのバンドルサイズになるというのをAngularはIvyでさらに推し進めると言うことができます。さらに生成されるコードが、これはまあGooglerの中の人のすごいテクニックなんですけど、V8 friendlyのJavaScript codeを生成する能力に彼らは長けているので、それによって実行時に早くなると。

2つ目がFaster。Localityということで、これは理由を説明すると長くなるので省略しますけど、インクリメンタルビルドが早くなるという恩恵があります。

もう1個、Simplerは生成されるコードが読みやすくなるという恩恵ですね。デバックしやすくなる。スタックトレースの意味がわかりやすくなるみたいな恩恵があります。

Builders API

Angular 8はビルダーAPIを使用する機会を提供します。 Angularはサーブ、ビルド、テスト、lintやe2eなどの主な操作にビルダーを使用します。

基本的に、ビルダーは、@ angular-devkit / architectパッケージからcreateBuilder()メソッドにパスするコマンドを置き換えることができるタスクのロジックと動作を実装する関数です。 この新しいバージョンでは、開発者は独自のカスタムビルダーを作成できます。 中古のビルダーをangular. jsonファイルで見ることも可能です。

Bazel Support

Angularフレームワーク自体はBazelで構築されています。Bazel はGoogleにより開発されているソフトウェアのビルド・テストツールです。

Bazelを使用すると、ユーザーはCLIアプリケーションを構築できます。特に、同じツールでバックベンドとフロントエンドの両方を構築できます。 Angular 8のBazelはまだ「オプトインプレビュー」モードであり、Angular 9での準備ができると予想されているという事実にもかかわらず、それはまだ多くの利点を得ることが期待されています。

Bazelはビルド時間の短縮が期待できます。 大規模なソフトウェアではビルド対象が増えるため、ビルドにかかる時間も増える傾向があります。Bazelでは生成物どうしの依存性を自動的に把握し、可能な限り並列でビルドを実行する仕組みになっています。古いバージョンはCIが完了するまでに最大60分かかりましたが、新バージョンのBazelサポートを使用すると、プロセス全体が7.5分以内に完了します。

さらに、ビルドはインクリメンタルになります。 開発者は、アプリケーション全体ではなく、変更と更新のみをビルドしてデプロイできます。

開発者は、ビルドファームのリモートビルド(キャッシュ付き)にもアクセスできます。 開発者はBazelファイルを取り出すこともできます。デフォルトでは非表示になっています。

Bazelサポートを追加するには、次のコマンドを使用します。

Command to add bazel support

または、Bazelを使用して新しいアプリを作成することもできます。

Command to create new app with Bazel

Support for Typescript

AngularはTypeScript 3.4(v7は3.2.xを使用)を使用するようになりました。 Angular CLIを介して生成されたすべての新しいアプリケーションも、デフォルトで最新バージョンのTypeScriptを使用します。

Angular 8には、RxJSやTypeScriptなどのツールを含む、Angularの最新かつ最高のバージョンへのアップデートも含まれています。

Support for $location

アップグレード時に$ locationサービスのサポートが追加されました。 特に、新しいパッケージangular / common / upgradeが強化と統合の向上のために追加されています。

パッケージの目的は、

  • 位置情報サービスから状態を取得しています。
  • すべての場所の変更を追跡できます。
  • AngularJSで利用できたホスト名プロトコルポート検索プロパティを読み取ることができます。
  • 位置情報サービスをテストするためにMockPlatformLocation APIが追加されました。

Support for web workers

Web worker は、フロントエンド開発の世界では非常に重要です。 開発者はWeb workerを使用して、CPUを集中的に使用する作業を別のハードウェアスレッドに送り出し、メインスレッドを解放してユーザーインターフェイスを更新できます。

Web workerは、データの処理中にアプリケーションの無応答に対処するのに特に役立ちます。

Angular 8では、バックグラウンドで実行したい時間のかかるプロセスを完全にWeb workerに割り当てることができます。

Angular CLIを使用して新しいWeb workerを生成するには、次のコマンドを実行します。

Command to generate new web worker

 

Angular Firebase

良い情報ですが 、 これで、Angular CLIを使用してアプリケーションを展開できます。 以下のコマンドを実行して、CLIを使用してアプリケーションを展開します。

command to deploy with Angular Firebase

 

Lazy Loading

Lazy loading(遅延読み込み)を利用する最も普遍的な方法の一つは、プレースホルダーとして低画質の画像を表示することである。ページは画像サイズが小さくなるおかげで、ずっと早く読み込まれます。

画面のスクロール位置に応じて必要な分だけ画像を取得するので、とても効率的です。これにより、ユーザーエクスペリエンスが大幅に向上します。

遅延読み込みルートの設定は簡単です。 Angular CLIにはそのためのコマンドがあります

Angular command for lazy loading

 

Different Loading

Angularチームはこれを「最新のJavaScriptの+Different Loading」と呼んでいます。 基本的に、Different Loadingとは、Angular CLIによって、構築され、レガシーJavaScript(ES5)と最新のJavaScript(ES2015 +)の個別のバンドルが含む新しいアプリです。 これにより、Angular 8アプリのパフォーマンスが向上します。 ES2015をサポートする最新のブラウザーは、以前よりも速くロードおよびレンダリングされる、小さくて効率的なアプリバンドルをダウンロードできます。

SVG as a template

SVGをテンプレートとして使用することは可能でしたが、これまではテンプレートとしてインラインHTMLと外部HTMLのどちらかしか選択できませんでした。

 

BHSoftでは、Angularバージョンを常に追跡しています。 以下は、Angularバージョンの更新速度を示すグラフです。 定期的な更新はパフォーマンスを向上させるのに役立ち、最新のAngularバージョンでのみ利用可能なすべての素晴らしい機能をテストする機会を提供します。 BHSoftでは、常にお客様にとって最良のものを提供したいので、生産性を維持するための定期的な更新は必要です。 下のグラフを見て、Angularバージョンの更新履歴を確認してください。

 

BHSoft Angular Version update history

 

Related post:

https://bachasoftware.com/difference-between-angular-and-react/