web-dev-qa-db-ja.com

JavaScriptによってほぼ完全にレンダリングされるWebアプリケーションを構築する一方で、バックエンドはJsonのみを提供します。するかしないか?

プログラマーとして、プロセスの全体的な「面白さ」を考慮して、バックエンドの唯一の関心事がロジックであるプロジェクトをシナトラで開始し、Json APIを返して、次のようなJavaScriptアプリケーションを作成したいと思っています。実際のコンテンツをユーザーに表示するためにそのAPIと対話します。

私はプログラミングにかなり慣れていないので、このようにリモートで何もしたことがありません。このようにロジックをプレゼンテーションから完全に分離することの落とし穴、長所、短所は何でしょうか?これが実際に行われている例はありますか?

私の頭の上の問題の1つは、コンテンツがほぼすべてJsonとして提供されているサイトに検索エンジンがどのように応答するかです...

7
o_o_o--

私の会社用に作成したほとんどのWebアプリはこのように動作します。単一ページのJavaScript駆動型アプリケーションで、バックエンドサービスにajax呼び出しを行います。

だから私が自分の website を始めたとき、私の最初の実装は同じ方法で行われました。しかし、開発の途中で、私は大きな間違いを犯したことに気付きました。

私のWebサイトはユーザーにコンテンツを提供しており、このコンテンツは検索エンジンを介して利用できる必要があります。また、広告を通じてウェブサイトを収益化する必要があります。問題は、これらの両方の要件がWebサイトから入手可能な静的コンテンツに依存していることです。

静的コンテンツは、検索のためにキーワードをインデックス化し、関連する広告を表示するために必要です。これらのキーワードは、基になるHTMLにあるテキストからフェッチされます。コンテンツがリモートソースからフェッチされ、JavaScriptを介して表示される場合、基になるHTMLはほとんど空白である可能性があります。

動的なページはリッチクライアントエクスペリエンスを提供するため、Webベースのアプリケーションに最適です。ただし、コンテンツを配信する場合は、動的なページを使用しないことをお勧めします。

5
jramoyo

ぜひ、試してみる価値はありますが、学習曲線が少し急になることもあります(JavaScriptは嫌いな言語です)。JavaScriptWebアプリには、本当にすばらしい機能がいくつかあります。たとえば、アプリケーションをPhonegapでラップすることで、アプリをさまざまなモバイルデバイスにネイティブアプリとして移植できます。

フレームワークに関する限り、いくつかのオプションがあります。この記事を読んで、より一般的なオプションのいくつかの概要を説明します。 http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can -ember /

検索エンジンのクロール機能については、「これは100%ではありませんが」、「ルーター」と呼ばれるもの(バックボーンに固有のもの)を使用して、アプリのさまざまな「ページ」をクロール可能にできると思います.jsですが、私は間違っている可能性があります。そうだと思います。)バックボーンの「ルーター」を使用して、さまざまな「ページ」をブックマーク可能およびリンク可能にすることで、それらもクロールできるようになります。

3
dave

それを試してみてください。私はいくつかのプロジェクト(主にangularとWeb APIを使用)を行いましたが、全体的に良い経験でした。

利点-非常に流動的なユーザーエクスペリエンスがあり、単一ページのアプリを簡単に作成できます。ビジネスとUIを明確に分離します。さまざまなアプリでWebサービスを使用できます(たとえば、モバイルアプリへのフィードなど-データはデータであり、再利用できます)。

短所-複数の呼び出しを1つのチャンクにまとめない限り(たとえば、1つの呼び出しで5つの異なるドロップダウンのデータをプルするなど)、サーバーへの呼び出しが増えることになります。また、読み込みに多少時間がかかる場合があります。まずJSで空のページを読み込み、次にWebサービスを呼び出します。これは、ページ全体を提供するよりも明らかに時間がかかります。一般的には少し違いはありません。

はい、SEOが問題になる可能性があります。データにインデックスを付ける必要がある場合は、ロボット用の単純な静的ページを提供できると思います。

2
Evgeni

絶対に最善のアプローチは、フレームワークやcmsなどを用意して、ajaxとページ全体の読み込みの両方で同じコンテンツを保存してアクセスすることです。同じように、サイトのフロントページに移動し、JavaScriptを介してフロントに移動するときにも同じ機能を実行します。

。pushState() を巧みに使用し、リンクのjQueryを介してonclickをオーバーライドすることで、正しいリンクを持つサイトを作成できますが、新しいページのロードにajaxを使用することがよくあります。 Push状態がサポートされていない場合のフォールバックも存在します。ユーザーは、jQueryやajaxではなくonclick効果をオーバーライドするのではなく、単純にページに移動します。

このアプローチはコンテンツを自由にナビゲートできるため、SEOにも愛されます。例を挙げると、 自分のギャラリー を考えます。画像の左側を押すと、前の画像に移動できます。これにより.pushState()が実行され、ajaxを介してコンテンツが読み込まれます。ただし、「新しい」ページを取得してそれをリンクすると、前の画像が表示されます。また、SEOは正しいリンクも表示するだけで、ajaxなどについて心配する必要はありません。

1
Robin Castlin