Solving the UI Framework Puzzle

I was recently tasked to recommend and specify components of a thin client architecture for a large web-based application (1000+ views!). It had to be Java-based, so the first obvious questions that sprung-up were –

  – What is best way to build such a large web aplication in Java ?….which in turn can be  broken down into –  
          – What are the best frameworks available in the world today that facilitate web-app development?…which in turn can be broken down into –
                 – Which framework is most suitable in terms of technical, functional & commercial criteria? — clearly each of these 3 criteria classes can further be exploded into detailed independant heirarchies.
                 – Which framework will result in code/artifacts that are well-factored & maintenable.
                 – Which framework will support well-known Usability patterns.
       – What development methodology will be most suitable?….which can further be broken down into –
               – Which framework will guarantee high levels of productivity…which can further be broken down into –    
                    – Which framework/tool(set) supports a clean separation of and smooth hand-offs of UI design & coding concerns?….which can further be broken down into –     
                            – Which framework will allow parallelism of work-streams?     
So, simply put, one just needs to pick out the best “techno-functional-commercial” framework out there that also ensures that the application is delivered at an acceptable cost !

Sounds simple?…hmmm maybe yes, if one had to choose only from say 2 or 3 UI frameworks and, if it were year 2001 !
Today if one scans the Internet for UI frameworks, the information found can be overwhelming and quite difficult to effectively navigate through. The UI framework puzzle as it were, also is a rather pertinent question, as seen from the number of google searches people have made on key words such as
  – “ui frameworks comparison” – 5.19 million.
  – “ui frameworks” – 5.8 million.
  – “ui framework java” – 1.76 million.

So here’s a first hand account of an approach that can help one solve the UI framework puzzle. Mind you, there is no one single “best” solution; there’s only what is most suitable & acceptable for a given need, with the (relative :-)) peace of mind that you have (wisely) considered and understood the rationale for all the choices you have made & not made!

I use an age old principle of dealing with complexity/information overload – “Abstraction”.

To quote Wikipedia – “Abstraction is the process or result of generalization by reducing the information content of a concept or an observable phenomenon, typically to retain only information which is relevant for a particular purpose”.
Following this principle one can easily derive a few “UI Framework Abstractions” and start placing/sorting available frameworks/toolkits/technologies into these “Abstraction buckets”. So here goes..

1. Web 1.0 Technologies (JavaScript, DOM, HTML & CSS) 
These address client-side need only. This is essentially the pre-2004 way of building Web applications, featured by –
 – Open standards
 – No asynchronous calls and as a result – complete page refresh.
  – No rich widget library.
 – Requires a good server-side MVC framework as described in point 5 below.
2. Lightweight Ajax Toolkits
Again, these address client-side need only. Ajax is not a technology in itself, rather a group of technologies such as HTML, CSS, Javascript, DOM, XML, JSON and a method for exchanging data asynchronously between browser and server, thereby avoiding complete page reloads. Key features of this framework type are:
 – Ajax applied correctly, increases Responsiveness of the application by avoiding complete page refreshes.
 – It is based on open standards mentioned above.  
 – It usually provides a rich widget library, and if not, may combine with other widget libraries.
 – Screen developers code in HTML & JavaScript with API support for widgets and data exchange via asynchronous server calls.
 – Requires a good server-side MVC framework as described in point 5 below.

The popular ones are:
 – Dojo
 – Yahoo UI
 – Ext-JS
 – jQuery
 – MooTools
 – Prototype + Scriptaculous

3. Java Component-based Ajax Toolkits
These address both Client & Server side needs. These frameworks have essentially adapted the Java Swing or Eclipse SWT programming model to the Web. They differ from Lightweight Ajax Toolkit in that –

 – The development language is Java. Developers need to code HTML, Javascript only in exceptional cases. 
 – The framework compiles screen layout & behaviour code written in Java, to Javascript rendered by the browser.  
 – Server-side application development is also framework driven. No need for a separate server-side MVC framework.
 – It usually provides a rich widget library, and if not, may combine with other widget libraries.

The popular ones are:
 – GWT (Ext)
 – Ext-GWT
 – Echo3
 – Apache Wicket
4. RIA Toolkits
These address both Client & Server side needs. These are complete Web application toolkits promoted by companies such as Adobe, Microsoft & Sun. Their USP is rich internet applications using rapid development tools. Other key features are:
 – It requires a runtime interpreter to be installed as a plug-in within each browser.
 – It is usually based on custom scripting and layout languages and data exchange formats.
 – Framework drives development of both client & server-side application components. No need for separate MVC server-side framework.

