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
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.
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.
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.
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.
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.
- 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.
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:
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.
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.
The Hello Element
We create our first Polymer element.
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.
Polymer has the following lifecycle methods:
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
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.
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
One thought on “Getting Started with Polymer.js”
Pingback: Full Stack Weekly