Using Vaadin to Deliver World-Class Functionality

For the past few months I have been involved on a project with a client that involves updating a customer portal. The first steps of the project were to conduct POCs to determine what frameworks and technologies we would use to update the portal. As a team we chose to use Liferay as a portal framework and decided to use Vaadin as out application development framework. For the past two weeks I have been working with Vaadin consistently to create some of the core functionality in the portal. Our team even went through a three day training session to learn Vaadin’s capabilities, patterns and best practices.

Our team chose Vaadin over other web application frameworks because of its ease of use, versatility, and its cross-browser consistency. Aside from these key factors there were also some larger project based variables that seemed to align well with Vaadin’s target market as expressed in Hildeberto’s overview.

Vaadin is built off of Google’s Web Toolkit (GWT) so it is backed by a strong core and provides a variety of popular features for building web apps. In addition to building web apps we will also be using Vaadin to create portlets within Liferay. One of the nice things about Vaadin is that it is all Java based, similar to the Java Swing framework, there is no explicit JavaScript or html required to create a fully functional portlet or application.

Vaadin 7 was recently just released in April 2013 and would be a good baseline for development, however due to restrictions with browser support our team will be using Vaadin 6 in our environment. The “deal breaker” for not using Vaadin 7 is its compatibility with outdated version of Internet Explorer. Vaadin 7 only supports IE 8+ browsers, where Vaadin 6 supports IE 6+ browsers. A large percent of the projects current portal user base still uses IE 7 (and a much smaller but still accountable percent use IE 6).

Currently, most of my development with Vaadin has consisted of displaying table contents. The portal allows the client to display needed information to its customers, and the most intuitive way of doing this is through a tabled view. My role has involved working on an advanced table view which offers the customers an extensive list of options for viewing information within the table. The list of features I have been working on incorporating for the project consists of a:

• General search – Searches all columns for the search criteria.
•  Advanced search –Lets the user search for criteria within a specific column.
• Collapsible columns – Columns can be shown or hidden from the table.
• Reordered columns – Columns can be reordered throughout the table by drag and dropping them into the desired order.
• Sorted Columns – The contents can be sorted in ascending or descending order by column when clicking on the header.
• Table Export – The contents that are displayed in the table can be exported to excel, pdf and/or xml.
• Print – The contents that are displayed can be printed in a user friendly table.

Naturally, the majority of these features are supported in Vaadin’s API making them very easy to implement. If they were not we may have needed to reevaluate our framework choice.  However, a few of the features are supported as Vaadin add-ons which are side projects created by individuals and shared with the community. The add-ons have been very helpful however for implementing desired functionality quickly. However, I have come across a problem where some of these features are not compatible with other available features.  For example the advanced search (filter table) and the excel export will not work together without some modifications. Our team will have to look into how we can incorporate these features together to give the customer the greatest benefit of using our advanced table’s functionality.

One concern about Vaadin that a colleague brought to my attention is that Vaadin is very concentrated framework and if there is functionality that you want to create that is outside that scope of what Vaadin has to offer it might be very difficult to implement and take much more time than it would with a JSF framework. In training we were taught about how to create widgets and custom functionality for Vaadin using the GWT. I am currently working on some customizations to that Vaadin table that may fall under this category as the functionality I am trying to customize is not functional and would include modifications to how Vaadin’s components work. If all goes well the customizations will be quick and painless, and if not… you may be hearing from me again. A framework that limits a developer’s freedom to customize is not one to be highly praised.

All in all I have really enjoyed working with Vaadin. It has provided a vast variety of functionality quickly and consistently across browsers. After the training session it became apparent as to how to utilize Vaadin in our portal project to take advantage of all the features it can provide on both the client and server side. I have been really happy with the integration of Liferay and Vaadin having no issues with the two frameworks working together. Vaadin’s API has provided a majority of the functionality required for the project and it will be interesting to see how easily customizations to Vaadin’s components can be applied. If anyone has any experience with Vaadin or is interested in learning what patterns our team has used feel to leave a message.

