上位5つのjQuery UIの選択肢

カレンダー、スライダー、リスト、グラフやチャートを作成するためのツール-これらすべておよびユーザーインターフェイスの多くのコンポーネントは、無数のWebプロジェクトで使用されています。 プログラマは、このような何かを必要とするとき、2つの方法で行くことができます。 1つ目は、必要なインターフェイス要素を自分で作成することです。2つ目は、この分野の既存の開発を活用することです。



UIコンポーネントの独立した開発の主な欠点は、時間と労力がかかることです。 そのようなビジネスに投資する価値があるのは、それが完全にユニークなものになったときだけです。 必要なのが単純な場合、ユーザーインターフェイスを開発するための標準要素、ライブラリ、およびフレームワークが使用されます。 作業を簡素化し、スピードアップします。 このような「コレクション」からコントロールをプロジェクトに統合するには、それらを構成するだけです。通常、手順は独自のコンポーネントを開発するよりもはるかに簡単です。



インターフェイスを開発するための最も一般的で広く使用されているフレームワークの1つはjQuery UIです。 これは、jQueryに基づいて構築され、ウィジェット、視覚効果、およびテーマの広範なセットを表すオープンソースプロジェクトです。 jQuery UIは、コンポーネントの完全なセットとして、または必要なものだけを選択して使用できます。 このようなコントロールのコレクションを使用すると、インターフェイスの外観を一定に保つことができ、実用的なソリューションで迅速かつ簡単に作業できるようになります。



jQueryは完全に機能し、このライブラリの信頼性には疑いの余地はありませんが、Webソリューション開発者に高品質のコントロールを提供できるフレームワークは他にもあり、原則としてjQuery UIにはない追加機能もあります。 今日、これらの決定についてお話します。

剣道UI

有料フレームワーク

Kendo UIには70を超えるコンポーネントが含まれており、その使用により開発プロセスが加速されます。 これらのコンポーネントをいくつかの言葉で特徴付ければ、アダプティブレイアウトに適した応答性が高く、微調整および定型化できると言えます。





Kendo UIを使用して構築されたインターフェイス



アーキテクチャのいくつかの機能とKendo UIの使用を検討してください。



まず、Kendo UIはTelerikによってゼロから作成され、コンポーネントの速度に特別な注意を払っていることを言っておく価値があります。 他のjQueryベースのフレームワークとは異なり、Kendo UIはJavaScriptのみを使用して構築されます。 その結果、そのコンポーネントはモバイルデバイスでも正常に機能します。



Webソリューションのモバイルバージョンについて言えば、この分野でKendo UIが特に優れていることは注目に値します。 コンポーネントはモバイル開発のニーズを考慮して構築されているため、それらに基づいて作成されたインターフェイスは、機能するために使用されるさまざまなデバイスに容易に適合しますが、機能も使いやすさも失われません。 モバイルモードのほとんどのウィジェットは、それに応じて外観と組み込みのコントロールを変更します。 これは、インターフェースの一般的な認識と、インターフェースを使用する便利さの両方に非常に役立ちます。 たとえば、画面サイズに自動的に調整されるSliderコンポーネント。





剣道UIスライダーコンポーネント



Kendo UIの十分な検討と実用化。 そのため、開発者は、クライアント側でJavaScriptを使用してコンポーネントを構成するか、サーバーで構成することができます（たとえば、PHPを使用してWebページコードを生成する場合）。 Web開発にKendo UIを使用することに加えて、 AndroidおよびiOSアプリケーション用に設計されたバリエーションがあります。



Kendo UIのもう1つの興味深い機能は、Angular JSとの統合です。 JavaScriptで記述された、Angularですぐに使用できる同じ高速で便利なコンポーネントについて説明しています。 したがって、Angularを使用しており、高品質のコントロールが必要な場合、Kendo UIは注目に値するオプションの1つであると考えています。





Angular用の剣道UI



Kendo UIは有料製品であることに注意してください。 私たちが商業図書館になる前は、ライセンスの費用は数千ドルにもなります。 これだけで、一部の開発者を怖がらせるには十分かもしれません。 ただし、価格に加えて、他の要因が適切なフレームワークを選択する決定に影響します。 Kendo UI実装の機能と高品質が特定のプロジェクトのニーズを満たし、開発者にとって価格が許容できる場合、Kendo UIは良い投資と考えることができます。

