Converting to AMD

[deleted-user-yA_w_FC9FKe5]

So I need some serious help as I've created a new project that seems to be working well but I need to convert it to AMD.  I think it is half AMD and half old style.  I see this as a huge undertaking on my part as this is still all really new to me but I would like to be up to date.  Can someone take a look at this code and help me get started.  I'm willing to purchase an alcholic beverage or two to someone who can do this for me.  I could pay this dept up at the ESRI conference.  I think this would be simple for those of you who code in Javascript all of the time.

http://jsbin.com/tudab/1/

Thanks,

Michael

[ErwinSoekianto]

I would take up this challenge if I were going to UC this year. 😉

The easiest way to get started is to put everything under script tag inside require([], function(){}
add all the dojo.require and suggested argument alias, https://developers.arcgis.com/javascript/jsapi/argument_aliases.html

then start fixing the code line by line, to use the argument alias of the module instead of the full name

[JohnGravois]

hi michael,

first, i recommend checking out this blog post.

in general, in order to fully convert your own code to AMD, you would need to remove all of your existing calls to dojo.require() and place all of your application code within a require callback (or several) which loads the same modules. afterward you will then reference what you need using aliases instead of relying on global namespace objects.

for example:

dojo.require("esri.dijit.LocateButton");
..
geoLocate = new esri.dijit.LocateButton({map: map}, "LocateButton");

//becomes
require(["esri/dijit/LocateButton", ...), function(LocateButton, ...) {
  geoLocate = new LocateButton({map: map}, "LocateButton");
}

[SteveCole]

hi michael,

first, i recommend checking out this blog post.

I know this is ESRI's default response and I will admit that the blog post is helpful. But let's be honest- it's the equivalent to a Hello, World! programming example. I understand the root of what's presented in that blog post but I get completely lost when it comes to applying that to my legacy apps which have 1000s of lines of code spread across multiple JS files.

What *I* would find helpful would be an example of a basic app (but just a tad more robust than any single JS API ESRI sample) that's written in legacy AND AMD format. At least with that, I can have both versions open and study the code side by side to truly understand how to migrate my code to AMD.

Steve

[JohnGravois · Accepted solution]

hi steve,

i've attached a zip file of both legacy and AMD versions of 3 different applications that are a little more complicated than I used for my blog.  hope you find reviewing them helpful.

[deleted-user-yA_w_FC9FKe5]

Augh erwi7452 that stinks.  I could use your help and it would be cool to meet a fellow GIS Javascript person!

Thanks for all of the resonses.  I have to agree that this is not very simple and I honestly don't know why it changed.  It seemed much easier and simplier to follow using the old code.  I stripped out all of the code and was planning to put it back in block by block.  However, just getting the freaking map/home/locate buttons to work is frustrating. 

What am I doing wrong below?

require([" "esri/map",esri.dijit.LocateButton",  
"esri.dijit.HomeButton"
], function (Map, LocateButton, HomeButton){

        map = new Map("map", {
        center: [-98.258, 38.236],
        zoom: 4,
        basemap: "streets"
          });

      var home = new HomeButton({map: map      }, "HomeButton");      home.startup();
        });

[JohnGravois]

require([" "esri/map",esri/dijit/LocateButton", 
"esri/dijit/HomeButton"
], function (Map, LocateButton, HomeButton){

[deleted-user-yA_w_FC9FKe5]

Tried this

     require([
        "esri/map",
        "esri/graphic",
        "esri/tasks/FindTask",
        "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/Font", 
        "esri/symbols/TextSymbol",
          
        "esri/Color",
        "dojo/on",
        "dojo/dom",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojox/grid/DataGrid",
        "dojo/data/ItemFileReadStore",
        "dijit/form/Button",
        "dojo/parser",
          
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!",
  "dojox/widget/TitleGroup",
  "dijit/layout/AccordionContainer",
  "dijit/layout/TabContainer",
  "esri.dijit.Bookmarks",
  "esri.dijit.LocateButton",   
  "esri.dijit.HomeButton"  
      ], function(
        Map, Graphic, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Font, TextSymbol,
        Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser, BorderContainer, ContentPane, domReady, TitleGroup, AccordionContainer, TabContainer, Bookmarks, LocateButton, HomeButton
      ) {      

        
        map = new Map("map", {
        center: [-98.258, 38.236],
        zoom: 4,
        basemap: "streets"
          });


 var geoLocate = new LocateButton({map: map}, "LocateButton");
 var  home = new HomeButton({map: map}, "HomeButton");
    
//var home = new HomeButton({map: map      }, "HomeButton");      
//home.startup();    

        });

[deleted-user-yA_w_FC9FKe5]

I figured out the problem

  "dijit/layout/TabContainer",
  "esri.dijit.Bookmarks",
  "esri.dijit.LocateButton",  
  "esri.dijit.HomeButton"

Need to remove the dots and put slashes.  At least I made a little progress today.  😉

[JonathanUihlein]

I figured out the problem

        "dijit/layout/TabContainer",
        "esri.dijit.Bookmarks",
        "esri.dijit.LocateButton",  
        "esri.dijit.HomeButton"

Need to remove the dots and put slashes.  At least I made a little progress today.  😉

John posted this solution earlier in the thread. You may have missed it. The slashes were in red.

Also, from looking at your code, I strongly recommend that you actually sit down and read the documentation.
You are making mistakes that are covered in the very first tutorial.

https://developers.arcgis.com/javascript/jstutorials/intro_firstmap_amd.html