Wednesday, February 09, 2011

Raising the Bar in CMS Usability with Vaadin

We want our next major release to provide the very best administration interface for Web-based content management on the market.

Go ahead. Read that again.

Yes, we really do believe Magnolia 5’s GUI will be better than any other web based CMS on the market. That is a strong aspiration, agreed, but then again it’s been Magnolia’s core aim from day one: “Simplicity on an Enterprise Scale” for us means a CMS that is intuitive to use and works well for enterprise use cases. We have shown Magnolia CMS can cover enterprise use cases. Now its time to deliver on the usability part.

Setting a goal means adjusting focus. Magnolia 5’s focus is on user experience.

Magnolia 5’s usability shall amaze content authors with a high-usability interface not just when using a desktop browser, but also on an iPad and other mobile devices with a touch screen. With such high goals, you better choose a very good toolkit for building Magnolia’s new Graphical User Interface (GUI).

At Magnolia Conference 2010, Philipp and Daniel talked about Magnolia 5.0, and specifically about how we were evaluating Vaadin as our framework for the next-gen AdminCentral (our administration interface) in Magnolia 5.0. After a lot of debate (both internally and with the community) and some proof of concept development, we finally decided to stop tinkering and take the decision to go with Vaadin as our toolkit of choice for the Magnolia 5.0 GUI.

Show Me the Veggies!

If you'd like to see the Vaadin/Magnolia synergy in action, take a look at above video. This is a proof of concept. Things will look completely different with the final Magnolia 5.0, but it shows that Vaadin is able to work for the things we have in mind. It also shows a nice idea about building a graphical dialog editor.

Consistent User Experience Across All Input Devices

Magnolia's tagline is "simple open source content management" and we take this to heart. We want content authors (and developers) to be delighted with every aspect of Magnolia. Very simply, Vaadin helps us meet this goal because the people that build Vaadin share our philosophy. They really care about the user interface.

Out of the box, Vaadin comes with some great-looking UI components, which certainly helps for first impressions. And not only that, but it lets you put them together into a slick and intuitive interface without leaving behind a trail of messy code. However, shiny widgets alone don’t make a good user interface. With Andreas, Magnolia has a dedicated and experienced user interaction designer on its team who completely shares our vision of how things should work. Andreas has worked for months defining basic interaction patterns and hammering out how an interface must work to support not only mouse but also keyboard and touch as input devices for common Magnolia operations. So the next time you hit the down arrow on your keyboard to navigate down through the AdminCentral tree, it will actually work!

Touch support means Magnolia’s administration interface will work on an iPad and other mobile devices requiring touch support. It also means that Magnolia 5’s AdminCentral will likely be completely accessible, a feature often requested by governments but hardly found in any existing CMS.

One benefit of how we will utilize Vaadin, using shared components and pure Java packaging, is that the overall user interface will be much more consistent, regardless of whether a module comes from Magnolia's core developers or from an external contributor. This means shorter learning curves and more shiny, happy users.

Standardization and High Security

If you’re a Magnolia developer, you probably already know that our current AdminCentral client is tightly coupled to server-side architecture, and we use a custom JavaScript library to handle AJAX requests in the client. We never set out to conquer the world with our GUI libraries, but back when we started, there was no alternative to writing our own. With Magnolia 5.0 we finally have the chance to switch to an existing, established, well-proven, documented and (externally!) maintained library instead of having to work with our own. This allows us to focus on stronger traits, like building great user interfaces instead of fixing browser incompatibilities in GUI widgets. And it allows everybody else to use a library they can use across many other projects.

Standardization is a good thing and Magnolia has used existing code and supported standards wherever there was a match with our needs. The GUI library really is the last major part of Magnolia that was non-standard, simply because what we need did not yet exist.

Besides using a standard GUI library, one of our original technical goals for Magnolia 5.0 were to decouple AdminCentral from the server. Alas, our research made it clear that still no GUI framework exists today that fulfills all requirements at once. Vaadin comes with built-in listeners and data binding for its UI components, and it's already tested to work on major browsers, so it covers a lot of what we need. The framework is server-side, which brings a lot of benefits for every developer working with it, but it also means the coupling between client and server is not quite as loose as we originally envisioned it. Still, there is a lot to like about it:
  • Rich widget framework
  • Out-of-the-box theming
  • Java developer friendly
    • Close to Swing
    • GWT based (Java -> Javascript)
    • Can integrate any GWT-components
    • Rare GWT-compiles (compared to plain GWT)
  • Testing with pure JUnit
  • Apache License
  • Well documented

As Philipp discussed some time ago, Vaadin uses server-side events, which could impact performance, an issue that is particularly critical if you wish to provide a snappy user interface on the web. While we've seen that a server-side framework in itself doesn’t imply worse performance than a pure GWT approach (an alternative we considered), we will need to invest more effort on that end to achieve what we want. On the positive side, running an entirely server-side architecture makes the system more secure, and Vaadin's JSON-based UIDL allows for future extensibility. Vaadin is helping us kill multiple birds with one stone here: we're reducing server load, increasing security, future-proofing our work and creating a better user experience at the same time.

Open Source and Community Support

Like Magnolia, Vaadin is an open source project, and it already has a strong community base, excellent documentation and a dedicated team of developers who are improving it on a daily basis. Vaadin UI components are all written in Java and so, if you know Java, you can extend them, share them with the Magnolia community, and build cool stuff on top of them. That is one major reason we like it: with Vaadin, you don’t have to be a JavaScript wizard to build great applications for the web browser. And let’s face it, if you were, you’d be working for them.

For those of us who like to be home at least occasionally, Java is a fantastic choice to build applications, and Magnolia 5 with Vaadin will make it easier than ever to build extensions for Magnolia and help the Magnolia community grow, because now, you can also go wild on the front-end.

The best GUI Tool for Our Needs

We've been trying out Vaadin about eight months ago and while many challenges have been overcome for the original proof of concept, the real work still lies ahead of us. In our review and testing, we found that Vaadin consistently scored at or near the top in criteria such as productivity, security, theming, collaboration and community backing. With Magnolia 5 GUI development starting in earnest, we’ll soon have much more to say in terms of real-world experience. Ultimately, there is no silver bullet. Just like when you have to choose a Content Management System.

Learn More about Vaadin and Magnolia 5.0

If you’d like to learn more about Magnolia 5.0, you can see presentations about our Magnolia 5.0 roadmap from the community day at Magnolia Conference 2010. Then, check out the Magnolia 5.0 wiki pages. Learn more about Vaadin in this presentation by Joonas Lehtinen, also from Magnolia Conference 2010.