Polymer Guide

Why Polymer?

Polymer presents itself as a simple JavaScript library that enables using and creating Web Components in modern browsers. It leverages the browser as the platform, and offers polyfills to enable features not yet available in all browsers.

We recommend reading our blog posts Web Components - a Great Standard for a Platform Approach and Web Components - Getting started which provides a good overview about Web Components and why we've decided to use Polymer.

If you're new to Polymer the best place to start is at www.polymer-project.org. The Polymer documentation provides some simple guides and tutorials to help you build an element.

Best Practices

"Everything is an element" being Polymer's mantra, we should think of elements as our building blocks when creating an application (and even custom elements themselves). The challenging part is to decide how to break down our application into meaningful elements.

Generally an element should be:

Simple
Reusable
Composable
Self-contained and ready to use out of the box
Stylable and responsive

The overall idea is to spend less time writing complex JavaScript, and rely on composition to create our applications and elements in a more declarative way. The communication between those elements is generally accomplished using data binding and events.

Fortunately Polymer already provides a solid Elements Catalog that follows these general rules and also addresses the most common patterns used in web development with Web Components. The source code of these elements is available on GitHub and is well documented, making this one of the best resources to learn how to use Polymer.

When developing applications with lots of elements and/or involving complex data flows, data binding can become a nightmare very quickly (especially when using two-way binding). There's a nice pattern that we recommend which is well described in this book sample.

"Data rains down from parent to child via attribute binding. Data then evaporates back up in the form of events. And just as in real life, something is very wrong if this cycle is reversed."

In summary, as a rule of thumb, an element should communicate (pass data) to children elements using one-way binding through properties, and the other way around child elements should fire events that parent elements can listen to.

Once you become more familiar with Polymer we strongly recommend reading our blog. It provides useful information, code samples, and insights through the journey of migrating our UI from server side to client side. Some examples that might be useful:

Other Useful Resources

Polycasts "Learn about the basic building blocks that make up a Polymer application, and see how to compose those elements into buttery smooth mobile experiences. The future of front end development is all here, on the Polycasts playlist!"
Web Component Tester "Makes testing your web components a breeze!"
Polymer Projects "List of projects made with Polymer"

Polymer and the Future of Web UI

Nuxeo Web UI will keep investing in the Web Components standard. The Polymer library, used by the Nuxeo Web UI components, will remain for the foreseeable future. There are multiple reasons to that choice.

Tried and Tested

We work in long investment cycles of 5 years and more. The Web UI solution is established and has been strongly adopted. We have continued upgrading and strengthening the product since the initial release. We will keep investing in Web UI and accompany this product over the long term, as per our commitment to our clients and community.

Web Standards Architecture

Web UI remains a modern architecture as it uses Web Components standards. As we look to the longer term, any replacement of Nuxeo Web UI will take on many of the current architectural features to facilitate migration and adoption.

Polymer Still Being Used

Polymer itself still has a very strong user base, including industry leading such as YouTube. Its successor, the Lit Element library, can mostly be seen as a subset of Polymer because most of the features Polymer implements are now part of the Web Components standards. We can readily shift components to Lit, if required by a technical issue, with little or no effort for our clients.