Develop Reference

Integrating Javascript Frameworks with Java Web Frameworks

I have what I think might be a strange question to ask.
Recently I was playing with some java web frameworks (jsf with primefaces) and I noticed that it's quite good at handling form data or when you play along with the jsf components. I also did a project using grails and again it was useful for form data.
But the moment you want to do something which requires a little deviation; then I found myself doing weird things (examples are tag clouds with large strength values using primefaces and single page webapp forms with grails).
This resulted in some very messy html+javascript code for my grails things(which I blame on my inexperience with javascript). This was done because I was using expression language (grails in this case) to populate some of the javascript. The worst part was that I had a bunch of custom javascript code inline with my server pages (I could of refactored a little out but I think one would still have alot of javascript calls inside a single page).
So now to the question(s) :)
[main question] Are there any resources that demonstrates how to design or at least implement maintainable javascript with server pages (gsp, xhtml, etc) ?
The reason is that I find that there are some neat javascript frameworks, but using them with server pages seems a bit unnatural if one takes into account the expression languages for server side frameworks? Unless it's normal to do this type of thing :) ?
Are there appropriate frameworks for Single page webapps using java?
My current answer is that GWT, Vaadin (based off GWT) and perhaps JavaFX qualify. Maybe ZK, Flex and (Grails/Roo + Flex/GWT) also qualify as well?
Are java web frameworks still useful for presentation layers?
My current answer is that they might be when you are dealing with portal type webapps or Web 1.0 apps for lack of a better word. The other case is that they could be when you use alot of role based security and you want to filter things out based on roles, but even that has counter arguments.
My other answer to this is that it might be better to use a java server to provide your web services and then rely on something else to do the front end?

This might be OP, but for single page apps, it's easier to serve up data from the server via JSON(P)/XML/whatever and then use things like Backbone to process and modify the view(s) accordingly. That way, the server can use REST/SOAP/websockets/whatever, and the browser app becomes a full-fledged app.
I haven't actually done this, so don't quote me, but I imagine that it should make sense.

Google Web Toolkit vs Straight Javascript for reasonably large & complex application?

I've got a web conferencing client written predominantly in Java/Swing with some JNI native modules for stuff like: video, audio, and desktop sharing. In total the client is about 400k lines of Java code not including native modules.
We are investigating a long term plan for migrating away from Java/Swing and toward HTML5/Javascript for the client. As of right now, browser support is shaky/non-existent for some of our needs such voip, web cam video, and desktop sharing. So in the short term we could perhaps ship a browser plugin to do these things along with HTML5/JAvascript to do everything else.
For something of this complexity (basically a rich desktop client being ported to the web) what would make more sense: GWT (Google Web Toolkit) or straight Javascript using a JS library such as jQuery ?
EDIT: There are currently 5 developers working on this project.

