Introducing Dart Designer

tldr: Dart Designer is an open source tool to build diagrams of your Dart applications, more details on http://dartdesigner.github.io

Dart is a programming language created by Google in order to build modern and properly structured web applications. In a similar fashion as AngularJS, one of the main goal with Dart is to be able to build applications that you can maintain easily. With this in mind, I have started a couple of months ago to build Dart Designer in order to help Dart developers conceive their applications.

Dart Designer is built on top of the Eclipse platform (don’t run away screaming… just wait). For the better or for the worse, everybody knows Eclipse and while it comes with great features for Java developers it is a bit short on features for web developers (more on that later) but the core of the Eclipse IDE, the Eclipse platform, is a very nice tool to build applications. The Dart Editor itself is built on top of the Eclipse platform (see the code if you don’t believe me).

Dart Designer is not only built on the Eclipse platform but also on top of Eclipse Sirius. Sirius is an open source project of the Eclipse Foundation created by Obeo and used to create workbenches with various kinds of representations (diagrams, tables, etc) for specific domains. It has been used for years in critical system engineering in order to build tools for the development of planes for example.

My goal with Dart Designer is to provide a model driven development tooling for Dart developers (as if Eclipse and critical system engineering were not scary enough for web developers, now you’re in for model driven development too). For lot of people, model driven development is about UML models with its concepts like BehavioredClassifier or Stereotype, and all its diagrams. While UML may be useful for some people *cough*, it remains very abstract and far from the real world of most web developers. With a model-driven approach, you don’t have to use UML if you don’t need it, UML is just a language to express yourself, if you don’t like it you can use a language specific to your domain.

Dart Designer is based on a domain specific language dedicated to the creation of Dart applications. Among the concepts available in this language, you won’t find UML’s OpaqueBehavior or EncapsulatedClassifier, instead you will find concepts like Stylesheet, Package, Class, Mixin or even HTML pages. The concepts that you will manipulate in Dart Designer are either coming from the Dart programming language specification or from regular web application development. This tool has been tailor-made for Dart development!

Dart wants to bring properly structured and maintainable applications to the web. Well if model driven development with Sirius is good enough to help developing properly structured critical systems for planes, it should be good enough for web applications (see, it’s not *that* scary).

Dart Designer is a free and open source project hosted on Github. It is available under the Eclipse Public License v1 (tldr: do what you want with it but don’t change the copyright and publish the changes made to the original code). The build is hosted on Travis-CI and the project management is realized using Github Issues and waffle.io (everything is open). If you have an issue with Dart Designer or if you want a new feature, don’t hesitate to create an issue on Github. You can also contribute very easily to this project if you want. Dart Designer is also embedding the Dart Editor so you won’t need to manipulate both tools separately.

You can get it by downloading it from the official website or thanks to the Eclipse marketplace for those who have Eclipse Luna. Since the Dart Editor is also available on the Eclipse marketplace, the version of Dart Designer available on the Eclipse marketplace does not embed it.

The goal of Dart Designer is not to be able to represent everything that can appear in a Dart program. Just like with any other language, you create some poorly structured and ill-conceived applications in Dart using some obscure concepts of the language. I have no intention of supporting those features but if you have a real need which is not fulfilled by Dart Designer, just ask.

Dart Designer contains several kinds of representations to let you see various parts of your Dart application. In the Package diagram, you can see the packages that you are using like the Dart standard library package.

You also have access to Class diagram representations

The Library diagram representations show the dependencies between your libraries along with their content.

The Explorer diagram let you see your various assets and their relationships.

Since Dart Designer is based on Eclipse Sirius, we can leverage some of its great features. Your data are synchronized between all the representations. Change the name of one entity in an editor, it will be changed in all the other editors in real time. While your data are synchronized across representations, your representations are not synchronized with your data automatically. As a result, you can create several time the same kind of representation while showing different subsets of your data. It’s not because you are creating a class diagram that it has to show all the classes in your data. In all the representations, you can add existing elements or create new ones.

Dart Designer also comes with support for layers and filters in some kinds of representations. It also comes with direct edition for most of the entities available. For more information about what you can do in Dart Designer, have a look at this youtube video.

As I have said before, the concepts available in Dart Designer have been tailor made for Dart development. Today, the fourth release of Dart Designer, named Shielded Arrow, is now available. Among the new features of this release, the concepts available for users of Dart Designer have been expanded with the addition of new concepts dedicated to AngularDart.

In Shielded Arrow, you will now have access to a brand new representation to organize your AngularDart modules, controllers, components and more along with a new representation for the routes of your single page applications. AngularDart-specific resources will also be available in the Explorer Diagram and those new concepts have been added to the Class Diagram to let you see how your Dart classes interact with AngularDart.

AngularDart is a fairly new project and it evolves very quickly. Lot of things are not documented and since the project is not stable yet, things get broken quickly (for example, controllers may disappear in the next release). In a similar fashion, Dart Designer cannot be considered stable yet because the concepts used may evolve in order to catch up with Dart and AngularDart and to offer additional features. As a result, until the 1.0.0 release, which is not planned yet, breaking changes may occur. I will try to prevent breaking changes if possible.

In order to know which features are the most used by the users of Dart Designer, you can opt-in to send some information back to me. Those information only contain things like the version of Dart Designer used, the version of Java that you are using, the representations that you have opened, your language etc. I will use those anonymous data in order to know the most and least popular features of the product in order to find out what should be improved.

For more information on Dart Designer, have a look at its website, follow the project on Github and follow me on Twitter or on Google+.