We have used Google Chrome throughout this book as it provides some great developer tools and HTML inspection tools. We think Mozilla too, is a great browser for development purposes.

Applications developed in this book are hosted using IIS Express. IIS Express is a lightweight webserver mainly used for hosting .NET web applications. Though, all the projects in this book are developed using pure HTML, CSS, and JavaScript, we will be using the Esri .NET resource proxy to access the ArcGIS online secured content and avoid cross domain issues.

Readers can install IIS Express either by installing Web Platform Installer or directly from the Microsoft downloads page, as illustrated in the following steps:

The choice of IDE for developing JavaScript code is wide, and experienced developers already know what they need to use. We have used Brackets throughout this book as is our preferred choice of IDE.

First things first. We need to reference the API to develop an ArcGIS JavaScript API-based application. Esri is the organization that owns the API, yet the API is free and available for public use. The latest version of the API as of March 2016 was 3.15 and the corresponding dojo toolkit version was version 1.10.

The following libraries are the only ones you may probably need to reference to use ArcGIS JavaScript API's capabilities as well many dojo toolkit packages, such as core dojo, dijit, dgrid, and so on:

<link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">

<script src="http://js.arcgis.com/3.15/"></script>

Refer to this link for complete documentation of the ArcGIS JavaScript API—https://developers.arcgis.com/javascript/jsapi/.

When you visit the preceding URL, you will see a web page providing complete documentation of the API with multiple tabs such as API Reference, Guide, Sample Code, Forum, and Home.

The API reference lists all the modules available under the API as details, properties, methods, and events available for each module. The left pane groups most of the modules for easy reference. For example, the grouping named esri/layers has multiple modules that inherit from it. The following screenshot gives a snapshot of how the different modules that inherit from esri/layers are grouped:

The Guide section provides detailed instructions on important topics such as Working with the Query Task, Working with ArcGIS Online Widgets, and Working with symbols and renderers. The following screenshot shows a detailed guide on setting map extents:

The Sample Code tab is yet another useful section with hundreds of sample applications, which are used to demonstrate different concepts in the API. The best part of these sample codes is that they come with a sandbox facility, which you can use to play around with the code by modifying it.

The Forum tab redirects you to the following URL—https://geonet.esri.com/community/developers/web-developers/arcgis-api-for-javascript.

The GeoNet community forum is a great place to ask your questions and share your solutions to questions from developers like you.

Due to its close integration with the dojo framework, a working knowledge of the dojo toolkit is required and the reference documentation for it can be accessed at http://dojotoolkit.org/reference-guide/1.10/.

If you've observed the code structure, it may look as follows:

If you aren't familiar with this pattern of JavaScript coding, it is known as the AMD pattern of coding, and the ArcGIS API for JavaScript emphasizes on using this pattern of coding. In the initial chapters we will be introducing a lot about this to get ourselves familiarized with dojo and AMD. From the code structure you might have understood that the code requires certain modules and the function that loads these modules requires that they are in the same order. Some of the modules in our case were Esri modules (esri/..) and dojo modules (dojo/..). If you're wondering whether you could require custom defined modules, the answer is absolutely yes, and this will be a major part of our exercise in this book.

The highlighted line in the code forms the crux of our jumpstart code:

        var map = new Map("mapDiv", {
          basemap: "national-geographic"
        });

The map module accepts two arguments. The first argument is the div container, which will contain the map object. The second argument is an optional object, which accepts a lot of properties that can used to set the map's properties.

In our jumpstart code, the basemap property in the optional object sets one of the Esri's provided basemap code named national-geographic to be displayed as the background map. We implore you to experiment with the other Esri provided basemaps, such as the following: