it-swarm.com.ru

Что такое хорошая структура пользовательского интерфейса очень высокого уровня для JavaScript?

Мне нужно написать временный веб-интерфейс для пользовательской серверной системы. В этом случае производительность и масштабируемость не являются проблемой, поскольку не более 10 человек могут одновременно проверять систему. Также это должны быть PHP или Python (сервер) и JavaScript (клиент) (нельзя использовать Flex или Silverlight для очень специфических проблем, не связанных с программированием).

Так что я знаю, что могу использовать YUI или jQuery, но мне было интересно, есть ли что-то еще более высокого уровня, которое, скажем, позволило бы мне написать такой маленький проект за несколько часов работы и покончить с этим. По сути, я хочу быть настолько ленивым, насколько это возможно (в любом случае, это просто отбрасываемый код), и выполнить работу как можно быстрее.

Какие-либо предложения?

16
Robert Gould

Как это еще не было упомянуто: jQuery.UI

14
Boris Callens

Вы можете посмотреть на ext.js - он быстро предоставляет множество виджетов для GetThingsDone.

18
Phillip B Oldham

Смотрите также этот вопрос

Какие есть альтернативы ExtJS?

Это 2016

  1. полимер
  2. http://angular-ui.github.io/

Вот несколько (старых)

  1. ampleSDK (интересный подход)
  2. DojoToolkit и их хороший набор виджеты
  3. jQuery UI
  4. каппучино
  5. Rialto
  6. Эхо
  7. Простой пользовательский интерфейс UKI см. демо
  8. Ваадин (Требуется Java)
  9. jxlib.org
  10. livepipe.net
  11. dhtmlx.com
10
Alex Nolasco

Я недавно играл с Cappuccino , и считаю, что это очень простая и приятная среда для работы.

8
user23743

как 2017 *

если хочешь денег дать

если вы решили оставить свои деньги при себе:

Если цель состоит в том, чтобы написать код пользовательского интерфейса очень очень высокого уровня, следующие программы-генераторы кода просто потрясающе создают весь пользовательский интерфейс приложения за считанные минуты (для тех, кто хочет использовать Bootstrap ):

7
Asqan

Также библиотека пользовательского интерфейса Dojo с именем Dijit абсолютно значительна!

5
sepehr

ExtJs , Bindows , YUI . Первые два являются коммерческими, но стоят денег.

4
Marko Dumic

Из всех JS-фреймворков JQuery и YUI - мои любимые. Они выполняют много одного и того же, но разными способами.

За ваш запрос (ленивый, легкий и мощный) я бы проголосовал за JQuery. Если это что-то более долгосрочное и более многоплановое и очень сложное приложение, я бы проголосовал за YUI.

Я действительно не думаю, что есть что-то лучше, чем эти две структуры. Любой выбор хороший.

2
Calvin

Проверьте DHTMLX .

DHTMLX Toolkit - это полный набор компонентов пользовательского интерфейса DHTML с поддержкой Ajax. Профессионально разработанная сетка, древовидная структура, древовидная структура, панель вкладок, календарь, меню, панель инструментов, комбинированный список, окна, браузер элементов, палитра цветов и средство загрузки файлов позволяют разработчикам создавать кросс-браузерные веб-приложения с высокой интерактивностью и богатым пользовательским опытом. Компоненты DHTMLX предоставляют наиболее полный набор функций и позволяют использовать в Интернете функции, аналогичные настольным.

2
Randell

Я что-то упустил, не начальная загрузка де-факто идти к выбору?

Кроме того, что еще круче, у Google polymer еще ... на основе веб-компонентов:

https://www.polymer-project.org/1.0/

2
NimChimpsky

ShieldUI также является хорошей коммерческой платформой.

1
Vladimir Georgiev

Qooxdoo феноменален. С его помощью вы можете делать мобильные, веб и рабочие столы. Он абстрагирует все HTML и CSS. Это хорошо документировано и ОО. Вы также можете использовать те же объекты на стороне сервера и на стороне клиента.

http://qooxdoo.org/demos

