5 tips for the Dart & Polymer.dart Padawan.

Faisal Abid
Mar 27, 2014 · 3 min read

Dart is pretty awesome. I’ve been playing with it for a few months now and I must say that it’s really changed the way I develop web apps.

One of the great things about Dart is that it’s very easy to build and manage large scale web apps. The Dart language is — dare i say it — perfect. It’s the perfect mix between Javascript and something like Java. The type system is awesome, the toolset is amazing (though I use Sublime still), and lastly the performance you get from the JS it spits out is outstanding.

You might have a different opinion on this, but I think building large front end apps with javascript can get a bit tedious. With Dart, you never run into the problems you would run into with Javascript.

One of the cooler things in Dart is it’s integration with Polymer and web components. Polymer has dramatically changed the way I write web apps. Coming from a strong AngularJS background, and wanting to try something other than Angular.dart, I opted to build my startups web app in Dart & Polymer with custom routing. *Note you can use Angular.dart with polymer using the bridge component, but thats for another article*

Polymer is essentially a wicked cool abstraction over web components. https://www.dartlang.org/polymer-dart/

Web components are a great way to break up your app into bite sized chunks for ease of development. http://www.w3.org/TR/components-intro/

During the past few months I’ve learned a whole bag full of tricks and tips that should be helpful when developing Dart & Polymer apps. Some of the tips you might just know through reading the documents, and some take a bit of googling and fiddling with.

So without any order, here are 5 tips that should help you, young padawan.

Tip 1: Shadow DOM is your friend.

Shadow Dom keeps your CSS styles away from your polymer component. If you want to let your main css affect your polymer components, then remember to set.

I mostly always do this.

getShadowRoot(“component-name”).applyAuthorStyles = true;

Tip 2: Wrap it all up!:

Best practice is to wrap your entire app into a polymer component. i.e

<body><my-app></my-app></body>

It will make your life super easy when you want to communicate with other polymer components.

Tip 3: Post runnable Polymer: This one is thanks to Günter Zöchbauer,

Sometimes there could be a delay in init’ing your polymer components. So be sure to run the code that calls methods on it in a post runnable.

In my case its

main() => initPolymer().run(() => new RoutesController());

Tip 4: MirrorsUsed: When getting your template to loop over a list comprised of a custom object, be sure to indicate @MirrorsUsed in the object, otherwise when compiling to JS, polymer won’t read properties from your object.

Example.

@MirrorsUsed(targets: Persona)
import ‘dart:mirrors’;
class Persona { String name; int age; String location; String statsString; Persona(this.name, this.age, this.location, this.statsString);
}
<template repeat=”{{person in personas}}”> <span>{{person.name}}, {{person.age}}</span>
</template>

Tip 5: onEnteredView: For your Polymer element. Do any dom manipulation in onEnteredView and not the constructor. Otherwise Dart won’t be able to get a reference to the shadow dom. Be sure to always super the method implementation.

@override void enteredView() {                   super.enteredView();
// do dom here
}

Final thoughts.

I recommend everyone check out Dart. I think its a game changer for web development and I can’t wait to see what the future has in store for Dart.

If you don’t want to check out Dart, then at least check out Polymer.js.

Seriously, this is the future of web development.


Need Node.js or Dart consulting? Contact us at Dynamatik http://www.dynamatik.com/

    Faisal Abid

    Written by

    Entrepreneur. Google Developer Expert and Engineer.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade