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!

#