JavaScript for...
Transcript of JavaScript for...
![Page 1: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/1.jpg)
JavaScriptJavaScript
Slides: http://bit.ly/2T4zaKJ
![Page 2: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/2.jpg)
AgendaAgendaFundamentals1. Patterns2. The JavaScript Ecosystem3. Resources and Ways to Keep Learning4.
![Page 3: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/3.jpg)
What is this talk?What is this talk?An attempt to get you started down the path of learning JavaScript.
![Page 4: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/4.jpg)
JS can be overwhelming, you're moreJS can be overwhelming, you're moreequipped than you think!equipped than you think!
![Page 5: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/5.jpg)
JS can be overwhelming, you're moreJS can be overwhelming, you're moreequipped than you think!equipped than you think!
Scripted with ArcPy?
![Page 6: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/6.jpg)
JS can be overwhelming, you're moreJS can be overwhelming, you're moreequipped than you think!equipped than you think!
Scripted with ArcPy?Scripted with Python?
![Page 7: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/7.jpg)
JS can be overwhelming, you're moreJS can be overwhelming, you're moreequipped than you think!equipped than you think!
Scripted with ArcPy?Scripted with Python?Configured an app?
![Page 8: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/8.jpg)
JS can be overwhelming, you're moreJS can be overwhelming, you're moreequipped than you think!equipped than you think!
Scripted with ArcPy?Scripted with Python?Configured an app?Used Arcade?
![Page 9: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/9.jpg)
JS can be overwhelming, you're moreJS can be overwhelming, you're moreequipped than you think!equipped than you think!
Scripted with ArcPy?Scripted with Python?Configured an app?Used Arcade?Used Model Builder?
![Page 10: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/10.jpg)
Don't Feel OverwhelmedDon't Feel OverwhelmedYou don't need fancy tools and a huge body of knowledge to do useful things
with JavaScript.
![Page 11: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/11.jpg)
FundamentalsFundamentals
![Page 12: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/12.jpg)
variablesvariablesvar dog;let nifty;const notGonnaChange;
> undefined
var dogName = 'spot';var age = 21;var canBark = true;// value type is **not** explicitly declared
![Page 13: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/13.jpg)
operators operatorsarithmeticarithmetic(age / 7) // 3
5 + 5 // 10
3 - 2 // 1
3 * 2 // 6
12 % 5 // 2 (modulus)
age++ // 22
age-- // 20
'high' + 'five' // 'highfive'
![Page 14: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/14.jpg)
& & operators operatorscomparisoncomparison logicallogical3 === 3 // true3 === '3' // false
'dog' != 'cat' // true
3 > 2 // true3 >= 2 // true
// logical 'and'true && anotherTruthy> true
// 'or'true || somethingFalsy> true
![Page 15: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/15.jpg)
functions functions
functionsfunctionsfunction dogYears(age) {return age * 7;
}
dogYears(3);> 21
arrowarrowage => {return age * 7
}
age => age * 7// these are the same!
![Page 16: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/16.jpg)
arraysarraysvar dogs = ['Spot', 'Lassie'];
dogs[0] // 'Spot'
dogs.push('Fido');
dogs.length // 3
dogs.forEach(dog => {console.log(dog);
});> undefined
dogs.map(dog => dog.toUpperCase());> ['SPOT', 'LASSIE', 'FIDO']
![Page 17: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/17.jpg)
objectsobjectslet dog = {age: 7,canBark: true,_ssshhh: 'top secret',ageInDogYears: function(age) {return age * 7;
}}
> Object {age: 7, canBark: true, _ssshhh: 'top secret', ageInDogYears: ageInDogYears() }
dog.ageInDogYears(dog.age);> 49
![Page 18: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/18.jpg)
classesclassesclass Dog {constructor(name) {this.name = name;
}}let myDog = new Dog('Ginsburg'); // Object { name: 'Ginsburg'}
class Dalmation extends Dog {constructor(name) {super(name); // super calls the parent class' constructorthis.breed = 'Dalmation';
}}let myOtherDog = new Dalmation('Spot'); // Object { breed: 'Dalmation', name: 'Spot'}
![Page 19: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/19.jpg)
JavaScript PatternsJavaScript Patterns
![Page 20: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/20.jpg)
JavaScript is JavaScript is AsynchronousAsynchronousJavaScript is single threadedOnly does 1 thing at a timeLots of things might happen at onceThis is the "Event Loop"
![Page 21: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/21.jpg)
JavaScript Event LoopJavaScript Event LoopExecutes one function at a time1. Run the entire function2. Start the next function3.
Demo
![Page 22: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/22.jpg)
CallbacksCallbacks
Callback are functions that are run later when things happen.
<button id="button">Click Me!</button>
let button = document.getElementById('button');
button.addEventListener('click', function () {console.log('The button was clicked');
});
![Page 23: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/23.jpg)
PromisesPromises
Promises represent a future value that will be "resolved".
I Promise to be a useful value in the future.
let user = fetch('https://randomuser.me/api/') .then(processResponse) .then(doSomethingWithUser) .catch(anyErrors);
function processResponse (response) {return response.json();
}
function doSomethingWithUser (user) {console.log(user); // prints a bunch of user info
}
function anyErrors (error) {console.error('what have you done!', error);
}
Demo
![Page 24: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/24.jpg)
Function ScopeFunction Scope
Functions remember the variables around them, this is referred to as "lexicalscope".
var prefix = 'Hello';
function go () {var suffix = "World!"console.log(prefix + " " + suffix); // "Hello World"
}
go();
console.log(suffix); // undefined
![Page 25: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/25.jpg)
The The select elements (HTML tags)listen for eventschange elements
DOMDOM
console.log(value); // prints value to js consoledebugger; // pauses application code
Demo
![Page 26: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/26.jpg)
Sharing JavaScriptSharing JavaScriptAs applications grow, divide code into different files to stay organized. For
small apps, you can just use <script> tags.
<!-- Add script tags at the bottom of index.html before </body>--><script src="/alert.js"></script><script src="/form.js"></script>
// alert.js filevar alert = "alert!"
// form.js filevar form = document.getElementById("form");
form.addEventListener("submit", (event) => {console.log(alert); // this will work thanks to global scope});
View full example
![Page 27: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/27.jpg)
This is the future: as you learn JavaScript, you will encounter this more often.
JavaScript ModulesJavaScript Modulesimport { something } from 'some-module';
Demo
![Page 28: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/28.jpg)
AMD Modules (JS API)AMD Modules (JS API)
require is a fancy way of adding <script> tags to load code on demand.
require(["esri/Map","esri/views/MapView",
], function (Map, MapView) { // Map and MapView have been loaded!});
Demo
![Page 29: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/29.jpg)
Putting the pieces togetherPutting the pieces togetherChaining Promises JS API Sample
![Page 30: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/30.jpg)
The JavaScript EcosystemThe JavaScript Ecosystem
![Page 31: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/31.jpg)
The JavaScript LanguageThe JavaScript LanguageJavaScript (the language) updates every year.
2015 had LOADS of new features and established most of modern JavaScript.
![Page 32: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/32.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules - formats for splitting up and sharing codeCompilers - Transform JS > JS, add features to JSBundlers - Combine modules and other assetsFrameworks - Architecture and structure for large apps/teams
![Page 33: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/33.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules Compilers Bundlers Frameworks
![Page 34: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/34.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules - AMDCompilers Bundlers Frameworks
![Page 35: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/35.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules - AMD , JS ModulesCompilers Bundlers Frameworks
![Page 36: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/36.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules - AMD , JS ModulesCompilers - TypeScriptBundlers Frameworks
![Page 37: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/37.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules - AMD , JS ModulesCompilers - TypeScriptBundlers - WebPackFrameworks
![Page 38: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/38.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules - AMD , JS ModulesCompilers - TypeScriptBundlers - WebPackFrameworks - React
![Page 39: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/39.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules - AMD , JS ModulesCompilers - TypeScriptBundlers - WebPackFrameworks - React , Angular
![Page 40: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/40.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules - AMD , JS ModulesCompilers - TypeScriptBundlers - WebPackFrameworks - React , Angular , Vue
![Page 41: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/41.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules - AMD , JS ModulesCompilers - TypeScriptBundlers - WebPackFrameworks - React , Angular , Vue , Ember
![Page 42: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/42.jpg)
Build tools, bundlers, andBuild tools, bundlers, andframeworksframeworks
Modules - AMD , JS ModulesCompilers - TypeScriptBundlers - WebPackFrameworks - React , Angular , Vue , Ember , Dojo
![Page 43: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/43.jpg)
Node JS and NPMNode JS and NPMNode JS - Run JavaScript on a server or desktop computer. Build webservers, APIs and CLI toolsNPM - Package manager and distribution system for JS Modules. Analogusto Pip or Conda in Python.
Learn Node JS at NodeSchool
![Page 44: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/44.jpg)
Some people have "opinions" aboutSome people have "opinions" aboutJavaScriptJavaScript
Many JavaScript developers have very strong opinions about JavaScript.
Which framework you should useWhich build tool is the bestThe only way to do _ is…
![Page 45: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/45.jpg)
Some people have "opinions" aboutSome people have "opinions" aboutJavaScriptJavaScript
Many JavaScript developers have very strong opinions about JavaScript.
Which framework you should useWhich build tool is the bestThe only way to do _ is…
![Page 46: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/46.jpg)
JavaScript FatigueJavaScript FatigueLook, it’s easy. Code everything in Typescript. All modulesthat use Fetch compile them to target ES6, transpile them
with Babel on a stage-3 preset, and load them withSystemJS. If you don’t have Fetch, polyfill it, or use
Bluebird, Request or Axios, and handle all your promiseswith await.
We have very different definitions of easy.
How it feels to learn JavaScript in 2016, 2017, 2018, 2019
![Page 47: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/47.jpg)
the JavaScript ecosystemthe JavaScript ecosystemYou don't know what you don't know.
![Page 48: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/48.jpg)
the JavaScript ecosystemthe JavaScript ecosystemYou don't know what you don't know.
and that is great.
![Page 49: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/49.jpg)
Fight JavaScript FatigueFight JavaScript FatigueThe JS API is MORE then enough for simple mapping appsMany configurable apps and storymaps are built without frameworks orexcessive toolsAdd tools when you KNOW you will benefit from using themToo many tools === Lots of complexity to manageDon't touch tools until you feel limited by your current approach
![Page 50: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/50.jpg)
Development toolsDevelopment toolsSet up your local dev environment: Prototype with , or
Do I have a web server running?CodePen JSBin StackBlitz
Visual Studio CodeChrome Developer ToolsArcGIS JS CLI
![Page 51: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/51.jpg)
Keep learningKeep learningArcGIS DevLabsMDN: Learn web developmentMDN: JavaScriptEloquent JavaScriptYou Don't Know JSJavaScript 30NodeSchoolCommand Line Power UserFront End Handbook
![Page 52: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/52.jpg)
Slides at http://bit.ly/2T4zaKJ
![Page 53: JavaScript for Geographersproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS_116.pdfJavaScript is single threaded Only does 1 thing at a time Lots of things might](https://reader030.fdocuments.net/reader030/viewer/2022011911/5f900053ff64fa06ee15bc03/html5/thumbnails/53.jpg)