skills needed for ArcGIS API for JavaScript 4?

2800
10
08-05-2019 12:37 PM
davedoesgis
Occasional Contributor III

I did a ton of JavaScript development up till about 2010 (ArcIMS HTML viewer), and then took a detour through other career options before coming full circle, and I'm a bit rusty. What skills do I need to get up to speed with version 4 of the ArcGIS API for JavaScript, particularly with the forthcoming Experience Builder? I like to learn by tinkering, but I also try to do some self-study to round out my skill set.

In particular, JavaScript looks a lot different now than 2010. I am wondering what version of JavaScript is best to learn? I'm NOT talking about the Esri API version, but rather the version of ECMAScript, i.e.: JavaScript itself, that is used by version 4 of the API. (If this question is still unclear, see here.)

Asking around at the user conference, I also heard various things, like TypeScript, Node.js, JSX, & Sass. Regarding JSX, I got conflicting answers about whether knowing the underlying React technology is necessary.

thanks!

10 Replies
Noah-Sager
Esri Regular Contributor

This is a great question, and I hope to see some others comment here (might also be a nice question to pose on The Spatial Community slack channel).

https://developers.arcgis.com/javascript/support/

My 2 cents:

A lot of this will depend on your project requirements. With regards to JavaScript frameworks, we have this outlined in a Guide topic here:

https://developers.arcgis.com/javascript/latest/guide/using-frameworks/

One commonality that I see is TypeScript. There seems to be a significant increase in interest in this language, and we use it quite a bit internally (~90% of the JS API is written in TypeScript, and all widget development requires TypeScript). Also, since you can compile to specific versions of JavaScript, it seems like a good bet.

https://developers.arcgis.com/javascript/latest/guide/typescript-setup/

Since we still support IE11, we have some specific requirements regarding the version of ECMAScript that we use in our samples.

Hope this helps!

RobertScheitlin__GISP
MVP Emeritus

David,


  Specific to experience builder you will want to focus on the React library. React is what experience builder is built on. I believe that experience builder has a minimum requirement of greater than IE11 (so modern browsers)  so that means ecma script 6 or greater.


Robert

QuinnBast
New Contributor II

Robert Scheitlin, GISP wrote:

React is what experience builder is built on. 

That's very opinionated. If you're going to give an opinion on JavaScript frameworks you need to compare them all.

The choice of JavaScript all depends on the project requirements but make sure to note that if you start creating applications with one framework, it is a large amount of work to convert to another. The choice of framework all depends on your project requirements. There are three big JavaScript frameworks today, React, Angular, and Vue. All of them help speed up development of web applications in their own unique ways but you also don't have to use any JavaScript framework. The ArcGIS JavaScript API is built on top of Dojo, but I wouldn't recommend using it as it is quite outdated.

I've created a sample web application with all 3 frameworks to test the waters and this is what I found:

React: Generally OK to develop with. It's quick to learn but has its downfalls with data manipulation. If you need a significant number of form controls and inputs (ie. if you are using JS for data-manipulation applications) then React is not the way to go. React requires onChange events for every input control to update the state of the controller which loses a huge amount of time if you have a lot of data inputs. But overall, not a bad choice if you want to get started, just be weary that passing variables around can be a bit tricky.

Angular: Meh. It uses TypeScript which is a huge learning curve for anyone just getting into JavaScript. Being locked into using TypeScript with Angular can be beneficial because it enforces types for variables and requires compiling the JavaScript to build it but without knowing TypeScript there is a huge learning curve.

Vue: Fairly good. All around pretty decent to use. It is a sort of combincation of React and Angular but doesn't enforce typescript. It has automatic data-binding and JS objects get updated the moment a form input is changed. It's not too hard to get started and works well with Esri applications. Some downfalls with nested components and passing parameters but I've found it is nice to work with.

In addition to choice of framework, you should probably know the following concepts: ES6+, Webpack, Node.js, npm

Update: Was unaware Experience Builder was an Esri app. This app uses React, thus if you need any custom features it is required to be familiar with React. React is best built with JSX but there is really nothing to learn with JSX, it is just a file type that allows specifying HTML components directly in your JavaScript instead of requiring strings to create HTML elements. ES6+ is recommended as it has greatly improved JavaScript, but in general, you'll just need to be familiar with React states and their component lifecycle. I'd recommend walking through the React tutorial to get a grasp of things.

RobertScheitlin__GISP
MVP Emeritus

Quinn,


  It is not opionated at all. It is a simple fact that the WAB development team uses React for their own development of Experience Builder.

QuinnBast
New Contributor II

Ahh I didn't realize Experience Builder was an Esri app, I thought they were asking about how to build their experience to create JavaScript apps with the JS API. I'll update my comment

AndresCastillo
MVP Regular Contributor

Quinn, 

Even though you misunderstood, your opinions about the different frameworks are very useful. Thank you for these.

0 Kudos
BenElan
Esri Contributor

I agree with Robert ES6+ is important. Look into arrow functions and let/const vs var. Something else to mention would be using forEach or map to loop through things such as graphics will be very useful. The API relies heavily on promises, so that is important to understand as well.

As Noah said, the JavaScript API itself is written using TypeScript. Understanding the underlying typing and inheritance of the API will be profoundly helpful. Something that I see a lot of people misunderstand is the difference between geometries and graphics, as well issues with sub-classes of geometries. By using TypeScript and consciously defining variable types you will learn the API much quicker.

ReneRubalcava
Frequent Contributor

There are some great resources for learning modern JavaScript and TypeScript for free out there.

JavaScript

TypeScript

And has been mentioned, if you are interested in building ExB widgets, you will need to learn some React basics. I don't have much specific guides for React, but there are a ton of resources out there. This post has some nice summaries and links.

I've had the opportunity to do some ExB widget dev and you should learn how React Providers work and basic state updates and management.

by Anonymous User
Not applicable

Hi Rene,

For react,

I believe that Getting Started – React  can be the good starting point.

With typescript react, there is starter template in github by microsoft to start with.

GitHub - microsoft/TypeScript-React-Starter: A starter template for TypeScript and React with a deta...