Vaadin add-on Timeline vs Vaadin Charts add-on comparison

Introduction

For a recent project I had to evaluate the Vaadin Charts and Timeline add-ons for their capabilities.

Setup
- Vaadin 7.0.1
- Vaadin Charts 1.0.0
- Vaadin Timeline which is included in Vaadin Charts since Vaadin 7.0

Requirements
- Be able to see data for 90 days, and the same data but then per week (same graph, just other view).
- Be able to click on a bar and perform some action like retrieving other data based on the selected bar.
- Customizable three code coloring stacked bars.
- Display more details when hovering over a bar.


Comparison

Timeline

This type of graph is very flexible and elaborate in the ways it can display data. It has a "selection bar" below the actual graph so you can determine the values being displayed in the graph above it. See below for a screenshot:

You can try it out yourself in an online demo here and here.

Pros

- The graph is scrollable thus no worries about the bars/lines getting too close to each-other.
- You can zoom in and out, also with your mouse.
- Different charts (graph modes) provided by default, changeable in one click: line, bar and scatter.
- A quick zoom per period (1d, 5d, 1w, 5m etc).

Cons

- Can't attach any action to clicking on a bar. What you can do is react on the area selected with the selection bar, so a work-around might be to have the user select exactly one bar to mimic a kind of "clicking" on that bar. And then take the appropriate action.
- You can only show days on the x-axis it seems. You can't show a bar per week for example (thus one bar representing 1 week). A work-around might be to create your own Zoom period for 1 week, which is quite easy to do.
- Currently as of this writing there are at least two bugs regarding hovering: the timeline moves down a few pixels when hovering for the first time, and the stacked bars have a hovering problem.

Untested

- Can you also add an hover-over tooltip to the bars?


Chart
This type of graph does not have the fancy zooming possibilities, but has more possibilities regarding customization and reacting to events. See below screenshot for an example:

You can try it out yourself here.

Pros

- The bars are clickable and that event can be handled, indicating the x and y of the item clicked.
- The graph is more customizable; for example the numbers in the bars can be removed.
- Different values (like week number) on the x-axis is probably possible (still out for investigating).
- All data is always visible in the current view.
- Customizable hover-over tooltip.
- Does not have the two (smaller) timeline bugs.

Cons

- No horizontal scrollbar or similar, thus for example showing 90 days looks quite "cramped", see the above screenshot. When making the browser smaller, day numbers start to overlap. Do-able, but not optimal. A horizontal scrollbar would be great!
- No space for showing a full date at the bottom. As a work-around the actual date could be added to the tooltip when hovering over a bar (in the screenshot it only says 26).
- No zooming.
- No out-of-the-box other graph modes (i.e like in the Timeline those are provided with it always).


Conclusion

For the project we chose the chart because it is a bit more customizable and the ability to click on a bar and do something with that event was most important requirement.

Best of this Week Summary 26 April - 02 May 2010

• Google's Chief Java Architect Josh Bloch "discusses many of the problems facing the Java community, including the ineffectiveness of J2ME, licensing problems, Java 7's late ship date, and even the JCP issues that James Gosling often opined about. He points out that these problems predate the Oracle acquisition of Sun, so everyone should just stop pointing their fingers at Larry Ellison."
  


• Another Getting Started blogpost for a Mahout-Taste based movie recommendation engine, which uses Wicket as presentation layer.
  


• Martin Fowler explaining Inversion of Control and suggesting to call it the Dependency Injection pattern. Notes that the Service Locator pattern can also remove the dependency, just as the DI pattern tries to. Describes which of these options to use. Finally he also gives pros/cons for constructor vs setter injection. Also pros/cons for configuration in the code or via configuration files.
  


• Several Javascript performance-optimization tips taken at JSConf 2010.
  


• An article "which looks at various storage mechanisms - JDBC, JPA, JavaSpaces, Java Content Repository, MongoDB, and DB4O, primarily - from the perspective of how good they are at CRUD operations and queries". The conclusion is that there is no one "best" mechanism, each has its own best application.
  

Best of this Week Summary 12 April - 18 April 2010