Webix

有料フレームワーク、無料版があります



Webixフレームワークは、jQuery UIの一部のコンポーネント（カレンダー、「アコーディオン」の形式でデータを配置できるアコーディオンデザイン要素、ダイアログボックスなど）を使用します。 同時に、彼はjQueryを拡張し、開発者にインターフェース作成のオプションを増やしました。 Webixは、インターフェイス開発の通常のニーズに焦点を合わせたユニバーサルフレームワークです。特に、データの視覚化と編集、レイアウトの作成、ナビゲーションの整理です。





Webix



Webixには素晴らしいドキュメントがあります。 APIのリファレンスガイドは、メソッド、プロパティ、イベントの説明を含むすべてのコントロール用に準備されています。 さらに、どのように機能するかを示すほとんどの要素の例があります。



プロジェクトチームの真剣な努力が投資される高品質のドキュメントは、フレームワークを選択する際に注意を払う必要がある非常に重要な要素です。





カレンダーコンポーネントの説明



Webixには、高品質のドキュメントに加えて、最新の記事を含む定期的に更新されるブログがあることに言及する価値があります。 これらの資料の中には、有用なヒント、コンポーネントの使用例があります。 たとえば、ここには、障害のある人にとってのインターフェイスコンポーネントのアクセシビリティに関する良い投稿があります。 多くのフレームワークがあり、賢明な資料が常に公開されているフレームワークには、追加の「プラス」に値するものがあります。



Webixは、開発への無料アクセスと有料アクセスの両方を提供します。 無料版には、 チャート 、 リスト 、 ツリーリスト 、 カレンダーなど、通常の作業に必要なもののほとんどが含まれています。

有料版では、複数の選択肢のリスト 、日付範囲を選択するための要素など、追加のコンポーネントを見つけることができます。 これもすべて十分に文書化されています。



Webixの有料版のもう1つの機能は、 スケジューラーなど、慎重に開発された複雑なソリューションです。





Webix Mobile Scheduler



これらの追加の有料ツールを使用すると、このようなソリューションの自己組み立てと調整の必要性を取り除くことができ、特定のプロジェクトに必要な機能とアプリケーションの外観に集中できます。



一般に、Webixの無料版は優れた機能を備えた完全なソリューションです。 一部のコンポーネントの支払いは正当化されるようです。 このフレームワークに興味があり、追加のコンポーネントや機能にお金を払うことが理にかなっているかどうかを理解しようとしている場合は、ウィジェットのドキュメントを参照してください。



要約すると、十分に文書化されたインターフェイス開発ソリューションを探しているなら、その大部分は無料であると言えますが、Webixはまさにあなたが必要とするものかもしれません。

Jqwidgets

有料のフレームワーク、非営利的な使用は無料



JQWidgetsは jQueryに基づいており、開発者が高速で応答性が高く信頼性の高いユーザーインターフェイスコンポーネントを作成できるようにすることを目的としています。 JQWidgetsコンポーネントは、インタラクティブで動的な高度にカスタマイズ可能なウィジェットでjQueryを使用します。





Jqwidgets



新しいフレームワークを選択して学習を開始するとき、質問をしてすべてがどのように機能するかをよりよく理解するために、開発者と通信する方法があると非常に便利です。 jQWidgetsプロジェクトには、管理者が定期的に訪問する便利なフォーラムがあります。 フォーラムに加えて、かなり頻繁に更新されるブログがあります。 そこには、記事、リリースノート、およびその他の有用な資料があります。





JQWidgetsフォーラム



ドキュメントはフレームワークの基盤の1つであり、jQWidgetsも例外ではありません。 ドキュメントページなどでは、コンポーネントの動作、コード例、ライブデモに関する情報を見つけることができます。 たとえば、ここに、ポップアップを実装するjqxPopoverウィジェットのドキュメントがあります。

さらに、jQWidgetsがReact 、 Angular、さらにはASP.NETコンポーネントをサポートしていることに言及する価値があります。 これらのテクノロジーのいずれかを使用している場合、jQWidgetsは多くの時間を節約するのに非常に役立ちます。





