We Keep Coding

JavaScript GUI library which is usable from ClojureScript?

On one of my ongoing web development projects, we need to create a page (really a mini-application of its own) which will have an interactive, "Web 2.0" interface, more like a graphical desktop application than a typical web page.
I'm hoping to use a higher-level language which can compile down to JS for the client-side logic, rather than programming directly in JS, and ClojureScript is my first choice.
I'm looking for a JS GUI library which can be used from within ClojureScript, and which supports a style of programming similar to "desktop" GUI libraries like Swing, QT, wxWidgets, and so on. It should allow me to create popup <div> "windows", put widgets such as buttons/labels/etc. in them, attach event handlers to the widgets, and so on. Do you know of one which would work?

Clojurescript is still young - I don't think there are mature frameworks of that caliber (yet?). Having said that, I'm building a UI using the following components:
Twitter Bootstrap + JQuery for visuals and UI elements
Chas Emerick's Friend for server-side authentication
Compojure + Ring + Jetty for the server
Crate (Clojurescript Hiccup) for html/dom generating
Jayq for JQuery wrapping
Fetch and/or Shoreleave's remotes for client-server RPC
Shoreleave's pubsub mechanism or Clojure's add-watch for data binding
A good feature of Clojure and Clojurescript are that they favour simple functions on generic data structures. That's why you tend to see several smaller libraries that do one specific job, but work really well together, as opposed to giant monolithic frameworks with an object model that requires you to adopt one way of thinking completely.

You should consider Google Closure Library. It has all features you ask and is definitely usable from ClojuresScript, I've played around with it. See http://closure-library.googlecode.com/svn-history/r1430/docs/index.html

I think ExtJS would fit the best in your case, even though this is pure JS. This is the most advanced web GUI library at the moment and it makes possible to create web applications the way similar the one using the desktop languages and IDEs. Just check out their demos. I don't think there will be something similar for the ClojureScript in the foreseen future.

Backbone-based web app for rails backend: separate project or on top of rails?

I currently have a web app written in rails3. I want to write a backbone-based js app that will consume the rails3 services; while there are alot of examples of backbone with rails, I would prefer to build it in a different project. This project would be pure html+css+js, wich would then point to the other proj's services.
What are the advantages or roadblocks of this approach?
Are there any other approaches?
I've noticed that most of the rails3-backbone projs on github do alot of the magic behind the scenes (ex: precompiling handlebar assets, auto-including js files), which makes it more difficult to understand how all the pieces work together. Also, if I want to package an app using phonegap/trigger.io/etc, wouldn't this be more difficult?

When it comes to writing Backbone application, it actually makes a lot of sense to develop it solely on its own. In other words, develop it, as you said, as a pure html+css+js application.
There are very good reasons to do so:
Deployment
Consider when you are deploying your application. At some point you will surely want to deploy some modular component of your application. This maybe the backend services which are responsible for serving json to your clients, or it could be a tweak on the UI. Whichever it may be, it is best if you are able to deploy each of them independently.
Modularity
It may sound attractive to be able to use some rails magic behind the scenes to help develop your UI. However, consider the modularity of your project.
IMO, Backbone (or any AJAX application) is beautiful. And the beauty comes from the very fact that the UI code really has nothing to do with the implementation of your backend. It could talk to a PHP/JAVA/RAILS/PYTHON/YOU-NAME-IT server, and it still wouldn't matter. That is, if you're implementing a RESTFUL server. In fact, the UI code could rest on an NGINX server that serves nothing but static content, and it would still run perfectly fine. This is actually what you want. Your UI code should at no point (during development or production) be aware of your backend's framework or whatever tools your backend supports. It would be a crime to introduce unnecessary dependencies into your Backbone project.
Imagine one day when you see fit to migrate to a different architecture which isn't Rails. It would be a nightmare if there are any dependencies at all. Much rather have a UI that is totally independent of your backend implementation.
Packaging
You mentioned you're going to use PhoneGap to package your application. This is probably the biggest reason why your project should be independent. You will not have the luxury of loading your js from your servers when you're say, submitting your app to Apple, if you ever plan to do that. All scripts must be packaged into the App which must be standalone.
Last but not least, to answer your question about suggestions for 'other approaches'. That is quite vague, so I'm not sure if this suggestion would help, but I wanted to point you to some resources that would help organize your Backbone projects, and make your life easier.
Backbone with RequireJS
I would argue that this is the most wonderful way to work with Backbone. RequireJS let's you specify your dependencies in your js files much like you would import in compiled languages, which helps a lot when it comes to organizing your Backbone project, and breaking the code down into smaller modules. The optimization tool that requireJS provides also let's you compress all of your javascript file into a single file. I believe that will come in handy if you want to package your project in PhoneGap.
Underscore
You mentioned using HandleBar. However, I recommend that you look into underscore's templating engine which is inspired by RoR's templates. And assuming that you're quite comfortable using Rails, the underscore templating engine might just be what you're looking for.

