Guest Author: Shaun Netherby.
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.
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.
If you’re curious, Dave and I created a tutorial for how to get started creating standalone Polymer components. Check out our tutorial.