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.
"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:
- Self-contained and ready to use out of the box
- Stylable and responsive
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:
- Making Friendly Polymer Apps
- Build a Workflow Based Application with Polymer
- Nuxeo UX Labs: From UI Design to Web App Development
- Polymer Questions: To Bind, or Not to Bind
- Decoupled Global Localization with Polymer
- Reverse Routing in Polymer Apps
- Pluggable Polymer Applications
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.