😼 😒 🧓🏾 ちょうど角ばった 🔂 🍕 🛂

はじめに

2016年12月8〜9日にベルギーで最初の Angular 会議が開催されました。 Igor Minar （Angularの開発主任）は、Angularのスケジュールに関するいくつかの興味深い発表で基調講演を務めました。そして、2017年3月にAngular 4のリリースを待っていると想像してください。同時に、ベータ版が既に公開されています。

翻訳者から

みなさん、こんにちは。マキシム・イワノフとドミトリー・セルギエンコフです。今日、第3版がどこに行ったのか、なぜAngularに忠実であることができるのかを説明します。 JavaScriptを学習している初心者のフロントエンド開発者が、トレンドを維持しながらどのフレームワークまたはライブラリを使用して学習すべきかを判断するのは非常に困難です。もちろん、Reactという言葉がなくても、フロントエンドについての単一の会話は完全ではありませんが、Angularの最初のバージョンから始めました。はい、jQueryのみを使用して企業アプリケーションを作成できますが、プロジェクトが発展し、複雑さを増すにつれて、ロジックとプレゼンテーションを組み合わせてスパゲッティコードを掘り始めます。MV*フレームワークではこれができません。

内容

なぜAngular 4なのか？ Angular 3はどこにありますか？何が起こっているの？

セマンティックバージョニング仕様

2番目のバージョンがリリースされた9月に、 Angularチームはセマンティックバージョニング（ SEMVER ）をサポートすると発表しました。

名前が示すように、セマンティックバージョニングは各バージョン番号に意味を追加しています。バージョン番号のセマンティクスにより、開発者は製品のこのバージョンで実行された近代化の種類を決定できます。さらに、NPMパッケージマネージャーなどのツールを構成して、アプリケーションをビルドするときに依存ライブラリの特定のバージョンが選択されるようにすることができます何も壊しませんでした

バージョンのセマンティクスは3つの数字で構成されています。

コードの誤り（バグ）を修正して製品を再度リリースするたびに、最後の数字を増やします。製品に新しい関数を追加したばかりの場合は2桁目を増やしますが、古いコードの操作を中断するような基本的な（重大な）変更を伴う製品をリリースする場合は、1桁目を増やします。

このライブラリを使用する開発者がコードに介入して、新しいバージョンに更新およびアップグレードした後にコードを変更する必要がある場合、重大な変更が表示されます。

これはAngular Teamにとって何を意味しますか？急速に開発されているソフトウェアの場合、重要な変更を実行する必要があるときが来ることは明らかです。したがって、客観的な理由により、Angularチームはバージョン1.xを2.xに変更しました。これは、行われた変更がメインコードの作業を中断したという事実によるものです。

重大な変更は苦痛ではありません

Angularコミュニティは、これが何であるかを正確に理解します。 2番目のバージョンにアップグレードするために、ユーザーはコード全体を書き直す必要がありました。多くの人がAngular 1.xに恋をしましたが、客観的な理由から、一般的な重要な変更が行われ、新しいAPIが作成され、新しいテンプレートが作成されました。これは明らかであり、最終的に、Angular 2は完全に書き直されました（ただし、新しいバージョンに簡単に移行する方法はあります）。

現在、バージョン2からバージョン4、5、...への移行は、最初のバージョンほど痛みを伴うべきではないと判断されました。コードは完全には書き直されず、変更は、Angular 2に同梱されている個々のライブラリのみに影響し、SEMVERに従って尊重されます。さらに、開発者がタイムリーに新しい機能に切り替えることができるように、非推奨フェーズ（この機能は将来のバージョンではサポートされないという開発者コンソールからの警告）を徐々に追加します。

Angular Teamは、独自の変更管理と自動更新処理ツールを使用しています。チームはそれに取り組んでおり、2017年のAngular 5のリリースと併せてリリースを計画しています。

今では「角度」だけです

ご想像のとおり、「Angular 2」という用語は、4番目または5番目のバージョンのリリースでは廃止されます。ただし、バージョンなしで単に「Angular」と呼ぶ必要があります。さらに、ng2-またはangular2-の接頭辞が付いたGitHub / NPMのライブラリの回避を開始する必要があります。 GitHubの公式コミュニティには、ドキュメントを含む単一のリソース、 angular.ioがあります。

新しいバージョン管理規則

今後、明確にする必要がない場合は、バージョン番号の使用を避けてください。

3つの簡単なガイドライン：

デフォルトの「Angular」を使用します（たとえば、「私はAngular開発者です」、「これはAngular-Meetupです」、「Angularコミュニティは急速に成長しています」）
特定のことに関しては、「Angular 1」、「Angular 2」、「Angular 4」を使用します（「これは、Angular 4で導入されたX機能です」、「Angular 1から2にアップグレードしました」、「角度5 "）
エラーを報告するときは、semverのフルバージョンを使用します（たとえば、「この問題はAngular 2.3.1に存在します」）