• An advanced article on Spring Security regarding namespaces.
  


• A few pros/cons on when you'd want to use Amazon's EC2, Google's App Engine or maybe RackspaceCloud.
  TweetDeck uses GAE (Python) for some parts of their system, e.g sending emails, in combination with EC2.
  


• John Resig on improving the Javascript in your web app. Video & full transcript, including new features now available in jQuery 1.4. Mentioned are: delegation, live events, html fragments, javascript from CDN, additional header in Ajax calls, custom events, special events, themeability and customizability, i18n, and IE6 support.
  


• An older but still interesting PDF on Scrum and XP experience in a project of 40 people. They experimented for about a year on different team sizes, different sprint lenghts etc.
  

Best of this Week Summary 15 February - 21 February 2010

• Expected that Mozilla uses Agile everywhere, and definitely on its flagship Firefox? Think again, only recently they started to combine Agile and more traditional Waterfall as their new development model, dubbed "Lorentz".
  


• Tips for hardening your Tomcat installation. Other implementation guides, not only limited to Tomcat (also for example WebLogic) tips from U.S. DOD DISA (Defense Information Systems Agency) can be found here.
  


• Always interesting to at least quickly browse through: a review of the 1993 code of Doom. And more "today": the code of Doom for the iPhone reviewed.
  


• Think you know Javascript? Try one of these quizes!
  

Best of this Week Summary 11 January - 24 January 2010

• An overview of Command Query Responsibility Segregation (CQRS). This is an architectural style that makes a clear distinction between commands that change the application state and queries that expose the application state.
  


• Four myths about code comments.
  


• Interesting look at Stack Overflow's network configuration, including how they handle failover.
  


• The European Commission has approved Oracle's acquisition of Sun Microsystems.
  


• The history of Javascript in a slideshare presentation, including some more low level specifics like comparision (=== vs ==), anonymous functions, inheritance etc.
  

Best of this Week Summary 07 December - 13 December 2009

• This week Java EE 6 and GlassFish 3.0 were released.
  
  
• Presentation on the Java architecture of SpotiChart.com, a site that creates a Spotify chart based on Spotifiy tweets on songs.
  Includes:
  
  
  • Spring 3rc1 + Spring MVC 3
    
  
  
  • Quartz
    
  
  
  • Maven 3
    
  
  
  • Hibernate, EHCache
    
  
  
  • Transactional & multi-threading
    
  
  
  • Ubuntu 9.04
    
  
  
  • Tomcat 6 (single war)
    
  
  
  • MySQL 5.1
    
  
  
  • Twitter4j
    
  
  
  • OpenFlashChart
    
  
  
  • JTreeMap
    
  
  
  • Rome (for Atom feeds)
    
  
  
  • Use of URL shortening services
    
  
  
  • Developed in 3 days(!)
    
  
  
  • Statistics of the site
    
  
  
  • Lessons learned
    
  
  


• Five Javascript performance tips.
  


• Read the interview with the writer of Javas SOA cookbook, including how he uses Agile in SOA projects. Includes a free download of the Governance chapter.
  

Best of this Week Summary 17 November - 29 November 2009

• Great overview of (most of) Spring's portfolio. Includes tips on when you might want to choose Spring, and when not. Also shortly describes what's new in Spring 3.0.
  


• Google has opensourced a bunch of their Javascript libraries, which they use in Gmail, Google Docs and Google maps:
  
  
  • "Closure Compiler is a JavaScript optimizer that compiles web apps down into compact, high-performance JavaScript code."
    
  
  
  • "Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. Web developers can pull just what they need from a wide set of reusable UI widgets and controls, as well as lower-level utilities for the DOM, server communication, animation, data structures, unit testing, rich-text editing, and much, much more."
    
  
  
  • "Closure Templates grew out of a desire for web templates that are precompiled to efficient JavaScript."
    
  
  
  • "Closure Inspector, a Firebug extension that makes debugging the obfuscated code almost as easy as debugging the human-readable source."
    
  
  Quite a terrible name btw, since you also have regular closures in Javascript... The name came from bringing closure to their whole mess of Javascript libs they'd made.
  A short comparison between the compression performance of YUI Compressor and Google Closer Compiler using the well-known Javascript Frameworks - Mootools, JQuery and Prototype can be found here.
  


