The Ultimate Web UI Framework
Posted by Jakub Holý on November 25, 2007
Recently I have found myself in the need of a framework for creating rich, responsive and highly interactive web-based user interfaces that would ideally be easy to use and fast to learn. I was basically only interested in the view part of the presentation tier, that’s the UI running in user’s browser and interacting with him/her. I had no preferences regarding the ‘M’ and ‘C’ of MVC, in other words the server-side of the presentation-tier.
After doing some research I’ve found a couple of candidates:
- Google Web Toolkit (GWT) with the GWT-Ext components library
- JBoss RichFaces (it is based JSF; perhaps use with Seam)
- Others: Wicket, Grails, Struts 2, …
The listed frameworks are quite different one from another. We can categorize them in a couple of ways w.r.t. different aspects:
- Client-side versus server-side interaction handling
- Does the presentation logic that controlls user interaction and UI changes run on the client and only sends/receives data when it’s necessary or does the presentation logic run on the server-side with (nearly) each action of the user resulting in a request?
- Interaction model: event-based or request-driven
- And so on…
Regarding the frameworks, which I’ll describe later on, we can say:
- Client-side: GWT and OpenLaszlo or Flex run mainly on the client while the others more on the server
- Language: With GWT & Echo you define your UI in pure Java, with Flex/OpenLaszlo in xml+js, JSF uses the classical JSP & co. combination.
Introducing the frameworks
Disclaimer: I’m no master of these frameworks. The information below is a compilation of opinions of their users and info from various sources like documentation, articles and blogs.
All of these frameworks are open-source.
- UI defined by Java classes as with Swing, event-based
- runs on the server-side and most user actions result in a request being sent to the server
- commercial IDE for – I suppose – graphical design of the UI; but you can code it without that in any editor
- UI defined in Java
- => support for refactoring
- A number of existing components
- Nice look&feel
- Only the code and content that is currently actually needed is downloaded to the client, other parts are downloaded as needed via Ajax – this should make the download of an echo 2 application and its start faster but may slow it later when you may need to wait for an additional stuff to be fetched
- Backed by a commercial company, seems to be pretty alive with a reasonable community
- Runs mainly on the server-side, many user actions result in a request, which makes it slower and less responsive. For example switching a tab in the demo took usually around a second (this may be given by the current load, limits etc.of the server, but frameworks that handle this completely on the client side don’t have any such problems)
- the Eclipse-based EchoStudio 2 IDE for rapid visual development of Echo 2 UI is commercial though you can, of course, code your ui by hand in any editor
- A new API to learn – it could be perhaps more similar to Swing API to make it easier for newcomers
Google Web Toolkit (GWT) with GWT-Ext components
- Pure Java development => less knowledge required, support for refactoring – as with Echo 2
- Runs on the client-side – a GWT application is a true rich UI running in the user’s browser, the presentation flow and user interaction is handled locally as much as possible. The server-side is only called when data interchange in necessary.
- Backed by Google; no need to say more
- Steap learning curve – according to some you can start writing reasonable GWT applications in a week
- A rich and growing set of components provided within GWT-Ext
- Debugging: You can run the UI in a hosted mode within a special browser provided by Google without compilation into html/…, thus being able to use Java debugger etc. for it
- Java: provides only a subset of java.lang and java.util. Currently only works with Java 1.4, the upcomming GWT 1.5 will only work with Java 5.0..
- Closed-source Java to html/css/js converter
- All the application files are donwloaded at once to the client, which can make its start slower; on the other hand Google is very good in optimizing the file sizes and the generated code from the donwload time perspective.
- According to some people it isn’t a good idea to have all the presentation logic on the client side for security reasons
JBoss Rich Faces (for JSF)
RichFaces is a JavaServer Faces (JSF) component library that heavily uses Ajax. But it goes beyond that and makes it possible to add Ajax support to existing components/applications, provides skinnable components, makes it possible to pack .js and .css into JAR archives together with your components.
JSF is "the standard", component and event-oriented presentation framework. To get the maximum out of it, you can use RichFaces together with Facelets (see my Facelets post) and the application framework JBoss Seam, which provides among others integration with EJB, business processes, and the "conversation context".
- Builds on JSF, the "new" standard (JSR #127, v.1.2 #257, the new v.2.0 #314) for creating web UI and pluggable components. JSF can be also used for creating portlets (see JSR #301 – Portlet Bridge Specification for JavaServer Faces) though I don’t know how much is this supported by RichFaces itself
- RichFaces components and Ajax-support can be easily added to existing JSF applications and pages
- Runs on the server-side, most user actions result in a request, either via GET/POST or in the background via ajax.
- It carries all the disadvantages of JSF (search on the web…)
- You need to know JSF, html, css and either Facelets or JSP, JSTL etc.
OpenLaszlo or Flex
- Very rich UI with advanced capabilites regarding e.g. multimedia and vector graphics
- Runs on the client side and only contacts the serer-side when necessary to get or send data
- Can use back-ends not written in Java => encourages writting you server-side components in such a way that they can be used and reused in multiple ways. Because it isn’t bound to any particular server-side framework or language, you can you is with any you like.
- There is a fair number of existing components for both Flex and OpenLaszlo (especial
ly for Flex)
- Flex is faster and richer than OpenLaszlo
- You can nest Flex application into a page and integrate with it
- You need Flash plugin in the browser to use the UIs. OpenLaszlo can generate dhtml, but I’m not sure whether it’s mature enough.
- The startup may be a bit slower
- Flesh isn’t HTML and thus search engines like Google cannot search and index it so well
- an IDE with visual UI builder and other support either isn’t available or only for a fee (though people say you don’t really need one)
- Flex isn’t completely free: is some cases, like using Flex Data Services on multiple CPUs, you must pay (but see the LGPL Granite DS)
Others: Wicket, Grails, Struts 2, …
There are certainly other popular frameworks that may support rich user interface. But I’ve deliberately limited myself to the most famous ones and those that are somehow unique and catched my attention.
Criteria for evaluating web UI frameworks (draft)
The following criteria could/should be used when deciding wheher a particular framework is suitable for an application and the problem it tries to solve.
- availability of developers familiar with the framework
- tools support
- existing components
Learning & using
- support community
- learning curve
- rapid development: can write UI fast?
- ease of use – principles like DRY, convention over configuration etc. that make it’s use easier
- flexibility (let me do st. unexpected that I really need)
- performance, scalability
- maintainability; refactoring supported?
- suitable for large enterprise apps with many "pages"?
- user experience (rich <> ajax)
- evolution: has it momentum? new versions backward compatible?
- stable and proven framework?
Note: diffferent frameworks are suitable for different cases; there is no single framework that’s the best fit for any problem. Still we would certainly like to keep the number of frameworks used as small as possible.
I was searching for a framework that would allow me to create rich user interfaces that are very interactive and responsive and don’t load the server too much. After examining some favourite frameworks I’ve decided for a few that I’d like to try.
Different applications have different architectural and UI requirements, which makes some frameworks suitable for the problem at hand and some not. But when we limit ourselves to a user-interaction centered application, I think that the classical frameworks like Struts 1/2 and JSF just aren’t suitable, even with Ajax. They place to much burden on the server, aren’t responsive and interactive enough and don’t always provide for rapid creation of rich interfaces. I like the idea of user interface running on the client, as with GWT or OpenLaszlo, and having only the business logic on the server-side. This provides for richer and more responsive UI and places less burden on the server, which can thus serve more clients. Ganesh Prasad promotes such a solution in his blog entry "Life above the Service Tier" with the term Service-Oriented Front-End Architecture (SOFEA), a rich UI above a service layer. I indeed recommend reading it.
To conclude: I’d use either GWT or OpenLaszlo (or maybe Flex) when a true rich user interface is required and/or when this of technology and approaches isn’t against internal standards of the company. If a more traditional approach is necessary, I’d prefer RichFaces because JSF is quite popular and standard.
Links and resources
- Adobe AIR (former Apollo) – runtime for running web 2.0 and Flex applications as desktop application, with full integration, access, and support for running offline.
- Microsoft Silverlight – multiplatform and multibrowser plugin and runtime for running rich .NET applications from within a browser. It competes with Flesh (hence Flex) and the new mysterious Sun’s JavaFX.
Articles, blogs etc.
- Matt Raible: Comparing Web Frameworks: Time for a Change? – "top 6 frameworks" and an enlightening discussion.
Comparing JVM Web Frameworks Presentation (Nov 14, 2007)
- Comparing the Google Web Toolkit to Echo2 – by a developer of Echo
- James Ward arguments why to use Flex in a comment to Raible’s Comparing JVM Web Frameworks
- … and many more …
- James Gosling on Adobe Flash / Flex / AIR
- Thinking of alternatives to GWT-RPC – e.g. Jaxter, Enunciat
- James Ward arguments why to use Flex in a comment to Raible’s Comparing JVM Web Frameworks
- 2008-04-01: Sajnvi Jivan: Thoughts on Java web frameworks and RIA – recommends Flex&GWT for dynamic apps and request-response frameworks for those needing SEO, bookmarkability, and RESTful services
- Blog Evolutionary Goo: Choosing a Java Web Framework (Revisited) (2008-09-18)
8 Responses to “The Ultimate Web UI Framework”
Sorry, the comment form is closed at this time.