The popular ones are:
 – Flex (Cairngorm + BlazeDS)
 – JavaFx
 – Silverlight

5. Server-side-only UI Frameworks
These address server-side need only. This is a basket of frameworks that not only aid the development of application components that accept and process a web request, but also aggregate and render page views back to the browser. They are meant to be used in conjunction with Lightweight Ajax Toolkits OR Web 1.0 Technologies.  The popular ones are:
 – Struts2
 – Spring MVC & Webflow
 – JSF
 – Seam Framework
 – Tapestry
 – Stripes
 Some of the popular Scripting language based frameworks –
 – Ruby On Rails
 – Grails

5A. View Technology
Though this is essentially a Server-side framework/component and represents the ‘V’ part of a MVC framework, it deserves a separate section of its own on account of the varied choices available in this area too. The key responsibility of View technology is to manage dynamic web content. This could involve say completely dynamic HTML generation or merge dynamic content with static HTML+Javascript.   

The popular View Technologies are:
 – JSP (Java Server Pages) + JSTL  (JSP Standard Tag Library)
 – Velocity & Freemarker (Templating Engine)
 – XSLT (Xml –> Html)
5Aa.View Aggregation Technology
This is essentially a web-page layout and decoration framework that provides a consistent look and feel, navigation and layout scheme. It works on top of any of the View technologies mentioned in 5A.
 – Site Mesh
 – Tiles
This throws up a number of interesting combinations or styles from an architecture perspective. Some of the valid ones are:

A. Traditional & Conservative – (1) Web 1.0 tech +  (5) Server-side-only UI Frameworks      

B. Modern yet Conservative – (2) Lightweight Ajax Toolkits + (5) Server-side-only UI Frameworks

C. Modern & Not-so-conservative – (3) Java Component-based Ajax Toolkits

D. Modern & Cutting-edge – (4) RIA Toolkits

So which one combination/style do I choose? Or can I make 2 choices? What are the trade-offs I need to be aware of when I make a choice? Will a particular style help acheive my GOAL (heirarchy)? Soul-searching questions, right? 🙂

The level of abstraction that we are dealing in, can only help so far as to eliminate or put aside “Styles”, one is not “comfortable” with. For example:

 – Style A is probably totally superceded by other styles and one really should look at modernizing with changing times.   

 – Some of us may “feel”, Style C is actually a Leap-of-Faith – As a general practice, how can you expect me NOT to touch Javascript & HTML, basically I don’t trust the Java-to-Javascript compiler well enough to handle all things that I have done all these years with DHTML. This may gravitate one to the slightly conservative Style B, though one would lose out on Style C’s BIG benefit of fine-grained componentization of UI element layout & behaviour, coded in Java language itself. Debugging, re-factoring & code maintenance is so much better with a strongly typed language like Java than Javascript and mind you, as a rough estimate, in a large enterprise business application, atleast 35% effort goes into UI layer development, and within that atleast 70% goes into screen layout and behaviour development.      
 – Some of us may not want to surrender to proprietory (licensed) IDE driven approach of Style D, since one would really need to use the IDE to reap the productivity benefits espoused by it. However, the richness in UI features offered by RIA Toolkits is much greater than that offered by any of the other Styles and that alone may favour Style D, especially if your competitor’s product already offers it.                   

 – Style B is kind-of-a small evolutionary step forward, which I think most Enterprises would prefer for their back-office applications. It has many more moving parts than any of the other Styles and there are a number of sub-combinations possible within Style B itself. Still, it is the most robust on account of reliance on time-tested design patterns. A BIG issue that creeps up gradually especially in case of large applications is the “Javascript Mayhem”. Simply too much gets written and quickly becomes unweildy and unmanageble, duplication across number of screens and difficult to change, test & refactor. All is not lost on this front though. Upfront thought and effort can be put to struture Javascript usage in a Object oriented fashion. Here are some links:
So there we have it, a few architectural styles to choose from. There may be more, please do share your thoughts & comments. Once you’ve chosen a style, the next step is the evaluation of frameworks within a Style say between Dojo & YUI or Struts 2 & Spring MVC or GWT & Wicket. The internet is abound with such comparisons and one should back it up with PoCs of her own. Here are some links: