Anybody knows a good JavaScript UI (Widget) Library [closed] - html

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
Recently I had to develop several web applications. I did extensive research regarding JavaScript UI Libraries but I haven't been able to find one I was really satisfied with. What I mean with UI libraries is a library which provides user-controls such as buttons, combo boxes, grids, charts, layout, ...
What I found so far and why I didn't like it a 100%
jQuery UI has too few controls. (I know there are a lot of plugins and you can nearly find everything but it is not the same as a complete library made and tested by one team or group)
Dijit (Dojo). I really like this one but when I try to use it in my websites I'm always having troubles. They don't seem to be as easy to use as other libs.
YUI version 2 had a lot of controls, but the "new" version 3 still misses many controls. (or I am just too dumb to find them) I don't want to work with both versions at the same time or use an old version which will be replaced soon.
DHTMLX has many controls and they work really well, but the controls themselves lack many features. (for example the HTMLEditor does not even support to change the text color out of the box or I could not find an easy way to expand/collapse tree nodes with some sort of animation)
If anybody knows of a good library which I have not tried yet or knows how I could use one of the above libraries "better" I would be really happy.
I am wondering why at this point (where web-apps are getting so important) I still can't find a complete UI framework which would provide me with controls which you can find in other environments since years (or even decades) - for example Java, .net or Delphi to name just a few.
edit:
I know there won't be a library with every control I ever need, but what I expect from such a library is at least: consistent skins, api, documentation, validation and the most important controls you'd need in business apps/websites (datepicker, button, editor with support for numerical data, grid/tree, layout controls, HTML editor) AND the possibility to create your own controls. good to have: charts or reporting

Ext JS provides the best GUI widgets by far. I've used it for a large intranet project, and have been completely satisfied. It's available under GPLv3 and a commercial license.
Be extremely careful when evaluating open-source frameworks. They tend to religiously promote the quality of their projects, but I've found that poor documentation and buggy code are pervasive. Dojo claims heavy industry involvement, but their documentation is poor, and it's not hard to find bugs on their website (the dijit example pages have been broken for months at a time...).

Your comment about JQueryUI is very telling.
As you say, JQueryUI does provide relatively few controls, but has a lot of plugins available. But you're looking for a single library with everything you want built-in.
This is a tough ask, because we don't actually know what widgets you really want, which ones you like the sound of but probably wouldn't use, or which ones you'd use but only if they worked exactly the way you want.
It's virtually impossible to predict all the widgets that someone may want, or how they want them to work. And even if a given library does get it exactly right, when your needs change slightly in the wrong direction, suddenly the library you chose could turn out to be a poor choice rather than the right one.
This is why flexibility and maintainability are far more important than getting an exact feature match. Once you go beyond the basic set of widgets, most others are built on top of the simple ones anyway, but everyone has their own ideas about how they should be implemented, and new UI concepts are being thought up every day. This is why the plug-in model works so well, and why I feel you're making a mistake in discounting JQueryUI because most of the widgets are available as plug-in. In fact, I would say that this model is likely to be the best solution for you.
There are a number of other libraries available which you haven't mentioned. Mootools and Prototype are probably the best well known, but there are others too. Rather than list them all, I'll point you to this page on Wikipedia, which lists them all in a comparative table: http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
I hope you find that helpful. But I suspect you won't find any library in that list that comes with every widget you'd ever want, all in one bundle. They all rely on plug-ins, because the library developers are generally focusing on making a framework for widgets, rather the widgets themselves.

Check out PrimeUI, provides various widgets and built with jQuery UI APIs. Licensed under Apache V2. http://www.primefaces.org/primeui/

Recently Telerik Kendo UI which is built on top of jQuery (no impedence mismatch with other frameworks) has Open sourced (Apache 2.0 License) their Library of Widgets.
I strongly recommend this..
Telerik Kendo UI is not Open Source
Download the Kendo UI - Open Source edition

If you don't mind the licencing you should have a look at http://www.sencha.com/ the ExtJS library.
A demo library available at http://www.sencha.com/products/extjs/examples/

SAPUI5 web controls listing with example source code:

Related

