using frameworks with arcgis api for...
TRANSCRIPT
![Page 1: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/1.jpg)
Using Frameworks with theArcGIS API for JavaScript
Rene Rubalcava
@odoenet
![Page 2: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/2.jpg)
Options available to you
Builders
TemplatesConfigurable AppsApps
App StudioWeb AppBuilders
![Page 3: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/3.jpg)
TemplatesEasy to useConfigurableIntegrates with Portal
![Page 4: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/4.jpg)
AppsPrebuilt with specific purpose ( , )Some provide extensibility ( )
Collector NavigatorOps Dashboard
![Page 5: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/5.jpg)
Web AppBuilderCan be thought of as its own frameworkjimu - the Lego framework
![Page 6: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/6.jpg)
You need more?Or do you want more?
![Page 7: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/7.jpg)
Dojo can do the job
![Page 8: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/8.jpg)
Dojo already did that[JSConfUS 2013] Peter Higgins: #dadt (Dojo already did ...
![Page 9: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/9.jpg)
Framework Madness
![Page 10: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/10.jpg)
What problems do they solve?Common theme is
Web Components are not standardized yetSome data binding mechanism
Web Components
![Page 11: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/11.jpg)
What makes 4.0 easier to use?AccessorsView Models (crème de la crème)Maps and Views (SceneView, MapView)
![Page 12: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/12.jpg)
React
![Page 13: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/13.jpg)
ReactNot a frameworkReusable, composable componentsJSX - declarative
![Page 14: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/14.jpg)
const view = new MapView({ container: document.getElementById('viewDiv'), map, center: [-100.33, 25.69], zoom: 10, ui: { components: [] } // empty the UI }); // Render the React Components ReactDOM.render( <div> <Zoom view={view}/> <Attribution view={view}/> <BasemapToggle view={view} secondaryBasemap={'dark-gray'}/> </div>, document.getElementById('appDiv') );
![Page 16: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/16.jpg)
Angular 2
![Page 17: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/17.jpg)
Angular 2Directives are Web ComponentsDependency InjectionRxJS 5
![Page 18: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/18.jpg)
import { Component } from 'angular2/core'; import { MapComponent } from './map.component'; import { HomeComponent } from './home.component'; @Component({ directives: [MapComponent, HomeComponent], selector: 'my-app', template: ̀ <div> <esri-map #mapView (viewCreated)="homeButton.setView(mapView.view)"> <esri-home #homeButton></esri-home> </esri-map> </div> ̀ }) export class AppComponent { }
![Page 20: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/20.jpg)
Well that's not going to work for usSystem.import('./local-module.js');
System.import('https://code.jquery.com/jquery.js');
![Page 21: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/21.jpg)
Angular 2Don't fight the loader, work around it
![Page 22: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/22.jpg)
Angular 2function register(name: string, mods: any[]) { System.register(name, [], exp => { return { setters: [], execute: () => { mods.map((mod: any, idx: number) => { exp(moduleName(deps[idx]), mod); }); } } }); } require(['esri/Map', 'esri/views/MapView'], function(...modules) { register('esri-mods', modules); System.import('app/boot'); });
![Page 24: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/24.jpg)
Angular 2
![Page 26: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/26.jpg)
Ember
![Page 27: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/27.jpg)
EmberThe Ember Way
Ember way or get out the way!Focus on Web Components
Robust add-on systemember-cli
![Page 28: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/28.jpg)
EmberAlso had some challengesUses it's own synchronous AMD-like loaderDoesn't like RequireJS or Dojo loaders
![Page 30: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/30.jpg)
Emberember install ember-cli-amd
var EmberApp = require('ember-cli/lib/broccoli/ember-app'); module.exports = function(defaults) { var app = new EmberApp(defaults, { amd :{ loader: 'https://js.arcgis.com/4.0beta3/', configPath: 'config/dojo-config.js', packages: [ 'esri','dojo','dojox','dijit', 'put-selector','xstyle','dgrid' ] } }); return app.toTree(); };
![Page 31: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/31.jpg)
EmberMap as a service
// app/services/map.js export default Ember.Service.extend({ map: null, loadMap() { let map = this.get('map'); if (map) return map; let graphicsLayer = new GraphicsLayer({ id: 'graphics' }); let tileLayer = new VectorTileLayer({ url: "https://www.arcgis.com/sharing/rest/content/items/f96366254a564adda1dc468b447ed956/resources/styles/root.json" }); map = new Map({ layers: [tileLayer, graphicsLayer] }); // no display this.set('map', map); return map; } } });
![Page 32: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/32.jpg)
EmberMap component
//app/components/esri-map.js export default Ember.Component.extend({ classNames: ['viewDiv'], mapService: Ember.inject.service('map'), didInsertElement() { let map = this.get('map'); if (!map) { map = this.get('mapService').loadMap(); this.set('map', map); } }, createView: function() { let map = this.get('map'); let view = new MapView({ map, container: this.elementId, center: [-100.33, 25.69], zoom: 10 }); view.then(x => this.set('view', x)); }.observes('map') // similar to Accessor.watch });
![Page 33: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/33.jpg)
EmberUsing a ViewModel
// app/components/esri-home.js import Ember from 'ember'; import HomeVM from 'esri/widgets/Home/HomeViewModel'; export default Ember.Component.extend({ classNames: ['home', 'action'], vm: null, createHome: function() { let view = this.get('view'); let vm = new HomeVM({ view }); this.set('vm', vm); }.observes('view'), // similar to Accessor.watch actions: { enable() { this.get('vm').goHome(); } } });
![Page 34: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/34.jpg)
EmberCompose your components
//app/templates/index.hbs {{esri-map view=view}} {{esri-locate view=view}} {{esri-home view=view}}
![Page 36: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/36.jpg)
Conclusion4.0 Enhancements make integration easierPick a framework and dig inLearn your tools
![Page 38: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/38.jpg)
QuestionsRene Rubalcava
@odoenet
Please fill ou the survey!
![Page 39: Using Frameworks with ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit16/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript Rene Rubalcava](https://reader031.vdocuments.us/reader031/viewer/2022012917/5bdbeaab09d3f2bc1c8ce870/html5/thumbnails/39.jpg)
#