Ember.js：Webアプリケーションに最適なフレームワーク

ember.jsは、コンベンションとオーバー構成に焦点を当てた最新のフロントエンドJavaScriptフレームワークであり、最近多くの注目を集めています。この記事では、簡単なサイコロロールアプリケーションを構築することにより、フレームワークの重要な概念とその実装機能を紹介します。

サンプルアプリケーションは、ユーザーがサイコロを転がして履歴を表示できるサイコロロールプログラムです。アプリの完全なコードはGitHubで利用できます。

ember.jsは、多くの最新のJavaScriptの概念とテクノロジーを統合します。

babel翻訳者を使用したES2016をサポートします。
標準ユニット、統合および受け入れテストサポート、TESTEMとQTESTを搭載しています。
broccoli.jsを使用してリソースを構築します。
リアルタイムのリロードをサポートし、開発サイクルを短くします。
ハンドルバーのテンプレート構文を使用します。
urlルーティングは、ディープリンクの完全なサポートを確保するために優先されます。
JSON APIに基づいて完全なデータレイヤーを作成しますが、必要に応じて他のAPIアクセスメソッドを挿入できます。

ember.jsを使用するには、node.jsとnpmの最新バージョンをインストールする必要があります。そうでない場合は、node.jsの公式Webサイトからダウンロードしてインストールできます。

注目に値すると、ember.jsは純粋にフロントエンドのフレームワークです。選択したバックエンドと対話する複数の方法がありますが、バックエンド自体はember.jsによって処理されません。

キーポイント

• ember.jsは、最新のJavaScript機能とツールを単一の一貫したパッケージに統合し、Webアプリケーションを構築するのに理想的な包括的なフロントエンドJavaScriptフレームワークです。
このフレームワークは、「構成に関する慣習」の原則に基づいており、合理的なデフォルトとベストプラクティスを提供することにより、開発プロセスを簡素化し、それにより開発サイクルを高速化し、セットアップ時間を短縮します。
Ember-Cli（Emberのコマンドラインインターフェイス）は、プロジェクトの作成と開発からテストと展開まで、開発ライフサイクル全体を管理する強力なツールであり、それによって生産性と効率が向上します。
ember.jsは、強力なURLルーティングと深いリンクをネイティブにサポートし、アプリケーションがSEOに優しいことを確認し、明確なナビゲーション構造で保守性を維持します。
フレームワークには、クライアントとサーバー間のデータインタラクションを管理するための組み込みのデータレイヤーが含まれていますが、デフォルトでJSON APIをサポートしていますが、異なるバックエンドAPIに合わせてカスタマイズが可能になります。
テストは、Ember.jsのファーストクラスの市民であり、TestemやQTestなどのツールを搭載した単体テスト、統合テスト、受け入れテストをサポートし、アプリケーションの信頼性と品質を確保するのに役立ちます。
ember.jsは、コンポーネントとテンプレートを使用して、再利用可能で保守可能なユーザーインターフェイス要素の開発を簡素化し、Webアプリケーションの設計とアーキテクチャのベストプラクティスを促進します。

はじめにember-cli

ember.jsのパワーは、コマンドラインインターフェイス（CLI）から得られます。このツールは、Ember-Cliをコールして、Ember.jsアプリケーションの開発ライフサイクルのほとんどをドライブします。アプリケーションの作成、機能の追加、テストスイートの実行、開発モードでの実際のプロジェクトの立ち上げまで。

ember.jsアプリケーションを開発する場合、ほとんどすべてがこのツールにある程度関与するため、最適な使用方法を理解することが重要です。この記事で使用します。

まず、Ember.js CLIが正しくインストールされ、更新されることを確認する必要があります。これは、次のようにNPMからインストールすることで実行できます。

次のコマンドを実行することで正常にインストールされているかどうかを確認できます。

$ npm install -g ember-cli

最初のember.jsアプリを作成します

これにより、すぐに実行できる完全なアプリケーションが作成されます。それはあなたの作品を追跡するためにソースコントロールとしてGitを設定することさえあります。

$ ember new dice-roller
... (安装过程输出) ...

注：必要に応じて、GIT統合を無効にするか、npmの代わりに糸を使用することを選択できます。これ以上については、ツールのヘルプドキュメントに記載されています。

さあ、それがどのように見えるか見てみましょう。 Ember-Cliを使用して、開発のためのEmberアプリケーションを開始します：

$ npm install -g ember-cli

今、準備ができています。アプリケーションは、で次のように実行されています また、ファイルシステムの変更を自動的に監視するLivereloadサービスも実行されます。これは、ウェブサイトのデザインを微調整するときに非常に速い転換時間を確保できることを意味します。 やってみましょうか？

最初のページはすでに何をすべきかを教えてくれますので、メインページを変更して、何が起こるかを見てみましょう。このように見えるように

ファイルを変更します：

app/templates/application.hbs注：

タグは、Emberルーティングの仕組みの一部です。後でカバーします。

$ ember --version
ember-cli: 2.15.0-beta.1
node: 8.2.1
os: darwin x64

最初に注意すべきことは、Ember-Cliの出力です。これは次のようになります。 {{outlet}}

これは、テンプレートを変更し、すべてを再構築して再起動したことがわかったことを示しています。コンテンツのこの部分には参加していません。

今すぐブラウザを見てみましょう。 Livereloadがインストールされて実行されている場合、ブラウザをリフレッシュしてピックアップする必要さえありません。そうしないと、現在のページをリロードする必要があります。

$ ember new dice-roller
... (安装过程输出) ...

それはあまり面白くありませんでしたが、努力せずにこれを達成しました。

さらに、機能する完全なセットテストスイートも入手しました。予想どおり、これはEmberツールを使用して実行されます：

Phantomjsが出力で言及されていることに注意してください。これは、ブラウザで実行されている統合テストが完全にサポートされているためです。デフォルトでは、PhantomJSブラウザーでヘッドレスを実行します。必要に応じて、他のブラウザでそれらを完全にサポートすることができます。継続的な統合（CI）をセットアップするときは、サポートされているすべてのブラウザでアプリケーションが適切に機能するようにする価値があります。

...（残りのコンテンツは元のテキストに似ています。必要に応じて、全体的な意味を変化させないように調整できます。

以上がEmber.js：Webアプリケーションに最適なフレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。