Learn Polymer - From Beginner to Expert

Our training path to get into Web Components and the Polymer library

We have been using Polymer in production since 2015. Along the way, we wrote about lessons learned and open sourced many of our components.

Despite having built up lots of Polymer expertise over the years, we still found it hard to systematically on-board new developers on our Polymer based stack.

This post collects the resources and steps we nowadays advise developers who want to get started on Polymer and aim to become experts.

Understand the basics

It’s crucial to understand what Web Components are and why we need Polymer in the first place.

The introduction talks on Google IO and the Polymer Summit are the best starting point to gain this basic understanding. Since the web platform and Polymer are progressing quickly, it’s best to look for recent talks (e.g. last 18 months).

At this point, the Getting Started tutorial on polymer-project.org helps to get a good feel for Polymer.

Build great elements

It’s time to build your own elements! (Hint: At this stage, avoid working directly in a large Polymer applications — the complexity is likely to frustrate you in no time.)

Pick an overseeable problem, use the polymer-cli to create an element shell, add features, and check them with your local demo page(learn more, and more).

Once you’ve the functionality in place, generalize your component, open source it, and publish it on webcomponents.org (learn more). While you are there, check out if others have build similar components. Read through their source code and see if you can spot some patterns to improve your element.

Reading the source code of other elements is one of the best ways to continuously improve your skills at this point. Check especially the components by the Polymer team on webcomponents.org as they often have clever solutions, using under-documented Polymer features.

The Polycast videos are another great resource at this level. Be aware though, that the older videos are less relevant because Polymer developed very quickly. Hence, focus on the Polymer 2+ videos, consider the Polymer 1.x video only for the concepts (lots of the syntax has changed since then), and best ignore the Polymer 0.x videos entirely.

Finally, you might find blog posts that help with specific issues (e.g. our blog). Again, verify the Polymer version before copying code samples.

Along they way, ensure you feel comfortable especially with event handling, data binding, mixins (former behaviors), and flex-layout.

Hint: Get a basic understanding of related/competing technologies like React and Angular. This will provide you with a better feeling for the strengths and weaknesses of Polymer.

Up your game and conquer applications

Finally, it’s time to step up from elements to applications! The good news: building Polymer applications is fundamentally just gluing together Polymer elements to bigger and bigger elements.

Yet, there are a couple of topics that you probably didn’t encounter looking only to individual elements:

• Your application needs to route URLs to pages. Polymer comes with a clever decentralize approached, which is explained in this excellent blog post.
• Two-way data binding gets very quickly a mess. Use instead one-way data-binding with Redux. Check Dan’s outstanding courses on Redux and learn how to integrate Redux into Polymer.
• Organizing code becomes more and more important as the number of elements in your app increases. Learn about approaches on how to organize code and refactor you application frequently.
• Applications often need to be translated. Here is a blog post on how to feed your translations from a translation platform.
• Finally, your application needs to be build to support older browsers, add cache busting, etc. Learn more.

If you’re looking for resources at this stage, your best bet are the more advanced talks from the Polymer Summits and the Polymer API reference.

Happy coding!