• Analysis and tips on how to improve https performance.
  


• IBM’s Jens Andexer and Willem Bekker from Standard Bank provide some samples of the good, the bad and the ugly business aspects of SOA.
  

Best of this Week Summary 09 November - 15 November 2009

• A post on experiences with Git coming from Subversion. Too bad the reasons why the author is having more and more problems with Subversion were not given. Though you can deduct (some(?) of) them from the text.
  


• Presentation by John Resig (from JQuery fame) on testing javascript. Shortly describes QUnit, JSUnit, YUITest for unittesting, Screw.Unit, JSSpec for behavior testing (unittesting broken up by task), Selenium for functional testing and Crosscheck, Env.js, Blueridge for server-side Javascript testing. Also describes browser launching, which I would translate into "build/test management", distributed testing (Selenium, TestSwarm) and browser support (cost vs benefit).
  


• "A Decade of SOA: Where are we, Where are we Going?" The viewpoints from a virtual panel of Enterprise Architects who have lived and implemented SOA for most of this decade.
  


• Why iStockphoto embraced Google's Gears.
  


• And as grand final this week: the hardware and (rails) software architecture of Ravelry, a knit and crochet community.
  

Best of this Week Summary 26 October - 01 November 2009

• Another good summary how merging WOA with SOA could potentially solve (some) SOA problems.
  


• This post covers three major areas of JavaScript/AJAX performance: distributed communication, usability, memory leaks and anti-patterns.
  


• Several interesting details from Facebook’s VP of Engineering about the infrastructure of the company, and the massive scaling problems it has to support. Big role for memcached there. Full video presentation here.
  


• Presentation at Oracle Open World 2009 - how to turn any ADF application into a SaaS application - an application suitable for deployment on the cloud. Includes short description of a SaaS, benefits, concerns, and several requirements. These requirements include customisation of fields shown to the user (e.g show or not show depending on the user or location) and i18n. Technologies suggested to achieve this are Oracle EBR, (WSRP) portlets, WebCenter, deep linking (tricky in JSF) and ESB.
  

Best of this Week Summary 05 October - 11 October 2009

• A quite in-depth article on creating highly-scalable components in Java. Described are the ideas used to create the concurrent Java components in the Amino Library Project (a set of concurrent building blocks).
  


• Another SOA Design Pattern sample chapter from Thomas Erl' book "SOA Design Patterns": "Service Governance Patterns, comprising a number of 8 patters. Compatible Change and Version Identification deal with service versioning. Termination Notification addresses the final phase of a service, it’s retirement. Service Refactoring explains how to deal with changing service contracts. Service Decomposition, Proxy Capability, and Decomposed Capability include techniques needed to express coarse-grained services through multiple fine-grained ones. Distributed Capability helps increasing service scalability through processing deferral."
  


• To ESB or not to ESB? Including a nine points checklist. Note that the article is from the creator of Mule (a lightweight ESB). Check also the comments here.
  


• Interesting hack to reduce startup latency for mobile devices with HTML5: put the Javascript code in comments (thus /* */), such that is immediately downloaded but not evaluated. Then to load it when needed, parse the text, strip out the comment-tags & do an eval().
  

Best of this Week Summary 3 August - 9 August 2009

• Securing SOAP/webservices overview and tips including encryption, testing, maintainability and reusability.
  


• Four steps to securing webservices with focus on testing.
  


• Several junit best practices. And related antipatterns.
  


• Overview of StackOverflow.com's architecture, including general tips. The tools are MS, but the mentioned principles apply everywhere. Quite a lot on scaling up and out. Also included is how Saleforce.com solved its perforance problems in the database (Oracle).
  


• Awesome, parts of the original source code of Apollo 11's Command Module (Comanche054) and Lunar Module (Luminary099)! Pretty funny are some of the comments.
  


• A couple of more or less advanced Firebug usage tips: advanced debugging with the console, replacing a Javascript funtion in the console and profiling.
  

Best of this Week Summary 29 June - 05 July 2009

• Here's a Getting Started and bunch of Case Studies for Google App Engine with Java: case study 1, case study 2 and case study 3. Main things to take away:
  
  
  
  • GAE does not support the whole JEE API nor all regular frameworks.
    
  
  
  • Google's database for GAE is non-relational(!) but an object store
    
  
  


• A collection of web 2.0 architecture articles every software/application architect should know about, collected over the years by Dion Hinchcliffe.
  


• Great extensive article from Martin Fowler on the Scrum daily stand-up meetings, including tips on: benefits and consequences of common practices for daily stand-ups, how to run them effectively, stand-up patterns, what to talk about, when to run them, and the goals, to help beginners and remind experienced practitioners.
  


• A few weeks ago Google introduced Speed, its open source effort to all make the web faster. Looking at some of the feedback, it seems to currently contain only basic best-practices tips.
  


• Great long article on the history of Javascript and what hopefully awaits us in the future.
  

Best of this Week Summary 23 March - 29 March 2009

• Need to know whether a collection is modified concurrently, which causes the ConcurrentModificationException? Check this handy wrapper solution here.
  


• The second article in the Transaction strategies series. "Using examples from the Spring Framework and the Enterprise JavaBeans (EJB) 3.0 specification, explained is how the transaction models work and how they can form the basis for developing transaction strategies ranging from basic transaction processing to high-speed transaction-processing systems".
  


• For the Amazon EC2 now a free AWS Eclipse plugin is available. It facilitates remote development, deployment, and debugging Java applications on Amazon Web Services.
  


• Three common mistakes to avoid when implementing XML and webservices: don't make your messages too large, don't create too fine-grained services, and don't forget to create an XML schema.
  


• Javascript is getting more and more important the last couple of years, so here's a bunch of best practices and efficiency tips.
  

Best of this Week Summary 09 March - 15 March 2009

• A table-based quick review of the following RIA frameworks: GWT 1.5, Laszlo 4.2, pure Javascript and Flex 3.2.
  


• A short introduction on how ActionScript 3 differs (and not) from Java.
  


• A wiki constructed with over four dozen architects: 97 things every software architect should know. Also now available as a book. It includes advice such as:
  
  
  • Don't Put Your Resume Ahead of the Requirements (Nitin Borwankar)
    
  
  
  • Chances Are, Your Biggest Problem Isn't Technical (Mark Ramm)
    
  
  
  • Communication Is King; Clarity and Leadership, Its Humble Servants (Mark Richards)
    
  
  
  • Simplicity Before Generality, Use Before Reuse (Kevlin Henney)
    
  
  
  • For the End User, the Interface Is the System (Vinayak Hegde)
    
  
  
  • It's Never Too Early to Think About Performance (Rebecca Parsons)
    
  
  


• An introduction to Object Oriented CSS.
  


• Sample chapter from Thomas Erl's latest SOA Design Patterns book, and an interview with him. He "talks about the main benefits of having a pattern catalog, SOA and Web services, the current state of SOA, the difference between SOA and service orientation, and the role of patterns in SOA adoption".
  


• A series of five articles on setting up a Java Wicket project and implementing a frontend with it.
  


• Handy piece of (alpha) software to test IE8 RC1, IE7, IE6 and IE5.5 on Vista and XP. Note that it looks like Microsoft is releasing IE8 this coming week, so get ready...
  

Best of this Week Summary 02 March - 08 March 2009

• The UI teamlead of Google's Chrome browser explained at a presentation why they decided to build Chrome. Basically because all the existing browsers suck :-)
  


• A memory and performance comparison between Seam+JSF and Wicket. Wicket wins both. Also check the comments for useful feedback. Possible reasons for the differences in performance are: JSF performs much more expression evaluation and the JSF lifecycle is much more complex.
  


• The Open Group has released version 9 of The Open Group Architecture Framework (TOGAF) for enterprise architectures. TOGAF is often combined with ArchiMate for modelling. Most important addition to version 8 is the content framework which describes what an architecture exists of. Here's some feedback from actual users on TOGAF 9.
  


• Talking about standards, the OASIS committee has updated a bunch of webservices specifications/standards.
  


