Polymer.js Demo of the Week | Week 5 | Class-style Constructor

With the class-style constructor we can set up our element’s prototype chain but not register it immediately. So instead of writing

<hello-element></hello-element>

Polymer({is:'hello-element',
      created: function(){
      this.textContent = 'Hello there'}
})

we can first declare our element’s blueprint

        HelloElement = Polymer.Class({
          is: "hello-element",
          created: function() {
              this.textContent = "Hello there";
          }
        });

then register our element

document.registerElement('hello-element', HelloElement);

and lastly create an instance whenever needed

        var el = new HelloElement();
        document.querySelector("body").appendChild(el);

 
Full demo as always here

Polymer.js Demo of the Week | Week 4 | Including The Hello Element

In our previous week’s demo we declared and reused a super simple element named “Hello Element” on our main page.

This week in our super simple demo we will include this element through a separate page.
To do so we’ll just extract the component declaration and add it in a new page named “hello-element.html”.

Then we’ll just include the element with the rel=”import” attribute. Have in mind that we can include the Polymer reference in our element. This way once the hello-element is loaded it will load all of its resources as well. This will work like a waterfall and once all of the resource chain is loaded it will declare that element. Also, if a resource is loaded from one element and is used from another element as well it won’t load twice. So, you can always include the resource paths you desire such as the Polymer library and the browser will be smart enough to load them when needed and only once per page load.

The Plunkr demo: https://plnkr.co/edit/hY4qYzfpUcOPCxQ2hbXw?p=preview

Our Index.html page

<!DOCTYPE html>
<html>

  <head>
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="elements/hello-element.html" />
  </head>

  <body unresolved>
    
    <hello-element></hello-element>

  </body>

</html>

and our elements/hello-element.html page

<link rel="import" href="https://polygit.org/components/polymer/polymer.html" />
    
<dom-module id="hello-element">
  <template>Hello there</template>
</dom-module>

<script>
  Polymer({
    is: "hello-element"
  })
</script>

Polymer.js Demo of the Week | Week 3 | The Hello Element

In this demo we will create an extremely simple Polymer Element to check out its different structural parts.

First we have to include Polymer (more on this in the previous demo).

Then we have two parts the imperative and declarative.
The imperative consists of a script area where we declare our element and will later on include its various properties and methods.
Also, when you include your declaration in the index.html page you’ll have to wrap everything in the HTMLImports.whenReady callback to make sure
that everything loads once all of the html imports are done.

Lastly, we have the declarative are wrapped in the <dom-module> element. So Polymer uses an element to declare another element, isn’t that cool?
In this area we’ll include the template tag and Polymer will copy and paste the HTML located in the template tag in our element.

So, we would expect the “Hello there” message to appear in the <hello-element> element, which is the case if you check out the Live Demo!

<!DOCTYPE html>
<html>

  <head>
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="https://polygit.org/components/polymer/polymer.html" />
  </head>

  <body>
    
    <hello-element></hello-element>
    
    <dom-module id="hello-element">
      <template>Hello there</template>
    </dom-module>
    
    <script>
      HTMLImports.whenReady(function(){
        Polymer({
          is: "hello-element"
        })
      })  
    </script>
    
  </body>

</html>

Polymer.js Demo of the Week | Week 2 | Including Polymer

Well duh, to use Polymer.js we have to include it on our page somehow.

Polymer.js uses the new HTML Import specification to include other elements but itself as well (mind blow).

We first need the webcomponents-lite-min.js library to enable the HTML Import functionality in older browsers and then we can import Polymer with the rel=”import” link tag.

<!DOCTYPE html>

<html>
    <head>
        <script src="components/webcomponents-lite.min.js"></script>
        <link rel="import" href="components/polymer/polymer.html" />
    </head>
    <body>
      
    </body>
</html>

Live example

Or we can use Polygit as a Polymer CDN. However, this is not a recommended way for production websites as you cannot vulcanize or optimize the build/load process.

<!DOCTYPE html>

<html>
    <head>
      <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel="import" href="https://polygit.org/components/polymer/polymer.html" />
    </head>
    <body>
    </body>
</html>

Live example

Polymer.js Demo of the Week | Week 1 | Component Declaration

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 https://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.

TechDays Online September 2016 (led by MVPs)

Don’t forget to tune-in from the 12th to the 16th of September at the MVP led TechDays Online event!

MVP_Logo_Horizontal_Preferred_Cyan300_RGB_300ppi

“Building on the success of the online event in May, we will be working with our leading MVPs and Community Leaders to deliver bite-size technical sessions that offer a real-world perspective on how our technology is, and can be used by customers and partners.  The 5 day agenda is packed full of community led conversations, demonstrations and how to technical information.  We will be covering; DevOps, the Data Platform, BOTs, HoloLens, Microsoft Azure, IOT along with innovations from the team at Microsoft Research Cambridge.”

This event will be taking place at the Microsoft Campus in Redmond and each day will offer the following topics:

Monday, 12 September: Explore the world of Data Platform and BOTs
Tuesday, 13 September: DevOps in practice
Wednesday, 14 September: A day at the Office!
Thursday, 15 September: The inside track on Azure and UK Datacenter
Friday, 16 September: Find out more about Artificial Intelligence

Register here => https://www.eventbrite.co.uk/e/techdays-online-september-2016-led-by-mvps-tickets-27251539087

Working with Polymer.js Elements | Pluralsight Course

Another Polymer.js course is out into the world, featuring “Working with Polymer.js Elements”.

https://app.pluralsight.com/courses/polymer-js-elements-working

Polymer.js is one of the most promising frameworks available because it allows you to use web components efficiently. In this course, Working with Polymer.js Elements, you’ll go over the Polymer Element Catalog to see the tools and action necessary for creating and publishing custom, reusable elements. First, you’ll see some examples of each of the element sets. Next, you will create your own custom and reusable element. You’ll finish with creating tests for you element as well as publishing and sharing it. By the end of this course, you’ll be ready to tackle your own custom elements using Polymer.js.

workingWithPolymerjs

Getting Started with Polymer.js | Pluralsight Course

My new Pluralsight course is now live with the title “Getting Started with Polymer.js”. It is an introductory course on the Polymer.js framework and it is for web developers of any level.

You can preview the course over here => https://app.pluralsight.com/courses/polymer-js-getting-started

And all of the demo code over here => https://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/

For an in-depth course review you can check out Kevin O’Shaughnessy’s blog posts => https://zombiecodekill.com/2016/06/21/getting-started-with-polymer-js/

“Google’s Polymer.js framework for software development gives extra functionality to Web Components. This course will introduce you to this up-and-coming, element-focused development approach and how you can apply it to your own projects.”

getting-started-course

1 2 3 6  Scroll to top