Are libraries essential for building apps? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I recently started learning coding I actually didn’t know where to start after doing some researching I decided learning the javascript language as a first step . After finishing the courses on freecodecamp I didnt know what to do next I heard so many things to the point that I feel like I dont know anything . I would like someone to actually help me understand basics before languages, html css ...
Here are my questions :
Are libraries essential to build a website or create games ?
What ui and ux ? ( I heard that its for webpages designing though I also heard that css is also for web designing )
What’s a framework ?
Does all languages have libraries ?
Can you develop apps without libraries or frame work just using css html and javascript(example)
Are libraries essential to build a website or create games?
Yes. Any code you write will fundamentally become your library.
What ui and ux?
UI is the user interface of any tool that requires input. UX is the user experience of a given interface. For example, an airplane pilot is given an interface to control the aircraft, and the controllers are meaningfully arranged to give the pilot the ability to fly safely. The result of the user experience is determined by the pilot's ability to accomplish a task.
What’s a framework?
A framework is the foundation for deploying multiple functionalities for specific tasks. For example, an airport specifically manages how passengers arrive and depart to a new location by air travel. Similarly, a boating dock specifically manages how passengers travel over water. Here is a list of a few web frameworks out there: Github Frameworks
Do all languages have libraries?
Most languages include built-in libraries. For example, Javascript includes basic math functions.
Can you develop apps without libraries or frame work just using css html and javascript(example)
Yes and no. HTML is a markup language, and CSS is used to style your information. Fundamentally, you can write a static web app with html, hide or reveal information with css, and link out to other pages. If you intend to write an app with functionality that manipulates the HTML or CSS, you will need a programming language such as Javascript.
Are libraries essential to build a website or create games? In a way no, but they will make your life much easier if you use them properly.
What is UI and UX? User Experience and User Interface. The first one (UX) is in charge of researching the user and it's context to plan and design the basic structure and flow of any platform, app, etc... The later (UI), using the UX outcome, manages the final design, the look-n-feel of it, as well as all the interactions.
What’s a framework? A library of a coding lenguage. They are very useful when you are developing, helps cut time if you can settle for somewhat generic functions-styles. Personally, I still customize the looks as some of them they can look a bit too generic
Does all languages have libraries? Most of them, yeah. All web development languages I know do.
Can you develop apps without libraries or frame work just using css html and javascript(example)? Yes, but for these lenguages it sounds like a waste of time not to use them. The basics to start on those 3 would be Bootstrap, jQuery and their

