The Polymer project is a new library on top of Web Components, Model-Driven Views, Shadow DOM and many more emerging standards for the web platform to simplify and improve the development process. You can get an overview about the architecture image provided by the Polymer Team.
CC BY 3.0 image by the
Recently John Messerly from the Dart team announced polymer.dart which is a port of the polymor project. It allows you to use these great new standards in combination with Dart.
By following this article you will create a simple countdown application using a Web Component with Polymer.dart. Let’s start right away.
Setup the Skeleton
First of all we will create a basic skeleton just to setup the build process and render the website. Currently to run polymer.dart a compilation step is necessary, but further down the road it will become obsolete.
To create a basic application we only need to add these two packages to pubspec.yaml
pub install we can compile our application. Watch out to import the build command from polymer instead of web_ui. Run the build and verify if the “Alarm” headline shows up when you run the application in Dartium.
Now we are all set to build our first components. Let’s get started.
Create your first Component
Every component needs at least one html file. We follow the established best practice and create an additional Dart file which will contain the business logic. There are certain naming conventions for your custom elements. They need to have at least one dash and the class name must be the camel cased version this name.
my-datepicker -> MyDatepicker
The component class we created only needs to extend CustomElement. There are two ways to insert a custom element. Either by using its name as element tag or creating a standard element and describing which custom type it should be.
Both ways are fine as far as I know. Personally I hope there will be only one way in the end.
Congratulations, you created your first Web Component and should see “Countdown” on your page.
Display attributes in the HTML
To render values in our HTML we use a library called mdv.dart. It is Dart’s pendant package to mdv.js. Both libraries allow you to bind an attribute’s data into a specific place in the template.
To use mdv.dart we need to add it to our packages, import and initialize it on application start.
Dynamically update the Template
So far so good. Right now the countdown time is rendered, but it’s not counting down. In order to do this we need to periodically reduce the
timeLeft duration. To reflect these data changes in our HTML we need to decorate the
timeLeft attribute as observable. Only observable attributes get updated in the template by default. In order use the observable decorator the CountdownClock class needs to include the ObservableMixin.
@observable var timeLeft;
After loading the page the numbers should count down once every second until it hits zero.
Awesome, you just finished your first Web Component with polymer.dart.
In the next article we will dive deeper into MDV iterations and conditions and further down the road we will setup a test environment using ContentShell in combination with the unittest framework.
Special thanks to Mary Campione for doing all the great work on the Dart Tutorials.
You might also want to check out her notes on the migrating from Web UI to Polymer for the tutorial samples.