If you have programmers with Java background, there are plenty of reasons why to use GWT:
powerful statically typed language also #client side
rapid development (!!!)
tools! IDEs, PMD, FindBugs and gazillion other. Also configuring Eclipse with Google plugin is just piece of cake, unlike many other frameworks.
permutations for various browsers are already handled by GWT itself
your JavaScript is optimized - handled by GWT
you STILL CAN use plain JavaScript if you want (however GWT is designed the way you don't have to)
GWT is really scalable. Your Java back-end will stay true Java, so you can use whatever favorite powerful java libraries
client side development is quite robust and Swing-like, not too hard to find a programmer to fit there
And many others. Honeslty, JavaScript is still quite slow (okay not to troll - language doesn't have "speed", but you get me). It doesn't matter if you are using jQuery or GWT. Face it, it isn't going to perform as fast as thick client. So why to sacrifice your comfort :)

Take the google wave product as an example. It was merged from plain old javascript to GWT to support more rapid development, especially considering the many developers concurrently working the project.
In my experience, manually hacking a site of what you're suggesting with jQuery would be an awful lot of work which most likely will suffer from refactoring issues, difficulty to reuse code, and probably end up with alot of code that will be really hard to grasp for any new developers coming into the team.
Don't get me wrong jQuery is really great javascript tool; but when writing complete applications in it, it quickly becomes unmanageable. That's at least my opinion.

From my experience, GWT is great for developing web applications where the intent is to mimic the look and feel of a desktop application. The fact that your team already seems to have plenty of Java/Swing experience would make this migration path easier than directly moving to a pure-JavaScript solution.
Using pure JavaScript to build a desktop-style web application, you'll be finding yourself searching for or using a lot of libraries/toolkits/plugins/widget builders (even with the use of jQuery) just in order to get the basics down. These basics can easily be provided by GWT.

GWT Strength compared to other framework?

One of the main strength of GWT is to code in java and everything gets compiled and is loaded by several browsers through gwt deferred binding??
Apart from this, i.e. working only on a single code base, do GWT has any other advantage compared to other existing framework??
Edit:
I'm trying to say why should we use gwt and not another framework?? What is there in GWT that makes it special for web application development?? What GWT makes for us and another framework or toolkit don't do??
As i said above GWT makes deferred binding which is a plus, so I wanted what other things it do that makes it special and unique??

My point of view :
Pure Java : In standard web application you write html, css, php, javascript, mysql and others and others. In gwt you write java and java and java. Pure Java knowledge is enough for everything.
gwt-rpc mechanism is very simple to communicate with server and uibinder or any other tools are enough for ui development. plus there are many widgets that facilitate front-end developing
Debug : Debugging Java code is very very easy than debugging Javascript code
MVP Development with Activities and Places
Compiler that you can do all the thing, that you can do in Javascript, in GWT. In addition, working with JSON and XML is very easy and History management is unbleviable
and at last I'm a big big fan of Google and they did it so they did the right thing

One of the other benefits of GWT is that you can share code between the client and server components of your app. For example, if you're doing a graphical app you can write computational geometry code and have the same code evaluate on both sides. Of course, you can also do the same thing by using server-side Javascript (for example, Node.js), but server-side Java has serious advantages for performance, ease of deployment, and interoperability with other things.

My favorite benefit is their RPC mechanisms. JSON gives you a huge reduction in payload size, but GWT's serialization policies allow the data to be sent over the wire without key labels for each value and reduces payload size by another 30% or so. On top of that, its easy to build those services using Spring and Hibernate.
Another benefit is the use of md5 hashes for the filenames of compiled JavaScript, allowing you to set never expires cache headers for all of your code.
Last but not least (actually, it is the least cool of the benefits), there are free tools now for GUI design so you don't have to build a GUI by writing XML and Java or HTML and CSS.

GWT follows a principle of no compromise high-performance Javascript.
They have already invested a lot of work into making your application highly performant. For instance, the "compiled" Javascript files it generates are actually .html files. This is due to an issue that some browsers do not correctly support compressed .js files. This sort of tweaking is beyond what most people would do manually.
There are easy to use tools to help you improve the performance of your own application. GWT.runAsync, for instance, allows you to define splitting points in your Javascript which will be used to automatically divide up monolithic Javascript files into bite sized chunks to load.
As has been said, the RPC mechanism performance and ease of design is amazing. MD5 hash based names for the compiled Javascript means for great caching.
My biggest plus for GWT still has to be the debugging capabilities. Javascript debugging has always been messy and frustrating. With GWT you can employ the full debugging facilities of Java when working on your client side code.

There are no simple answers to these questions:
I'm trying to say why should we use
gwt and not another framework?? What
is there in GWT that makes it special
for web application development?? What
GWT makes for us and another framework
or toolkit don't do??
There is no silver bullet. Everything depends on the project and requirements. GWT may be good in one project and other frameworks may be good in other projects. It also depends which other frameworks are taken into account.
In my opinion the most significant element which makes GWT different from almost all other Java web frameworks is that the client side is fully in JavaScript while most of other frameworks generate usually plain HTML code. The JavaScript approach to the client has its benefits, to name a few:
it is fully AJAX which creates great user experience,
views state is managed in the browser,
it communicates with the server asynchronously;
it communicates with the server only to get the datal
However, there are also some drawbacks:
browser history support - it isn't as good as in HTML based frameworks; proper use of history mechanism isn't easy and requires extra effort from developers;
applications aren't SEO friendly;
more complicated page layouts may kill web browsers - sometimes it takes a long time to generate a page, especially when using additional component libraries;
For developers it is very important that GWT hides JS from them. You write in Java and you get fully working AJAX based client application in JS usually without touching a single line of JS. This is great especially when you need a lot of AJAX in your application and you don't know JS. This is specific to GWT - using JS and AJAX in other frameworks isn't usually that easy (Vaadin may be an exception but it is GWT based).
It is worth mentioning that in many cases GWT can be combined with other web frameworks - this way you can have most of you application content created in HTML based frameworks and some more complicated AJAX parts in GWT.

If you want a recent comparison of Java Web Frameworks, here is an interesting presentation from Devoxx 2010 :
http://raibledesigns.com/rd/entry/my_comparing_jvm_web_frameworks

I want to make a "Web 2.0" application without using JavaScript directly

I'm a full time Java developer of around 4 years, professionally. I'm a GWT fanatic. I love Java. Here's the problem: In my free time I often fall victim to the verbosity of my favorite tools for doing "heavy" development. I also often fall into the trap of obsessively engineering my software. I'll end up with the most beautiful unfinished implementation, ever.
So, here's what I normally work with.
GWT - I use this for dynamic UI and web layout. I love the ease of re-use and it has taught me to absolutely hate javascript. I really can't even bring myself to do much HTML/JS anymore.
Hibernate - POJO to Database, easy-peasy. What i really need from this other than the mapping is that it allows me to have an application that works across multiple databases.
Spring - Mostly security. I've written my own custom LDAP bits for a project.
XML - I've used dom4j and other implementations, including xstreamer. I'd like to use JiBX for XML transport. The problem with this is that I need XML messages that conform to a specific standard rather than being autogenerated. Object->XML->Object are also common enough that it can be a performance bottleneck with large messages (250KB+).
I tried Lombok for a little while and liked it but had occasional issues with it and then I blew up a partition and lost all that work. I don't really feel like doing the same thing again (half the fun was in learning how to do it, now that I know... meh). This taught me why other people want to reduce the explicit code and replace it with an implicit system.
I've been looking into Grails but that runs me into the JavaScript problem (you know, that I don't like it) pretty quickly. I could use GWT with Grails on the back end but I get back into the problem of getting deep in the weeds with GWT. It has also occurred to me that there might be a way to have Grails tags in GSP that are made up of GWT widgets. I'm not really sure how I feel about that.
Another problem I have with Grails is that validation logic before form submission is separated from validation constraints after submission. I don't see how they can be unified (yet) to produce "pretty" front-end validation. I went out of my way to start a JSR-303 compliant validation project for GWT to help solve some of this problem for GWT and really liked the results. It isn't finished but I still find it useful.
So, help me find a better way!
TL;DR - I want to have a Database (and Database-Independent) to GUI solution that allows for dynamic web programming all in one language. Failing that, as close to one language as possible.
TL;DR is TL;DR - I hate JavaScript now, help.
EDIT: I know that it is techincally impossible to do "Web 2.0" development without JavaScript. I'm just trying to not be the guy who has to write it. (Getting a tool such as GWT to do it for me from a language I do like, for example.)

Just learn JavaScript.
Resistance is Futile
...and you will be assimilated.
PD: I'm an ex JavaScript enemy. Now it's my favourite language.

You can certainly develop an entire Web 2.0 project without coding Javascript using GWT (we have), but at the end of the day you still have to know HTML/CSS & Javascript.
This might sound like a stupid statement, but it's not once you consider that GWT is not a perfect abstraction, nor is it designed to be. It wasn't written in Java so that you didn't have to ever code in Javascript again, instead they did it because Java has better IDE's, is statically typed and makes maintenance a hell of a lot easier.
So yes, by all means go with GWT (and check out the new OOPHM, because it's AWESOME) but don't forget that you'll always need an understanding of the underlying frameworks of the web, if you want to develop for the web.

Have you heard of Echo?
It doesn't provide the database part of the problem, but it would work well with any database that you can work well with.
Echo is a platform for building
web-based applications that approach
the capabilities of rich clients. The
applications are developed using a
component-oriented and event-driven
API, eliminating the need to deal with
the "page-based" nature of browsers.
To the developer, Echo works just like
a user interface toolkit.
The latest iteration, Echo3, features
the ability to write applications in
either server-side Java or client-side
JavaScript. Server-side applications
run in any Java Servlet Container and
do not require developer knowledge of
HTML, HTTP, or JavaScript.

You might want to take a look at some of the AJAX powered JSF libraries. IceFaces and RichFaces are both solid.

Been there, done that. I was a GWT developer for 3 years... I started using it in v1.1! GWT is fantastic, and works really well for small applications. But the development comes to a crawl once you it a moderate application size, even if you divide your application in sub-modules.
It is also quite ironic that a UI framework has such limited UI creation tools. :)
Personally I bit the bullet and learned javascript. It isn't as bad as I thought. Especially with jQuery. :)
Obviously there is no perfect framework. But just the fact that GWT has been out for 3.5 years now, and it still largerly ignored in the Java world should tell you something. Since you're doing this on your free time, I would recommend learning the most popular framework: Struts. You'll see its limitation, and also why it is so popular. Of course, you'll need jQuery for that 2.0 functionalities. :)

Take a look at JRapid, a rapid development platform for Java developers. It generates very powerful Ajax enabled UI without the need of coding.

Not sure if you would like this , but have you heard about Haxe?
You might not like it but its AIO (all in one) solution (sort of).

I can understand your dislike of JavaScript and it certainly has its problems but I think your fighting nature at this point.
Web 2.0 is strongly based on JavaScript for a good reason as it provides the ability to perform tasks on the client machine without requiring page loads.
I'm sure there are alternatives but if you want the look and feel of Web 2.0, you will end up doing a lot more work with little reward. JavaScript is the accepted and functional tool for the job.

I'd say stick with GWT and just drink more of the Koolaid. It's a completely awesome development model that seems to be lost on those who haven't tried it.
If you want to improve your GWT experience, jump to the bleeding edge (I work off trunk, it's quite stable) and use the other Google originated projects like GIN, gwt-incubator and Guice. Especially watch Ray Ryan's GWT best-practices Google I/O talk: http://www.youtube.com/watch?v=PDuhR18-EdM
As for the "framework" part: forget 'em. Just use normal servlets and let GWT take care of the RPC for you. Servlets are a pain when you have to deal with JSP and you're own AJAX calls, but when they're only implementing asynchronous app logic, it's not that bad at all. Guice Servlet makes it all quite easy. You can still use a JVM hosted language to write your servlets if you want.
GWT has an incredible advantage over other JavaScript frameworks in that the layer of abstraction it provides allows for major future advances without any changes to your code. If the GWT compiler and browser detection scripts can take advantage of new browser features then you benefit from a simple recompile.
The big annoyance I see in your requirements in XML... hopefully that's just for integration with a 3rd party service and your client-server communication can just be GWT-RPC.

I don't use javascript or ajax, in medium-large application they create a lot of problem with compatibility, because moving some part of code inside client, create security breaches and problem with different browser.
I use only HTML(5) and CSS2/CSS3, and I have a lot successes.
I use this 2 ways:
using "puzzle-techinque". Write a lot of small and simple template (or tiles) to create the big page. I use only JSTL and Spring tag, with Rich/Prime/Ice-faces I encountered a lot of problem with rendering, page building and flow controller, so I discarded them.
using my custom library to parse HTML pages. I create template with my custom grammar, put inside the parser and write on output stream. This is the best way.
If you say me your preferred language and context, I can help you to perform JS-free.

Which java web technology to learn to develop Rich Internet Applications?

I have developed web applications using JSF (myfaces components). But in these days of responsive UI, JSF doesnt fare well. I m hearing a lot about AJAX, GWT, etc. So i wanted your opinion on which web technology/framework should i learn inorder to develop web applications for enterprise products.
Some of the web technologies that i m hearing are:
ICE Faces (With AJAX Bridge support)
GWT
extJS and extGWT
JavaFX
Apache Wicket
Jquery
AJAX
Open laszlo
Which of the above or the combination of the above would help me ?
Some of the parameters on which you can rate these web technologies are:
Ease of learning
Maintainability of web application code
Community support
IDE support - Eclipse or NetBeans
Off the shelf component availability (like textbox,table grids, option menus)
License - Does it cost for commercial use ?
User Experience - responsive UI. Shouldnt be sluggish
A similar question on SO does answer my question partially. Would want more info though.
EDIT:
Answers collated:
Based on the answers :
AJAX would be the best thing to start for learning fundamentals, then learn JQUERY. Any component based frame work that can complement ajax,jquery ?
Edit 2:
If i had to design a web application like StackOverFlow (in java platform) which would be the best choice to learn and adopt?
Wicket + Jquery, WiQuery
GWT
Some XYZ Faces
technology(RichFaces/ICEFaces) + AJAX.
Comments appreciated from some one who has worked with them and can rate them in the above mentioned parameters.

I would strongly recommend Apache Wicket, I see you have commented / edited the question to say that you are leaning towards Ajax / JQuery and asking for component frameworks that complement those.
IMO among the component-based frameworks, Wicket offers the best integration with third-party JavaScript libraries. I have personally evaluated the contenders GWT, Tapestry and JSF - but Wicket makes it really easy to:
contribute javascript to the HTML > HEAD
inject ajax callback code (or custom javascript) into a web page
call an event on a stateful component on the server side
execute arbitrary javascript before or / and after an Ajax (XHR) request fires
You can see this blog post on how to integrate YUI with Wicket, the same concepts can easily be extended to JQuery.
That said, Wicket's built-in Ajax support actually makes it possible for you to create rich UI-s without writing a single line of javascript code. Think dynamic refreshing of selective parts of a web page, pop-up dialogs, etc.
I am also aware of a project for Wicket-JQuery integration called WiQuery, but I haven't tried it yet.

I've been working in GWT (with GWT-ext) for my latest project and have quite enjoyed it. Aside from that, jQuery has always been a Godsend, and I'll use it any time I don't have a more robust framework available.

AJAX is just a (in my humble opinion, meaningless) term.
jQuery is, in my opinion, the way to do Javascript. Unless there's an unsurmountable requeriment forbidding its use, I recommend it if you ever need to write Javascript yourself (note, if you are using GWT, you are using Javascript, but not writing it, so you don't need jQuery).
Ease of learning: you need to change your mindset from traditional procedural-style JS [jQuery is still procedural, but has a big declarative aspect]. If you have never written Javascript it might be easier to approach
Maintainability of web application code: very
Community support: quite a lot
IDE support - Eclipse or NetBeans: I don't think so. I don't miss it; I hate writing enough Javascript to make me miss an IDE.
Off the shelf component availability (like textbox,table grids, option menus): jQuery UI has a bit and there is lots of material out there
License - Does it cost for commercial use?: Nope
Of the other technologies you mention:
GWT: I believe this is interesting if you are target intranet sites or something similar, writing very desktop-like websites (think Gmail, not a typical content site). I suppose you need to make quite a significant effort to make your GWT-based websites crawlable by search engines and to be usable by non-sophisticated browsers (i.e. GWT would be useless for JS-less browsers like some cellphones')
JavaFX. I believe this is just a gimmick. Doesn't add much to Java applets and it does not have as much inertia as Java.
Apache Wicket: this is on my to-investigate list
OpenLaszlo: looks very interesting if you want to do Flash stuff without paying licenses.
As my suggestion.
I suggest you learn to develop your websites without JS at first. Then add JS (using jQuery), google "progressive enhancement".
Once you can do this, you can learn using something like GWT and use it if it's justified.

If you have to do a fair amount of Javascript/AJAX, you definitely want to learn and use jQuery! It would've saved me years of grief had it came out in 1999.

I tend to focus on foundational knowledge, so, you may want to get a strong understanding of javascript, including object-oriented javascript.
Once you know javascript well, the libraries are easy to pick up.
You may want to get some passing understanding of some of the features of HTML5 that can be useful, such as the tag.
You may also want to learn Actionscript 3, as that will help you understand how flash works, as you will know what code the flash ide is generating. I have used an ant script to compile my actionscript code, using Eclipse.
Silverlight is gaining in popularity, but, that requires VisualStudio Express, but it is a strong competitor with Flash.
For the rest, a passing reference can be useful, as your list isn't exhaustive, but make certain you understand the foundational languages well for these and the frameworks you can pick up quickly.

If you want to have some kind of client/server experience through a web browser I would suggest to take a look at GWT together with Google Eclipse Plugin. This kind of technology enables you to write really the most responsive webapps you can achieve (from my point of view).
Otherwise if you want to develop somewhat more traditional webapps and just add Ajax functionality you could take a look at DWR (Direct Web Remoting). This kind of technology enables you to wire server-side Java objects to the client-side for being able to use their functionality through JavaScript. It will help you in writing your Ajax functionality and possibly also in reusing existing logic.
Of course, jQuery is always a good alternative.

Seam, Spring, Richfaces, Ajax4jsf

I'm on the same track as you, trying to find out which will be my server side + client side development tool set for a huge internet site.
As far as I have seen and read, as always, it depends on the kind of web application you need.
There are people using different javascript frameworks, based on easy of use, declarative, object oriented, and the like.
There are several things to consider:
1) Client side technology
1a) "Core" client side technology: frameworks
1b) UI client side technology enhancements
2) Server side technology
For "core" javascript frameworks, you can find JQuery, MooTools (MIT license), ExtJS Core (MIT License) (not ExtJS: this is ExtJS Core + UI gadgets, and the later needs commercial license), Yahoo UI, etc. You can compare them in sites like this one: http://www.domassistant.com/slickspeed/
This test "somehow" compares different aspects of each of those "core" client javascript frameworks.
What do you get from those frameworks? Most of them, allows you to be "cross-browser" compatible, and each one has several and different ways and syntax.
Just a matter of testing and seeking the one you like most.
So, with this, you just get a way to code for "everybrowser".
Now, if you need "Widgets/Controls/UI gadgets", then, each "core" framework has its own UI related extension.
Even, some of them, can interact with each other. I have read about implementations of ExtJS (not core, the one that comes with several good UI elements) can connect to jQuery.
So, for client side you have to choose your "core" framework, and if you need UI, then, some UI associated with them.
There are several IDEs that are compatible with this frameworks, one can be Aptana, Eclipse, Netbeans (latest version integrates very well with javascript) or in the Microsoft side Expression, Visual Studio Express or "Pro".
Its also a fact that jQuery was included "as-is" and Supported by Microsoft and Nokia. So, jQuery will get more attention now, and more support, and more "public", I predict it will get a lot of attention and enhancements. They did not buy jQuery, they adhered to it as an Open Source included into VS solutions from now on. And will be very tight coupled with ASP.NET MVC, components and the like.
Anyway, jQuery, as I said before, is not the only one and not necesarily the best.
For Server side well, it depends on your knowledge: java, ASP.NET, whatever you feel comfortable.
I hope you find this useful.

My selection is GWT because GWT program write in java programming language and this programming language is very powerful and easy to understand.
jQuery and ext-js also are good but i had some problem with JavaScript programming language. this programming language is very error prone.
Apache Wicket coding likes GWT but it is server side technology and it is a heavy technology.
Because JavaFX program require plugin is not my selection.
My recommended to you is jQuery or ext-js if you don't have problem with JavaScript.

You will probably have to learn a combination of tools, but should probably start with AJAX, then move on to some JS libraries (JQuery, prototype-scriptaculous, MooTools, etc).
Those will also compliment a JSF framework nicely.

You might also consider the Eclipse Rich Ajax Platform when evaluating Java-based RIA platforms.

I'd suggest you take a look at Vexi, which offers desktop-like applications which are more flexible than an Applet + Swing/AWT.
(Disclaimer: I am a developer of Vexi)
Features
Technical comparison
Code sample
The applications are desktop-like - rich and responsive - and are user interfaces that are "projected" over the Internet. All the application logic resides on the server which you create in your language of choice and expose via an XmlRpc interface.
The main benefit of Vexi is that layout is really easy, as it is a box model. It's easier to understand than HTML even.
<box>
<box orient="vertical"> .-------------------.
<box fill="red" /> | red | |
<box fill="blue" /> |---------| green |
</box> | blue | |
<box fill="green" /> '-------------------'
</box>
Scripting is done with JavaScript, and there's an extensible widget set. Using widgets is easy too.
<button id="button1" text="My button" />
<textarea id="text1" shadowtext="Type in here!" />