Week 1 | Component Declaration

polymer 1.0
Sun Aug 28 2016

This is the first week of the “Polymer.js Demo of the Week” series. Every week I’ll release a new Polymer.js demo for you to check out.

As a first demo I think it would made sense to just create simple component with Polymer.js.
Then we will declare a component with other frameworks so we can have a first scope of what is going on.

You can preview all of these demos at my mini-project site hellocomponent.com as well.

Lastly, all of the demos in the series can be previewed at the following site as well http://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/ and are part of my course “Getting Started with Polymer.js”


In Polymer.js we have two declaration parts the imperative (script) and declarative (html).

    <dom-module id="hello-element">
      <template>Hello there</template>
          is: "hello-element"

You can preview a Plunker example here.


Angular2 is a bit more complicated but makes sense. We first declare the component with a selector and template property and then export it as a class.

I believe this looks a bit more ES6 oriented as we import and export modules in a sense.

    import {bootstrap}    from 'angular2/platform/browser';
    import {Component} from 'angular2/core';

    selector: 'hello-component',
    template: '&lt;div&gt;Hello there&lt;/div&gt;'          <b>//Template Declaration</b>

    export class HelloComponent { }             <b>//Component Declaration</b>

You can preview a Plunker example here.

Angular 1.5

In Angular 1.5 we can just run the component method.

 var module = angular.module("app", []);
module.component("helloComponent", { <b>//Component Declaration</b>
template: "Hello there" <b>//Template Declaration</b>

You can preview a Plunker example here.


React is the library that we have grown accustomed to love to hate love.

It has become I think the most preferred framework and below is an example why. It is extremely performant and with a small learning curve.

function HelloComponent() { return <div>Hello there</div> } <b>//Template Declaration</b>

<HelloComponent />, <b>//Component Declaration</b>

You can preview a Plunker example here.


Ember.js is the old wise framework that has still a lot to offer but (for me) was one of the most difficult to wrap my head around.

App = Ember.Application.create();

classNames: ["hello-component"] <b>//Component Declaration</b>
<script type="text/x-handlebars" id="components/hello-component"/>
<div>Hello there</div> <b>//Template Declaration</b>

You can preview a Plunker example here.


Aurelia is the new kid on the block being built with modern standards and practices.

   <require from="./hello-component.html"></require>
    <hello-component></hello-component> //Component reuse

You can preview a Plunker example here.