Opinions sur la structure de l'application EsriJS

ReneRubalcava

<\/HEAD>

<\/P>

De temps en temps, quelqu'un me demande comment structurer son application ArcGIS JS API. Dans mon livre<\/A>, je recommande la structure d'application suivante :<\/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>J'ai utilisé cette structure d'application pour beaucoup de projets et cela a bien fonctionné. Typiquement, mon run.js<\/STRONG> ressemblait à ceci :<\/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>Cela fonctionne assez bien. Mais une chose qu'il ne prend pas en compte est de traiter l'app et tous les sous-modules comme un package app<\/STRONG>. Cela concerne davantage le traitement de mes modules comme des packages lors de l'utilisation du CDN. Quelle est la différence ?<\/EM> Heureux que vous demandiez !<\/P><\/P>Disons que vous voulez construire votre application. Peut-être allez-vous utiliser le

ArcGIS optimizer<\/A> ou esri-slurp<\/A>, qui a un excellent exemple ici<\/A> d'ailleurs. Vous voudrez traiter votre application comme son propre package. Que veux-je dire par là ? Eh bien, regardons comment vous utilisez l'ArcGIS JS API.<\/P>

<\/P>

require(['esri/map', 'dojo/declare'], function(Map, declare) {\/*cool stuff*\});<\/PRE><\/P>Dans ce cas, esri<\/STRONG> est un package et dojo<\/STRONG> est un package.  Il y a d'autres packages inclus dans l'API, tels que dgrid<\/STRONG>, dstore<\/STRONG>, et diijt<\/STRONG>. Cela parce que lorsque vous utilisez le 

système de build Dojo<\/A>, il sait comment référencer les fichiers. Donc vous pouvez naturellement empaqueter votre application comme son propre package, appelé app<\/STRONG>. Vous pouvez l'appeler Sally si vous voulez, mais supposons que app fonctionne très bien.<\/P><\/P>Ainsi ces jours-ci, la façon dont j'aime structurer mon app est similaire à ceci.<\/P>index.html<\/STRONG><\/SPAN><\/P>dojoConfig.js<\/STRONG><\/SPAN>

var dojoConfig = {

• async: true,
• parseOnLoad: true,
• isDebug: true,
• deps: ['app/main']
}

générateur pour ArcGIS JS Apps, dont vous pouvez voir une application de démonstration ici. C'est encore assez expérimental, mais cela pourrait être utile à certains.<\/P>

<\/P>

Le cmv-app a une structure d'application intéressante utilisant une base de configuration similaire à ce starterkit sur lequel je travaillais.<\/P>

<\/P>

La clé ici, que vous aimiez mes conseils ou non, est de choisir une structure qui fonctionne pour vous. Vous pourriez faire en sorte que votre main.js fonctionne comme le contrôleur de l'application et simplement avoir un dossier widget avec tout votre contenu UI. Encore une fois, tant que cela fonctionne pour vous, tout est prêt.<\/P>

<\/P>

Je vais écrire un article de blog de suivi qui parle de l'étape suivante ici, qui est la création d'une build personnalisée de votre application. Ça devrait être amusant !<\/P>

<\/P>

Pour plus d'astuces et conseils geodev, consultez mon blog.<\/P><\/BODY><\/HTML>

RobertWinterbottom

Great article, We have been doing a lot of Flux and React lately and are using tons of open source build tools and the last thing for us to integrate is downloading the API from either the Optimizer or esri-slurp and plugging it into our build system. I think the examples here may be a good step in the right direction for us.

Cant wait to see the follow up on creating a custom build with Dojos build system, I am very curious to see how that all works since thats something I have never dug deep into.  We are currently using RequireJS optimizer for our builds just because of the simplicity of it.