Welcome to Part 2 of this review of the new Pluralsight course Getting Started with Polymer.js by Bill Stavroulakis.
Bill is a Microsoft MVP, and the creator of Dotnetweekly. He started his career in Silicon Valley in 2006 developing Facebook applications with more than 6 million users. He then worked on the Ruby-on-Rails framework, implementing a back-end portal for a renowned educational institution in Greece. Nowadays, he focuses on the .NET platform and works with a start-up in the educational field called Drexnotes.
Also in this series:
Part 2 – Properties and Data Binding
Properties and Data Binding
I have found the most effective way to learn Polymer is to combine video training with the official polymer documentation.
This training in this module is best used alongside the properties developer guide.
All of the code examples can be found on bstavroulakis.com
Properties Keys
The item of interest in this plunk is properties. Each property is declared with a key value object. Polymer has the following property keys:
- type
- value
- reflectToAttribute
- readOnly
- notify
- computed
- observer
Property Types
This lesson looks at the first two of these keys: Type and Value.
Bill creates a new property with the name message. In the message object definition we have type.
message: {
type: String,
value: "Hello there"
}
With the message property defined, it can be used in the template like this:
<template>[[message]]</template>
When we run the code, we see the message “Hello there”
There are six different valid values for the Type property:
- Boolean
- Date
- Number
- String
- Array
- Object
If we only want to specify the type, we don’t need to specify message with an object definition:
message: String
Next we see how to create an alertUpdateTime property, which displays the current datetime.
reflectToAttribute
See the reflectToAttribute plunk as you read this.
The reflectToAttribute property key is used for keeping an HTML attribute value in sync with a property value.
Bill demonstrates what this means by updating our message property with
reflectToAttribute: true
And running the plunk.
To the user, everything looks the same as before, but if we open up the developer tools and inspect the element we see that:
- the element contains an attribute with the same name as our property name.
- the attribute value is the same as our property value
Bill shows that the attribute value and the property value are now bound together: if we update our attribute, the property value will be automatically updated as well.
We see isSuccess and messageObj properties demonstrated next.
For further information on this see the Reflecting properties to attributes in the official docs.
Notify, ReadOnly and DataBinding
See the notify, readonly and databinding plunk as you read this, and open up the developer tools to see what gets written into the console.
This example uses the paper-input element as well as the plain old text way of displaying our Success message.
In Polymer there is the square bracket annotation e.g.
[[message]]
This only does one way databinding from the property (the host) to the DOM (the target). But if we need two way databinding we can use the curly brackets:
{{message}}
If we need more control over our databinding we can use notify and readOnly.
Notify is used to trigger an event with a name of the form “<property-name>-changed” e.g. when the property name is message, a message-changed event is fired.
Bill demonstrates the changes getting broadcasted to all targets when notify is set to true, but not when it’s set to false.
Bill also explains the readOnly is used to update from the host (properties code) to the target (our DOM) only once. This could be useful for limiting complexity (and risk of bugs) in a large application.
Databinding under the hood
I am always skeptical when I see frameworks that do a lot of magic.
One of the developers on the polymer project, Kevin Schaaf, said in his talk Thinking in Polymer
“Data binding of late has gotten kind of a bad rap.
It’s got a love/hate relationship with developers, right?
Because while it’s really convenient, it can hide a lot of the complexity of what’s going on.
And so the key thing to know is in Polymer 1.0 the databinding system is just 100% codifying this that we just wrote here.”
Having an understand of the details of what is happening gives developers a lot more confidence. However this is fairly advanced so if you are quite new to web development you might want to skip this section and come back after you’ve mastered the basics.
This lesson uses the databinding under the hood plunk and you should use the developer tools again.
We learn that the first thing Polymer does is look for annotations such as [[message]] and {{message}}.
Bill explains that it uses these to create a property effects object, and demonstrates that we can inspect our <alert-element> and then access it’s property effects from the console with:
$0._propertyEffects
We see that this is an array containing two objects, because we have two data bound objects inside our <template> element.
Bill also explains the effects that notify and readOnly have on databinding under the hood.
Data Binding – Objects
Open up the databinding objects plunk. We see that the value of the message’s value property key is a function that returns text and status.
Also in this demo is a ready function with 4 lines of code that we describe as steps here. Uncomment each step to see what happens. Or doesn’t happen!
Step 1 doesn’t update our element, but Step 2 does. Bill explains why this is so.
Step 3 is an alternative way to achieve the same effect – only slightly less code here, but it could save you a lot of code in more complex scenarios.
Step 4 is yet another way to get the result that we’re after.
Native Element Binding
Open up the Native Element Binding plunk.
This lesson introduces the double colon syntax, for example
{{message::value-changed}}
Polymer does this data binding automatically so it is not necessary, but we can use it if we want to make the code more explicit.
We see that when we update the paper-input value, the other message is updated at the same time.
Bill says every time we’re using a native HTML element and want to enable two way binding, we must remember to listen to the correct event when the attribute that we’re interested in changes.
Attribute Binding
How to bind the attributes of DOM elements: see this plunk and use the element inspector.
Here we see that the $ symbol is added after the attribute names, and Polymer uses this pattern to add our element attributes.
Computed Properties
Computed Properties plunk
These are properties which are calculated through a function.
They are triggered whenever one of the arguments of the function changes.
We see in this demo that it shows our alert-element displays as “Loading” for one second and then updates to “Loaded!”
Observers
Listening to property changes plunk
In this plunk Bill has setup an observer function in the message property.
This is similar to the computed property that we saw in the previous lesson, but the observer won’t set the value of the property. It just runs the observer method each time the property changes.
Polymer also has an observer array that we can set on the element’s prototype.
Observer Sub Properties
How to use the observer with sub-properties of an object plunk
This alert-element displays:
Not quite my tempo.
The loadStatus object now has several sub properties. value is a function that returns an object containing percent and loading: true
Also look at the ready method:
ready: function(){
this.message = "Not quite my tempo.";
this.loadStatus.percent = 10;
this.set("loadStatus.percent", 20);
}
The line setting loadStatus.percent to 10 did not work.
Bill demonstrates this in the console.
Observer Array Mutations
Listening to changes done in an array and going over the various array mutations available
Open this plunk.
Bill walks us through the changes made in this example, and runs it showing the messages logged into the console.
Conditional Templates
Introduction to custom elements that help us with common data binding use cases
Your mission, should you choose to accept it, is to open an run this plunk
Running this demo produces the message:
“This message is super secure. It will self-destruct.”
After three seconds, it self-destructs.
Chances are you have comes across the ng-if directive in Angular at some point in your career. It is the same concept here in our template using dom-if:
<template is="dom-if" if="{{isSecureMessage}}">
Super Secure! <span>{{message}}</span>
</template>
After 3 seconds isSecureMessage is set to false, so the contents of this template are no longer displayed.
Template Repeater
A specialized repeater that binds to an array plunk.
If you’ve ever used Angular, you’ll also be familiar with the ng-repeat directive.
Similarly, Polymer has dom-repeat, and this demo contains 3 templates that use this.
Filter and Sorting
Using the filter and sort attribute to manage data in the template repeater plunk
In our template we use the is=”dom-repeat” attribute as before, but now we also use filter and sort attributes.
If you haven’t done array sorting in JavaScript before, see w3schools.
Array Selector
An element ensuring path linkage when selecting items from an array
Open this plunk
This has two select buttons and toggle the display of the relevant messages: Message 1 and Message 2.
Auto-binding Template
How to use Polymer bindings without defining a new custom element
Open this plunk
This example introduces dom-bind, which works similarly to the ng-bind directive in Angular JS.
Zombie Code Kill 