サーバー側とクライアント側とハイブリッドでWebアプリを構築していますか?[閉まっている]


27

現在、Webアプリケーションを構築する方法は複数あります。

1.サーバー側のみ

これは、Ruby on Rails、Django、Express、PlayなどのWebフレームワークによってサーバー上のページをレンダリングする古典的なアプローチです。フレームワークなど

典型的なワークフロー:選択したフレームワークでサーバー上にすべてのビジネスロジック、モデル、およびビューテンプレートを構築します。

2.クライアント側+ REST API

比較的前に、Webコミュニティ全体が、Angular、Backbone、Ember、およびその他の数十のJavaScript MV *フレームワークでクライアント側アプリケーションの構築を開始しました。そして今、React.jsもパーティーに参加しています。

更新:誤解はありません。クライアント側のみが意味することは、懸念事項を完全に分離することです。REST APIサーバーと、そのサーバーと通信するクライアント側アプリケーションがあります。ユースケースにもよりますが、認証またはデータ永続化のためにバックエンドに接続しない真のクライアント側のみのアプリケーションは決してないでしょう。

典型的なワークフロー:Angular vs Backbone vs Ember vs Xを決める時間を費やします。次に、クライアントでルート、モデル、ビュー、コントローラーを構築します。完了したら、サーバー上でモデル、コントローラー、ルートを構築します。ある意味では、2倍の量の仕事をしています。

3.ハイブリッド

このアプローチの使用についてはあまり知りませんが、推測する場合は、サーバーでビュー(MVCフレームワークのビュー)をレンダリングします。その結果、SEOサポートに加えて、ページの読み込みが高速化されます。

上のハイブリッドフロントairbnbのありrendrおそらくバックボーンを組み合わせて、一緒に表現しています。

Eric Florenzoが今日彼のブログに投稿しました:React:最後に、素晴らしいサーバー/クライアントWebスタック

Webアプリケーションを構築する方法の量は圧倒的です。そして、ウェブ開発を学んでいる人にとって、これは問題になる可能性があります。次のアプリケーションを構築するために、どのアプローチを使用するかをどのように決定しますか?


1
「クライアント側のみ:...完了したら、サーバー上でモデル、コントローラー、ルートを構築します。」これは解析されません。
user16764 14年

@ user16764は私の質問を更新しました。
R

回答:


13

「クライアント側のみ」を完全に誤解していると思います。

まず、「Client Centric」というラベルを付ける必要があります。Angularのようなフレームワークのこのポイントは、MVCの「VC」部分がJavascriptでブラウザに完全に実装されることです。「M」部分の「M」上位レベルロジック(モデル)はブラウザに実装され、下位レベル「CRUD」ロジックはサーバーに実装されます。

ビジネスロジックは一度開発されます。ビューロジックは一度開発されます。制御ロジックは一度開発されます。すべてJavascriptフレームワークで選択されます。データアクセスロジックも一度だけ開発されますが、今回はサーバー側で選択したRESTyまたはSOAPyフレームワークで開発されます。

極端な場合、1台のマシンの1つのブラウザからのみデータにアクセスでき、「Cookieをクリア」オプションが選択されるたびにデータが破棄される場合は、モデルをクライアントに完全に実装できます。


ビジネスロジックの少なくとも一部を2回開発しないことは非常に困難です。優れたユーザーエクスペリエンスを得るには、ユーザーがメールを入力して続行することを確認する必要があります。ただし、クライアントを信頼できないため、サーバーにルールを実装する必要もあります。少なくとも、クライアントにJSでビジネスロジックを実装することを言っていないことを本当に願っています。
アンディ14年

@Andyそれがまさに私のポイントです。Emberアプリを作成したとき、基本的なフォーム検証はクライアントで実行する必要がありましたが、サーバーでも実行する必要がありました。サーバー上のデータを検証せず、クライアントを完全に信頼しなかったために、一度深刻な問題に直面しました。
R

Andy et all-Googleドキュメントをご覧ください。サーバーからドキュメント、スプレッドシートなどをロードすることとは別に、最後に保存し、ブラウザで他のすべての間に時々バックアップを取ります。Googleドキュメントサイトは、データストアおよび認証サーバーとしてのみ機能します。
ジェームズアンダーソン14年

3
@JamesAnderson Google Docsは、オンラインストアとはまったく異なります。あなたは自分のドキュメントを編集している、それはデータの意味を実際に気にせずに保存する単なるデータの塊である。しかし、注文の検証はクライアントでのみ行うべきだと本当に思いますか?それがあなたがそのようなアプリを構築する方法であるならば、あなたはただ人々に彼ら自身に無料の製品を与えるように頼んでいます。また、Googleは実際にはサーバー側でデータ検証を行っていないことを前提にしているようです。何が起こっているのかを知る方法はありません。
アンディ

9

質問に対する答えは、要件に依存するということです。「ウェブ」開発の歴史を少なくとも大雑把に見ると、利害関係者、顧客、要件の収集との会話が見過ごされがちなカウボーイ文化を示しています。

幸運にも、数年前に「デザインを満たすための要件ではなく、要件を満たすためにデザインを選択する」という私に本当に固執したことを聞いた話に出席できました。そのため、このような質問に直面した場合、このソフトウェアを構築するよう求めている人々が実際に必要としているものを見つける必要があります。

あなたの仕事は、各アプローチの長所と短所を説明することです。


1
ありがとう。あなたが言っていることは理にかなっています。私は物事を行うための真の方法である「銀の弾丸」があることを望んでいました。2011年にDjangoと呼ばれるPython Webフレームワークから始めました。まもなく、Backbone、Angular、Emberなどのクライアント側MV *フレームワークへの大きなプッシュがありました。そして、突然、RailsとDjangoのWebアプリ構築方法は時代遅れになりました。しかし、今日では、パフォーマンスを改善するために、一歩後退してクライアント側とサーバー側を再度組み合わせているようです。
定格R

悲しいことに、いいえ、特効薬はありません。:)。しかし、コツは、各要素がどのように組み合わされているかを十分に理解して、手元のタスクの最良の結果を決定することです。また、冷酷なリファクタリングの文化をサポートして、最初の方向が実りない場合に常に物事を変更できるようにすることです。
RibaldEddie 14年

1
これは問題ありませんが、両方のアプローチが実行可能である場合もありますが、この場合、決定を下すための要件以外のものが必要です。
Ced

5

新しいアプローチとフレームワークの重要なポイントの1つは、フロントエンドテクノロジーとバックエンドテクノロジーの間の結合が少ないことです。

アイデアは、クライアント上でどんなフレームワークを使用しても、サーバー側のフレームワークに関係なく、任意の数のソースからデータやビューをプルできるということです。

これにより、仕事を成し遂げるための最良のツールを選択することができ、選択は独立して展開できます。

確かに、私はAngularまたはBackboneを使用していないため、経験豊富な推奨事項を作成することはできません。私の現在の基本スタックは、私が見つけることができる最も細いサーバー側のmvcまたはrestfulサービスで構成されています。主にテンプレートとデータを配信します。データがレンダリングされ、および/または後続のデータがクライアント側で取得されます。ほとんどの場合、単に従来のjavascript、jquery、およびcssを使用します。

ここから始めて、必要に応じて構築します。このアプローチの利点は、ブラウザ、モバイルなど、複数のクライアントプラットフォームをサポートすることを考えたときに明らかです。クライアント固有のレンダリングが必要な場合、サーバー側に大きな変更を加える必要はありません。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.