Try it out

If you want a live demonstration visit our help section about how to activate the new time tracking ui with links to the new beta interface.

Mobile Apps and Platform agnostic API

To develop our Mobile Apps we decided to code the necessary client side business logic for our time tracking in a platform independent way. The result is a simple portable Java API which we can use across Android, iOS, Unit Tests and as we shall see Dart. This makes it feasible to create rich client side logic and native applications, because every feature and bug fix will be instantly available on all platforms one recompile away.

Compilers

The nice thing about Java is that Google obviously has a tendency to create compilers for it ;-) We can not only compile Java to Dalvik for Android but also use J2ObjC to get a runnable iOS library. This is how we got our iOS App up and running in less than a day.

Web Frontend

After deploying on mobile we wanted to bring the business logic back on the web. The most obvious choice was GWT - basically a heavyweight Java library with a Java to JavaScript compiler. Unfortunately GWT is more geared toward typical Fat Client Developers with an API similar to Swing and AWT. Since we are at home in Web technologies a quite painful approach. After initial tests and getting everything to compile and work it was clear that this was not the way to go. Simply because it was as far away from web development as a web framework can get.

Meet Dart

Dart is Google's take on the web's future. It provides all tools a Java developer got accustomed to. From tool support for refactoring, quick fixes to a whole ecosystem of libraries (http://pub.dartlang.org) everything is available out of the box. In addition to a native Dart VM built into a variant of Chromium it also provides a Dart 2 JavaScript compiler, which is targeted for all latest browser versions.

Even though Dart is not even a 1.0 yet, it is still very much useful. And funny thing, already contains a Java2Dart compiler (or translator). After finding out that the current version of the translator now lives in the main Dart code repository, a bit of tinkering and it worked surprisingly well. With another day of work we got a compiled version of our java business logic running in the browser.

Dart Web-UI, Web Components and MDV

Future web standards like Web Components (to build components which can be used just like any other HTML tag) or Model Driven Views (MDV: live binding of javascript objects to html placeholders) are already emerging in Dart's Web-UI project. These concepts combined result in a really natural development experience for everyone who is experienced with web technologies. MDV makes it extremely easy to update all working timers in WorkTrail in real time, without too much overhead on the client side. While Web Components make sure that everything can be split up in manageable and reusable chunks. The new WorkTrail Time Tracking UI is currently using seven separated components, nested and reused around the application. The source code in the image to the left shows you literally our whole production source code for the displaying all currently open tasks.

The future goal is to try to make some of those components more generic so they can be released to the community. One of those web components already usable is a simple autocomplete web component which is available through pub or can be downloaded on github.

Next Steps

We have now successfully launched the new Time Tracking UI based on Dart and Web UI into beta status, so all of our users can try it out and provide feedback.

Since it is built on bleeding edge technologies we have to keep up with the rapid pace of the dart and web ui teams. Luckily since Dart Beta has been released it's core APIs are now officially stable and shouldn't break too soon. In contrast the Web UI team is constantly evolving. So while we have been developing on Web UI it has already been kind of deprecated in favor of polymer.dart. 

A Polymer port to dart supported by the dart team. Trying to use polymer.dart is still quite a difficult experience. But we are sure to migrate from Web UI to polymer.dart as soon as it majors enough to actually work as documented. Or in other words: As soon as documentation has been updated.