I haven't had a chance to clone the prezo yet, so I'm just gonna doc issues.

https://odoe.github.io/presentations/2017-devsummit-dc-esrijs-whats-new/demos/architecture/multiple-views.html

When I click the demo button I get an error https://odoe.github.io/presentations/2017-devsummit-dc-esrijs-whats-new/demos/architecture/multiple-views.html

Hi Rene, I'm getting errors in Chrome when I try to view the slides. It looks like maybe the Reveal library reference is missing from the repo?

Before I put this into full slide format and start a PR against presentation.md, I thought I'd drop the overall flow/structure here for your feedback:

Getting Started w/ Frameworks

• Start here: https://developers.arcgis.com/javascript/latest/guide/using-frameworks/index.html
• Links out to resources for each framework

2 approaches:

• map centric
• framework first

Map centric works best when:

• most application state stored in map
• map is always showing

Framework first works best when:

• most application state stored outside the map (router, data store)
• map only shows on a few or one route

JSAPI as your application framework vs using the JSAPI as library

• or how much Dojo you want up in this application?

Who are your developers?

• Geodevs that mainly want to replace Dijit with a more modern component library, or
• Web developers that are familiar with a certain framework's conventions and tooling

You can use the JSAPI as a library w/ just about any framework, but doesn't always work the other way around

Opinionated <------> Flexible
Productivity <------> Choices
Ember - Angular - Vue - React
Heavy <---------> Lightweight

Not practical to use Ember or Angular in a Dojo application

• very hard to extract pieces (components)
• lose the benefit of their opinions & tools

We're not really going to talk about those two, here are resources:

Ember

• Check out Audacious Enterprise GIS Apps with EmberJs Thu 4:00 pm - 5:00 pm Catalina/Madera
• see https://github.com/Esri/jsapi-resources/tree/master/frameworks/ember

Angular

• Check out Kick Starter: Rapid Application Development using Angular CLI Friday, March 09
  8:30 am - 9:30 am
• see https://github.com/Esri/jsapi-resources/tree/master/frameworks/angular

Why do we even need an "approach"? Why can't we just:

npm install arcgis-js-api

then

import { Map, MapView } from 'esri';

TLDR: Loading modules with Dojo is a one way street

• Dojo's AMD loader can load other AMD / UMD modules
• Other module loaders (webpack*, Rollup) can't load Dojo's AMD modules

• there is a webpack plugin,
  but it does not (yet) work w/ the JSAPI - we're working on that

In the mean time there are libraries and hacks to help you with this:

• esri-loader
• webpack hack
• emebr-cli-amd and ember-esri-loader (again see Dave/Mike's talk this evening)
• systemjs-plugin-dojo

esri-loader is a library that works w/ any framework and/or module loader

• see growing list of examples

Using esri-loader should look familiar to those of you coming from Dojo:

import { loadModules } from 'esri-loader';

loadModules(['esri/views/MapView', 'esri/WebMap'])
.then(([MapView, WebMap]) => {
  // then we load a web map from an id
  var webmap = new WebMap({
    portalItem: { // autocasts as new PortalItem()
      id: 'f2e9b762544945f390ca4ac3671cfa72'
    }
  });
  // and we show that map in a container w/ id #viewDiv
  var view = new MapView({
    map: webmap,
    container: 'viewDiv'
  });
});

That's effectively the same as:

define([require], function (require) {

  require(['esri/views/MapView', 'esri/WebMap'], 
  function (MapView, WebMap) {
    // ... the rest of the code is the same
  });
});

esri-loader also helps improve page load performance:

• lazy load the JSAPI only on routes where it is needed
• important if you are primarily targeting mobile/PWA
• also offers loadCss() as a convenience method to lazy load the esri CSS

Demo: esri-preact-pwa

esri-loader lets you use the JSAPI in Server-side rendered (SSR) applications:

• helps w/ SEO as well as performance

Demo: esri-loader-react-starter-kit

esri-loader doesn't require you to mess w/ your module loader's configuration

• can be used w/ framework CLIs w/o "ejecting"
• can be "no config" loaders like Parcel

Demo: esri-hyperapp-example

Downsides to esri-loader:

• can't use import statements for esri modules

Take it away Rene!