Using Frameworks with the ArcGIS API for...

52
Using Frameworks with the ArcGIS API for JavaScript René Rubalcava @odoenet

Transcript of Using Frameworks with the ArcGIS API for...

Page 1: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

UsingFrameworkswiththeArcGISAPIforJavaScriptRenéRubalcava

@odoenet

Page 2: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

AgendaOptionsAngularEmberReactVueJSElm

Page 3: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Options

Page 5: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

TemplatesEasytouseConfigurableIntegrateswithPortal

Page 7: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

WebAppBuilderCanbethoughtofasitsownframeworkjimu-theLegoframework

Page 8: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

ArcGISJSAPIWidgetFramework

BasedonTypeScriptJSX

CustomWidgetDevelopmentMaquetteJS

Page 9: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Whyuseaframework?SimplifyworkflowAllteamsonsamepage

Page 10: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

ChallengesJSAPIAMDLoaderMostissueswithloaderpluginsWehavesolutionsformosttooling!

define([ "dojo/has!webgl?esri/package1:esri/package2"], function(myDrawingPackage) {...});

Page 11: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Angular

Page 12: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

FeaturesDirectivesareWebComponentsDependencyInjectionRxJSUsesTypeScript

SystemJS

Page 13: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

esri-system-js esriSystem.register( // array of Esri module names to load and then register with SystemJS [ 'esri/Map', 'esri/views/SceneView', 'esri/layers/FeatureLayer' ], // optional callback function function() { // then bootstrap application System.import('app/main') .then(null, console.error.bind(console)); });

github

Page 14: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Componentimport { Component } from '@angular/core';

@Component({ selector: 'my-app', styles: [` section { width: 100%; margin: 0 auto; padding: 4em 0 0 0; } `], template: ` <main> <section> <esri-scene-view></esri-scene-view> </section> </main> `})export class AppComponent { }

Page 15: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Injectableimport { Injectable } from "@angular/core";

import EsriMap from "esri/Map";

@Injectable()export class SimpleMapService { map: EsriMap; constructor() { this.map = new EsriMap({ basemap: "satellite", ground: "world-elevation" }); }}

Page 16: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

DependencyInjectionimport { Component, ElementRef, Input, Output, EventEmitter } from "@angular/core";import SceneView from "esri/views/SceneView";import { SimpleMapService } from "./map.services";

@Component({ selector: "esri-scene-view", template: `<div id="viewDiv" style="height:600px"><ng-content></ng-content></div>`, providers: [SimpleMapService]})export class EsriSceneViewComponent { @Output() viewCreated = new EventEmitter();

view: any = null;

constructor( private _mapService: SimpleMapService, private elRef: ElementRef ) {}

ngOnInit() { this.view = new SceneView({ container: this.elRef.nativeElement.firstChild, map: this._mapService.map, camera: {...}

Page 17: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

AngularLotsofiterationssinceannouncedStabilizing

Page 18: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Ember

Page 19: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

FeaturesTheEmberWay

Emberwayorgetouttheway!FocusonWebComponents

Robustadd-onsystemGreatforteams!

ember-cli

Page 20: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Weuseit!OperationsDashboardOpenDataWorkforceWebApp

Page 21: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

ChallengesUsesit'sownsynchronousAMD-likeloaderDoesn'tlikeRequireJSorDojoloaders

Page 22: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Solutions!Sowewroteanaddontohelpwiththatember-cli-amd

Page 23: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Configureember install ember-cli-amdvar EmberApp = require('ember-cli/lib/broccoli/ember-app');module.exports = function(defaults) { var app = new EmberApp(defaults, { amd :{ loader: 'https://js.arcgis.com/4.3/', packages: [ 'esri','dojo','dojox','dijit', 'moment', 'dgrid', 'dstore' ] } }); return app.toTree();};

Page 24: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

MapasaServiceimport Ember from 'ember';import EsriMap from 'esri/Map';

export default Ember.Service.extend({ map: null,

loadMap() { let map = this.get('map'); if (map) { return map; } else { map = new EsriMap({ basemap: 'hybrid', ground: 'world-elevation' }); this.set('map', map); return map; } }});

Page 25: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Componentimport Ember from 'ember';import SceneView from 'esri/views/SceneView';

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); } },

createMap: function() { let map = this.get('map'); let view = new SceneView({ map, container: this.elementId, center: [-101.17, 21.78], zoom: 10

Page 26: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

AddComponent

Magic

{{esri-map}}

Page 27: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

EmberLargecommunityFlexibleecosystemLotsofaddons!

Page 28: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

React

Page 29: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

FeaturesTechnically,notaframeworkReusable,composablecomponentsJSX-declarative

Page 30: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Componentsclass Recenter extends React.Component<Props, State> { state = { x: 0, y: 0, interacting: false }; ... render() { let style: Style = { textShadow: this.state.interacting ? '-1px 0 red, 0 1px red, 1px 0 red, 0 -1px red' : '' }; let { x, y } = this.state; return ( <div className='recenter-tool' style={style} onClick={this.defaultCenter}> <p>x: {Number(x).toFixed(3)}</p> <p>y: {Number(y).toFixed(3)}</p> </div> ); }}

Page 31: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Composeview.then(() => { ReactDOM.render( <div> <Recenter view={view} initialCenter={[-100.33, 25.69]} /> </div>, document.getElementById('appDiv') );}, (err: Error) => { console.warn('Error: ', err);});

Page 32: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

StateManagementforReact

-Reactcli

ReduxMobXCreateReactApp

Page 33: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Canuseesri-loadercreateMap() { dojoRequire(['esri/Map', 'esri/views/MapView'], (Map, MapView) => { new MapView({ container: this.refs.mapView, map: new Map({basemap: 'topo'}) }) });}componentWillMount() { if (!isLoaded()) { bootstrap((err) => { if (err) { console.error(err) } this.createMap(); }, { url: 'https://js.arcgis.com/4.3/' }); } else { this.createMap(); }}

Page 34: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

ReactVerypopular,largecommunityHasonejobVarietyofwaysitcanbeused

Page 35: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

VueJS

Page 36: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

FeaturesNotaframework,butsosoniceBuildcomponentsSimpleSmall(under20kb)

Page 37: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

EasytointegrateVue.component("camera-info", { props: ["camera"], template: "<div>" + "<h2>Camera Details</h2>" + "<p><strong>Heading</strong>: {{ camera.heading.toFixed(3) }}</p>" + "<p><strong>Tilt</strong>: {{ camera.tilt.toFixed(3) }}</p>" + "<p><strong>Latitude</strong>: {{ camera.position.latitude.toFixed(2) }}</p>" + "<p><strong>Longitude</strong>: {{ camera.position.longitude.toFixed(2) }}</p>" + "</div>"});view.then(function() { var info = new Vue({ el: "#info", data: { camera: view.camera } }); view.ui.add(info.$el, "top-right"); view.watch("camera", function() { info.camera = view.camera; });});

Page 38: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Hasacli!Usestemplates!

<template> ... <div id="viewDiv"></div> ...</template>

Page 39: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Canuseesri-loaderimport * as esriLoader from 'esri-loader'export default { ... mounted () { const createMap = () => { esriLoader.dojoRequire([ 'esri/Map', 'esri/views/SceneView', 'esri/core/watchUtils' ], (EsriMap, SceneView, watchUtils) => { ... return view }) } ... }, ...}

vue-clidemo

Page 40: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Elm

Page 41: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

FeaturesPurelyFunctionalLanguageAlsoaFrameworkCrazyrightStaticallytypeddescribetheshapeofyourvalue

Page 42: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

ElmArchitectureModel—thestateofyourapplicationUpdate—awaytoupdateyourstateView—awaytoviewyourstateasHTML

Page 43: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Modeltype alias Model = { items : List Card }

type alias Card = { id : String , title : String , thumbnailUrl : Maybe String , itemUrl : String , snippet : Maybe String , selected : Bool }

Page 44: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Updatetype Msg = Select String | UpdateSave String Int | Change Model

update : Msg -> Model -> ( Model, Cmd Msg )update msg model = case msg of Change newItems -> ( newItems, Cmd.none )

UpdateSave itemid rating -> model ! [] |> andThen update (Select itemid) ...

Page 45: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

UpdateSelect itemid -> let selected t = if t.id == itemid then { t | selected = True } else { t | selected = False }

findCard itemid = let valid val = case val of Nothing -> sampleCard

Just val -> val

card = model.items |> List.filter (\x -> x.id == itemid) |> List.head in valid card

Page 46: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

ViewviewCard : Card -> Html MsgviewCard card = ... div [ class cardStyle ] [ figure [ class "card-image-wrap" ] [ img [ class "card-image" , card.thumbnailUrl |> showVal |> src ] [] , div [ class "card-image-caption" ] [ text card.title ] ] , div [ class "card-content" ] [ card.snippet |> showVal |> text , div [ class "btn btn-fill leader-1" , onClick (Select card.id) ]

Page 47: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Lookingforward

Page 48: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Dojo2multiplepackages

willhave dojo-clidojo/corestillBeta

Page 49: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

TypeScript2.2introduced and object typeFutureupdates

mixins

Page 50: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

NotableMentions

-hyperscriptRiotMithrilCycle

Page 51: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René

Questions?Helpustoimprovefillingoutthesurvey

ReneRubalcava( )

Slides:

@odoenet

github.com/odoe/presentations/2017-devsummit-ps-using-frameworks/

Page 52: Using Frameworks with the ArcGIS API for JavaScriptproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Using Frameworks with the ArcGIS API for JavaScript René