What combination of Javascript/Css/HTML frameworks and libraries do you recommend?

I'm looking to modernize my web development with some cool libraries, but there are so many tools that do different things, often with overlap, that it is hard to decide.
I'm not interested in one framework but more in a combination of various tools that work well together. I've looked at resets and normalizers, boilerplates, HTML frameworks, and grid framework, CSS authoring frameworks, CSS frameworks, Javascript frameworks, DOM manipulation, AJAX, resource-loading, feature detection and UI libraries, Javascript toolkits, server-side pre-processors and client-side pre-processors, and framework generators; It's beautiful chaos.
Also I'm looking forward to using SASS and Coffeescript or something similar so a combo including those would be nice.
Update:
I've decided on JQuery for DOM manipulation and I would also appreciate some kind of kickstarter/bootstrapper.

Depends for what. Use what you know best!
However, here are a few recommendations...
The Feather-Weights
For quick, no frills and no overthinking development, I'd recommend:
Underscore for general JavaScript Development
BackBone for client/server communication (using jQuery or Zepto.js for AJAX calls) and designing your models and event buses
Jasmine for JS testing
SASS for cooler CSS
HTML Frameworks, what's that? :)
CoffeeScript is indeed great, if you want to go down that road. If you are interested in CoffeeScript, you may want to look at Google's Dart as well, but it's fairly recent.
The Heavy-Weights (Batteries Included)
If you're building a rather complex web-application (speaking more along the lines of thousands of lines of code here), you need to take it up a notch and in that case I'd recommend you look at:
The Dojo Toolkit
Sencha's ExtJS
The whole Google Closure Tools stack
Dojo and Closure can be integrated in complex build systems and their compilers will allow for a good modularization of your codebase while keeping it easy to produce a strongly optimized deliverable. They also both contain their own module loading system, so you won't need additional libraries like Require.JS, and will only load the parts you explictly tell them too if you use a custom build. But be warned, they're definitely more hands-on and have a steeper learning curve.
The Google Closure Tools are definitely very comprehensive and are as batteries included as it gets, but they do not necessarily make development easy for you: they give you the power, but you need to know what you are doing.
Bootstrappers / Kickstarters
Some solutions offer to "kickstart" your project and to prepackage for you a collection of some of the above tools, sometimes offering you some customization, so you can easily get started and don't need to maintain your own kickstarter up to date with new versions:
Bootstrap
Foundation
HTML5Boilerplate
Kickstart
Skeleton
WARNING: I haven't really tried these kickstarters extensively myself.

Obviously, the answer here depends greatly on what you're building. If you're really getting into front-end engineering and making single-page web apps, I'd recommend reading Addy Osmani's blog. Recently, he's been blogging and giving a lot of talks about javascript MVC/MVP/MVVM systems, as well as scaling javascript apps.
If you want a laundry list, read this article where he gives his ideal stack:
Backbone.js for lightweight MV*
Require.js + AMD + RequireJS text add-on (to assist with external template management)
Backbone.js LayoutManager (if you require some more intelligent layout management)
jQuery for DOM manip.
Handlebars.js for templating, unless you're doing something simple, in which case, opt for Underscore's Micro-templating
r.js for handling script optimization
Jasmine + Jenkins for testing and CI
Node.js + Express (speaking of Node, Miller Medeiros has an excellent write-up on how to use it as a build script)
MongoDB as a noSQL data-store
This is surprisingly close to what I use myself and I can attest to the quality of these libraries and this as a whole-stack solution.

jQuery for JavaScript. Many great UI plugins for UI controls in addition to the code jQuery API that hides the browser differences in the DOM.

Angular JS - Awesome. MVC Framework, great for quick SPA's
jQuery - DOM manipulation - good for effects (fading, toggling etc.)
Don't rely on it too much though.
Angular JS, jQuery - Some argue they work well together.
Backbone.js
Ember.js
React.js - Uses JSX, not JS, but pretty much the same thing
<script type='text/jsx'>
//JSX
</script>

How to write a modular JavaScript application?

I am planning to rewrite an existing Silverlight application using HTML, JavaScript and CSS. This will be a rich internet application connecting to a server only for data (JSON based web services) - so there will be no server-side presentation framework such as JSP or ASP.NET. The application consists of about 8 screens, most of them in a tabbed layout. The question is...
What is the best way to write such an application in a modular fashion? I would like to write the individual screens as standalone modules communicating with each other only via events. I would also like to use some sort of an MVC framework to decouple the presentation layer from the model.
Any thoughts on which frameworks I should look at? Have you had a good experience using them? I am starting to look at Backbone.js, JavaScriptMVC and SproutCore. Am I missing anything that is worth considering?
Thanks in advance for your time.
P.S. If you'd like to see the application that I am trying to rewrite, an online demo is available here - it is a realistic trading application built for learning and comparing technologies.