Angular 1.xを含むすべてのドキュメントは、今後数週間でこれらのルールに準拠するようになります。しかし、ブログに何かを書いたり、記事、コース、本を書いたり、毎回、Angularの特定のバージョンに焦点を合わせ、出版物のヘッダーにバージョンを追加してみてください。おそらくこの記事ではAngular 2.3.1が使用されます。これは、特に特定のAPIについて書くときに、読者の混乱を避けるのに役立ちます。

なぜ3番目のバージョンをスキップすることにしたのですか？

角度コアライブラリはGitHubの同じリポジトリにあります。すべてに独自のバージョンがあり、さまざまなNPMパッケージとして配布されます。

バージョンの不一致により、パケットルーターはすぐにAngular 4を探し始めました。そのため、セマンティックバージョン管理はコアカーネルパッケージに対して厳密である必要があると判断しました。これは保守がはるかに容易であり、Angularバージョンは依存関係の最新バージョンに基づいて命名されます。

さらに、AngularはGoogleによって使用されることを理解することが重要です。ほとんどのGoogleアプリケーションは、GitHubのメインリポジトリブランチのAngularを使用します。 masterブランチで更新が発生すると、すべてがメインのGoogle内部リポジトリ（会社は1つのモノリシックリポジトリを使用）にすぐに統合され、Google Maps、Adsenseなどの製品が配置されます。その結果、Angularを使用するすべてのプロジェクトに重大な変更がある場合、すべてのプロジェクトを書き直す必要があるため、不便です。したがって、時間の経過とともに保守が容易になる完全に統合されたバージョンを用意することをお勧めします。これにより、チームが新しい機能をリリースする際の生産性が向上します。

暫定リリーススケジュール

それにもかかわらず、重大な変更が発生するという事実は、それらが1週間以内にすぐに現れることを意味しません。 Angular Teamは、将来、バージョン間の下位互換性を確保し、変更が明確になり、3サイクルの特定のスケジュールに沿って進むことを保証します。

パッチリリースは毎週
3か月ごとに機能の小さな変更が表示されます
6か月ごとに、移行がほとんどない新しいバージョンのAngular

次の3か月は、Angulr 4.0.0の完成に充てられます。

Angular 4.0.0の後、将来のリリースの予備スケジュールが見つかります。

結論：心配しないでください

最後に、イゴールミナールは要約しました。

バージョン番号を気にしないでください
Angular 1.xと2.xの違いと同じように、Angularと一緒に開発する必要があります。コミュニティとして一緒に開発し、お気に入りの製品を開発および改善する必要があります。
私たちがAngular 1.xでこれをしなければならなかった理由を理解し、すべてをゼロから書き直さなければなりません

Angular2 Webpack Starter

Angular2 Webpack Starter - Webpackプロジェクトビルダーを使用して、 AngularとTypeScriptをすばやく起動するためのリポジトリです。

このリポジトリに含まれるもの：

Angular 2でファイルとディレクトリを整理するためのベストプラクティス
TypeScriptを使用したWebpack 2ビルドシステム
Angular 2デモ
Angularの最新バージョン
アプリケーションをすばやくダウンロードするための先読み（AoT）
プロジェクトから未使用のコードを自動的に削除するツリーの揺れ
ジャスミンとカルマを使用したテスト
イスタンブールとカルマのテストカバレッジ
分度器によるエンドツーエンドのAngular 2テスト
@typesを使用したタイプマネージャー
材料設計
ホットモジュールの交換
package.jsonおよびその他の将来のバージョンを変更することによる、Angular 4のサポート

クイックスタート

Node.jsバージョン> = 5.0およびNPM> = 3.0であることを確認してください

#    git clone --depth 1 https://github.com/angularclass/angular2-webpack-starter.git #   cd angular2-webpack-starter #    npm npm install #    #   npm start #  Hot Module Replacement npm run server:dev:hmr

ブラウザのhttp://0.0.0.0 {000またはhttp：// localhost：3000に渡します。公式リポジトリの詳細。

コンテンツビデオコース

コースでは、最も人気のあるフレームワークの1つであるAngular 2を使用して、アプリケーションの作成をすぐに開始することができます。コースをステップごとに完了すると、実際のアプリケーションを作成し、Angular 2の詳細に精通することができます。言語が不自由です。主なことは、作者が書いたコードを掘り下げることです。基本的にはすべてがスライドで接続されており、これも直感的です。何も払わずに座って成長する必要はありません。

Angular 2で過去2016年に登場したもの

統計（2016年9月現在）

Angular 1を使用する120万人の開発者
623千人がすでにAngular 2を使用しています

Angular 1がモノリシックプロジェクトであった場合、Angular 2はプラットフォームと見なす必要があります。

Angular 1は43個の組み込みディレクティブを使用しましたが、Angular 2では[]と（）を使用します。

Angular 2は高速です

当初、Angular 1の重量は56Kでした。同時に、Angular 2自体のコアは-170Kでした。 Angular Teamは大量のコードを最適化し、Angular 2コアの重量は45Kになりました。

