Category
Software ObservationsPolymer: First Impressions
After a few days of trying out Polymer, here are some of my first impressions.
Here's an example of creating a tab in Foundation.
index.html
<!doctype html>
<html>
<head>
<script src="polymer/platform.js"></script>
<link rel="import" href="name-list.html">
</head>
<body>
<dl class="tabs" data-tab>
<dd class="active"><a href="#panel2-1">Tab 1</a></dd>
<dd><a href="#panel2-2">Tab 2</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>Abc</p>
</div>
<div class="content" id="panel2-2">
<p>Abc</p>
<p>Abc</p>
</div>
</div>
</body>
</html>
In Polymer, we can create the same tab this way
components.html
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="x-tabs">
<template>
<dl id="tabs" class="tabs" data-tab>
<template repeat="{{ items }}">
<dd class="{{ active ? 'active' : '' }}">
<a href="#">{{ title }}</a>
</dd>
</template>
</dl>
<div class="tabs-content">
<content></content>
</div>
</template>
<script>
Polymer('x-tabs', {
ready: function(){
this.items = this.children.array().map(function(el){
return {
title: el.title,
active: el.getAttribute('active') !== null
};
});
}
})
</script>
</polymer-element>
<polymer-element name="x-tab" noscript>
<template>
<div class="content">
<content></content>
</div>
</template>
</polymer-element>
index.html
<!doctype html>
<html>
<head>
<script src="polymer/platform.js"></script>
<link rel="import" href="name-list.html">
</head>
<body>
<x-tabs>
<x-tab title="test">
<p>Abc</p>
</x-tab>
<x-tab title="Hello" active>
<p>Abc</p>
<p>Abc</p>
</x-tab>
</x-tabs>
</body>
</html>
Although this example might be missing some wiring, it still shows the clarity of the component structure as opposed to a pile of difficult to maintain code.
In AngularJS
index.html
<!doctype html>
<html>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="i in items">
<p>{{ i }}</p>
</div>
</body>
</html>
index.js
function MainCtrl($scope){
$scope.items = [1,2,3,4,5];
}
MainCtrl.inject = ['$scope'];
In Polymer
index.html
<!doctype html>
<html>
<head>
<script src="polymer/platform.js"></script>
</head>
<body>
<polymer-element name="x-items">
<template repeat="i in items">
<div><p>{{ i }}</p></div>
</template>
</polymer-element>
<x-items></x-items>
<script>
document.querySelector('x-items').model = { items: [1,2,3,4,5] };
</script>
</body>
</html>
You can see in the example above that there isn't much difference between the data binding strategies of AngularJS and Polymer.
What is Polymer?
According to its official website, Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform.Solving the new <table /> issue
Although we have come a long way from <table /> layouts to the Semantic Web, it's still obvious that we are merely using <div /> or other elements to replace tables. With Polymer, which utilizes Web Components, we can finally realise the real Semantic Web to encapsulate structural details of components in separate files so that our documents are more readable.Here's an example of creating a tab in Foundation.
index.html
<!doctype html>
<html>
<head>
<script src="polymer/platform.js"></script>
<link rel="import" href="name-list.html">
</head>
<body>
<dl class="tabs" data-tab>
<dd class="active"><a href="#panel2-1">Tab 1</a></dd>
<dd><a href="#panel2-2">Tab 2</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>Abc</p>
</div>
<div class="content" id="panel2-2">
<p>Abc</p>
<p>Abc</p>
</div>
</div>
</body>
</html>
In Polymer, we can create the same tab this way
components.html
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="x-tabs">
<template>
<dl id="tabs" class="tabs" data-tab>
<template repeat="{{ items }}">
<dd class="{{ active ? 'active' : '' }}">
<a href="#">{{ title }}</a>
</dd>
</template>
</dl>
<div class="tabs-content">
<content></content>
</div>
</template>
<script>
Polymer('x-tabs', {
ready: function(){
this.items = this.children.array().map(function(el){
return {
title: el.title,
active: el.getAttribute('active') !== null
};
});
}
})
</script>
</polymer-element>
<polymer-element name="x-tab" noscript>
<template>
<div class="content">
<content></content>
</div>
</template>
</polymer-element>
index.html
<!doctype html>
<html>
<head>
<script src="polymer/platform.js"></script>
<link rel="import" href="name-list.html">
</head>
<body>
<x-tabs>
<x-tab title="test">
<p>Abc</p>
</x-tab>
<x-tab title="Hello" active>
<p>Abc</p>
<p>Abc</p>
</x-tab>
</x-tabs>
</body>
</html>
Although this example might be missing some wiring, it still shows the clarity of the component structure as opposed to a pile of difficult to maintain code.
Data Binding
While we have so many MV frameworks out there, 2-way data binding is always a tough issue facing us developers. In Polymer, we get it by default with patterns similar to data binding in AngularJS.In AngularJS
index.html
<!doctype html>
<html>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="i in items">
<p>{{ i }}</p>
</div>
</body>
</html>
index.js
function MainCtrl($scope){
$scope.items = [1,2,3,4,5];
}
MainCtrl.inject = ['$scope'];
In Polymer
index.html
<!doctype html>
<html>
<head>
<script src="polymer/platform.js"></script>
</head>
<body>
<polymer-element name="x-items">
<template repeat="i in items">
<div><p>{{ i }}</p></div>
</template>
</polymer-element>
<x-items></x-items>
<script>
document.querySelector('x-items').model = { items: [1,2,3,4,5] };
</script>
</body>
</html>
You can see in the example above that there isn't much difference between the data binding strategies of AngularJS and Polymer.