Is html5 robust enough for business applications? [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Like, can I write a business strength application in HTML5 that mimics our current system that contains many highly interactive grids, custom trees and so on.
We have a good working system written in C# WinForms with parts done in WPF and have recently embarked on writing a custom app for the iPad that communicates through WCF with our main server hosts. We now have a very fast custom grid written in C# that compiles to Objective C through MonoTouch and also a cool interactive pie chart.
Now my boss wishes to build a version for Android and I am thinking if we shouldn't really be spending time creating a single HTML5 app that can run on both iPad and Android equivalents.
Thing is - take a grid - my grid on the iPad is fast (re-usable cells etc) - how would I create a grid from a 'dataset' type source in html5? Do I really have to go down creating lots of tags and then submitting them to the browser? Are third party widgets like jqwidgets the answer??
Thanks
This is a bit anecdotal, but my experience has been that HTML5/JavaScript are just not fast enough on mobile devices yet (in 2012) particularly if you are displaying lots of data, especially and you want fast response times with interactive features. Give it another year, and I wouldn't be surprised if this statement becomes outdated as mobile devices continue to evolve.
Mobile web development certainly has its uses currently, e.g., if you want to target the most devices with a single codebase; if you don't have enough development resources and are willing to settle for a non-native experience; if you don't have experience in the languages required for native development, etc.
Given that you already have done the work for the iPhone app, my humble opinion is that it's probably better to move forward with a native Android application -- you will get a much more responsive application for about the same amount of work at this point.
how would I create a grid from a 'dataset' type source in html5?
Depending on what the grid contains, you can do it with plain old HTML tables or with a combination of other elements styled with CSS. There are really many more considerations though-- e.g., does it need to work on small screens (e.g., phones) or just larger screens (tablets). Often, you can't really fit a whole grid on a small screen, so you end up with UIs that aren't really grids anymore. You can take a look at a mobile JavaScript framework such as jQuery Mobile to see how they've done it and maybe even consider using the framework for use in your own application.
The various JavaScript frameworks (eg. JQuery and Dojo) have mobile device-specific widgets of quite high quality. Have a look at http://dojotoolkit.org/features/mobile and http://jquerymobile.com/
How close do these get to native apps developed in ObjectiveC and Java? Not perfect but maybe good enough. You can also use a combination of native and HTML in the same app, some pages native some HTML. I'm doing that kind of thing with IBM's Worklight, but then I would, I work for IBM ;-) Irrespective of specific products I do see folks taking that approach.
In addition to portability, anoyther of the benefits of having much of the app in HTML is that updated versions can be delivered without going via an app-store - this increases agility of functional delivery.
As evidence, I'd say that a lot of Windows 8's apps are just wrapped JS/CSS/HTML, with a few APIs which Microsoft supplies to allow access to hardware/the filesystem.
I wouldn't think that they've gone so far as to make Excel 2013 JS-based...
...however, with that said, they have gone so far as to allow developers to extend their programs with applet views of the data -- those applets are all going to be built on "html5" (again with an MS-Office JS API).
It's not an easy road to go down -- people look to jQuery to be their saviour for these types of things.
This is exactly where jQuery would not be what you wanted, if you were looking to hack together a solution.
For example:
$(".table_cell").click(function () { alert(/*whatever*/); });
People think that jQuery is assigning a delegator to listen to any click on any element containing class="table_cell".
That's really not what it's doing.
It's looping through each one, and attaching an event-listener to each one, directly.
It's these little things that people miss -- people like Twitter, who didn't bother caching references to elements, because jQuery is so easy to hack things together with.
So then you have JS touching (or acting on) dozens or hundreds of individual elements, at all times.
That's not good for anyone.
jQuery isn't bad at all -- it's quite helpful, as a low-level construct to help skirt around browser differences.
Some of its plugins are also all right.
I can't guarantee that they're all high-performing answers to all things.
But some of the plugin-creators understand how to maintain a responsive and well-performing program.
Which ones are right for your exact needs? Who knows, other than you.
Will they perform perfectly, and quickly?
That depends on a lot of different things, of course.
Coming from C#, you might do to look at something like AngularJS.
Angular, itself, uses an internal version of jQuery, to tackle some of the low-level stuff that jQuery has made a solved-problem.
But it allows for data-binding, and pretty simple view templating.
Hammer.js is also a very decent gesture-tracking library.
From there, though, I'd suggest building your own framework, if you want it done the way that you want it to be done.
Nobody knows what your needs are but you, and trying to stuff things into a shoebox, because it's available, isn't always the solution, regardless of what various companies may think...
You can leave most of the node-work to Angular, you can leave the gesture-sensing to Hammer, you can pull out some other basics from jQuery-lite (the no-frills jQ installed inside of Angular, if you don't have jQ on your site), or jQ, itself...
But they're just tools and not answers.
The web can be very responsive if you cache references to elements, rather than querying for them over and over, delegate events, do large structure-changes off-DOM (on cloned-nodes, if necessary), and don't try to treat JS as a traditional inheritance-heavy language, and you remain mindful of how and when to use AJAX (number/frequency of calls versus size of data -- favour fewer calls).

Is developing a webbased app more efficient with Ext JS/Dojo & et al than with HTML/JQuery

The server side is pretty much set up, it's basically
struts 2 / spring security / jpa.
Now I have to decide what to do with the client side (the browser). The client side codebase should be maintainable and should lend itself to automatic regression testing.
So as an example lets say I need a table component having properties such as
sortable/pageable columns
reordering of rows and columns (via drag & drop)
inline editing of table cells
remembers state when customer re-visits page
integrates easily with struts 2
As far as I understand things there're 4 alternatives
DIY using oldschool HTML + JQuery + Ajax
Finding a JQuery plugin that does all this or
plumb together different plug-ins (like Flexigrid + additional plug-in for drag & drop)
Using a JS toolkit
Should I stick with JQuery? Or should I go for fullblown JS toolkits? I have little experience with JQuery and JS toolkits (I'm not a web developer).
Thank you for helping a serverside programmer cross the messy world of web-ui-programmming ;)
My experience is that Dojo's support for programming-in-the-large is great if you have a large-scale app that will benefit from the build system, class system, widgeting system and integrated widgeting library. It also of course brings all the standard stuff with it, like cross-browser support and event system.
If you just need some widgets and animations then any library will work. I'd stick with the one you/your team knows best. jQuery definitely has the greatest number of people with that skillset.
Our team wasted 6 months trying to give the client what they wanted with JQuery/UI, and we switched to ExtJS 4, and the client is happy after 2 months. This is an app with 50+ models.
JQuery/UI is NOT designed for web applications. It is designed for web SITES. Sure, it has some good plugins, but you'll spend countless hours learning their apis and switching your thought process between them all. JQuery/UI lacks the following:
a graphical designer (see Sencha Designer 2), ie graphical layout GUI program
complicated layouts (in ext you can switch a layout of a container to accordion, tabs, wizard, anchors with one setting)
a grid (ext grid supports paging, sorting, filtering, grouping, summaries, editing out of the box)
real comboboxes
a model view controller system
templating
good html editor control
a whole ton of other stuff
do yourself a favour and spend the money on ext, and save yourself countless hours.
regarding the grid you mentioned, ext's is far superior to anyone else's. you can do what you listed in about 20 nicely-formatted lines. i am not kidding.
regarding client-side unit testing, use jasmine with ext.
The short answer is yes. Frameworks like Ext.js take care of a whole lot code that you would end up writing yourself if you were to write everything from scratch. These frameworks take care of models, events, views, communication with servers/APIs, etc.
This isn't really an answerable question. It all depends.
ExtJS is great for very specific things. If you want those very specific things, it's likely the most efficient option for you.
If jQuery UI meets your needs, then that's your answer.
If you have jQuery dev's, maybe stick with jQuery.
If you have ExtJS folks, consider ExtJS
etc, etc.

How/When to design an interface? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to get in the habit of designing the interfaces to my websites at the very beginning before I do any actual coding. I've read "Getting Real" by 37 signals and they recommend doing the interface first, before any actual code is produced.
What exactly is meant by that? Does that mean use pure HTML and CSS to design the site and add php, js logic to page afterwards, or is it okay to sprinkle in the php, js from the beginning?
What if your using a framework, should I set up empty controllers that simply call the views, or should the early stages be solely html, css?
Also, what do you guys think about design first vs later?
EDIT I'm talking about AFTER I have sketched everything with pen and paper.. I'm taslking solely about the html mockups. And I'm not too sure about using extra tools that I would need to learn to do this
I think that the majority of the benefit of designing the interface first has been achieved after you are done your paper sketches. Basically, you are just ensuring that you have a design in your head and that your coding process is somewhat end-user driven. You are also trying not to waste time on needless documentation.
Getting the HTML in place (or the skeletons of the Views in an MVC app) makes some sense and this is the main thrust of what 37signals says. I would certainly not do anything beyond this that is just going to be thrown away.
I think if you have a proper design, it is immaterial if you next move on to writing the back-end code after the HTML or if you do the CSS and JavaScript. The CSS and the code should not even need to be aware of each other.
Do whatever gets you excited and motivated. Do whatever gets you thinking more deeply about how the app will actually work so you can catch any flaws in your original thinking. I like to code before CSS but that is just me. You might find it important to get the CSS further along before the app takes shape in your head.
Joel Spolsky likes Balsamiq as a mocking tool. I think that 37signals uses Draft (an iPhone app). I use a Sharpie. The key is not getting too detailed though.
Opinions vary, but I believe that JavaScript should come last. I believe most sites should be designed so that they work 100% without JavaScript and then have JavaScript added for polish.
Learn more about Unobtrusive JavaScript
So (for me):
Quick and dirty sketches of views
Get some HTML in place
Maybe some basic CSS for layout (or more if I need to impress somebody early)
Write the core logic
Add support for web services and AJAx calls
Pretty it all up with snazzy CSS
Write some JavaScript to add the sizzle
Let me ask you this. Do you paint a car before or after you have made the working parts? Maybe you have chosen which paint but ultimately it cannot go on until the car is finished. Maybe you don't agree with this analogy but I think coding will bring out issues that cannot be understood before a site is designed. Code first, design second.
Get a pad of paper. Each page represents one page of your site.
Sketch the interface. What controls go on each page? What controls are the same on each page? What forms are there and on which pages? What happens when user clicks on item x? Item y?
This will help you solidify your plan of both the content and behaviour of your site.
If you just start blindly coding you will end up with burnt spaghetti.
The user interface is what the users of the website will see. Before coding you probably start with some very basic sketches of the site that are not code, to identify page navigation, general placement of content and interaction with the site.
But the earlier you can show and discuss a working UI, the easier it is for the users/client to get an idea of the final product. So quickly move to the HTML, CSS, JavaScript and things like images, to identify:
The data presented on the page (HTML)
The representation of the data (CSS)
The interaction with the data (JavaScript)
Doing so helps to gradually develop an actual working UI that you can discuss with the client. This keeps them involved from early in the project. It forces them to think about the site, and make decisions about content, look and interaction.
Getting such feedback early in the project reduces the risk of building a product that needs to be changed later on. And making changes early in the project is easier/cheaper, then later in the project.
While the UI is being developed you can already start looking into data structures, software components and integrations with other systems to drive the site. But that's not what users/clients are interested in, they want to see and use the product.

Installable CMS similar to CushyCMS? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm looking for a CMS system that works similar to CushyCMS, but that I can install on my own server?
I love the functionality and ease of use CushyCMS provides for simple, small sites where setting up and installing a traditional CMS (Drupal, Wordpress, TYPO3) are not necessary.
Anyone have any ideas?
Thanks!
Troy
Perch is an excellent lightweight CMS.
For what you're after I'd reccomend ImpressPages CMS
http://www.impresspages.org/
It doesn't use html tags, but its a very easy "drag and drop" style. with clear toolbars available to the site admin, obviously WYSIWYG editing isn't everyones favourite (it's not mine) but for 5 or so pages, it's perfect.
Orbis CMS is an open source alternative to CMSs like CushyCMS. It's built on the same priciples (simplicity, ease-of-use) and features a stylish interface, but is self-hosted and free.
"modify html pages simply by adding a class but that I can install on one of my own servers"
Unify does this very nicely unify.unitinteractive.com it costs $24.49 per domain, simply upload the unify folder to your webspace and add class="unify" to the areas in the html you want editable.
Another one ideal for a site of 5 pages is pulsePro http://pulsecms.com/
If you're looking to write some of your own code/html it might be worth looking at django-cms
Well, I don't know of any yet, but if you want an alternative online service then check out Surreal CMS. You can also try out Simple CMS, but it's still very new (released into beta a day or two ago).
You should look at Zimplit!
SnippetMaster is pretty cool. It's too bad that it's not open-source and free, but at least it has generous and inexpensive licensing schemes (normal, re-brandable, etc.)
It would be nice if it used class names for the content regions, but it uses HTML comments formatted a special way (like IE conditionals) so it's still valid html.
http://www.snippetmaster.com
I built this one www.kitgui.com so programmers can be programmers in their own language / framework of choice and use a REST-style interface to pull content and HTML 5 javascript reference to be able to let clients manage the editing experience directly on the website pages themselves. HTML 5 allows for the cross-site security to occur these days so everything just made sense to do this. In my ecommerce business its all about how fast you can setup things to get them out the door and get paid. KitGUI makes it so easy you can't really appreciate it unless you try it out. This is brand new so I have no idea if programmers like it or not except for my own devs who are biased of course. I know clients do for sure so please give me some feedback on it if you have time to investigate as I worked my ass off to launch it.
Something which is very similiar to CushyCMS is Unify CMS.
They have a demo which you can try before you buy.
You will see that Unify is very similar to CushyCMS and I quote:
You do not need to know PHP, nor do you need to write your code
specifically for Unify. In order to create editable areas on your
site, you only need to add “unify” classes to each element. That’s it.
There is no Database to setup, you just upload the files via FTP (or similar) and start adding in classes where you want to have editable regions. They have repeatable regions as well.
Unify currently costs 24.49 and is backed by a 45 day money back guarantee.
Support is powered by Desk.com
Take a look at Unify requirements and you will see you can run this in almost any server on the planet; well, almost any server :)