Ask HN: What is your favorite Javascript UI framework out there ?
42 comments
No mention of YUI yet? I have been using it for years and can't imagine using any other framework.
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.
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.
I'll also cast a vote for YUI. Caveat - I'm a product manager and not a developer, and the eng team chose YUI on it's own. It really worked out well for the product - we were able to put out some really impressive features using YUI data tables and some light use of other things as well.
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.
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.
Depends on your requirements. JQuery is great if your goal is also to maintain a progressive experience that somewhat works without javascript.
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'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.
Ext looks great, but for some reason, I've never felt like their licensing seemed very clear cut. Having said that, I'd consider Ext over the likes of Sproutcore or Cappuccino.
The licensing is quite clear. If you'd like to benefit from their work for free you must ensure that you pass on your work for free to your users too.
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.
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.
In cappuccino you compile the objective-j to javascript for release so the speed issue doesn't exist. It is a new syntax for most javscript devs though so that might be a turn off.
are you absolutely sure? here's an excerpt from their website:
""" 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/
""" 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/
I'm developing an objective-j app right now and they have compile targets that compile directly to minified javascript. It will work without compiling but for a production I wouldn't recommend it for bandwidth reasons alone. Technically they are right the javascript is still interpreted in the client and you don't need any browser plugins to run it. It's not strictly objective-j source code your are running in a production build so there aren't too interpreter passes.
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.
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.
Actually, the main difference between debug and release are that release builds also minify/compress the code. Both compile from objj to js.
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.
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.
If you don't limit yourself to a strictly JS UI library, you can try NOLOH (http://www.noloh.com). NOLOH stands for Not One Line of HTML and allows you to work on a single language on the server-side without ever having to deal with the client. Unlike SproutCore, or Cappuccino, which are fat-clients, NOLOH is lightweight and on-demand. This means that your application loads instantly (noloh.com is a noloh app), and there's never any unnecessary code loaded on the client at any time, either on the server, or client. Best of all this is done automatically for you completely transparent to the developer.
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]
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]
You can also take a look at qooxdoo. http://qooxdoo.org/
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.
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.
You don't have to write any of your backend in Javascript w/ SproutCore or Cappuccino.
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).
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).
UkiJS (http://ukijs.org/) is pretty nice too.
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.
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.
Thanks for the pointer to jQuery Layout! It looks very similar to extJS' layouts.
jQuery, hands down. It allows for so much functionality with such small amounts of code.
YUI is very impressive and fantastically well documented - but in the end I switched to jQuery and jQuery UI - it really makes working in JavaScript a delight rather than the chore I used to regard it as.
hands down. jQuery is the simplest and most powerful, and has the biggest community.
Since the OP is asking for UI frameworks I assume you're both referring to JQueryUI.
A 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.
A 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.
>A UI framework is only as good as the widgets it ships with
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.
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.
of course it goes without saying that a framework should have an extension mechanism that allows you to build custom widgets (and Ext does). It's also nice when you don't have to build a treeview or grid with pagination and sorting and editing etc.etc. Personally I like being able to plug and play someone else's code - There's nothing more wasteful than reinventing the wheel.
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.
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.
jQuery UI:
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.
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.
You might want to take a look at qooxdoo: http://qooxdoo.org/demo
Depends on how complex the application is.
-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.
-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.
ExtJS has repeatedly claimed that their Open Source license does not apply to an application in which any part (including the backend) is proprietary. I don't personally agree that that's how the GPL works wrt JS, but if you can't afford the commercial license, be aware that the owners of the project don't think you can use the OSS license on a non-OSS app.
If you use Java it is a no-brainer: GWT. You can check out our app for an example: http://demo.teampostgresql.com. It is a fairly complex AJAX app written 99% in plain Java. GWT automatically compiles the source to JavaScript targeting different browsers. Awesome.
yeah java: java.lang.IllegalStateException: The HTML template 'index.jsp?getpublicresource=DatabaseExplorer_dialog.html' has not been loaded.
Nasty. I haven't seen it before even though the app sees a fair amount of use. Do you have the complete stack trace? Any unusual browser / configuration?
Maybe you mean something different, but I'm pretty sure both SproutCore and Cappuccino don't demand your back-end be written in JavaScript, or any particular language.
Also, your framework choice is going to depend on what you want to do. SC/Capp are meant for building webapps, not websites.
Also, your framework choice is going to depend on what you want to do. SC/Capp are meant for building webapps, not websites.
I love Google Closure. It's a huge library with tons of different modules. Much different than jQuery which is smaller and lighter but great for DOM selection. You could probably use the two of them together.
You don't really need to. goog.dom's stuff is very powerful.
Cappuccino is my favourite, although the included AppKit framework is large and slow at times. If you rebuild AppKit without Aristo and all the default images it loads quickly.
The YUI3 based Alloy UI looks awesome: http://alloy.liferay.com/demos.php
Jquery by a mile, for all the reasons others have mentioned + I'm also using jqueryUI which supports the newish Theming framework and is a great way to bring a consistant Ui feel to your app. the online theme generator is very slick and is designer friendly too.
For information rich applications (ie. B2B-ish), definitely ExtJS. Pretty steep learning curve since, unlike jQuery UI, you sorta have to take all of nothing. We use ExtJS everywhere where using data/information is more important than look-n-feel. Put together CoffeeScript (http://jashkenas.github.com/coffee-script/) with ExtJS and you'll be in RIA dev heaven. Fast and very productive.
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.
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.
I've been using Dojo for a while. It has widgets with nearly the breadth of something like ExtJS, but is completely open-source. The documentation isn't all that great—thought it is improving—but the community is responsive and the code is well-written enough that it isn't difficult to figure out what the docs should say.
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.
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.
javascriptmvc - (http://www.javascriptmvc.com) is built on top of jquery and is most effective in a project when jquery doesn't cut it anymore.
None. They all make too many assumptions about my user interface design and are too hard to restyle. Often it's like having aqua widgets in a win32 app.
Dojo the lastest version
gwt
MooTools
ExtJS is my personal favourite - amazing collection of ready-to-go components, very good doco, a strong community, loads of extensions etc. The performance is also very good.
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.
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.
One issue few mention about Ext, is that they are shipping bugged releases to non-subscribers.
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.
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.
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 ?