Backbone.jsとjQuery


81

バックボーンはすべての高レベルの抽象化を処理すると言われていますが、jQueryまたは同様のライブラリはDOMと連携し、イベントを正規化します。

誰かが簡単な実用的な例でこのステートメントを理解するのを手伝ってくれませんか。

また、BackboneのようなMVCフレームワークの重要な機能の1つであるノックアウトは、モデル(データ)とビューの同期を維持することです。しかし、これはアプリケーション全体ではなく、ページレベルで固有のようです。それで、モデル/データとビューを複数のページ間で同期させることができますか..(一種のグローバル)


1
「BackboneANDjQuery」と言う必要があります
新生児2012年

初心者による-初心者向け。thomasdavis.github.com/2011/02/01/backbone-introduction.html。どちらも、日常の問題に対して使いやすくスケーラブルなソリューションを提供することを目的としています。1つ(jQuery)は、DOMのロード後に既存の要素を操作し、データを操作しやすくすることに重点を置いています。もう1つ(バックボーン)では、モデル(表示するデータ)、ビュー(データの表示方法)、およびコントローラー(を指示する「MV(VM / C / CR)」アプリケーションを作成できます。バックボーンはこれを2つの方法(収集/ルーティング)に分割し、ロード前のデータの移動/操作を行います。
Ohgodwhy 2012年

そのためのTHXは...私は...質問を更新しました
testndtv

回答:


54

バックボーン/ノックアウトは通常、シングルページアプリケーションに使用されます。したがって、jQueryは任意のWebページで使用できるツールボックスですが、Backboneは特定のタイプのアプリケーションを対象としており、そのためのコードを整理するのに役立ちます。少なくとも私の経験では、シングルページアプリを構築する上での最大の課題の1つは、コードをクリーンでモジュール式に保つことです。バックボーンはこれに大いに役立ちます。

典型的なバックボーンアプリの特徴は次のとおりです。

  • サーバー上で何も生成されない、本質的に静的なhtmlページ
  • サーバーは、アプリのコンテンツを提供するjson RESTAPIとして機能します
  • データを表示するdom要素は、バックボーンビューでjavascriptを使用して作成され、jQueryとさまざまなテンプレートライブラリを使用して支援します
  • サーバーとの通信、およびアプリのさまざまな部分間の通信は、バックボーンモデルを介して行われます。

複数のページ間でデータの同期を維持することについての質問に関して、私の本能的な答えは、複数のページは必要ないということです。ユーザーはページが変更されていると感じるかもしれません。URLバーのアドレスはpushState機能のおかげで変更されますが、技術的にはアプリ全体が1ページです。

この種のアプローチの最大の利点は、スムーズなユーザーエクスペリエンス(ページの再読み込みなし)、jsonデータ以外はすべて静的コンテンツであるため、優れたキャッシュサポートです。モバイルターゲットの場合、WebアプリをphoneGapを使用してモバイルアプリに変えることができます( json以外はすべて静的です)。


1
うーん...たくさんあります...バックボーンは主にシングルページアプリにのみ使用されていると言うと少し混乱します...実際にシングルページのみのアプリがいくつあるかわかりません...ほとんどのアプリには複数のページがあります...マルチページアプリを持っていても... Backbone.jsを使用できませんか?
testndtv 2012年

4
シングルページアプリは、技術的には1つのHTMLページであることを意味します。ユーザーの観点からは、通常、複数のビュー(「ページ」)と機能があります。例として、実際にバックボーン、またはgmailを使用して開発されたモバイルLinkedInページtouch.www.linkedin.comを提供できます。
OlliM 2012年

はい、もちろん、マルチページアプリにバックボーンを使用できます。その場合、独立してリロードされたページと同じ数のバックボーンルーターを使用する可能性があります
Alexander Mills

128

冒頭の文は、実際にはBackbone.jsとjQueryの違いを非常によく表しています。それでは、少し解凍してみましょう。

一つには、2つのライブラリはまったく競合していません-それらは無料です。

例として、jQueryで行ういくつかのことを次に示します。

  • アニメーションのスライドショー
  • iOSスタイルの数値「スピナー」などのフォームコントロールの機能強化
  • クラス名に基づいて要素の可視性を切り替える

そして、Backbone.jsで行う可能性のあるいくつかのこと:

  • フォトアルバムを作成します。ユーザーがサムネイルをクリックすると、使用したカメラ、場所、写真家の名前などのデータとともに、写真の拡大版を表示できます。
  • データのグリッドを表示し、ユーザーが個々の要素をクリックしてフォームで更新できるようにするマスター/詳細タイプのページを作成します。

jQueryはミクロレベルで優れています。ページ要素を選択し、ブラウザーがイベントを処理する方法の違いを滑らかにします。

Backbone.jsはより全体像です。データとアプリケーションロジックの管理に役立ちます。上記のフォトアルバムの例では、Backboneはいくつかの便利な構造を提供します。写真に関連するすべてのデータ(モデル)、アルバム内のすべての写真のリスト(コレクション)、およびどこかに置く場所があります。ユーザーがサムネイル(ビュー)をクリックしたときに何が起こるかを決定するロジック。これらは、バックボーンコントロールまたはアプリケーションの主要部分です。

ただし、Backbone.jsは、アプリケーションのデータとロジックの結果をDOMにレンダリングするのに役立つ、jQueryまたはそのようなものの恩恵を受けています。たとえば、jQueryを使用して、Backboneアプリのコンテナとして機能するページ上の要素を選択するのが一般的です。また、jQueryを使用し$(function () {});てバックボーンコントロールの一部を起動することも一般的です。おそらく、jQueryでもフォームフィールド検証エラーメッセージを表示するでしょう。

確かに、jQueryで大きくて複雑なユーザーインターフェイスを構築できます。私が仕事で維持しているアプリにはいくつかあります。ただし、jQueryはアプリケーションに構造を提供するように設計されていないため、操作が困難です。特に、アイテムのグループを選択し、それらのアイテムを操作するコールバック関数を渡すことに基づいているjQueryのAPIは、大規模で複雑なコントロールやアプリで使用するのに適したパターンではありません。ネストされた関数がたくさんあることになり、何が起こっているのかを確認するのは非常に困難です。

私は現在、Backbone.jsでそれらのコントロールの1つを作り直しています。最後の例として、両方の異なるライブラリで同じコントロールを操作するときに、私の思考プロセスがどのように異なるかを簡単にまとめます。

jQueryでは、次のことが心配です。

  • 正しいセレクターを使用して、li必要な要素のグループを取得していますか?
  • このAjax呼び出しが完了したときに、その値のリストを再入力する必要がありますか?
  • これらの配列値をinputページの要素に戻すにはどうすればよいですか?

バックボーンでは、私はより焦点を当てています:

  • モデルアイテムのこのプロパティセットを検証するための正しいロジックは何ですか?
  • ユーザーが[追加]ボタンをクリックしたときに、コレクションに新しいアイテムをすぐに追加する必要がありますか、それともすべてのデータが入力されて「有効」になるまで待つ必要がありますか?
  • コレクション内のアイテムは、削除の直前または直後にどのように応答する必要がありますか?

jQueryは本質的な詳細を処理し、Backboneはより高レベルです。

最後に、Backbone.jsの例について説明するときに、「control」と「app」という単語を使用していることに注意してください。Backbone.jsがシングルページアプリ専用であるというのは真実ではありません。ただし、Backbone.jsは、データを操作して多くのロジックを処理する複雑なアプリケーションを構築するのに適していることは事実です。小規模なUI要素に使用するのはばかげています-それが課す余分な構造は必要ありません。

更新:複数のページの問題については、はい、Backboneはデータを永続化するための強力なメカニズムを提供します。各モデルにはsave、AJAX呼び出しを実行してサーバーに変更を保存するメソッドがあります。データを保存しながら保存する限り、複数ページのアプリを使用できます。これは非常に柔軟なモデルであり、おそらく仕事でBackboneを使用することになります。シングルページアプリを作成したいのですが、既存のマルチページアプリケーションで10年の作業があります。バックボーンでより強力なUIコンポーネントのいくつかを再構築し、ユーザーが別のページに移動する前に変更をサーバーに同期することを検討しています。


2
たくさんあります...控えめに言っても気にしない答え... uはほとんどすべての部分を説明しましたが、私はただ1つの質問がありました... uはBackboneがシングルページアプリだけのものではないと述べました... u plsは、アプリの複数のページにわたってデータを永続化する方法に関する例を提供しますか?また、サーバー側でJavaを使用して、実際の動的データを取得します...したがって、データを正しい形式で返し、そのコピーをバックボーンモデルとして保持するように更新する必要があります...
testndtv 2012年

1
@testndtvページを更新するたびに、すべてのモデルが失われます...では、なぜページを更新するのですか?バックボーンを使用すると、同じページにいる間にビューを変更できるため、1ページだけを使用してください。
マーク

わかりました。バックボーンには、ページ間でデータを永続化するメカニズムがありませんか?AJAX呼び出しまたは何か...を介してデータを永続化するような
testndtv

バックボーンが非常にうまく処理するデータの永続化に関する情報を追加しました。
Josh Earl

ジョシュはよく言った、あなたはそれを私よりよく説明した。Testndtv、あなたはjavascriptの初心者のようですので、バックボーンは本当に初心者向けのフレームワークではないという警告を追加します-複雑なアプリを構築するときに非常に便利で非常に役立ちますが、追加の概念により開発の開始が難しくなりますハッキングするだけです。正しい方向から始めるために、バックボーンドキュメントの例を注意深く検討することをお勧めします。
OlliM 2012年

3

複数のページでbackbone.jsを使用している人のことは聞いたことがありません。ほとんどの場合、これはある種のシングルページアプリです。

1つのページにさまざまなモデル、ビュー、状態が含まれている可能性があり、本格的で強力なアプリになる可能性があります。

すでにJavaでサーバー側のテンプレート/ビューレンダリングを使用している場合、backbone.jsは適していません。バックボーン.jsを最大限に活用するには、フロントエンドのJavaScriptでそのコードの一部を移動または複製する必要があります。

シングルページアプリを実行したくない場合(これは、ページの更新や変更がないアプリを意味しますが、URLは変更され、ユーザーには複数ページのように見える可能性があります)、すべてのMVCをオンのままにしておくことができますサーバーとバックボーンは必要ありません。

編集:

バックボーンが行うことは、サーバーで通常処理されるMVCのものの一部を移動し、それらをクライアントに移動することです。多くの人にとって、これはサーバーのことを忘れて、アプリを1ページのJavaScriptアプリとして作成することを意味します。サーバーは、JSON / RESTデータの単なるソースになります。それを行う準備ができていない場合、backbone.jsはそれほど役に立ちません。


2

バックボーンはMV *フレームワークであり、jQueryはDOMツールキットです。

MV *アプリケーションの主な機能は、ルーティング、データバインディング、テンプレート/ビュー、モデル、およびデータアクセスです。バックボーンはjQueryに部分的に依存している可能性があります。

jQueryは、広範なブラウザーサポートと活気のあるコミュニティを備えたDOMをクエリするための堅固なAPIです。イベント処理、遅延オブジェクト、およびアニメーションが付属しています。

jQueryを使用した単純なイベントバインディング

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.