1
0x1mason

Я бы попробовал application.js - меньше анимационного пуха, много элементов управления и это оконный менеджер (кто-то упомянул Bindows ... не стоит денег за ужасный интерфейс).

используется в этом онлайн текстовый процессор

Я нахожу капучино непонятным, и я не хочу изучать еще один язык, связанный с одной библиотекой.

1
Oliver Fink

Отказ от ответственности: я автор Web Atoms JS

Web Atoms JS был создан, чтобы объединить все концепции Flex, Silverlight и XUL. И каждая из этих технологий использовала больше разметки XML для элементов управления пользовательского интерфейса очень высокого уровня. Экраны становятся сложными, и их визуализация становится болезненной, когда она продолжает меняться.

С Web Atoms вы будете писать меньше кода, чем любой другой фреймворк.

Это пример того, что все возможно в Web Atoms JS.

Вот ссылка на документацию. http://webatomsjs.neurospeech.com/docs

enter image description here

1
Akash Kava

YUI, кажется, хорошо, в то время как Extjs также подходит очень близко. Существует небольшая разница между YUI и Extjs, хотя YUI бесплатен, имеет гораздо большую поддержку сообщества и поддерживается таким гигантом, как Yahoo. для капучино вам придется потратить время на изучение наследника Objective-J, однажды узнав, что вам не нужно писать ни одной строки HTML, CSS и Dom manupulation. Но если вам все это удобно, зачем тратить время на изучение Objective-J? Опять же, Bindows - это хороший фреймворк, очень похожий на YUI и Extjs. Что мне нравится в нем, так это то, что в нем много готовых тем, что делает его более привлекательным и простым для создания собственной пользовательской темы. Но, скажем, через 2 года я лично чувствую, что YUI пошел бы намного дальше, чем все это.

1
Eastern Monk

Я могу рекомендовать Controls.js с его Инструменты .

1
Jan Nejedly

Я пришел qooxdoo некоторое время назад. Я не использовал его, но, по крайней мере, демо выглядят круто.

1
Juho Vepsäläinen

Я использовал JQuery.UI. Это не обязательно ответ на этот вопрос (тем более, что это старый пост), но я подумал, что поделюсь тем, что у меня есть, на случай, если это кому-нибудь поможет, когда я пришел в этот пост в поисках создания перетаскивания UI.

Обратите внимание, что это для MVC.

Пожалуйста, обратите внимание, что к этому еще не добавлена ​​действительная функциональность, это отправная точка, которая создает пользовательский интерфейс, который позволяет перетаскивать элементы:

Планировка:

<!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>&copy; @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>
}

Надеюсь, это может помочь кому-то еще в правильном направлении.

0
AxleWack

Sproutcore будет хорошим выбором.

Если вы не знакомы с ним, вы можете обнаружить, что время, необходимое для изучения основ, слишком велико для одноразового кода, но как только вы освоите основы, его довольно быстро разработать.

0
toholio

Попробуйте использовать Anijs . Это сводит действия пользовательского интерфейса высокого уровня к простым линиям

0
stak

Вы можете попробовать RedUI , он еще не готов к производству, но это должно быть хорошо для вашей цели.

Подход вдохновлен WPF, вы описываете свой пользовательский интерфейс из предопределенных элементов управления, таких как Textbox , Combobox , но также есть и более сложные элементы управления, такие как TreeView или GridView . В модели вы также объявляете привязки данных.

Библиотека выдаст окно для вас.

Затем вы привязываете его к модели представления, подписываетесь на события и добавляете пользовательскую логику, которая обрабатывает эти события (например, после "window.closed" вы можете отправить обновленную модель представления обратно на сервер).

Вы можете увидеть живые примеры на http://redui.net/

Вы также можете увидеть демонстрационное приложение по адресу http://redui.net/mailclientdemo/ . Это даст вам представление о том, что вы можете сделать.

0
artemkv

Последними добавлениями в Список будут WIJMO и KendoUI.

http://www.wijmo.com

http://www.kendoui.com

0
defau1t