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!
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.