web-dev-qa-db-ja.com

HTML5 UIフレームワーク

あちこちでたくさんのHTML5 UIフレームワークを見つけました。

私はまたもやたくさんのリソースに圧倒されています。それらのいくつかを見たが、ほとんどすべてが遅すぎるとヘビー級のように見えた。

私はどちらを学ぶかについて少し混乱しています。彼らのウェブサイトのそれぞれは、彼らが市場で最高であるかのように彼らの製品について話します。 (明らかなマーケティング戦略)。

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

学習を始めるためにどちらを勧めますか?

たくさんの答えがあり、それぞれが異なるものを好むかもしれないことは知っていますが、これは私を少し案内し、最も人気のあるフレームワークのいくつかを批判するのに役立つかもしれません。

54
jviotti

あなたの質問にはたくさんのものがあるので、答えは簡単ではなく、まったく明確ではありません。また、非常に説得力があります。あなたが持ってきたフレームワークのリストを見ると、私はお互いにほとんど比較できない非常に異なるものを見ています。それらを何らかの方法でグループ化し、リストにさらにフレームワークを追加しようとします。

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

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

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

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

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

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

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

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

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

これを要約すると、複数ページのWebサイトがある場合、POST=フォームの場合、jQuery UIまたは Twitter Bootstrap のような軽いソリューションを使用します。

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

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

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

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

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

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

結論ではなく、最終的な考えをここに示します。これらのフレームワークはすべて、ウィジェットセット、見栄えの良いテーマ、その他の視覚的なものを表示します。しかし、本当に重要なのは、実際にアプリケーションを開発する方法、その構造、ロジックを実装する場所です。フレームワークが提供するものを知り、不足しているものを代用できるかどうかを考えてください。

132
Infeligo

Infeligoの答えは最高です。私の経験は一部の人にとって興味深いものかもしれません。 Ruby on Railsを、ビジネスロジックの大部分が存在するサーバープラットフォームとして使用します。

フロントエンドでは、最も強力なグリッドオブジェクトである「オブジェクト」のJSライブラリであるdHTMLXを使用します。私のアプリのほとんどは、ビジネス/会計情報処理/表示の要件があり、グリッドオブジェクトはそこに私の柱です。ただし、それらのオブジェクトセットは、エンドユーザーにMDIタイプのインターフェイスを提供する単一のアプリケーション内に追加の「ウィンドウ」を作成する機能を含む包括的です。メニューが上部にある単一のHTMLページメニューからの選択に基づいて、情報を表示/操作するために新しいウィンドウが開閉されますこれらのウィンドウは、単一のHTMLページの範囲内にあります。

すべてのオブジェクトには非常に優れたイベントが関連付けられており、これらのイベントを使用してフロントエンドでかなりの検証を行います。ただし、通常、Railsモデル内のすべてのデータの検証を複製します。追加作業ですが、余分な注意を払っています。グリッドやバックエンドサーバーなどのフロントエンドのビジュアルオブジェクト。ほとんどのデータ接続はXMLまたはJSONを使用して実行できます。その構造の経験とRails =はまともなXMLビルダーを提供します。したがって、私の場合、ビジュアルオブジェクトはすべてdHTMLXから取得されるため、Railsベースのビューはほとんど使用しません。

DHTMLXで私が気に入っているもう1つの点は、オブジェクトの速度です。たとえば、グリッドオブジェクトは非常に簡単な速度で10,000行以上を非常に簡単に処理します。

スイートの大きな欠点はドキュメントです。同社は東ヨーロッパの開発者であるため、多くの場合、ドキュメントの意味を正確に理解することは困難です。また、彼らの文書化はすべてを完全に文書化しない傾向があるため、試行錯誤型学習では多くの時間が浪費されます。

お役に立てれば

4
nexar