54

そこには、次のような多くの HTML5 UI フレームワークが見つかりました。

あまりにも多くのリソースに圧倒されてしまいました。それらのいくつかを見ましたが、ほとんどすべてが遅すぎて重いように見えました。

どちらを勉強しようか迷っています。彼らのウェブサイトのそれぞれは、あたかも彼らが市場で最高であるかのように彼らの製品について語っています. (明らかなマーケティング戦略)。

Web アプリ開発とクライアント側 JS UI フレームワークの初心者として。あなたの経験に基づいて、速度、ウィジェット コレクション、複雑さ、ルック アンド フィール、サポートなどを考慮して、迅速なデスクトップ Web アプリの開発に推奨するものはどれですか?

学習を始めるのにどちらをお勧めしますか?

多くの答えがある可能性があり、それぞれが異なる答えを好む可能性があることはわかっていますが、これは私を少し導き、最も人気のあるフレームワークのいくつかに対する批評家を得るのに役立ちます.

4

2 に答える 2

132

あなたの質問には多くのことが含まれているため、答えは簡単ではなく、まったく明確ではありません。また、非常に独断的になります。あなたが持ってきたフレームワークのリストを見ると、互いに比較することはほとんどできません。どうにかしてそれらをグループ化し、リストにフレームワークを追加してみます。

ここでの主な問題は、特定のフレームワークの長所と短所ではありません。主な質問は:いくら欲しいですか? 本当に Gmail や Grooveshark のようなアプリケーションのことですか? それとも、Stackoverflow のようなものを意味していましたか? 動的でまったく単純ではありませんが、それでも Web サイトです。これらすべてのオプションを検討してみましょう。

おそらく、タブ、ダイアログ、ドラッグ/ドロップ可能な要素、テキスト編集などのウィジェットを使用して Web サイトを強化したいだけで、開発モデルを変更するつもりはありません。つまり、お気に入りの Java/PHP/Ruby を使用していて、アプリのロジックや動作の多くを JavaScript で記述したくないということです。この場合、jQuery ベースのプラグインのようなソリューション、特にjQuery UIjQuery Mobileが役に立ちます。

jQuery ウィジェットはそのプラグイン システムに従います。これは一般的に、非常に使いやすいことを意味します。ボタンを作成するには、次のように記述します。

$('#myButton').button();

無効にする場合は、次のパターンを使用してメソッドを呼び出します。

$('#myButton').button('disable');

また、スライダーや日付ピッカーなどで値を取得または設定すると、次のようになります。

$('#mySlider').slider('value');
$('#mySlider').slider('value', 42);

ご覧のとおり、jQuery ベースのソリューションにはモデルがありません。すべてのデータは DOM に保持され、風変わりなメソッド呼び出しを介して取得されます。データを動的に処理する必要がある場合、たとえば、複雑な検証を行ったり、バックグラウンドで何かをロードしたり、フィルター処理や並べ替えを行ったりすると、すぐに面倒になることがわかります。ところで、これが jQuery UI チームがまだグリッド コントロールを提供していない理由です。彼らはモデルなしではそれを行うことができません。jQuery Mobile では、単純なマークアップによって優れたモバイル UI が得られますが、ページ間でデータを渡す公式の方法はありません。

要約すると、複数ページの Web サイトを使用している場合、フォームを POST する場合は、jQuery UI またはTwitter Bootstrapなどのより軽量なソリューションを使用してください。

おそらく、より複雑で、よりアプリケーションのようなもの (単一ページのアプリケーション?) を作成したいと思うでしょう。クライアント側でデータを操作する必要があることはわかっています。あなたの選択肢は何ですか?

モデル、データ バインディング、およびおそらくその他の Web アプリ作成手段を提供する多くの JavaScript フレームワークの 1 つを使用して、それらを jQuery UI と統合することができます。または、 KendoWijmojqWidgetsなどのより完全なフレームワークを使用することもできます。これらのフレームワークは jQuery に依存しており (Wijmo は jQuery UI に依存しています)、データ操作の追加手段を提供します。彼らはデータモデルを持っています。Kendo は独自のソリューションを実装していますが (私が思うに)、Wijmo と jqWidgets は人気のある Knockout JS と統合されています。

したがって、Kendo と Wijmo は、ウィジェット/コントロールといくつかのバッキング モデルの両方を提供するフレームワークのグループに属しています。これらのような、jQuery ベースではない他のフレームワークがあります (例: Dojo Toolkit ) 。動的なデータ読み込みを追加すると、やや複雑な Web アプリケーションが得られます。これ以上何を望むことができますか?

実際、最も重要なことは忘れられています - アプリケーションをどのように構成 (編成) しますか? RESTful な方法でサーバーと通信する単一ページのアプリを構築しようとすると、アプリケーションにアーキテクチャがないと、すぐに混乱してしまいます。これに通常必要とされる機能は、いくつかの懸念事項の分離 (MVC、MVVM)、テンプレート作成、ルーティング、およびモジュール管理です。ここにSproutCoreSenchaが登場します。それらは、ウィジェットがほんの一部である Web アプリを構築するための包括的なソリューションを提供します。

ここでは、SproutCore と Sencha が勝者のように見えるかもしれません。なぜなら、これらは UI とビジネス ロジックの両方を含み、アプリケーションを構築する最も完全なソリューションだからです。すべての長所にもかかわらず、いくつかの短所があります。重すぎる、または開発モデルに準拠する必要があると言う人もいますが、これは好きではないかもしれません. たとえば、Sencha では JavaScript で GUI を記述し、Sencha の型システムを使用します。これにより、抽象化とラッパーがあるという一種の重厚感が増しますが、HTML、CSS、およびバニラ JavaScript の使いやすさが本当に気に入っています。

しかし、これが唯一の方法ではありません。ウェブの力は、アプリを好きなように作成するのに役立つ、大小さまざまなフレームワーク、ライブラリ、ツールが数多く存在することです。たとえば、AngularJSを考えてみましょう。それ自体は一連のコントロールを提供しませんが、Twitter Bootstrap と組み合わせると、RIA の完全なソリューションになります。または、たとえば、重量級の SproutCore を作成した人物による、より軽量なフレームワークであるEmberJSを見てください。ウィジェットのセットも提供しませんが、私の意見では、アプリの非常に優れた基盤です。

ですから、結論ではなく、私の最終的な考えです。これらのフレームワークは通常、ウィジェット セット、見栄えの良いテーマ、その他のビジュアル要素を表示します。しかし、本当に重要なのは、アプリケーションを実際にどのように開発するか、どのように構造化するか、どこにロジックを実装するかです。フレームワークが提供するものを理解し、欠けているものを代用できるかどうかを考えてください。

于 2012-10-18T20:54:40.933 に答える