Liferay Competes Against Software's Top Dogs

Portals are essential in today's Internet driven society. Portals are a gateway to transfer related knowledge and data between a provider and a user. Although portals may seem to be obtrusive, they are in fact beneficial to both the user and the provider, making them a "no-brainer" when identifiable users are required. Users benefit from portals because they enhance user experience, allow personalization, and provide a gateway to view and create data associated with the provider's organization. Providers benefits from a portal because they can track account information and usage, easily create and share organizational data, as well as increase business values by providing a simple medium for users to interact with them.

Over the past couple of weeks I have been doing research at work for a large web portal that we are about to build with a client. A large part of my role has been to research and test existing portal frameworks. There is quite a variety of portal frameworks available on the market, but really only four that are leaders in the field. The leaders list (which was created in a study on portal evaluations by Gartner) consists of Microsoft'sSharepoint, IBM'sWebSphere, Oracle'sWebCenter and Liferay. I would guess if you are unfamiliar with portal frameworks that you have heard of all of those companies except for one... Liferay, being a hopeful cost-effective option as it is an open-source enterprise portal framework. Open-source software (OSS) is becoming increasingly popular in the software community and is usually desired if the reliability and functionality meets or exceeds that of competitors. Although cost is a bonus factor to OSS, a large technology factor that should never be overlooked is the product support and available help for the software and lifetime. Even though OSS may have associated licensing costs for production use, it is often a much cheaper solution then competitors if the business goals can be met.

The viewpoint that I have had in evaluating portals is that of the users. Although I am a developer and would love to dive into the technical and programming side of the evaluation, a more important role that must pass evaluation first is the general usability of the portal. The usability of the framework features provided to organizational users and the clientele users is much more important than the difficulty of the programming integration with the framework. Why? Because user experience is the heartbeat of all web applications. Keep the users happy, and the site will live a long and healthy life, don't, and you can watch the site sick on life support till it dies.

To evaluate the portal I was only looking for what the framework provided off the shelf (OTS). By OTS, I mean no programming or hooks to change the functionality of the framework. Strictly downloading and unzipping the server instance… that is all. In evaluation of the Liferay portal there were guidelines and test criteria that were an essential "must" to meet business goals and be considered further. One factor I kept notice of was to make sure that if some criteria's needed functionality was not currently supported, could it be? And if so, how difficult and time consuming will the modifications be? The specific guidelines and criteria that are desired in a framework vary for the different types of business goals and value looking to be delivered. However, with my research and experience with the Liferay portal I have created a list of the OTS features that I like and dislike about it from a usability standpoint, as well as a developer about to be arms deep in it.

Liferay features that make me glad to be using the framework:

1. The 60+ portlets that come integrated in the Liferay framework to help get started.
2. Intuitive feature layout to help customize and create the portal architecture quickly.
3. The simplicity of having portal configuration options easily accessible all in one place on the browser.
4. The ability to "Impersonate" users of the portal to check their permission on sensitive data quickly.
5. An active community forum that helps get quick answers to any questions.
6. It’s easy integration with Liferay Developer Studio (Eclipse) allowing programmers to quickly get their hands dirty.

Suggested changes to Liferay to increase the framework's popularity:

1. Create intuitive saving options. Currently after saving, the saved changes window does not close automatically, leaving the user confused and frustrated.
2. Allow the user to set up role specific permissions on content AS it is being created/uploaded. Instead of making the user set role specific permission on content AFTER it has already been created/uploaded.
3. Increase documentation and tutorials on the features the portal has to offer.

Learning new technology and what it provides is a crucial part of my job. Developers deem themselves as being "lazy", meaning that we will never re-invent the wheel if there is a perfectly capable wheel available for use. If frameworks can be provided that will help meet business goals and reduce costs, it's no longer a question of "should we use one", but instead "which one should we use". Liferay has been a fun framework to research and work with, and I hope that it will continue to impress my team and I with the functionality that it offers to help deliver a world class portal.

