BUILD JAVASCRIPT APPLICATION FRAMEWORK WITH ARCGIS API

In previous documents I explained how you can create a powerful framework in Silverlight to make life easier of doing  GIS development around the ArcGis Silverlight API. The framework was achieved by using some key technologies from Microsoft.

Last week I attended the Microsoft TechDays 2012 at Brussels, and it becomes clear that with the introduction of Windows 8 the future is uncertain about  using plug-ins (Silverlight and Flex)  in web browsers. In Windows 8 Microsoft makes the development with JavaScript with HTML5 a first class development platform that will be covered in Visual Studio 2011.

In the Silverlight framework I used the MVVM pattern together with PRISM to use the patterns IoC and DI.  The Silverlight application was a somewhat light ArcGis desktop based on dynamically adding and editing layers based on new technology introduced in the version 10. I also illustrated how you can add some advanced editing functionality in an easy way.

In the JavaScript application that I introduce, I will start from the same application functionality allowing dynamic map to be used and feature editing on an ArcGis server.

The requirement for this applications will be as followed:

·         Configuration: The basic configuration file used is exactly the same as for the Silverlight application. That means I will use an XML file that will contain all the configuration data for the application. However a REST service will be used to expose the contents as a JSON object to the client. Secondary  XML configuration files will also be exposed as JSON objects. I use WCF services in .NET that will take into account this transformations. You can do the same in JAVA or create the JSON files yourself before using them at the client side.

·         Libraries: To make programming in JavaScript a lot easier, some important libraries will be used to help the conversion of some Silverlight patterns into JavaScript:

o   JQuery: This important library will be used as support for handling of the DOM and some utility functions.

o   KnockoutJS: This library will handle the MVVM. Because a lot of the Silverlight application is based on the use of MVVM, this will make the transitions of the viewmodels a lot easier.

·         GIS classes: The core of the Silverlight application consists of services that are implemented using Silverlight Classes and encapsulate the ArcGis Silverlight API functionality.  The ArcGis JavaScript API consist of the same functionality of the Silverlight API because a lot of functionality is based on the REST services at the ArcGis Server. Converting these services in  JavaScript classes is a lot simplified because of the almost one to one relation in functionality. The GIS classes will be split into different JavaScript files.

·         Components: In the JavaScript application, the notion of separate components is not used. The whole application will be implemented on one HTML page. The viewmodels are implemented in separate JavaScript files. There will be communication mechanism used between different viewmodels. In Silverlight I used the eventaggregator class of the Prism framework, in JavaScript I create an equivalent of this functionality (publish and subscribe of events).

·         Bootstrapper: An important role was attributed to the bootstrapper class of the PRISM framework. In JavaScript I will use the ready function of JQuery to achieve this pattern. The bootstrapper will be responsible for the creation of all GIS and non-GIS objects used in the application by using some kind of IoC.

·         HTML page: The idea is to have a page with very little JavaScript code embedded on the page as I did with the Silverlight application. Doing so, you can change the look and feel without having to change something in the viewmodel code or in the GIS classes. By limiting the creative construction of a HTML page, it is much easier supporting all kind of web enabled devices.

The application architecture should look similar to the next picture.

The viewmodel JavaScript code should contain no references to the ArcGis JavaScript API. By doing so, less experienced ArcGis developers could program with this concept. The GIS libraries hides the more complex functionality of the asynchronous processing and presents the results in a more workable way to the viewmodel.

This is the road book for the development of a JavaScript implementation of a simple ArcGis Desktop application for viewing an editing of GIS data. In the next document I will show you the creation of the map with a legend using the above architecture.