角度コンポーネント



jQWidgetsがこれらの一般的なフレームワークをサポートしているのは嬉しいことです。 選択肢があります-jQWidgetsをスタンドアロンソリューションとして使用するか、Angularの代替形式のいずれかで使用します。 それと別の両方-何を選択するかは等しく良い-はプロジェクトのニーズのみに依存します。



JQWidgetsは非営利目的での使用は無料です。 また、有料ライセンスにいくつかのオプションを提供しますが、それをベースに商用プロジェクトを作成する計画がある場合は回避できません。 ライセンス費用の違いは、提供されるサポートのレベルと会社の規模に基づいています。 たとえば、独立した開発者の場合、最も安価なライセンスが適しています。 Webスタジオはさらに多くの費用を費やす必要があります。

イージーイ

有料のフレームワーク、非営利的な使用は無料

EasyUIは、最新のインタラクティブでレスポンシブなWebアプリケーションおよびサイトの開発に使用されるjQueryの高度なウィジェットのコレクションです。 EasyUIを使用すると、HTMLマークアップに基づいて、およびJavaScriptを使用してプログラムでインターフェイス要素を作成できます。





イージーイ



ここで説明した他のフレームワークと比較すると、標準のEasyUIデザインは奇妙に見えるかもしれません。 一部の要素は、2010年に設計されたかのように時代遅れに見えます。



このようなスタイリングは一見失望するかもしれませんが、EasyUIには、フォントサイズ、テキストの色、背景、要素のレイアウト、その他多くのウィジェットプロパティを制御できる素晴らしいインタラクティブエディターが装備されています。 さらに、CSSに直接アクセスできるため、特定のプロジェクトのニーズを完全に考慮したテーマを実験および作成できます。



たとえば、ここにマテリアルデザインテーマがあります。





EasyUIの要素のスタイル設定



プロジェクトには、シンプルで明確に編成されたドキュメントがあります。 一方では-要素のリスト、他方では-例、コードサンプル、プロパティの説明、メソッド、イベントを含むスクリーンショットを含む、それらの説明。 おそらく、このドキュメントの主な欠点は、要素の説明ページに実用的な例がないことです。



前述の欠点は、 デモセクションでコントロールの使用例へのリンクを見つけることができるという事実によっていくらか相殺されます。 たとえば、コンテナ要素であるパネルコントロール要素のサンプルセットは、その実用的なさまざまなオプションを示しています。 ここでは、たとえば、カスタムコントロールのあるパネル、ネストされたパネル、データをパネルにロードする例を見ることができます。





EasyUIデモセクション



EasyUIは非営利プロジェクトの場合は無料で、それ以外の場合はライセンスを購入する必要があります。 価格は連絡先情報とともにページで見つけることができ、それは非常に適切に見えます（他のフレームワークの高価なオプションのいくつかと比較して）。



一般に、EasyUIライブラリーは、インターフェースを開発するための良い出発点です。 ハイエンドソリューションから期待できるいくつかの高度な機能を提供します。 それらの中にはかなり活発なフォーラムと拡張のセットがあります。



その結果、私たちの目の前には強固なフレームワークがあり、プロジェクトのWebサイトとドキュメントがやや時代遅れになっているという事実に加えて、jQuery UIの優れた代替品を探している人にとって興味深いオプションと考えることができます。

ワイモ

有料フレームワーク

Wijmoは、高速で応答性の高い拡張可能なコントロールを作成するために設計された、TypeScriptで記述されたカスタムコンポーネントのセットです。 Wijmoはさまざまなコンポーネントを提供し、React、Angular、VueなどのいくつかのJSフレームワークをサポートしています。





ワイモ



Wijmoでは、多くのコントロールを操作できます。ほとんどのコントロールは、視覚化とデータ入力に重点を置いています。 その中には、チャート、センサー、データ入力ツール、グリッドがあります。 他のフレームワークは、ダイアログボックスやコンテナー要素などの比較的単純な要素のセットを提供しますが、Wijmoの作成者は、明らかに、データを扱うための統合アプローチに焦点を当てた、より野心的な目標に導かれました。





