Ask HN: What is your favorite Javascript UI framework out there ?
I'm looking forward to build my next web app soon and this time, I thought I'd give a try to a fully featured JS UI library instead of reinventing the wheel. I haven't quite followed JS trends for a while, so I'd like to get some advice from this community.
So far, I'm considering:
- jQuery UI: has been there for a while, great community and tons of plugins but it's still very low level.
- ExtJS: great UI but smaller community and the dual license scares me (I'm not sure I can afford the commercial license yet).
- SproutCore: seems really great and love the UI, but writing all my back-end in JS kind of scares me.
- Cappuccino: same as above.
So, what JS UI framework do you like best ?
42 comments
[ 5.1 ms ] story [ 101 ms ] threadA UI framework is only as good as the widgets it ships with and looks to me like JQueryUI is a bit light on in this regard. Certainly a good framework for adding a few simple UI elements like accordions etc. Not as useful for projects requiring more complex elements like grids, treeviews, layout managers etc.
Completely wrong. A UI framework is only as good as the widgets it lets you build, and how much it helps you while building them. I have never yet worked on a project where I could piece together all the widgets from one library that perfectly fit every use case.
jQuery UI made a few smart decisions in how to build their API. They kept it extremely jQuery-like, so if you are familiar with jQuery coding style you will be right at home. Everything is tied into the jQuery enhanced set object, built for chaining whenever possible, and relies on no external objects.
Instead of opting to build 40 widgets, 90% of which you won't need for your project and the other 10% which will only fit some of your needs, the pattern you will see is behavior enhancement. This is what gives you the power to build something more powerful than a cookie cutter widget, with only a few short declarations. You can make something draggable, then sortable, then droppable. You can make something else resizable, draggable, and selectable. You can tie all of these things together with the powerful event and method system, and make something that is greater than the sum of its parts. Then you get the bonus of everything being easily themeable with Themeroller.
I feel like web designers are too often stuck in the mindset of imitating desktop UI's, saying "I need this exact kind of treeview" or "This should be a grid, and this a combobox, and these have to be tabs" when they could be considering all the ways that JavaScript, jQuery, and CSS let you step completely out of this box and make something fresh. Things that have become mini-trends in website UIs like the expandy horizontal accordions or Apple's product scroller are what happens when you apply familiar behaviors to new things. In my experience, jQuery UI has allowed me to be the most creative out of any UI framework, and is the best suited for getting interesting stuff done.
There's a good reason people build UIs that mimic desktop applications - it's because a user should be able to sit down at an unfamiliar application and know instantly what each widget does - you don't get that when each app reinvents UI elements to create interesting stuff hehe
Obviously no one is comparing JQueryUI with ExtJS - that would be apples to oranges.
JQueryUI is light and designed for enhancing web pages
ExtJS is a ~600kb framework designed for web applications.
Both are designed for different use cases.
Also, your framework choice is going to depend on what you want to do. SC/Capp are meant for building webapps, not websites.
It's feature rich (more than cappuccino at this time), it has good documentation, it provides a nice unit test framework and it's easy to use.
One thing that worth noting, is that framework like capp/sproutcore/qooxdoo are design with all the widget in mind(not the case with jQuery). That provide a more coherent api, everything is test against each other, it's easier to build, maintain and update. But all of this at the expense of being a little bit bigger (kb).
One advantage of cappuccino is the GUI builder Atlas, but only if you're on a Mac and all your team members are on a Mac. There is no announcement yet if or when it will be available on Windows and Linux.
If you're after a feel closer to desktop apps, or a high level of interactivity, and also don't care much about users who don't sport a modern browser, I think the best library is Ext, both in terms of community size and widget features. But, qooxdoo would be a better choice among free alternatives, (i.e. Sproutcore and Cappuccino)
In a nutshell: In case of Sproutcore, I don't think Sproutcore's widget set is great. As for Cappuccino, I'm not sure about running code over an "Objective-j" layer on top of javascript, which is slow enough. And, I'm not a mac guy at all.
Qooxdoo has introduced some support for progressive pages as well, but it's nowhere near JQuery. I'm also maintaining a project called JsQt, that converts .ui files from Qt Designer to qooxdoo code. See http://to./3t6p to get a quick feeling of what works and what doesn't. So you also have a basic gui-designer support for qooxdoo as well.
If you want to make money out of their work you must pay them.
Now whether you like such terms are not is a different story entirely.
""" Cappuccino was implemented using a new programming language called Objective-J, which is modelled after Objective-C and built entirely on top of JavaScript. Programs written in Objective-J are interpreted in the client, so no compilation or plugins are required. Objective-J is released alongside Cappuccino in this project and under the LGPL. """
http://cappuccino.org/learn/
The Debug build targets don't compile to javascript though so there are two interpreter passes in that case. That is fairly speedy and I don't notice an insane startup difference.
Of course, you can not run the compiler at all and the code will still run in your browser, because it will do the compilation "just in time". There's not a significant performance penalty for doing this, and browser refreshes are still speedy. But when you're ready to deploy, you might as well build ahead of time even for a 10-20% launch time speedup.
I took a serious look at SproutCore and Cappuccino for a web app (not site) that I'm building, but jQuery is so damned easy to use, that it was not easy to justify spending a few days learning yet another framework.
The thing that made me totally drop any further investigation into SproutCore and Cappuccino (and UkiJS, for that matter) was the JQuery layout plugin (http://layout.jquery-dev.net/). It makes your GUI construction super simple, and then you can cherry pick the jQuery UI elements that work for you.
There have been some issues regarding licensing with some OS purists feeling that Ext 'tricked' its early adopters. Personally I couldn't care less. I treat it as a commercial product for which i'm more than happy to pay $300.
You only get access to bug-fixes through their subscriber channels, which means that if you go on their site right now and download the public release, it has bugs, they know it, and they let you download it anyway. By my book, that breaks the software engineering code of ethics.
-JQuery UI for simple widgets to make the UI a bit more functional with JS
- ExtJS for when the whole web app is a JS application with rich, desktop-like interactivity. Use mostly JSON for communication with the ASP.Net MVC backend.
- YUI for anything in between those two points mentioned above.
I haven't really tried anything else so far. But I'd like to look at GWT when I can.
Furthermore, all the native widgets & core for that matter are completely skinnable, extendable, and modifiable as you can see from the vast visual differences and feel in the numerous NOLOH applications.
NOLOH also allows you to easily use most 3rd party JavaScript widgets & components out of the box, without a single line of modification to the 3rd party library. You can see how easy that is at http://github.com/noloh, take SyntaxHighlighter for example. If you have large set of legacy HTML, no worries, NOLOH allows you to work with that and seamlessly communicate with the server check out a demonstration here: http://www.youtube.com/phpframework#p/c/C102458C2FFD8ACF/5/i...
Also, unlike Sproutcore or Cappuccino, the client is only used for rendering and not a store of your business logic. So all your valuable application logic is completely protected from prying eyes.
For all that are wary about NOLOH, give it a watch at http://youtube.com/phpframework to see simple and efficient it really is. We've been around since 2005 (though only available to the public since last year) and have a growing set of articles & videos. In the coming month we'll have more demos than you'll know what to do with.
Disclaimer: I'm a co-founder of NOLOH.
[edited for clarity]
YUI can be somewhat low level, but YUI 2 has grown to provide many impressive components like layout manager, menus, data tables, rich text editors, tree views, tab views, and more. Not to mention one of my favorite parts of YUI, the CSS font and reset files.
YUI 3 is much more reminiscent of jQuery, but doesn't quite have the component list of its predecessor (YUI 2). The YUI community is very active and the people behind the project are very communicative.
Anyways, just thought I would throw in my vote for YUI.
Basically, a lot of business app development is taking data from the database and making a table from which users can edit info or add new rows. All of the stuff that you need for that is in YUI - inline cell editing, tabs, hiding columns and picking them, and formatting data. The performance is excellent as well - the data table performed really well even if there were hundreds of rows.
My favorite by far is Cappuccino. It designed almost exactly like Cocoa, which is a fantastic framework for writing apps with UIs. It comes with a ton of components that are already designed for you. You can completely skip the cost of a graphic designer (you still have understand interaction design).
If you're building a "web 2.0" type web application, jQuery UI is a good fit in my experience. It is lightweight for a UI library and if you're already familiar with jQuery you'll feel right at home. I'm working on such an application right now.
I have to say that the documentation explaining how to create your own widgets is sorely lacking. I hope to write something soon on this subject.
Ext JS:
If you're building a monster web app for intranet / corporate use with a 'desktop application' type of GUI rather than a web friendly interface, Ext JS is an extremely powerful solution. It has ridiculously powerful widgets (the Grid for example). Everything is event driven and class based. Making new widgets or extending core ones is easy through inheritance.
I've worked on 3 such applications so far and it's been great. The documentation is top notch and it's actively supported.
It is however VERY heavy. Both in terms of size and in terms of the markup it generates. Like I said, not for lightweight apps. Build your application completely in JavaScript and forget about html with this one.
I don't know that I'd recommend it over jQuery if you don't need the widgets, but I don't have a lot of jQuery experience. The widgets were a big factor for us.
For applications where look-n-feel, customization, etc is more important (ie. B2C-ish or consumer internet), HTML/CSS/jQuery is the way to go.