Upload
phunghanh
View
336
Download
0
Embed Size (px)
Citation preview
Using Frameworks with theArcGIS API for JavaScript
Rene Rubalcava
@odoenet
Options available to you
Builders
TemplatesConfigurable AppsApps
App StudioWeb AppBuilders
TemplatesEasy to useConfigurableIntegrates with Portal
AppsPrebuilt with specific purpose ( , )Some provide extensibility ( )
Collector NavigatorOps Dashboard
Web AppBuilderCan be thought of as its own frameworkjimu - the Lego framework
You need more?Or do you want more?
Dojo can do the job
Dojo already did that[JSConfUS 2013] Peter Higgins: #dadt (Dojo already did ...
Framework Madness
What problems do they solve?Common theme is
Web Components are not standardized yetSome data binding mechanism
Web Components
What makes 4.0 easier to use?AccessorsView Models (crème de la crème)Maps and Views (SceneView, MapView)
React
ReactNot a frameworkReusable, composable componentsJSX - declarative
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') );
ReactDemo
Angular 2
Angular 2Directives are Web ComponentsDependency InjectionRxJS 5
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 { }
Angular 2Some challengesUses SystemJS Module Loader
Well that's not going to work for usSystem.import('./local-module.js');
System.import('https://code.jquery.com/jquery.js');
Angular 2Don't fight the loader, work around it
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'); });
Packaged it up for youesri-system-js
Angular 2
Angular 2Demo
Ember
EmberThe Ember Way
Ember way or get out the way!Focus on Web Components
Robust add-on systemember-cli
EmberAlso had some challengesUses it's own synchronous AMD-like loaderDoesn't like RequireJS or Dojo loaders
EmberSo we wrote an addon to help with thatember-cli-amd
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(); };
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; } } });
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 });
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(); } } });
EmberCompose your components
//app/templates/index.hbs {{esri-map view=view}} {{esri-locate view=view}} {{esri-home view=view}}
EmberDemo
Conclusion4.0 Enhancements make integration easierPick a framework and dig inLearn your tools
Resourceshttps://github.com/odoe/esrijs-resources
QuestionsRene Rubalcava
@odoenet
Please fill ou the survey!
#