Polymer. What is it? What is not? Where does it come from? Where is it going? And many more questions with hopefully useful answers.
I’ve started this blog around june 2013 as a code snippet reminder, a personal place to store small solutions to small challenges. At that time AngularJS docs were not good enough, no books had been published, not that many blogs around.
Has this changed? ha! Books, videos, conferences, meetups, workshops, you name it!… Even this small blog is getting 60.000 visitors per month but who is keeping track?
Just like in june 2013 my job is still driving the content I add to ng-learn. My job has changed and it is not angular centric anymore. It now covers more options and more challenges. I still work with angular but is is just another tool on my belt.
So today I have a new challenge to publicly offer. This is a question I have and I get from many others:
“With AngularJs 2.0 being a complete rewrite should I keep going the anguleresque way or should I jump into ReactJS or Polymer?”
My answer to you is…it will always depend on your particular situation. Green or brown field? what are your browser/device constrains/support requirements? What is your project’s delivery date? mobile? web? both? The ramifications are many and I’m not going to jump into this philosophical discussion. At least not yet.
Not Yet?? Well, all frameworks present flaws. All. Period. If you are going to choose one over the other for an specific project then you better know the challenges and compromises each option take. Having said this, I’m going to start writing about Polymer’s features and challenges. Like I said before, this blog serves as a very elaborated notepad.
And if I ever have to make a decision about that includes Polymer then I want what it’s included in the package. Right after, I think I’ll need to do the same with ReactJS. But there is phrase in spanish that goes “Pluma pluma” or “Paso a paso” which means “One step at the time”.
Polymer - What is it? What is not?
- So Polymer and Web Components are the same, right?
Nop, ‘Web Components’ is a thing on its own. It’s The Thing. It is a group of 4 different specs. Custom Elements, HTML Imports, Templates and Shadow DOM.
- Is Polymer a framework?
Not really. It’s a library that presents a sugar API on top of web components and it adds some really nice features other frameworks and libraries have made us accustomed to.
“The Polymer core provides a thin layer of API on top of web components. It expresses Polymer’s opinion, provides the extra sugaring that all Polymer elements use, and is meant to help make developing web components much easier.”
- Any other similar approaches out there?
- What about all these polyfills I keep reading about?
Well, Polymer sits on top of web components. The 4 specs we mentioned above are gaining momentum and browser support but not everything is supported yet in modern browsers. Read 2 last versions of each browser when I say modern.
Polymer team - part of google - works really closely with Chrome’s team. And Chrome is going deep into web components. Therefore, no problems on Chromeland.
So in order to fill in the other browser gaps Polymer team - not sure if chrome team collaborated or not - created polyfills called ‘platform.js’.
These polyfills were good for Polymer or XTag. This helpful action seeded confussion in the polymer community not knowing anymore where polymer started and finished.
So about a couple of weeks ago, the team decided to break the polyfills into its own project. The polyfills have been transferred to WebComponents.org and renamed to webcomponents.js
- Thank you for the history lesson! Should I stop and learn web components and the 4 specs first?
I’m sure it will help you understand what is Polymer doing. Otherwise, when things don’t work you will not know if polymer is presenting a bug or is it just a spec limitation.
- Is Polymer Angular2.0 or anyhow related?
Short answer is Nop. Nevertheless, Angular team has made their intentions clear. They will start using web components in their 2.0 version. If you know Angular, a directive is a complex API to create custom components. With web components and polymer things get much more simple when creating custom elements.
There was a tweet from the AngularJS account even mentioning they might use polymer instead of web components directly. I think that would be a powerful idea but I’m not sure that’s going to happen.
Base Knowledge - WEB COMPONENTS
Let’s start from the beginning.
Here is a brief description:
- CUSTOM ELEMENTS: This specification describes the method for enabling the author to define and use new types of DOM elements in a document.
- HTML IMPORTS: HTML Imports are a way to include and reuse HTML documents in other HTML documents.
- TEMPLATES: This specification describes a method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents.
- SHADOW DOM: This specification describes a method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.
More details in http://webcomponents.org/
This page has come a long way tracking the status of each browser specs implementations. You will notice same old same old problems as always. Safari and IE do not share their plans that much.
Chrome and Polymer team have publicly said they have been working side by side with IE’s team on web components implementation. For the time being, the polyfills are doing a very decent job. You may find more details about them here.
Where do we go from here?
Polymer is not that old but it would be impossible to cover everything in one article or two. You can start at Polymer’s docs. These are quite good. Rob Dodson - part of the Polymer team - has been recording some polycasts. Check them out in youtube.
In the meantime - in future articles - I will investigate Polymer looking for solutions on the following challenges:
- Broken apart templates
- Two way binding
- One way binding
- Observing changes
- Unit testing
- Partial views
- List views and filters
- Backend Communication
- Extending Components
- API communication
- Component to component communication
- Mobile Support
- Responsive Design Support
Now it seems like I’m looking for a framework! Maybe… but those are some of the features Im looking for, I don’t care the name it holds…polymer, angular, ember, react…
In addition, I will also look at non specific matters such as:
- Learning curve
- Developer productivity
- Browser support