Welcome to Part 1 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 Databinding

Part 3 – Reuse and Styling

Part 4 – Events and Behaviors

Course Overview

This is an introductory course covered why you would want to use Polymer, how you can use it, and what the most important parts are.

The only existing knowledge that you will need is basic knowledge of HTML, CSS and JavaScript.

Alternative Polymer Course

Bill has also produced the course Building a Web Application with Polymer.js and Material Design. This course shows how to build a simple responsive web application with Polymer JS with login, navigation and many modern UI elements.

The prerequisite for this more advanced course is good all-round web development experience: HTML, CSS, JavaScript, SASS, REST APIs, Front End Development, Routing and Authentication.

Expectations and Demos

All of the code examples are on plnkr and the links to all of these are available on Bill’s site. For the hello component examples you can also find these at HelloComponent.com

Polymer.js in Action

We see a basic dropdown using plain HTML and learn that it only supports plain text and strips out and URLs.

Then we see a <cool-select> custom element written using Polymer and this dropdown supports URLs including images. Options can also be displayed as tables.

Web Components

There are four parts to Web Components that are being specified by the W3C:

• Custom Elements – Component declaration
• Templates – Component Template declaration
• Shadow DOM – Encapsulation of the component
• HTML Imports – Import and Reuse Components

If you want a deep dive into Web Components you can watch Cory House’s course HTML5 Web Component Fundamentals.

Why Polymer.js

Web components are not fully supported by all browsers manufacturers. In order to use these features with native support, we have to use JavaScript polyfills.

Polymer is the most popular of the three major libraries for working with and extending web components. The other two libraries are X-Tag by Mozilla and Microsoft, and Bosonic.

Polymer offers:

• Graceful fallback
• Same declaration as specs change
• Helper functions

It is supported by a strong community of developers.

Polymer.js vs other frameworks

Bill demonstrates how much less code is required in Polymer compared with three other frameworks, Angular 2, React JS and Ember JS.

These demos only display Hello World, but they demonstrate how to use Web Components.

Aurelia is another framework that makes it easy to work with Web Components. For further details on how it compares with Polymer, Angular 1+2, Ember and React see Choosing a JavaScript Framework.

Bill says the underlying structural difference is (unlike Angular, React and Ember) Polymer is built on native functionality rather than custom solutions.

Your First Element

You can download Polymer as a zip from bit.ly/downloadpolymerjs

This has two main directories:

• Polymer
• WebComponentsJS

WebComponents JS is a suite of polyfills.

Bill also shows the Polymer directory and explains why there are three html files polymer.html, polymer-micro.html and polymer-mini.html

For more details see Experimental features and elements.

Loading Polymer on your Web Page

Bill demonstrates how to load Polymer using a link element inside the head element.

This works from browsers that support Web Components HTML imports, but for everything else we need to use the polyfills. Bill adds a reference to the webcomponents-lite script.

Including Polymer Plunk

Polygit CDN

When we don’t want to download and reference polymer from local files, we can use the Polymer Magic Server. For details see polygit.org

The Magic Server is only meant for development and not recommended for production.

This lesson also demonstrates the paper-input element.

Bill’s Polymer CDN plunk is available here.

Parsing and HTML Elements

This lesson is for people who are quite new to HTML. All of the HTML tags are available in alphabetical order at w3schools.

HTML Elements plunk

The Hello Element

We create our first Polymer element.

Hello Element plunk

Including the Hello Element

One of the benefits of custom elements is we can have our elements in separate files from our main webpage, leading to a simpler and cleaner structure.

Bill explains how to decouple the element declaration from our webpage.

Including the Hello Element plunk

Class style Constructor

Although including the element externally is a best practice, for easier demonstration purposes most of Bill’s examples put the code in the same file.

This lesson introduces us to the Polymer class function, and document.registerElement.

Once our element is registered, we can create it and append it to the DOM.

This approach involves more code than just using the polymer function that we saw in the previous lesson.

Class style Constructor plunk

Lifecycle Callbacks

Polymer has the following lifecycle methods:

• created
• ready
• attached
• detached
• attributeChanged

Bill explains all of these methods as well as factoryImpl

You can also find more details on lifecycle-callbacks in the official polymer docs

In this demo Bill adds an onclick event that removes our custom hello element

Lifecycle callback plunk

Type Extension Element

There is no need to create all of our custom elements from scratch. We can also extend the native HTML elements!

In this lesson we extend the input element.

Type Extension Element plunk

The next part of our review looks at probably the most important part of the course, diving deep into the fundamentals of properties and data-binding.

Part 2 is coming soon