• A nice post on how to write a Javascript client that sites can use to access your REST API. Biggest challenges that had to be solved were:
  

  1. Browser same-origin restrictions on XMLHttpRequests (XHRs) and inter-window/frame access
     
  
  
  2. The lack of wide browser support for HTML 5-style message passing between windows.

• Java Enterprise Edition 6 (Java EE 6) Specification (JSR 316) is getting there...
  

Best of this Week Summary 17 February - 01 March 2009

• A relatively new type of mashups are so called clipping mashups. Instead of building a mashup against some official API, a clipping mashup just parses the final content in the presentation, thus including CSS, Javascript etc. Links can be rewritten, new elements injected. The presentation doesn't have to follow for example portal JSR-168 standards.
  An example use case would be that you could use it to (temporarily) fix a bug in a system (not necessarily owned by you) until the official next release comes out.
  


• Eight architectural styles described. Handy overview including which one could be when appropriate.
  


• Summary of migration project from JDBC to Hibernate. Valid comment at the bottom is that iBatis might be a better solution when you have to work from an existing schema.
  


• Additional tips and articles for the Wicket in Action book. For example this article on how to do a partial Ajax repaint of newly created repeater items (e.g adding 1 row dynamically to a table or list with a "+" button). This in contrast to rendering all rows in a table when repainting the WebMarkupContainer as in the example described here.
  


• Nice step-by-step introduction to asynchronous processing in Java 5 using Futures, ExecutorServices, CompletionService, Callback interfaces and ThreadPools. Here's part 2 where it's being used in combination with Javascript to improve the user experience.
  

Best of this Week Summary 20 January - 25 January 2009

• Five performance anti-patterns in the data-access layer in database-driven applications. The following are described:
  
  
  • Misuse of O/R Mappers: loading behaviour and loading time (e.g lazy loading)
  
  
  • Load More Data Then Needed
  
  
  • Inadequate Usage of Resources: database connections
  
  
  • One Bunch of Everything: all data access is treated equally (e.g access frequency)
  
  
  • Bad testing


• An investigation on how the front-end of iWork.com has been built. Used are SproutCore(Javascript framework), Prototype, WebDAV and JSON.
  


• 50 minutes video presentation on Orbitz.com's architecture. Brian Zimmer describes a search and booking example for seats and beds. Problems they came across for example are: i18n, distance estimations. Disclaimer: the architecture is not perfect and always in motion. Orbitz.com is a Java shop, amongst others they use: Spring, Spring Web Flow, Tomcat and Joda Time (side-step: much learned from the Joda Time project is being implemented in JSR 310, led by the Joda Time project lead), Log4J, searchable (query-like) complex event processing mainly for logging/monitoring(!) and throttling, multi-threading, caching, availability and Jini.
  


• Performance comparison of four JPA implementations: Hibernate, Toplink Essentials, OpenJPA and EclipseLink. Only JPA was used in the tests. Conclusion: there's no clear winner, all have good and bad things on different points like CPU or memory.
  


• Will building desktop Linux applications with Javascript be the next re/evolution for Javascript?
  

Best of this Week Summary 12 January - 19 January 2009

• A couple of tips on Building Super-Scalable Web Systems with REST. All the client wanted was a getLocalWeather webservice for their 10M+ users website. At first it was implemented with a regular (MS WCF) webserivce, but for scalability they switched to resource-based REST.
  


• How to get rid of the Javascript splash screen in Oracle ADF Faces 11g Rich Client, and how to reduce the initial Javascript download size on the first page in an ADF application. Described is a currently undocumented feature that sets Context Parameters in web.xml, performing compression and only downloading the Javascript that is needed on the current page. Amazing for such an essential element to be an undocumented feature, because the default complete ADF RC Javascript libs can be up to 2M in size.
  


• A post with a summary of points on the question how secure cloud computing is. Quite related to my own recent tutorial on setting up an Amazon AMI with Java and MySQL on EBS using the AWS Management Console.
  


