:::: MENU ::::

Building in Polymer

Guest Author: Shaun Netherby.

If you’ve ever had to create something complex for the web, you may understand how difficult it can be to manage the JavaScript, HTML, and CSS in a clean way. I went through this challenge and came out the other end using Polymer.  Here is the story.

Big Dave and I were working on an email builder. The thing had to look nice. It had to allow us to drag and drop blocks of text and images smoothly. It had to have some slick animation to preview what these blocks would look like. It had to have different controls for modifying these blocks. We wanted to be able to reuse this builder anywhere we needed to, and we had the freedom to use whatever web technology fit our needs. We wanted to build something awesome.

So we made with the code. We investigated and spiked on a bunch of different drag and drop JavaScript libraries, and eventually settled on ole’ reliable, jQuery UIWe poured some div soup into an HTML file and started churning out functions and globals into a JavaScript file. We got to a point where we had some basic drag and drop building functionality. Then we started iterating. We added some preview animation. We added some controls. We added responsive email rendering. We started refining the drag and drop interaction, finding and fixing oddities.

At this point, we had a ton of JavaScript, and the HTML was starting to blow up too. We had a lot more controls and blocks and functionality that we needed to add to this thing, and it was already getting difficult to maintain. We knew there are a bevy of options: Angular, Ember, Knockout and so on. We knew that there was already a movement to go to Polymer in our company, so we figured we would give that a shot.

We dove straight in. The first thing we realized is that the world of jQuery does not fit into the world of Polymer. Why? Encapsulation. Shadow DOM. jQuery is great when you want to easily reach and grab and touch everything everywhere on the page. Polymer drives on the principles of encapsulation. It uses shadow DOM to shield custom elements from exterior CSS and bleeding in, but this also shields most jQuery selectors from prying in. It’s a different world than that of jQuery, a world that falls more in line with OOP. A cleaner world, I would say. This forced us to change how we approached the problem in the code.

Without jQuery, we couldn’t use jQuery UI, so we had to find a different solution for drag and drop. We looked back through our previous options. Half of them used jQuery in their implementation, which meant they were out, and the other half simply didn’t work with Shadow DOM. The best we found was to use HTML 5 drag and drop. HTML 5 drag and drop is pretty flakey and inconsistent across browsers, but we were able to get it to work pretty well.

The next challenge was rich text editing. We were using CKEditor originally, but we couldn’t even import the JavaScript for it without errors and failure. These editors were having the same problems as the drag and drop libraries, they either use jQuery or they just don’t work. The closest we found to working was ScribeIt worked incorrectly because of how it used the Selection API and a few chrome bugs. Fortunately Scribe is open source so I was able to fix it and get that pulled in.

There was a lot of cost in moving to Polymer, but it is reaping some great rewards. Our builder is now a set of encapsulated components rather than a jumble of JavaScript. We can take advantage of core-elementsFollowing the pattern of the core-elements gives us a great framework. Each component has its own git repository. Dependencies and installation are managed by bower. Each component has slick documentation and a demo page. We have web-component-tester for unit tests. We even use GitHub pages to host our documentation and demos. We don’t have div soup! It’s a great way to work. 

If you’re curious, Dave and I created a tutorial for how to get started creating standalone Polymer components. Check out our tutorial.

So, what do you think ?