<\/HEAD>
<\/P>
Af en toe vraagt iemand me hoe ze hun ArcGIS JS API-app moeten structureren. In mijn boek<\/A> raad ik de volgende app-structuur aan:<\/P><\/P>
app\/<\/STRONG><\/SPAN><\/P> |-- css\/<\/STRONG><\/SPAN><\/P> |-- js\/<\/STRONG><\/SPAN><\/P> |-- controllers\/<\/STRONG><\/SPAN><\/P> |-- services\/<\/STRONG><\/SPAN><\/P> |-- utils\/<\/STRONG><\/SPAN><\/P> |-- widgets\/<\/STRONG><\/SPAN><\/P> |-- main.js<\/STRONG><\/SPAN><\/P> |-- run.js<\/STRONG><\/SPAN><\/P> |-- index.html<\/STRONG><\/SPAN><\/P><\/P>Ik heb deze app-structuur voor veel projecten gebruikt en het werkte prima. Meestal zag mijn run.js<\/STRONG> er zo uit:<\/P>(function() {
'use strict';
var pathRX = new RegExp(\/2F[^\/2F]+$\/2F)
, locationPath = location.pathname.replace(pathRX, '');
require({
packages: [{
name: 'controllers',
location: locationPath + 'js/controllers'
}, {
name: 'widgets',
location: locationPath + 'js/widgets'
}, {
name: 'utils',
location: locationPath + 'js/utils'
}, {
name: 'services',
location: locationPath + 'js/services'
}, {
name: 'app',
location: locationPath + 'js',
main: 'main'
}]
}, ['app']);
})();<\/PRE><\/P>Dit werkt best goed. Maar één ding waar het geen rekening mee houdt, is het behandelen van de app en alle submodules als een app<\/STRONG>-pakket. Dit heeft meer te maken met het behandelen van mijn modules als pakketten bij gebruik van de CDN. Wat is het verschil?<\/EM> Fijn dat je het vraagt!<\/P><\/P>Laten we zeggen dat je je applicatie wilt bouwen. Misschien ga je de
ArcGIS optimizer<\/A> of esri-slurp<\/A> gebruiken, die trouwens een geweldig voorbeeld hier<\/A> heeft. Je wilt je applicatie als een eigen pakket behandelen. Wat bedoel ik daarmee? Laten we eens kijken hoe je de ArcGIS JS API gebruikt.<\/P><\/P>
require(['esri/map', 'dojo/declare'], function(Map, declare) {\/*cool stuff*\});<\/PRE><\/P>In dit geval is esri<\/STRONG> een pakket en dojo<\/STRONG> is een pakket. Er zijn andere pakketten inbegrepen in de API, zoals dgrid<\/STRONG>, dstore<\/STRONG>, en diijt<\/STRONG>. Dit komt omdat wanneer je het Dojo build system<\/A> gebruikt, het weet hoe het naar de bestanden moet verwijzen. Dus je kunt je applicatie natuurlijk bundelen als een eigen pakket, genaamd app<\/STRONG>. Je kunt het Sally noemen als je wilt, maar laten we aannemen dat app prima werkt.<\/P><\/P>Tegenwoordig structureer ik mijn app graag ongeveer zo.<\/P>index.html<\/STRONG><\/SPAN><\/P>dojoConfig.js<\/STRONG><\/SPAN><\/P>app\/<\/STRONG>
   |-- styles\/
   |-- models\/
   |-- services\/
   |-- utils\/
   |-- widgets\/
   |-- main.js
   |-- app.profile.js
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;pacakge.json
&''''''''''''''''''''''''''''''
Hier heb ik een dojoConfig-bestand dat wat basisinstellingen doet. Het zou er zo uit kunnen zien:
var dojoConfig = {<br/> async: true,<br/> parseOnLoad: true,<br/> isDebug: true,<br/> deps: ['app/main']<br/> }<br/>};
Oké, dit gaat ervan uit dat ik esri-slurp ga gebruiken om de API te downloaden en bower om andere afhankelijkheden te installeren. Als ik dit als CDN zou gebruiken, zou ik de eigenschap packages zo toevoegen:
packages: [{<br/> name: 'app',<br/> location: location.pathname.replace(/\\[^\\]+$/, '') + 'app'<br/>}]
Klaar.
Oké, even geduld. Wat is die onzin met app.profile.js? Dit bestand definieert enkele resourceTags voor ons app-pakket. Dit vertelt in feite het Dojo build system dat mijn pakket AMD gebruikt. Een collega vertelde me hierover, ik dacht dat ik het niet nodig had, maar het Dojo build system zeurt als je het niet hebt. Het ziet er zo uit:
var profile = (function(){<br/> return {<br/> resourceTags: {<br/> amd: function(filename, mid) {<br/> return /\.js$/.test(filename);<br/> }<br/> }<br/> };<br/>})();
Het bestand package.json laat het Dojo build system weten waar het app.profile kan vinden om te gebruiken.
{<br/> "name": "myapp",<br/> "version": "1.0.0",<br/> "main": "main",<br/> "description": "Demo app.",<br/> "homepage": "",<br/> "dojoBuild": "app.profile.js"<br/>}
Het bestand config.json gebruik ik al jaren in mijn ArcGIS JS API-apps. Het bevat in feite instellingen over hoe de kaart eruitziet of configuraties voor widgets. Ik kan dit bestand gebruiken of een webservice aanroepen om deze configuratiegegevens te krijgen. Je kunt een voorbeeld zien van hoe dat eruit kan zien hier. De rest van de applicatie is vrij basic. Momenteel is mijn applicatiestructuur sterk geïnspireerd door ember-cli, omdat ik dat de laatste tijd veel gebruik.
Echter, als ik React gebruik voor het bouwen van mijn UI, gebruik ik liever een meer op Flux gerichte structuur.
generator voor ArcGIS JS Apps, waarvan je een demo-app hier kunt zien. Het is nog vrij experimenteel, maar kan voor sommigen nuttig zijn.<\/P><\/P>De cmv-app heeft een interessante app-structuur die gebruikmaakt van een configuratiebasis vergelijkbaar met deze starterkit waaraan ik werkte.<\/P><\/P>De sleutel hier, of je nu mijn advies waardeert of niet, is om een structuur te kiezen die voor jou werkt. Je zou je main.js kunnen laten functioneren als de applicatiecontroller en gewoon een widgetmap hebben met al je UI-spullen. Nogmaals, zolang het voor jou werkt, ben je helemaal klaar.<\/P><\/P>Ik zal een vervolgblogpost schrijven die het volgende stap behandelt, namelijk het maken van een aangepaste build van je applicatie. Dat wordt leuk!<\/P><\/P>Voor meer geodev tips en trucs, bekijk mijn blog.<\/P><\/BODY><\/HTML>