• Interesting white paper which "presents an overview of the architecture and configuration of the Sun Blogs web site, a blogging service dedicated to Sun employees worldwide. It also provides usage statistics and information about the system administrator's experience managing one of the busiest externally facing Web 2.0 site deployments at Sun".
  
  "Blogs.sun.com is powered by Sun Java™ System Web Server 7.0 Update 2 (hereafter, Web Server) running on a pair of Sun Fire™ T2000 servers with UltraSPARC® T2 processors. The site also uses a custom version of the open source blogging server Apache Roller Weblogger Version 4.0.0.12 (http://rollerweblogger.org/project/), MySQL™ database server, and Memcached. The service is integrated with Sun's secure single sign-on identity system backed by a worldwide employee LDAP directory for authentication and authorization."
  

My clients are getting thicker and thicker: MVC implementation shift

Last week I stumbled over this interesting article on the potentially changing Model View Controller architecture implementations. (Sidenote: here's the more subtle distinction between MVC1 and MVC2 described. And here's an article on the ambiguity of the term and pattern MVC.)
An example logical diagram of MVC2 is shown below:


For quite some years, the general practice was to generate HTML as result of the View, with the browser rendering it and being the thin web client. These days though, more and more the web client is getting heavier ("fatter") because of all the Javascript being used for AJAX, SPI and, in general, more logic on the web client.
The article takes a look at the different approaches to MVC implementations:

1. the HTML-only approach;


2. the HTML+Javascript "basic" approach; some of the Model's "business logic" is duplicated on the client;


3. the "AJAX" approach; partial views can be updated, the view consists of multiple HTML fragments, Javascript creates the View, not the application server;


4. and the full-blown Javascript-only ("a la gmail") approach; Javascript in the browser creates the views, near-complete responsibility for the Model business rules in the web client (browser), the web client would be the Controller.

The approaches range from, at the one extreme end, the definitive "thin client", and at the other extreme end, the definitive "thick client"." Example frameworks that can easily facilitate the last option are Google Web Toolkit (Java to Javascript) and Pyjamas (Python to Javascript). Below GWT's architecture diagram is displayed. Note the (relatively) limited application server procedures, part of the Model, preferably only performing basic validation, security, etc.


The new MVC2 diagram for the above mentioned fourth approach would look something like this:

Included in the article is also how you could split up work in a team between people working on the View and Model parts.

I do not completely agree with the statement in the beginning of the article that says "The Web client takes care of keystrokes and mouse movements: the Web browser application itself is the Controller". I'm reading this as: the browser is the controller. Though, when you look at the first picture, that is not what the Controller is supposed to be.
But, in general the whole potential movement of going to thick clients is an interesting one to keep an eye on.
Other pros for thicker Javascript-based clients (not mentioned in the article) are:

• Easier distribution of new versions than in the old days with fat clients like Visual Basic, where you had to make sure all clients got updated;


• Easy opening up of your SOA webservices. The fat client could directly access them;


• Easier mashup possibilities at the View layer via Javascript;


• Potentially a large improvement in scalability: the client processing power is used as much as possible, the application server only performs several basic checks;


• The Javascript generator/builder takes care of browser compatability.

Several cons are though:

• Potentially quite significant longer page loading times when the Javascript all has to be loaded at once;


• If not designed correctly, there could be significant extra network traffic;


• Being dependent on the Javascript generator/builder when a browser is (not anymore) supported (though an opensource framework allows you to build it yourself if really needed).

Best of this Week Summary 15 December - 21 December 2008

• A nice and simple logical diagram of the "open stack" for the social web and how the different technologies relate, including OpenID and oAuth.
  
  
• Mostly quite valid points of criticism on the currently available Java persistence frameworks. Some more comments on the article on TSS.
  


• A bit off-track interview with Bjarne Stroustrup (designer of C++) on educating software developers and the fact that companies are complaining about the lack of skills of current computer science university graduates. Especially in the area of writing maintanable code.
  


• Google just released the free Browser Security Handbook whitepaper, which is "meant to provide web application developers, browser engineers, and information security researchers with a one-stop reference to key security properties of contemporary web browsers".
  


• Awesome, unit testing for Javascript with FireUnit is now available, a Firebug/Firefox extension.