現在、JavaScriptのライブラリがたくさんあります , DOMの操作についてのウェブサイトを満たすためのライブラリのほとんど .しかし、単一のアプリケーションのコードを管理することが急務であり、新しいフレームワークが発生した理由です。
"昔から言われているように、剣は刃先で使うものです"
Ember.jsは、従来のJQueryのようになりたくない 、あなたに良いデスクトップ体験を与えることはできません 、関連する列はありません 、データバインディングの欠如 、イベント 、状態管理 。一般的には、おそらくこれらの機能を達成するために一緒にプラグインをこつこつすることができます。しかし、現在では、これらの特殊な問題に対処するための専用のフレームワークが出現しています。私見ですが、なんと完璧なことでしょう。昔から言われているように、"刃物には刃物を使え "です。
最近、Ember.jsチームにインタビューしました。Ember.jsの何が新しく、何がホットなのかを知るのはとてもエキサイティングでした！
Emberは上記で説明したような機能を実装しており、その人気はJQueryがどのように開発者を素早くスタートさせたかを思い起こさせます。チームは設計手法に一歩踏み込み、多くの複雑さを抽象化し、アプリケーションのモデル/ビュー/コントローラの側面を構築するために、大規模アプリケーションにおける長年の実地経験に頼りました。
何回かに分けて、Ember.jsについてご紹介したいと思います。
一般的な紹介から始まり、徐々に完全なプロジェクトを作成していきます。私がいくつかのコンセプトを理解することで、あなたにも核となるコンセプトの理解を深めてもらいたいと思います。そうすることで、新しいテクニックを学ぶことができます。Ember.jsチームにこのドキュメントの可能性と正確性を確認してもらい、貴重なフィードバックをもらえるように最善を尽くしました。
Ember.jsは、私のためにたくさんの素晴らしいことをやってくれました。たまにコードを見ていると、"すごいな、どうしてこうなった？"と思うことがあります。ここでは、Emberのフレームワークのソースコードには触れず、APIやツールを使ってアプリケーションを作成する方法について説明します。
では、そのステップを始めてください。
コアコンセプト
Ember.jsは従来のWebサイトのためのフレームワークではありません。
Ember.jsは従来のWebサイト向けのフレームワークではなく、JQueryやMooToolsの方が従来のWebサイトには適しています。JQueryとMooToolsは従来のWebサイトにはもっと適しています。 Ember.jsをどのように検討するかは、スケーラブルなデスクトップ体験に注目してください。フレームワークのマントラが完璧なWebアプリケーションを作成することであるという事実は、これがJavascriptの親フレームワークではないことを明確に物語っています。
Emberはコードの管理と整理にMVCパターンを利用していると最初に書きました。MVCを使った開発をしたことがない場合は、まずその概念について読む必要があります。これらの概念に慣れれば、一目で理解できるようになります。バックエンドをEmber.jsに変換するのは、実はとても簡単なことだとよく聞きます。というのも、Emberはすでに多くの重労働をこなしてくれますが、開発者はすでにコード構造に慣れていなければならないからです！
Emberもクライアントサイドのテンプレートに依存しています。たくさんあります。 Handlebarsテンプレートフレームワークを使用しており、一連の式を使用して動的なHTMLページを作成します。これらの埋め込みページ式により、Ember開発者はデータをバインドし、その場で動的に表示を変更することができます。例えば、私は人々の配列を受け取り、それらを順序なしで表示するテンプレートを作成します：
<ul>
{{#each people}}
<li>Hello, {{name}}!</li>
{{/each}}
</ul>
注: "#each "は "people "配列の各要素を列挙し、"{{name}}"式を実際の値に置き換えるループ式です。注意すべき重要な点は {{}} 構文が式を検証するために Handebars によって使用されることです。これは簡単な例なので、後で詳しく説明します。
Handlebarsは強力なクライアントサイドテンプレートエンジンです。The Ember Wizardだけでなく、Handlebarsのウェブサイトをチェックすることをお勧めします。きっと役に立つはずです。
Emberの設定
Eember.jsはJQueryやHandlerbarsのような伝統的なライブラリに依存しています。
でもちょっと待って、JQueryとEmberは使い方が違うと言いませんでしたか？そうです。しかし、Emberチームがライブラリを作り直したくなかった状況がここにあります。彼らがJQueryを選んだのは、DOMを操作するのに最適な方法だからです。同じように、Handlerbarsを選んだのは、Emberのコア開発者の一人であるYehuda Katzが実装した、かなり優れたテンプレートだからです。
Github の依存関係リポジトリは、必要な Ember.js を取得するための非常にシンプルな方法です。現時点では
- Ember 1.0 RC1
- Handlerbars 1.0 RC3
- jQuery 1.9.1
現在、関連するすべてのフレームワークを含む基本的な html ページテンプレートがあります。また、Handlebars の例と "app.js" と呼ばれる基本的な Ember アプリケーションも含まれています。
<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
<script src="js/libs/ember-1.0.0-rc.1.js"></script>
<script src="js/app.js"></script>
琥珀関連
コードを書き始める前に、Ember.jsの仕組みを理解しておきましょう。Emberアプリケーションを構成する関連モジュールを集めるのです。他の部分と、それらがどのように関連しているのかを見てみましょう。
ステンシル
テンプレートはインターフェイスの重要な部分です。 前にも書きましたが、HandlebarsはEmberで使われているクライアントサイドのフレームワークです。アプリケーションの場合、インターフェイスを作成する際に式を拡張することができます。 簡単な例を示します：
<script type="text/x-handlebars">
<h2><strong>{{firstName}} {{lastName}}</strong></h2>
</script>
注意: Emberでは、式は動的に変更可能なHTMLページに構成されます。この例では、{{firstName}} と {{lastName}} のプレースホルダはアプリケーションのデータで置き換えられます。
Handlebarsは、柔軟なAPIを通じて強力な機能を提供することができます。何を提供するかは、あなたにとって非常に重要です。
#p#
ルーティング
アプリケーションのルーティングは、アプリケーションの状態を管理するのに役立ちます。
アプリケーションのルーティングは、アプリケーションの状態と、ユーザーがナビゲートするために必要な関連リソースの管理を支援します。ルーティングには、モデルからデータを取得する、コントロールをビューに変換する、テンプレートを表示する、などの関連タスクが含まれます。
アプリケーションでは、特定の座標へのルートを作成できます。ルートは、アプリケーションの部分と、それらに関連するURLを指定します。 URLは、Emberがどのアプリケーションの状態をユーザーに提示する必要があるかを決定するための重要な識別子です。
App.Router.map( function() {
this.route( 'about' ); // Takes us to "/about"
});
Emberのインスタンス化されたルートは、ユーザーが専用URLをナビゲートする際のルートの振る舞いを管理します。モデルからデータをリクエストする例は次のようになります：
App.EmployeesRoute = Ember.Route.extend({
model: function() {
return App.Employee.find();
}
});
この例では、ユーザーがアプリケーションの"/employees "セクションに移動すると、ルートはすべての従業員に関する情報を取得するためにモデルにリクエストを送信します。
モデリング
オブジェクトデータのプレゼンテーション。
アプリケーションでは、モデルはデータ提示のためのオブジェクトとして使用されます。単純な配列形式にすることができ、AJAXリクエストによってRESTfulなJSON APIから動的にデータを取得することができます。アプリケーションでは、 Ember Data フレームワークがモデルへのデータのロード、マッピング、更新を行います。
ビュー
Ember.jsでは、ビューがイベントを管理します。ユーザーとアプリケーションが相互作用するとき、ビューはそれらをアプリケーションに明らかにできるイベントに変換します。つまり、ユーザーが社員削除ボタンをクリックすると、ビューはそのクリックを解析し、アプリケーションの現在の状態で処理します。
命名規則
Ember.jsでは、このように略語を極力使わない方法で規約を命名することで、コードを節約しています。ルートの定義方法は、コントロール、モデル、ビュー、テンプレートの命名に影響します。例えば、「employees」というルートを作ります。
封じ込め
コントロールは、モデルのデータや属性を保存したり置き換えたりするためによく使われます。コントロールは多くの場合プロキシとして動作し、モデルのプロパティにアクセスできるようにし、モデルがそのプロパティにアクセスして表示できるようにします。そのため、モデルはしばしば相関関係を制御するために使われます。
覚えておくべき主なことの1つは、モデルがデータを取得すると、コントロールは自動的にアプリケーションに関連するデータを公開するということです。これは、モデリングとコントロールが非常に緊密であるように見えるかもしれません。実際には、関連する知識を持たないモデルは、後で使われるコントロールにのみ関連します。
アプリケーションのプロパティを保存し、必要に応じて永続化することができます。
App.Router.map( function() {
this.resource( 'employees' );
});
- ルートオブジェクト: App.EmployeesRoute
- : App.EmployeesController
- : App.Employee
- : App.EmployeesView
- : employees
