I’ve just completed my first Polymer app and have mixed feeling about the experience. Regulars to this blog and the associated site know that I’m a great fan of Google stuff and like to try out most things, even though I’m coming a little late to the world of web components. This is not going to be a technical post, but more of a ‘I’m glad that’s over (but cant wait to do it again)’ kind of post.
The Polymeric way
I started by trying to do things is as ‘polymeric’ a way as possible – avoiding any JavaScript that wasn’t in support of creating Polymer Elements, but bit by bit I found myself giving up and creating an exception here and an exception there.
Elegance and simplicity
Although I’m really excited by the concept of the elegant structure an app can have when its composed entirely of components created by you or others, the whole business was a series of ‘gee whiz moments’ on the realization that unlikely and brilliant things can be so easily and satisfyingly done followed by hours of exasperation when things didn’t work either as advertised, or more often as I understood them to be described.
Hackery and complexity
Developing in Polymer often feels like you are caught up in the middle of a massive hack, with browsers that don’t quite support everything that’s needed yet, long lists of things to include and strangely complicated workarounds for everyday problems that don’t quite fit into the world of components.
WTF
So you have your app nicely structured into components, which plug together very simply to create a very clean end product. However, some simple problems apparently need complex solutions. Take for example, the idea of needing to share global values amongst components – a fairly common requirement for app settings and the like. The recommended workaround is to create another component as below and include that in each of your components that need to have access to these global values. There is a fairly length description of how to use this technique.
<polymer-element name="app-globals">
In principle this is all fine, but then you want to create a page that allows you update app settings, and to store them in local storage. Trying to be as Polymeric as possible I would use the core-localstorage component and take advantage of the automatic storing of changed settings. I struggled with the interplay of global variables in multiple components and local storage in one for a long while, getting nowhere except frustrated, and suddenly noticed this.
core-localstorage automatically saves the value to localStorage when value is changed. Note that if value is an object auto-save will be triggered only when value is a different instance.
10 minute job?
Essentially a global object with settings that can be changed, have default values, and be stored in local storage is a 10 minute problem in Vanilla JavaScript. I had spent two days trying to figure out how to make these Polymeric approaches work together and no doubt if I had even partially understood this article about binding and inter component communication it would have made sense – but life’s too short ,and in the end I just went for a simple vanilla JS solution. I came across a lot of things like this, but also found some simple solutions problems that I was trying to make unnecessarily complex.
Material design
What did work brilliantly was of course all the Material Design paper element, and a special mention to the core-shared-lib component for its jsonp implmentation.
Compatibility
I’m also really impressed by the work the Polymer team have done with compatibility shims across browsers. I developed it on chromebook and so far it works perfectly on all Chromes, Safari on Ipad and Mac, and Firefox with only minor rendering issues. IE just hangs with no explanation or error or ability to enter the dev tools, so I’m not even going to bother.
Summary
In summary what I like about Polymer is the conceptual elegance, the simplicity of data binding to DOM elements and the relatively hassle free cross browser shims. What I dislike is the spaghetti of dependencies, the complexity and learning curve associated with cross component communication and general feeling of hackery after spending a little time with it.
What was your first experience like?
I will definitely use Polymer in the future, and next time it should be easier. I recommend you give it a go. What was your impression after your first Polymer App?