User Experience Tips to Keep Your Site Trending

User experience (UX) is quite possibly the single most important attribute to consider, when implementing website design. Due to the rapid development of new hardware and software technologies it can be difficult for organizations to supply a satisfying web experience that meets the expectations of all it's demanding users. With so many options for the users to browse, the goal is to make them hooked on your site. Maintaining a users attention can be caught in a number of ways. An extreme example would be to go over the top and impress the user by providing tools or services that others may not. A good example of this is Ford's vehicle comparison tool. A more realistic example however, is to follow the latest recommended UX trends in web design. These trends help to create a holistic website experience for the user. By keeping your website in touch with the most current user trends, users find it more difficult to navigate elsewhere.

In preparation for a new project that my team and I are about to participate in at work, I have been researching world class UX designs and features. In the process, I have reviewed some of the highest customer satisfaction websites as determined by third party sources, as well as many UX magazine articles that provide information related to creating a good web atmosphere and experience. Through my research, I have found a number of similarities that are consistent among all the world class websites designs. I will list an overview for you on the key attributes I have found to be required to ensure a good UX in any website. My list consists of:

1. Minimal front-end loading: An increasing number of web users are using tablets and smart phones to access the Internet. These devices are great, as they allow users access to website content from remote or wireless locations. A limitation however, is that their signal strength may not be as strong as desired in a wired community, so if they have to load a video or massive amounts of images just to view the homepage they may become agitated with the delay and leave. It is imperative to ensure that at a minimum, a user can navigate to a website homepage and view their options without an uncomfortable waiting period.
2. Easy navigation: Technology advances have created impatient users. Time is non-refundable, so if a user wants certain information, then the website should be able to give it to them quickly. If a user cannot navigate to the desired webpage in three steps or less then they are likely to become frustrated and give up. The difficulty in creating a good UX design is finding the proper trade-off between efficient navigation and a simple, clutter free website.
3. Interface simplicity: Simplicity is the game-changer. It is the difference between the household website names and its inferior competitors. Take Google for example. Why does it dominate the search engine regime? Because it has one text field that every web user knows exactly how to use. The problem with older versions of Bing and the other players is that they clutter their search pages with news, images and other complexities that confuse the user of its exact use. How many times have you opened a browser and been at the MSN homepage only to navigate over to Google to search? More then once I'm sure. Remember, keep it simple to make confusion minimal.
4. Layout consistency: The layout of the website ties to the simplicity of the interface, but it plays a large role in website UX so I thought it needed to be explicitly stated. The color scheme and theme of a website are important to give the user a good feel for the website, but more important is consistency of the template used throughout the entire website. The human brain is better at recognition then memorization. Using this principle, by placing elements in referable locations consistently throughout the website, users can both recognize and memorize the elements and their functions effortlessly. There are recommended positions for each element (or group of elements) of a website based off of extensive research. The results help designers understand where a user is likely going to look to find a desired action. Keeping navigation, settings, and website specific options in the same location throughout the user's website experience is needed and expected to avoid irritation.
5. Resolution and browser compatibility: With the numerous number of devices used to access the Internet these days it is critical to support all screen resolutions and browsers to keep the growing audience happy. Using cutting-edge style sheet technologies likeresponsive design, CSS grid systems, and boilerplate's, all help keep a consistent UX throughout the varying browsers and display sizes. One of the biggest changes in recent UX trends is that websites now need larger text and buttons to accommodate for smaller touch screen devices. A single modular website design that takes these issues into consideration can satisfy users on all screen resolutions and browsers without the hassle of scrolling, zooming and non-compatible features.

The list contains the bare necessities needed to satisfy the current UX trends. However, the purpose of the website may change how these necessities are obtained and which ones require more focus and detail then others. A good website user experience is always preferred by both the stakeholder(s) and the user, so it is hard to imagine why any new website designers would not take these principles into consideration.