Monday, September 9, 2013

The ESRI API for JavaScript/Dojo Build System Saga Continues...

This is my third post on this topic. First, there was discard layers. Then AMD threw a curve ball. And now a little bird told me that, starting at version 3.4, there is a special build of ESRI's API for JavaScript that is straight up minified AMD modules with no layers files. I'm not sure why this hasn't been more publicized. It's just a little minification away from releasing their source coded. And, as I will outline below, it allows you to build an honest-to-goodness layer file without any of the superfluous code that past versions required. This means that you can build all of the JavaScript code for your application including Dojo, ESRI and your own modules into a single, minified file.

To load the new AMD build of the ESRI API for JavaScript you just append "amd" onto the end of the url. For example, js.arcgis.com/3.6amd (3.5 requires something different because something is messed up with their build: http://js.arcgis.com/3.5amd/js/dojo/dojo/dojo.js). You should be able to just make this one change in your app and it should still work. You may need to explicitly require a few more ESRI modules now that you are not getting a bunch up front with their layer file. With this build you have to load each module individually. So it's going to slow down your load time significantly. It took our boilerplate from 128 requests to 337 requests to load the unbuilt, source version of the app. Needless to say that you should never use this url in production! In fact, I don't even use it during development because it takes so long to load.

The real usefulness in the new AMD build happens when you feed it through the Dojo Build System. The first step is to scrape it to your machine. In order to do this, I needed a list of all of the ESRI modules and other resources like images and .html files. I started with their argument aliases doc and then filled in the gaps by hand. It was easy to see what files I was missing since the build system returns errors for missing dependencies. After I had a good list of files, I used a bash script to pull the files down to my local machine. Here's the script:

The files cannot be fed directly into the build system as is. You'll notice that, in the script above, I had to fix some artifacts from their build (e.g. define('dep1,dep2,dep3'.split(','))...) as well as some paths to the dojo directories. After running this script you have the entire ESRI JavaScript API as separate modules that are ready for the build system. This is so ridiculously close to having the actual source code (just a bit of minification), I wonder if they are just going to release it in the future.

After getting the ESRI modules onto your computer, it's just a matter of pointing to them in your build profile and you are good to go.

You can see the entire set up for this process in AGRC's JavaScript Project Boilerplate. Hopefully the next blog post is about how awesome it is that ESRI has finally released their source code. ;)

6 comments:

  1. Another esri employee and I tried for almost a week to get an r.js based build to work in grunt from the AMD release. Unfortunately, the AMD release assumes a browser and the hacks and patches for building from the AMD release in node.js were just too much.

    I was able to make it work in a browser based environment with require.js and the AMD release. But you obviously don't get the images with that.

    However, there is a AMAZINGLY slick web optimizer coming out very soon which will make both this process that you went through and the web-based require js builder obsolete.

    ReplyDelete
    Replies
    1. Hey Matt - I've heard that a web builder is coming. I'm interested to see if it will fit my use case. Not sure I'm psyched about uploading my code to a web server as part of the build process. Can you give me any info on what the workflow will be?

      Delete
  2. Unfortunately, I'm not personally involved in the project and it is under active development. So what little I've seen thus far may or may not make it into any kind of public version. Therefore, I can't really provide those details.

    ReplyDelete
    Replies
    1. It was worth a try. :) Thanks for your comments.

      Delete
  3. Scott, this is brilliant, I wrestled with the grunt dojo builder and esri's lib for months. I'm excited to implement this process and get your results. I'll be sure to check back with the progress and eventual success story. Cheers!

    ReplyDelete
    Replies
    1. I'm glad that this has been helpful to you. Hope to hear back about your experience.

      Delete