I haven't yet had a chance to try SproutCore, but I hear good things about it and want to look into it at some point. I would recommend trying out at least Backbone and Sproutcore to see which of the two fits your needs and your programming style better.
I do a lot of work with Backbone, and what your suggesting sounds like it would be a very easy fit with backbone. I follow an event-driven architecture with my backbone apps and I find it works very well. it keeps code clean and separated, and allows me to add functionality easily by binding to events that my objects raise.
there are a lot of great tutorials and screencasts for backbone out there, too. here a few of them that should hopefully give you some of the information you need (including my own blog posts):
http://lostechies.com/derickbailey/category/backbone/
http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/ (introduce event-driven apps in backbone)
http://joeybeninghove.com/2011/08/16/backbone-screencast-introduction-views/
http://peepcode.com/products/backbone-js ($)
http://tekpub.com/view/mvc3/6 ($ and specific to ASP.NET MVC integration)
again, don't just pick one and never look back. it's worth your time to at least do some simple trial applications in backbone and sproutcore, if not additional frameworks.
hope that helps.

With Sproutcore, you can create so-called frameworks so separate your application. Every SC project has a frameworks directory, you just add a directory for your custom frameworks, and include the frameworks in your buildfile.
It's not a bad idea with SC to at least separate your Model layer into its own framework, for loose coupling and testing purposes (SC is heavily MVC). It might make sense to separate your screens into their own frameworks, depending on how beefy they are. One of the benefits of this approach is you can reuse your frameworks in other projects if needed.
SC also includes a robust Statechart mechanism, so using custom events is quite natural, and because of the statecharts its relatively easy to insure that the events are handled only when the app is in the right state.

Have you tried the Relay framework? Your write your individual screens as standalone modules and use relay's event system to link them together.
http://relay.github.com

Javascript framework for Java EE project

I'm working on a Java EE project right now, using lots of javascript function, but only using jQuery library.
I would like to know if anybody has some experience with this, used a Javascript framework with Java before, and tell me what would be the best way to do it, and best tool to do it.
Also, part of requirements are that I want to use the Framework to make it easy to handle the events, and to define a state machine for the website. I was looking a sproutcore, but couldn't find any information on how to use it inside a Java EE project.

For pure frontend compilation, there are several options, darioo mentioned Google Web Toolkit, though this is all very low level and thus harder to roll into out of the box. There are several GUI frameworks out there based on GWT.
Ext GWT
Smart GWT
Vaadin
Out of those three I hear our Java devs are most happy with Vaadin, though it's quite hard to create really customized (your average funky website with never before seen features...) frontend apps with these frameworks and you will long back for the expressive freedom JS toolkits like jQuery have to offer in a lot less code.
Then there are hybrids (JSP based), allowing more freedom in you frontend files (aka. frontend developers can tinker with it without knowing Java). Java code doesn't compile JS, but offers out of the box solutions you can tinker with in the JSPs.
JSF2 (uses YUI)
Spring Roo (uses Dojo JS framework)
Spring Roo scaffolds an entire frontend provides/uses the Dojo framework. JSF2 was/is looking nice as well according to our Java devs, though wwhen looking at the website, the angst of Oracle seeps in.
Both Dojo and YUI are quite expansive and mature JS frameworks specialised for large JS projects. Whereas jQuery is nicer for smaller JS projects with a rather flat architecture.
Ignoring Java based solutions, you can always fall back to YUI, Dojo or even MooTools for more architecture options.
You can also stick with jQuery, but imo. you need to be happily insane and masochistic (aka. frontend/JS developer) to maintain large scale JS/Html/CSS projects. jQuery is a nice toolkit, but as a framework, it offers meager architectural/structural solutions, you will have to devise them yourself by mixing and matching it with other small toolkits like RequireJS.
My best advice would be, build your app without JS first, using page refreshes and whatnot. Then apply a JS layer and build Ajax services for that layer. That way, your views and JS solution are losely coupled and theoretically, you can always switch frameworks without touching your JSP's too much.

If you already know Java, Google Web Toolkit is the most Javascript centric framework out there that I'm aware of.
Note: it's not just another Javascript library like jQuery, but a full blown framework with set rules you must adhere to. By writing Java code, it will generate Javascript for you that's highly optimized for speed, size and multiple browser compatibility.