Fun with Dart - Part 1

Dart Programming Language

I have been a fan of Dart since its release in 2011 after seeing the capabilities of the language. It was exciting to see an alternative to JS that is strongly typed.

In 2012 I wrote a ludo board game with Dart available at onlineludo.com. I wrote it for a contest and it was fun experience. The game is played in different parts of the world but it is called ludo in Nigeria and the rules on onlineludo.com are specific to how it is played in Nigeria.

Due to work and hobby projects having to do more with backend and infrastructure, I did not have the chance to use Dart again after writing the board game.

Recently, I stumbled upon the videos of Dart Developer Summit 2016 and it reignited my interest. The Flutter videos really impressed me and I decided to try out Dart again.

Deciding the project was easy. I choose to rewrite the board game. 5 years is massive for a developer and I definitely would structure the code better now. I would also like to use a recent frontend framework.

over_react (built on react-dart, React bindings for Dart) caught my attention and I initially set out to use it. But I had difficulties using material components with it. I was not ready to rewrite many things considering how easy it is with JS.

I did not have to browse for long to see that AngularDart is actively developed, very well documented and mature. There is also support for material components which sealed my decision.

Don’t get your hopes high yet, I have not rewritten the board game, at least I have not finished. But let us continue the journey.

I started out with AngularDart and it turned out it was easy to pick up. I have experience with Angular 1 but this is my first encounter with Angular 2(or 4).

I then reminded myself that I wanted to have fun with Dart, so I looked for more problems, apart from just rewriting the board game. I decided not to write plain HTML templates, rather build it with code.

That turned out not to be as straightforward as I thought. Angular requires you to either specify templateUrl or a constant String as template. i.e. you can not use a function evaluated at runtime for the template.

// only one of template or templateUrl is required
@Component(
template: '<div>Component</div>',
templateUrl: 'component.html',
)
class MyComponent {}

I will share my journey to achieving it in the next part. But I was able to come up with this.

el("div", children: [
el("h1", content: "Ludo Game"),
el("ludo-board"),
]);

And that translates to this HTML.

<div>
<h1>Ludo Game</h1>
<ludo-board></ludo-board>
</div>

You may wonder why? Isn’t the HTML template just easier? That is subjective. Writing them with code gives some flexibility and nothing is wrong with having an alternative way of doing things.

And remember, I set out to do this to have fun with Dart.

Stay tuned for the second part of the journey where I use code generation and transformers.