My struggle to migrate to AMD style

[SteveCole]

I don’t know how effective this post will be but I’m having a real hard time understanding how to migrate my projects previously written using the legacy style Dojo over to the AMD framework. First, let me state that I DO understand the structure of ESRI’s AMD styled samples where the JS code is either all in the HTML file or as a single, standalone JS file. I’ve seen and read this ESRI blog post. My comprehension goes away when I look at my own projects where I have developed my code across multiple JS files.

I’m attaching a PDF that is typical of how one of my legacy projects is structured. I want to focus the discussion at a higher level so the nitty gritty code is included.  Anyways, I have one JS file (initMap.JS) that contains the initialization function along with all the various dojo.require() statements. I might also have another JS file that contains pure JS functions (shown here as jsFunctions.JS) that do things such as read or write browser cookies, test for functionality, format dates, etc.

Lastly, I’ll also have one or several additional JS files which focus on a specific topic or functionality. In my example here, mapFunctions.JS contains a function which zooms the map to a selected feature and two functions which format the content for a layer’s infoWindow. The reportFunctions.JS file generates an HTML report in a new browser window and contains four functions which basically run sequentially (execute->buffer->query->process results).

I feel that it’s pretty straightforward to convert initMap.JS to an AMD style JS file. But what about mapFunctions.JS and the other JS files? I’m assuming that I need to convert these into “modules” but I don’t understand some aspects such as how I set up a file like my reportFunctions.JS which contains functions that call each other within the JS file. And where do external JS libraries such as JQuery fit into all of this? Do I need to do anything AMD related or just add a link in the HTML header as before?

I bought the book on ArcGIS Web Development by Rene Rubalcava and I feel that it does help me slightly but not all the way (probably because his coding style is different than the way my JS has developed). I kinda understand Rene’s technique of going from RUN.JS to MAIN.JS (pgs 80-84) but not much thereafter. To borrow a phrase from Apple, maybe I’m “not doing it right.”

I might not be too far from that “a-ha!” moment but I’m currently stymied.

[ChrisSergent]

I am right there with you. I am going to have to migrate three applications to AMD as they were developed with legacy. I plan on sharing them as I work on them as I will most likely have a lot of questions myself.

[SteveCole]

I have two- one public facing and the second is internal. Anything new I develop uses the AMD style but is still constrained to a one JS file structure. I need to figure this out so I can really move forward. ESRI has reassured us that the older APIs will still exist and remain available but I'm real wary about trusting that.

[ChrisSergent]

I contacted the help desk about one of my projects and I was told that support would end for legacy apps. That's actually what prompted me into planning project migration to AMD this year. I only develop with AMD right now and use one JS file as well.

[KristianEkenes]

Migration can be tricky, especially with multiple JS files. In reference to a comment you made in your original post:

But what about mapFunctions.JS and the other JS files? I’m assuming that I need to convert these into “modules” but I don’t understand some aspects such as how I set up a file like my reportFunctions.JS which contains functions that call each other within the JS file.

I agree that defining your own modules would be the way to go. And, yes, you can call functions from other functions defined within the same module. I found these tutorials to be useful when learning how to do this:

Writing a Class | Guide | ArcGIS API for JavaScript

The Dojo Loader — The Dojo Toolkit - Reference Guide

Introduction to AMD Modules - Archived Tutorial - Dojo Toolkit

Classy JavaScript with dojo/_base/declare - Archived Tutorial - Dojo Toolkit

These come directly from the ArcGIS JavaScript API Guide and Dojo Toolkit pages. There may be other useful blogs that address this topic as well.

I'm not sure about JQuery integration with this, but I've been able to accomplish all of my tasks, functionality, requests, etc, using Dojo. Sorry this isn't a complete answer to your question, but hopefully you'll find the tutorials in the links above useful.

[ReneRubalcava]

Hey Steve,

I was writing a reply, but it got kind of big and this was a topic on my TODO for GeoNet blog posts anyway, so I put a post up. Let me know if that helps at all or any bits that are still unclear.

How you organize the files is preference, so my you have a utils folder or a widgets folder, maybe organize it by function, what Ember refers to as Pods. This is the organizational structure I prefer, but again, in general, it's a preference.

Embrace your AMD modules

If that's still unclear, if you have a small sample legacy project, I'd be happy to go through it and try to document the migration. It would be a good exercise in documenting the process.

Thanks.

[SteveCole]

Thanks Rene Rubalcava​ for chiming in and for writing the blog post. I think every little bit of information helps so the greater the searchable archive there is, the better. For me, personally, the meat of your blog post is an aspect of the AMD migration that I think I roughly understand (well- up to the point of actually beginning the code migration).

I'm still unsure about some specific aspects of migration that I will need to address:

1. What to do about "third party" JS libraries such as Jquery, Highcharts, date.js, etc? Do you just load them as always via HTML <script> tags or do you need to do something else for AMD?
2. Dojo Modules are really class modules so they end up being an object with properties and methods. But this isn't necessarily what's going on in my legacy JS file. I've grouped various functions into one file but only because they concern themselves with a specific "topic", NOT an object. In the world of AMD, you end up with this:

define(function(){
  var privateValue = 0;
  return {
  A: function(){
     //some work
  },


  B: function(){
     //some work
  },


  C: function(){
     //some work
  }
  };
});

But what if function A needs to call function B, and function B then needs to call C? How is that coded?

Again, I point to my original post. I have a legacy JS file which generates a report. The initial function is called by a user button click located inside an infoWindow. That initial function passes the selected feature to another function which generates a buffer based on an analysis buffer. That result is then passed to another function which then processes the results. As you can see, I'm three functions deep at this point. I'm not clear how to migrate this process to AMD.