JavaScript用の優れた超高レベルUIフレームワークとは何ですか？
カスタムサーバーシステム用の一時的なWebベースのグラフィカルフロントエンドを作成する必要があります。この場合、最大10人が同時にシステムをチェックできるため、パフォーマンスとスケーラビリティは問題になりません。また、PHPまたはPython（サーバー）およびJavaScript（クライアント））である必要があります（プログラミングに関連しない特定の問題にFlexまたはSilverlightを使用することはできません） 。
だから私はYUIやjQueryを使用できることを知っていますが、数時間の作業でそのような小さなプロジェクトを書いてそれをやり遂げることができる、もっと高レベルなものがあるかどうか疑問に思いました。基本的に私はできるだけ怠惰になり（これはとにかく使い捨てのコードです）、できるだけ短い時間で仕事を終わらせたいと思っています。
助言がありますか？
まだ言及されていないので： jQuery.UI
ext.js -GetThingsDoneに多くのウィジェットをすばやく提供します。
この質問も参照してください
2016年です
ここにいくつかの（古い）ものがあります
- ampleSDK （興味深いアプローチ）
- DojoToolkit とその素敵なセット ウィジェット
- jQuery UI
- カプチーノ
- リアルト
- エコー
- シンプルなUIキット [〜＃〜] uki [〜＃〜] 参照 デモ
- vaadin （Javaが必要）
- jxlib.org
- livepipe.net
- dhtmlx.com
私は最近 カプチーノ で遊んでいますが、それは非常に簡単で快適なフレームワークです。
2017年*
お金を出したい場合：
あなたがあなた自身であなたのお金を保つことに決めるならば：
目的が非常に高レベルのUIコードを作成することである場合、次のコードジェネレータープログラムは、アプリのUI全体を数分以内に構築するのに非常に優れています（使用したい人のために Bootstrap ）：
また、DojoのUIライブラリ Dijit は絶対に重要です！
ExtJs 、 Bindows 、 [〜＃〜] yui [〜＃〜] 。最初の2つは商用ですが、お金の価値があります。
そこにあるすべてのJSフレームワークの中で、JQueryとYUIが私のお気に入りです。彼らは多くの同じことを達成しますが、非常に異なる方法で達成します。
あなたの要求（怠惰で、簡単で、強力な）に対して、私はJQueryに投票します。これがより長期的で、非常に冗長でコードが重いアプリケーションである場合は、YUIに投票します。
これらの2つのフレームワークよりも優れたものは他にないと思います。どちらの選択も良い選択です。
チェックアウト [〜＃〜] dhtmlx [〜＃〜] 。
DHTMLX Toolkitは、Ajax対応のDHTMLUIコンポーネントの包括的なセットです。専門的に開発されたグリッド、ツリーグリッド、ツリービュー、タブバー、カレンダー、メニュー、ツールバー、コンボボックス、ウィンドウ、アイテムブラウザー、カラーピッカー、ファイルアップローダーにより、開発者は高いインタラクティブ性と豊富なユーザーエクスペリエンスを備えたクロスブラウザーWebアプリケーションを構築できます。 DHTMLXコンポーネントは、最も完全な機能セットを提供し、デスクトップのような機能をWebにもたらすことができます。
私は何かが足りないのですか、そうではありません bootstrap 事実上選択に行きますか？
また、そしてかなりクールな、グーグルのpolymerまだ...ウェブコンポーネントに基づく：
ShieldUI も優れた商用フレームワークです。
Qooxdooは驚異的です。あなたはそれを使ってモバイル、ウェブ、そしてデスクトップをすることができます。それはすべてのhtmlとcssを抽象化します。それは十分に文書化されており、OOです。サーバー側とクライアント側で同じオブジェクトを使用することもできます。
私はapplication.jsを試してみます-アニメーションの綿毛が少なく、コントロールがたくさんあり、それはウィンドウマネージャーです（誰かがBindowsについて言及しました..ひどいUIのためのお金の価値はありません）。
これで使用される オンラインワードプロセッサ
カプチーノは紛らわしいので、1つのライブラリに関連付けられた別の言語を学びたくありません。
免責事項：私はWeb AtomsJSの作成者です
Web Atoms JSは、Flex、Silverlight、およびXULのすべての概念をもたらすために構築されました。そして、これらのテクノロジーはそれぞれ、非常に高レベルのUIコントロールにXMLマークアップをより多く使用していました。画面は複雑になり、変化し続けると視覚化するのが面倒になります。
Web Atomを使用すると、他のどのフレームワークよりも少ないコードで記述できます。
これは、Web AtomsJSで可能なすべてのことのサンプルです。
これがドキュメントへのリンクです。 http://webatomsjs.neurospeech.com/docs
YUIは良いようですが、Extjsも非常に接近しています。 YUIとExtjsの違いはほとんどありませんが、YUIは無料で、コミュニティのサポートがはるかに大きく、Yahooのような巨人に支えられています。カプチーノの場合、HTML、CSS、およびDom操作を1行書く必要がないことを知ったら、後継者Objective-Jの学習に時間を費やす必要がありますが、これらすべてに慣れている場合は、Objective-Jの学習に時間を費やす必要があります。 Bindowsも、YUIやExtjsと非常によく似た優れたフレームワークです。私が気に入っているのは、独自のカスタムテーマをより魅力的かつ簡単に設計できるように、多くの既製のテーマがあることです。しかし、2年後には、YUIはこれらすべてよりもはるかに進んでいたと私は個人的に感じています。
Controls.js とその Tools をお勧めします。
qooxdoo 少し前に来ました。私はそれを使用していませんが、少なくともデモはかっこいいように見えます。
JQuery.UIを使用しました。これは必ずしもこの質問への答えではありませんが（特に古い投稿なので）、ドロップアンドドラッグを作成する方法を探してこの投稿に来たときに、他の人に役立つ場合に備えて、私が持っているものを共有したいと思いましたUI。
これはMVC用であることに注意してください。
注意これには実際の機能はまだ追加されていません。これは開始点であり、アイテムのドロップアンドドラッグを可能にするUIを作成します。
レイアウト：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
ul.listRoles {
width: 300px;
height: auto;
padding: 5px;
margin: 5px;
list-style-type: none;
border-radius: 5px;
min-height: 70px;
}
ul.listRoles li {
padding: 5px;
margin: 10px;
background-color: #ffff99;
cursor: pointer;
border: 1px solid Black;
border-radius: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#listDenyRoles, #listAllowRoles, #listAllowMoreRoles").sortable({
connectWith: ".listRoles"
}).disableSelection();
});
function submitNewRoles() {
//Generate List of new allow roles
var outputList = $("#listAllowRoles li").map(function () { return $(this).html(); }).get().join(',');
$("#GrantRoles").val(outputList);
$("#formAssignRoles").submit();
}
</script>
</head>
<body>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
}
</body>
</html>
インデックスページ（ホームインデックスをこのコードに置き換えました）：
@{
ViewBag.Title = "Home Page";
}
<p>
To GRANT a user a role, click and drag a role from the left Red box to the right Green box.<br />
To DENY a user a role, click and drag a role from the right Green box to the left Red box.
</p>
@using (Html.BeginForm("AssignRoles", "UserAdmin", FormMethod.Post, new { id = "formAssignRoles" }))
{
String[] AllRoles = ViewBag.AllRoles;
String[] AllowRoles = ViewBag.AllowRoles;
if (AllRoles == null) { AllRoles = new String[] { "Test1","Test2","Test3","Test4", "Test5", "Test6", "Test7", "Test8", "Test9", "Test10", "Test11", "Test12", "Test13" }; }
if (AllowRoles == null) { AllowRoles = new String[] { }; }
@Html.ValidationSummary(true)
<div class="jumbotron">
<fieldset>
<legend>Drag and Drop Roles as required;</legend>
@Html.Hidden("Username", "Username")
@Html.Hidden("GrantRoles", "")
<table>
<tr>
<th style="text-align: center">
Deny Roles
</th>
<th style="text-align: center">
Allow Roles
</th>
</tr>
<tr>
<td style="vertical-align: top">
<ul id="listDenyRoles" class="listRoles" style="background-color: #cc0000;">
@foreach (String role in AllRoles)
{
if (!AllowRoles.Contains(role))
{
<li>@role</li>
}
}
</ul>
</td>
<td style="vertical-align: top">
<ul id="listAllowRoles" class="listRoles" style="background-color: #00cc00;">
@foreach (String hasRole in AllowRoles)
{
<li>@hasRole</li>
}
</ul>
</td>
<td style="vertical-align: top">
<ul id="listAllowMoreRoles" class="listRoles" style="background-color: #000000;">
@foreach (String hasRole in AllowRoles)
{
<li>@hasRole</li>
}
</ul>
</td>
</tr>
</table>
<p><input type="button" onClick="submitNewRoles()" value="Assign Roles" /></p>
</fieldset>
</div>
}
うまくいけば、これは正しい方向に誰かを助けることができます。
Sproutcoreは良い選択でしょう。
慣れていない場合は、基本を学ぶのに必要な時間が使い捨てのコードには長すぎることに気付くかもしれませんが、基本を理解すると、すぐに開発できます。
Anijs を使用してみてください。高レベルのUIアクションを単純な行に減らします
RedUIを試すことができます。まだ本番環境の準備はできていませんが、目標には適しているはずです。
このアプローチはWPFに触発されており、Textbox、Comboboxなどの事前定義されたコントロールからUIを記述しますが、さらに複雑なものもあります。 TreeViewやGridViewなどのコントロール。モデルでは、データバインディングも宣言します。
ライブラリはあなたのためにウィンドウをレンダリングします。
次に、それをビューモデルにバインドし、イベントをサブスクライブし、それらのイベントを処理するカスタムロジックを追加します（たとえば、「window.closed」の場合、更新されたビューモデルをサーバーに送り返すことができます）。
ライブの例は http://redui.net/ で見ることができます。
デモアプリケーションは http://redui.net/mailclientdemo/ でも見ることができます。これにより、何ができるかがわかります。