Reputation: 69825

What is a good Very-High level UI framework for JavaScript?

I need to write a temporary Web-based graphical front-end for a custom server system. In this case performance and scalability aren't issues, since at most 10 people may check the system simultaneously. Also it should be PHP or Python (server) & JavaScript (client) (can't use Flex or Silverlight for very specific non-programming related issues).

So I know I could use YUI or jQuery, but was wondering if there is something even more high-level that would say allow me to write such a little project within a few hours of work, and get done with it. Basically I want to be as lazy as possible (this is throw-away code anyways) and get the job done in as little time as possible.

Any suggestions?

Upvotes: 15

Answers (22)

Asqan

Reputation: 4479

as 2017*

if you want to give money:

if you decide to keep your money with yourself:

If the aims is to write very very high level UI code, the following code generator programs are just amazing to construct your whole UI of the app within minutes (for the ones who wants to use Bootstrap):

Upvotes: 7

AxleWack

Reputation: 1911

I used JQuery.UI. This is not necessarily an answer to this question(Especially since it is an old post), but thought I would share what I have, in case it helps anyone else, as I came to this Post searching for how to create a drop and drag UI.

Please note that this is for MVC.

Please note that there is no actual Functionality added to this yet, it is a starting point, which creates a UI that allows drop and drag items:

Layout:

<!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>

Index Page(I replaced the Home Index with this code):

@{
    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>
}

Hopefully this can help someone else in the right direction.

Upvotes: 0

Jan Nejedly

Reputation: 15

I can recommend Controls.js with its Tools.

Upvotes: 1

Alex Nolasco

Reputation: 19456

See also this question

What are alternatives to ExtJS?

It's 2016

Here is a few (old) ones

ampleSDK (interesting approach)
DojoToolkit and their nice set of widgets
jQuery UI
Cappuccino
rialto
Echo
Simple UI kit UKI see demo
vaadin (Requires Java)
jxlib.org
livepipe.net
dhtmlx.com

Upvotes: 10

Vladimir Georgiev

Reputation: 1949

ShieldUI is also a good commercial framework.

Upvotes: 1

NimChimpsky

Reputation: 47290

Am I I missing something, isn't bootstrap the defacto go to choice ?

Also, and rather cooler, google's polymer yet ... based on web components :

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

Upvotes: 2

stak

Reputation: 149

Try using Anijs. It reduces high level UI actions to simple lines

Upvotes: 0

artemkv

Reputation: 1

You could try RedUI, it is not ready for production yet, but it should be good for your goal.

The approach is inspired by WPF, you describe your UI out of predefined controls, like Textbox, Combobox, but also some more complicated controls like TreeView or GridView. In the model you also declare you data bindings.

The library will render a window for you.

Then you bind it to the view model, subscribe to events, and add the custom logic that handle those events (e.g. upon "window.closed" you can send the updated view model back to the server).

You can see live examples at http://redui.net/

You can also see the demo application at http://redui.net/mailclientdemo/. This will give you an idea of what you can do.

Upvotes: 0

Akash Kava

Reputation: 39916

Disclaimer: I am author of Web Atoms JS

Web Atoms JS was built to bring all concepts of Flex, Silverlight and XUL. And each of these technologies used more of XML markup for very high level UI controls. Screens become complex and visualizing them becomes painful when it keeps on changing.

With Web Atoms you will write for less code then any of other frameworks.

This is a Sample of what all things are possible in Web Atoms JS.

Here is link to documentation. http://webatomsjs.neurospeech.com/docs

enter image description here

Upvotes: 1

defau1t

Reputation: 10619

The latest additions to the List would be WIJMO and KendoUI.

http://www.wijmo.com

http://www.kendoui.com

Upvotes: 0

0x1mason

Reputation: 757

Qooxdoo is phenomenal. You can do mobile, web, and desktops with it. It abstracts away all the html and css. It's well-documented and OO. You can also use the same objects server- and client-side.

http://qooxdoo.org/demos

Upvotes: 1

sepehr

Reputation: 18445

Also Dojo's UI library named Dijit is absolutely considerable!

Upvotes: 5

Calvin

Reputation: 104

Out of all the JS frameworks out there, JQuery and YUI are my favorites. They accomplish a lot of the same but in very different ways.

For your request (lazy, easy, and powerful) I would vote JQuery. If this is something that will be more long term and more of an application that is very verbose and code heavy, I would vote YUI.

I really don't think there is anything out there that is better than these two frameworks. Either choice is a good one.

Upvotes: 2

Juho Vepsäläinen

Reputation: 26873

I came by qooxdoo a while ago. I haven't used it but at least the demos look cool.

Upvotes: 1

Randell

Reputation: 6170

Check out DHTMLX.

DHTMLX Toolkit is a comprehensive set of Ajax-enabled DHTML UI components. Professionally developed grid, treegrid, treeview, tabbar, calendar, menu, toolbar, combobox, windows, items browser, color picker and file uploader empower developers to build cross-browser web applications with high interactivity and rich user experience. DHTMLX components provide the most complete set of features and allow you to bring desktop-like functionality to the web.

Upvotes: 2

toholio

Reputation: 2888

Sproutcore would be a good choice.

If you're unfamiliar with it you might find that the time required to learn the basics is too long for throw-away code but once you've got the basics down it's quite quick to develop with.

Upvotes: 0

Eastern Monk

Reputation: 6635

YUI seems to be good while Extjs also comes very close. There is little difference between YUI and Extjs, though YUI is free has a much larger community support and is backed by a giant like Yahoo. for cappuccino u will have to spend time learning heir Objective-J, once learnt that you need not write a single line of HTML,CSS and Dom manupulation.But if you are comfortable with all these why spend time learning objective-J ? Bindows again is a good framework very similar to YUI and Extjs, what I like about it is that it has many ready made themes that makes it more attractive and simple to design your own custom theme. But say 2 years down the line I personally feel that YUI would have gone much farther than all these.

Upvotes: 1

Oliver Fink

Reputation:

I would try application.js - less animation fluff, lots of controls and it's a window manager (someone mentioned Bindows.. not worth the money for a terrible UI).

used in this Online Word Processor

I find cappuccino confusing, and I don't want to learn yet another language tied to a single library.

Upvotes: 1

user23743

Reputation:

I've recently been playing with Cappuccino, and find it a very straightforward and pleasant framework to work with.

Upvotes: 8