5

Google App Engine（Python + Jinja2テンプレートエンジン）上に動作するWebサイトを構築しています。Backbone.jsとUnderscore.jsを使用してシングルページアプリケーションになるように再設計を開始したいと思います。目標は、プログレッシブエンハンスメント戦略を使用することです。

サイトは、最初の訪問時にバックエンドを使用して引き続きレンダリングされます。そして、ブラウザがJavaScriptをサポートしている場合、Backbone.jsが引き継ぎます。

私は2つの理由でこの方法でそれを行うことにしました。まず、私がすでに持っているすべてのリンクはそのまま残り、次にGoogleインデックスボットがサイトのコンテンツをクロールできるようになります。

このアプローチには2つの問題があります。

  1. サイトのほぼすべてに2つのテンプレートが必要です。1つはバックエンド（Jinja2）に、もう1つはフロントエンド（Underscore.js）にあります。このような場合のベストプラクティスは何でしょうか。すべてに2つのテンプレートを使用しないようにするために提案できることはありますか？

  2. フロントエンドのテンプレートをロードしてBackbone.js+Underscore.jsを使用するにはどうすればよいですか？それらすべてを最初のリクエストでロードすることも、必要なときに非同期でリクエストすることもできます。

私はどんな考えにも感謝します！ありがとう。

いくつかのリソース：

http://ricostacruz.com/backbone-patterns/

これは、Backbone.jsを既存のHTMLにバインドする方法を説明しています：http： //lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with -backbone-js /

4

1 に答える 1

7

だから私は最近（今年）同じような状況を経験しました。＃1は非常に難しい問題であることをお知らせします。テンプレートを複製するだけでなく、サイトを取り巻くすべてのビジネスロジックを複製する必要があることに注意してください。たとえば、ユーザーが特定のページにコメントを追加できるようにするとします。説明した方法を使用すると、サーバー側とクライアント側の両方にコメントテンプレートが必要になります。さらに、クライアントとサーバーの両方でコメントを追加/削除/編集するために必要なロジックを複製する必要があります。 javascriptの有無にかかわらずユーザーに対応します）。テンプレートの複製は、Jinja2関数ブロックを使用して簡単に行えますが、ロジックの複製が興味深いところです。私はそれをやろうとしましたが、数か月後に完全な書き直しをすることになりました。

したがって、私があなたに与えるアドバイスは、javascriptユーザーと非javascriptユーザーの両方をサポートできるという考えを捨てることです。どちらか一方のためにあなたのサイトを作ってください。私は個人的にjavascriptルートに行くことを自分で選びました。これにより、2つのオプションが残ります。シングルページアプリを作成するか、機能にJavaScriptを大部分活用するが、すべてをサーバー側でレンダリングするアプリを作成します。おそらく他にもたくさんのオプションがありますが、それらは私が見た中で最も人気のある2つです。私は2番目のオプションで行きました。だから私がやっていることは、最初のページのロードはサーバーによって行われるということです。次に、Backbone.jsは各要素を消費し、それらからモデルとビューを作成します。これは主にdata属性を利用して行われます。たとえば、コメントビューを作成するには、次のような要素を使用します。

<div class="comment" data-id="1" data-body="You Suck"></div>

次に、そのコメントを使用して、次のようにモデルを作成します。

var CommentModel = Backbone.Model.extend();

var comment_el = $('.comment');
var comment_model = new CommentModel($(comment_el).data());

最後に、作成したモデルを使用してビューをバックアップします。これにより、サイトに機能を追加できます。

var CommentView = Backbone.View.extend({
    initialize: function() {},
    edit: function() {},
    delete: function() {}
});

var comment_view = new CommentView({
    model: comment_model
});

次に、「何かを再レンダリングする必要がある場合、そのためのクライアント側のテンプレートは必要ありませんか？」と質問するかもしれません。いいえ。クライアント側のテンプレートはかなり新しいものです。個人的には、まだそこにいるとは思わないので、それらを避けようとしています。また、シングルページアプリは、自分の好みに十分に反応しないと常に感じていました。それに反対する人はたくさんいると思いますが、それが私の最近のプロジェクトでのスタンスです。そうは言っても、私はサーバー上ですべてをレンダリングし、HTMLをJSONの形式でクライアントに送信し、それをDOMに挿入します。そのため、Backbone.jsコードにJSONを返すAPIエンドポイントがたくさんあります。これは私にとって現在うまくいっているものですが、この問題は通常、主に状況に応じたものです。あなたは本当にあなたのニーズが何であるかを見なければなりません。価値があるので、私は現在のシステムの大部分を、シングルページアプリ全体を試した後にTwitterが最終的に行うことを決定したことに基づいています。あなたはそれについて読むことができますここ。

于 2012-12-29T19:24:36.010 に答える