Lack of UI libraries in Angular Dart

So I'm still slowly chugging along playing with Angular Dart.

The thing that's bothering me now is, because the it's such a new language/framework, is the lack of decent UI stuff. I needed a pretty date picker for my test project. I could either use the HTML5 date picker which isn't supported in half the browsers out there, or write my own.  I guess I could alternatively import all of jQuery and figure out how to get Angular Dart to talk to a jQuery widget. Ugh.  I finally found someone that had written one using WebUI, a deprecated system for making widgets in Dart, and managed to port it over to Angular. (if you are reading this and need one, email me!)

Tonight it was an autocompleter that I needed. Again, I ended up spending awhile converting a WebUI widget. Which is great practice for learning a language and framework, so I'm not complaining too much. But it certainly cuts down on the productivity.

The way components in Angular Dart are written, I can envision a world with a huge library of simple-to-use UI components. It's MUCH MUCH MUCH cleaner than trying to pull in javascript libraries for a widget. But I guess there's just not any real community or momentum behind the project yet.

Oops

Huh, that's what I get for not proofreading my last post. Didn't realize Blogger was incapable of escaping my HTML for me, so it mangled my code. It's corrected now.

And so after playing with Angular Dart for a while longer, I'm really annoyed at the Dart to Javascript conversion. Plenty of stuff works wonderfully in Dart proper, but then fails with cryptic error messages once converted to Javascript. I'm not sure if that's just immaturity in the environment, but if not, it's a pretty big show-stopper. This platform only works if the compilation to javascript is relatively seamless.

A week with Angular Dart

So I'm taking a (hopefully) short break from RoboNinja. With the baby, I have a couple hours in the evening where I hold her as she's winding down.  By that time, and with the one-and-a-half-hands that I have available, I just can't bring myself to try to do any serious work on it.

So instead, I decided to spend a little time fooling around learning a new web framework (Since with a new technology, you spend as much time reading as you do actually typing!) I think I've mentioned before on there that I'm always looking for new web frameworks that try to make web programming not suck. (And the vast majority fail miserably). So this time I decided it was time to try Angular Dart.

Dart is a new language from Google that attempts to replace Javascript. It's not perfect, but it's a whole lot more "normal" -- it uses class-based OO, reasonable scoping rules, etc.  Since basically no browsers support it, it can compile down to javascript. So theoretically it can run anywhere.

Angular is originally a clever javascript framework (one of the few that, when I looked at it, I said "Oh wow, neat!" instead of "huh, more ugly javascript"). So now the folks at Google have been working at porting the Angular framework to Dart. It's pretty new, and still in flux, but it sounded fun to play with.

The general idea of it is that, instead of writing a ton of event listeners, DOM-modifying code, etc, etc, you write a view with HTML plus a few magic attributes, and it takes care of automatically keeping your view and your model in sync. The simplest example is something like:

<span ng-if="person.name != null">{{person.name}}</span>
<input ng-model="person.name" />

In this case, it's all operating on the "person" model, which is an object that I'm assuming exists. As soon as you start typing in the input, the span will magically appear (since person.name is no longer null), and the span will contain the person's name. As you type. Without setting up listeners or registering callbacks or using CSS selectors to find the span's DOM object. It's neat.  You also have a controller object sitting behind the view that takes care of getting the model object, doing any business logic (ie "onSave"), etc.

Then, to make it better, you can build your own new HTML element tags, which let you easily make your own components on page. So you can do stuff like make a new date-picker element that you can use all over the place as easily as:

<date-picker ng-model="person.birthday"></date-picker>

Which, without additional wiring, will update the person's birthday field as you modify it.

So I've been fooling around for the last week with trying to put together a fairly simple webapp with it. So far, it's been really fun and interesting (as opposed to most webapp projects!), although it hasn't yet been fast. The biggest problem so far has been a lack of documentation. Angular Dart just isn't very mature yet, and there's very little in the way of documentation.  Learning a new framework and language is always a slightly time-consuming process, and it's even trickier with a lack of resources.

Debugging has also been challenging. Because all the magic data-binding and DOM manipulation happens magically by the framework stuff, it's almost impossible to tell what's going wrong when the problem is with your HTML view. Dart has decent debugging facilities, but they really just apply to your Dart code itself, and not all the Angular magic. (unless you want to slowly step through the all the Angular libraries).

That all being said, it's been really fun and interesting to work through. I can't yet judge how productive overall the framework is, but it's definitely more pleasant and interesting than slogging through javascript event listeners and DOM manipulation.