Wijmoコントロール



興味深いことに、開発者は、フレームワークの最新バージョンであるWijmo 5と廃止されたWijmo 3の両方をサポートしています。Wijmo5バージョンは、より新しい標準に基づいて構築されているため、IE8では機能しません。 これが、jQueryに基づく古いバージョンが非常に有用であることが判明した場所です。つまり、IE6でも動作します。 一般的に、これは些細なことですが、些細なことは快適です。



プロジェクトサイトだけでなく、Wijmoのドキュメントも混乱しているように見えることに注意してください。 そのため、コントロールの説明へのリンクはドキュメントページにありますが、すべてが非常に便利に配置されているわけではありません。 たとえば、チャート作成モジュールの詳細に興味がある場合は、 そのようなページにアクセスできます。 ドキュメントの主な欠点は、クラスやインターフェイスに関する詳細な情報を提供することで、要素の実際の実装に関する説明、図、コード例、何が起こるべきかについての適切な説明が含まれていないことです。



プロジェクトサイトには、実行中のコントロールを表示するExplorerセクションがあり、設定を試すことができます。 このツールは興味深いもので、これらまたはこれらのWijmo要素がどのように見えて機能するかを理解する機会を提供します。



たとえば、ここでは、Flexhartコンポーネントを使用して作成された折れ線グラフのように見えます。





FlexChartコンポーネント



ここで説明する他のフレームワークには、ドキュメントのより便利なプレゼンテーションがあります。 通常、各要素の詳細な説明が記載された個別のページ、またはコンポーネント自体、コード例、アプリケーションの説明に特化したサブセクションのセクションがあります。



適切なドキュメントは、フレームワークを選択するための重要な基準の1つです。 ここで、たとえば、動作中のチャートモジュールを表示する（およびコード例を見る）場合は、 サンプルページに戻ってFlexChartサンプルを見つける必要があります。 会社のブログが非常に活気に満ちているように見えることは言及する価値があります。 役立つヒント、システムの機能に関するストーリー、その他の資料を公開しています。 一般的に、ブログは非常に好印象を残しました。





FlexChartコンポーネントマテリアル



ドキュメントの欠陥を考慮しない場合、Wijmoコントロール自体は非常に興味深いものです。 それらはそれぞれ、表示方法をカスタマイズしたり、独自の機能を実装するためのコールバック関数を提供したり、スタイリングをサポートしたりできます。



Wijmoは、製品（Kendoなど）の試用期間を提供していますが、商用利用にはライセンスが必要です。 さまざまなフレームワークオプションのコストに関するデータは、対応するページにあります 。 価格は、必要な追加コンポーネントの種類によって異なります。また、Wijmoコントロールのメインセットのみを購入できます。 ただし、.NET / Xamarinのコントロールは、高価なボリュームライセンスを購入した場合にのみ使用できます。



Wijmoは主にデータの視覚化に重点を置いているため、他の同様のライブラリ、たとえばグラフやチャートを構築するための最良のソリューションの1つであるHighChartsと比較することを拒否することは困難です。

まとめ

jQuery UIに代わるものとして、またはアドオンの役割を果たすことができる多くのフレームワークがあります。 上記のように、それらのほとんどは支払われます。 フリーウェアソリューションを選択するときは、特定のコミュニティの経験に依存します。 商用製品を使用し続けると、会社の経験、そのベストプラクティスを使用する機会、技術サポートの費用を支払うことになります。



有料の製品は、無料のアナログにはない機能を備えていれば、彼らが求めているお金に見合う価値があるのでしょうか？ この質問は、特定のタスクに適用された特定の開発者によってのみ解決され、必要な機能とコントロールを適切なフレームワークの価格と比較し、独自の何かを作成するか、無料のソリューションを完成させるのに必要な時間と労力を考慮します。



ユーザーインターフェイスを開発するためのライブラリは他にもあります。 それらのいくつかは、jQuery UIの代替のリストのalternativeto.netで見つけることができます。 適切なツールを見つける途中で、それらを試してみることができます。



親愛なる読者！ レビューに含まれていないjQuery UIにふさわしい代替案をご存知の場合は、jQuery UIのストーリーに感謝します。