Polymer with ArcGIS API for JavaScript

If you are a web developer, you’ve probably been waiting for Web Components to become the de facto standard for UI in your web apps. We all have. This recent talk from Forward 3 encourages using web components now, but not in the way you’d think. Basically almost every framework is using some form of components. Whether it’s Ember, Angular Directives, React Components or it could be argued even declarative Dojo with Dijits. The point being these frameworks recognize the value of components and we want them now, browser vendors be damned, we’re going to use them!

Polymer is probably the major library that allows you to develop web components for your applications. The 1.0 version landed not too long ago and it had some breaking changes if you were using earlier versions, in case you didn’t notice yourself ripping your hair out. So there’s little reason you can’t use it for your own ArcGIS API for JavaScript development. As a matter of fact, there is an esri-polymer library of components available from Esri UK. This is a nice collection of components that can help you compose your application. Old-school Flex developers might see a resemblance to MXML. Everything comes full-circle man.

I’ve been testing out the ArcGIS JS 4.0beta with various libraries and I’ve found that some features of the 4.0beta lend itself very well to Polymer. I am a fan of Accessors in the beta and it turns out that Accessors work out great as Models for Polymer components.

Let’s check out what a simple model to display map extents may look like. gist

Here, we’re using Accessor to create a model with some metadata. This basically tells the model that the extent property is an Extent.

This let’s us define a simple Controller that will just watch for changes on the model and update a view. gist

That’s not too tricky. We have a reference to a Component coming from a ViewProxy (this is just what I called it, maybe it could use a better name). Let’s look at the component now. gist

This ViewProxy is simply in charge of adding the required import statements to the page to use the Polymer component. It has an update method that will update the attributes of the component. Now let’s check out out Polymer component. gist

This is a pretty standard Polymer component. We’re even using some computed properties to adjust the precision of the extent values.

You can find the entire application on github.

As you can see, Polymer makes it pretty easy to start taking advantage of Web Components in your application development today. The beauty here is you can start composing these components into entire user interfaces to simplify your development workflow. Maybe just compose the UI and let a designer spruce it for you with some nice CSS styling.

If you want a more robust implementation, I highly recommend esri-polymer. But looking forward at ArcGIS 4.0 it’s nice to see how you could work with Polymer using Accessor to drive your updates.