odoe

Ember for your ArcGIS API JavaScript

Blog Post created by odoe on Jul 1, 2015

esri-ember-glasses.png

Not too long ago, Jeff Jackson put up a blog post on using Ember with the ArcGIS API for JavaScript. This gives a pretty good rundown on how you can use EmberJS with the ArcGIS API for JavaScript. Ember itself has grown quite a bit recently, much of this growth could be said to with the popularity of ember-cli.

 

What is ember-cli? I'm glad you asked.

Ember-cli is a command line tool for scaffolding, testing and running applications built with Ember, the Ember way. You see, Ember is an extremely opinionated framework. You may be thinking, I don't need a framework telling me how to build apps! Yeah, that's kind of what a framework does. Some are a little more flexible than others. I'm not saying Ember isn't flexible, I'm sure you could write horrible apps in Ember like any other framework, but where it's opinionated way of doing things seems to shine is when you are working with teams of people. It's pretty nice to know that everything is being done the same way across the board.

 

Ember-cli is a great tool to help speed this process along. Think of it as Yeoman, but super sleeked out and with tons more features. And with multiple developers working on the same app, using ember-cli, you have a lot more harmony. A few commands here and there, you have built in generators and tons of addons. Which is where the ArcGIS API for JavaScript comes in.

 

You see, ember-cli utilizes a minimal AMD loader. What does minimal mean? It's not like RequireJS or Dojo loader, it's just a synchronous loader with a dictionary of modules. You can't just drop in a legit AMD loader to replace it. Your application will explode. Believe me, I have tried, many many variations of this scenario. It all ended in tears and flames. So what is someone to do? Build an addon!

 

Add it all on!

I went into more detail about the addon in a recent blog post, but what it essentially does is let you use RequireJS or Dojo AMD loader in parallel with the ember-cli loader. The AMD loader can be installed via bower or can be linked from a CDN. You can view the source code in the repo the ember-cli-amd addon here. The addon itself is not specific to the ArcGIS API for JavaScript, but by utilizing the CDN option for the AMD loader, you can use it to build Ember applications with the ArcGIS API for JavaScript.

 

If you want to try this out, you can install ember-cli and check out this demo repo that shows how to use it. The application for this repo can be viewed here.

 

What the addon does is look at the configuration for your application:

var app = new EmberApp({
  srcTag: 'https://js.arcgis.com/3.13/',
  amdPackages: [ // user defined AMD packages
    'esri','dojo','dojox','dijit',
    'put-selector','xstyle','dbind','dgrid'
  ]
});

 

That amdPackages option is part of the key. The addon uses esprima to analyze the code in your Ember app, find all modules that have a root found in the amdPackages option and will preload those modules via AMD. There is some other black magic it does to run the AMD loader in parallel with the ember-cli loader for any modules that might need to be dynamically loaded, but that's the gist of it. You can now build ArcGIS API for JavaScript application using the ember-cli.

 

I had lots of fun writing this addon and I learned a lot, I mean more than I really expected about Ember and ember-cli tooling. I have a pending PR to a dependency that fixes a couple of issues when your build the ember-cli app, but as of right now, it works. You can see notes in the README for details.

 

I'd highly recommend you try your hand at using ember-cli to build your ArcGIS API for JavaScript apps using the ember-cli-amd addon. I'll admit, Ember in general may have an odd learning curve, but I think ember-cli helps greatly in putting everything into context.

 

For more geodev tips and tricks, check out my blog.

Outcomes