遅延読み込み

Angular Teamの主なタスクは、自動遅延読み込みを実現することでした。これにより、アプリケーションは現在のページに必要なもののみを保証します。遅延読み込みは、アプリケーションでルーティングするときにも有効化されています。

高速レンダリング

最初のバージョンと比較して、Angular 2アプリケーションは2.5倍速く、再描画は4.2倍速くなります。 Angularチームは、レンダリングをさらに高速化できると考えています。

公式コード作成ガイド

Angular 1の時代には、コードを記述するための多数のガイドが登場しました。これは多くの独特のスタイルにつながり、インターネット上での発散につながりました。現在、Angular 2の公式スタイルガイドがあります。

Angular 2アプリケーションの材料設計

角度のある素材は本当に良い感じです。アプリケーションでマテリアルスタイルを使用するのは簡単で、コンポーネントを埋め込むだけです。

Angular Mobile Toolkitを使用したプログレッシブWebアプリケーション

Angular Mobile Toolkitを使用すると、インターネットに接続していなくても、あらゆるデバイスに即座にダウンロードするWebアプリケーションを簡単に作成できます。

プログレッシブWebアプリケーションは、多くのWeb開発者にとって非常に興味深いものです。コードを作成して再利用し、パフォーマンスの良いモバイルアプリケーションを作成することは、ネイティブモバイルアプリケーションとほぼ同じです。 Angular Mobile Toolkitは、この夢の実現に向けたもう1つのステップです。

サーバー側のテンプレート

Angular 1アプリケーションの大きな問題は、ブラウザのみで構築されたことです。これは、アプリケーションが完全にSEO指向であることを意味します。

Angularチームはアセンブリのメインコンポーネントを引き出し、サーバー上を含め、どこでもアプリケーションを構築できるようになりました。

サーバー側のテンプレートを構築するためにNodeJSでこれを行うのに十分簡単です。

ユーザーのアプリケーションはさらに高速に実行されるようになり、ブラウザでの貴重なレンダリング時間を節約できるようになりました。

Angular CLIを使用した迅速な端末開発

最良の部分は、 Angular CLIです。アプリケーションのインストールには多くの手順が必要ですが、多くの問題が発生する可能性があります。

TypeScriptを使用した入力セットアップ
コンポーネントのインポートの構成
アプリケーションの起動
system.jsを使用する

Angular CLIを使用すると、1行でインストールが簡単になります。

 ng new scotch-app

Angular CLIの使用を開始するには、次を実行するだけです。

 npm install -g angular-cli ng new scotch-app cd scotch-app ng serve

Gulp、Grunt、Webpack、Browserifyは必要なくなりました。

多数のチュートリアル

たとえば、このビデオでは、Angular 2でアプリケーションを構築する方法について詳しく説明しています。

Webアプリケーションでのオプションの入力

TypeScriptでできることはたくさんあります。 TypeScriptを使用する理由はたくさんあります。 TypeScriptのおかげで、Angular 2の開発は改善されました。

良いデバッグツール

BatarangleをAngular 1で使用している人は誰でも、ブラウザで変数とアプリケーションの状態を見る能力が開発中に非常に役立つことを知っています。

現在、 Angular Auguryがあり、それを行うことができます。ブラウザの変数、階層、継承の状態を確認するために、アプリケーションのすべての部分でconsole.log（）を使用する必要はありません。

Firebaseビジネスアプリケーション開発プラットフォーム

チャットなど、 Angular 2、 Firebase、 AngularFire2を使用して約10分でリアルタイムアプリケーションを構築できます。短期間に実装される多くの機能があります。

NativeScript + Angular 2を使用したクロスプラットフォームモバイルアプリケーション

Angular Mobile Toolkitは革新的なWebアプリケーションの構築に重点を置いていますが、 NativeScriptは Angular 2を使用したネイティブアプリケーションの作成に関心があります。

違いは何ですか？たとえば、アニメーション。ブラウザーとは異なるネイティブアニメーションを使用すると、多数のオブジェクトがあってもすべてがスムーズに表示されます。

ゾーンのおかげで簡単なテスト

非同期タスクを管理するためのZone.jsライブラリ、実行コンテキストを制御する方法。素晴らしい言葉がたくさんありますが、主なアイデアは、Angular 2ではテストがはるかに簡単になるということです！

zone.jsのおかげで、これらの非同期タスクはすべて監視されます。彼女のビデオで、ジュリーラルフはそれがどのように機能するかについて語っています。

結論として

Angularが通常のフレームワークからプラットフォーム全体に成長したことを非常に誇りに思っています。これにより、Webアプリケーションだけでなく、品質の劣らないネイティブアプリケーションも簡単に開発できるようになりました。 Angularチームは多くの作業を行っており、そのことに感謝しています。もちろん、周りにはたくさんの良いものがありますが、大きな何かの一部であることははるかに楽しいです。明けましておめでとうございます読者の皆様、幸運をお祈りします！

ちょうど角ばった