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”

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>
    </dom-module>
    
    <script>
      HTMLImports.whenReady(function(){
        Polymer({
          is: "hello-element"
        })
      })  
    </script>

You can preview a Plunker example here.

Angular2

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';

    @Component({
    selector: 'hello-component',
    template: '&lt;div&gt;Hello there&lt;/div&gt;'          <b>//Template Declaration</b>
    })

    export class HelloComponent { }             <b>//Component Declaration</b>
    bootstrap(HelloComponent);

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.js

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>

ReactDOM.render(
<HelloComponent />, <b>//Component Declaration</b>
document.getElementById("container")
);

You can preview a Plunker example here.

Ember.js

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.

<script>
App = Ember.Application.create();

Ember.Component.extend({
classNames: ["hello-component"] <b>//Component Declaration</b>
});
</script>
<script type="text/x-handlebars" id="components/hello-component"/>
<div>Hello there</div> <b>//Template Declaration</b>
</script>

You can preview a Plunker example here.

Aurelia

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

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

You can preview a Plunker example here.

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!