Turning Sphagetti codes in to Modular structure

[GaneshSolai_Sambandam]

Hi GIS folks,
I started building web application using ARCGIS Javascript and slowly started adding new functionality into my web application.

As my coding is getting bigger and bigger into my application, it is getting to stage where it is very difficult to look at my code.

Can anyone please some provide methods / techniques through which we can organize our code in a modular way, so that allows easy debugging.

I do know that we organize our code in a separate Javascript file for each functionality / feature added on to my application, but, just wanted to know, is there a right way of doing / organizing code better.


And, also if you can point me to the right direction with some sample application, will be really appreciated.

Thanks in advance.


Regards
Ganesh

[JonathanUihlein]

Hi ganeshssac

I ran your code locally and it successfully created a point with a red, semi-transparent square.

What is the error message you are receiving in the console?
If no errors are appearing, wrap the problematic code in a try/catch and check again for errors.

[GaneshSolai_Sambandam]

Hi Jon
The function showLocation() is referenced with the Script tag on the HTML page as


     <script type="text/javascript" src="JS/Geocoding/Geocoder.js"></script>

Can you create a separate Javascript file and see whether the code works. What I was try to do is arranging my codes in  a
modular way so that I can quickly go to that function, if any there is issue with that function or if want to add lot more functionality.


As you said, if i add the function showLocation() on the same HTML page, the code works fine and it doesn't work when I try to arrange them using a script reference as stated above.

Regards
Ganesh

[JonathanUihlein]

Well, if you think about it, having that function in another file, outside of the require block, means it doesn't have access to DOJO and ESRI functions because of scope.

For example, if the following function is in another file, there is no context for what a SimpleMarkerSymbol and a Graphic are. So, logically, this will fail.

 
function showLocation(evt) {

try{
    map.graphics.clear();
    var point = evt.result.feature.geometry;
    var symbol = new SimpleMarkerSymbol().setStyle(
      SimpleMarkerSymbol.STYLE_SQUARE).setColor(
      new Color([255, 0, 0, 0.5])
    );
    var graphic = new Graphic(point, symbol);
    map.graphics.add(graphic);

    map.infoWindow.setTitle("Search Result");
    map.infoWindow.setContent(evt.result.name);
    map.infoWindow.show(evt.result.feature.geometry);

  }catch(e){
  console.log(e);
  }
}

Error Message in console:

ReferenceError: SimpleMarkerSymbol is not defined

If you *really* want to move functions that require DOJO into other files, create a Class, Widget or Module and call it via the DOJO loader.

Check out the following tutorials:
https://developers.arcgis.com/en/javascript/jstutorials/intro_javascript_classes.html
https://developers.arcgis.com/en/javascript/jstutorials/intro_custom_dijit.html

There are also some great articles on the DOJO blog.

Otherwise, keep the function within your require block.

[GaneshSolai_Sambandam]

HI Jon
thanks for your help.

But, If you look at Ipeebles reply in relation to this thread,  he managed to organize his code in a modular way and he has also used multiple javascript files which are referenced via script tag. He has also uploaded his sample application in which he had one init() function in the main HTML file (which has got all the modules for require block)  and the rest of the functions related to his application was referenced in a separate Javascript file.

Ipeebles has used the following script tag to reference in his application
<script type="text/javascript" src="js/editing/EditorCutFeatures.js"></script>
<script type="text/javascript" src="js/editing/EditorDeleteFeatures.js"></script>
<script type="text/javascript" src="js/editing/EditorModifyFeatures.js"></script>
<script type="text/javascript" src="js/editing/EditorTemplatePicker.js"></script>
<script type="text/javascript" src="js/find/FindNeighborhood.js"></script>
<script type="text/javascript" src="js/find/FindEngineeringProject.js"></script>
<script type="text/javascript" src="js/geocoding/FindAddress.js"></script>
<script type="text/javascript" src="js/geocoding/FindStreet.js"></script>


If this is not possible, then how could he able to run his application by referencing them in a separate jsfile.

Any help on this would be really appreciated. I do appreciate you want me to create a class or module to organize them, but, I don't think Ipeebles has done it that way.

[JonathanUihlein]

If this is not possible, then how could he able to run his application by referencing them in a separate jsfile.

If you look at his code, you will notice he is using the legacy style of DOJO, while you are using AMD.

AMD is better; DOJO is dropping legacy support in version 2.0 as well.

[GaneshSolai_Sambandam]

HI Jon,
So,  do you mean with the AMD style, organizing the codes in modular way wouldn't work.   

If this is the case, then, when we build large applications for any organization, how would they organize them to find errors and debug them. It would really be a mess with full of sphageti codes and if the developer has left the organization and any new comer working on this application, will get totally confused.

I don't want to do such kind of mess in my application, and I need your help to organize them in a modular way.

[JonathanUihlein]

You'll have to modularize your application by creating DOJO dijits(widgets) or Classes, and including them as packages in your dojoConfig object.

Check out these two tutorials on the subject:
https://developers.arcgis.com/en/javascript/jstutorials/intro_javascript_classes.html
https://developers.arcgis.com/en/javascript/jstutorials/intro_custom_dijit.html