aniessen-esristaff

GeoDev Webinar - Using TypeScript with the ArcGIS API for JavaScript

Blog Post created by aniessen-esristaff Employee on Oct 12, 2018

In the month of September, Rene Rubalcava and Noah Sager hosted a GeoDev Webinar on "Using TypeScript with the ArcGIS API for JavaScript". This webinar was focused on helping developers to get started with using TypeScript when building web applications.

 

At the end of the webinar, we had a lot of great questions come in, which you can check out in the GeoDev Webinar video that was recorded. But there were also quite a few questions that came in that did not get addressed during hte recording, so we'd like to address them here:

 

Q: So this is with ArcGIS JavaScript + typescript + React?

A: We only showed one sample with React https://github.com/odoe/ts-webinar-examples/blob/master/ts-features/app/dynamic-imports.tsx.

 

Q: So can we do this with Angular CLI ArcGIS JavaScript + typescript and maybe React?

A: Angular CLI 6 does not have eject, this might be possible in a future Angular-CLI release. This does work with React.

 

Q: Can we use Angular CLI + ArcGIS JavaScript Cli

A: Angular CLI 6 does not have eject, this might be possible in a future Angular-CLI release.

 

Q: Which framework should be used? Vue, React, Angular or Knockout?

A: The JSAPI has no preference. You can see various guides here - https://github.com/Esri/jsapi-resources/tree/master/frameworks.

 

Q: Can you intermingle the use of the Angular CLI and the Esri CLI?

A: Angular CLI 6 does not have eject, this might be possible in a future Angular-CLI release.

 

Q: Did you discuss 4.9 features?

A: Yes

 

Q: Is there support for multiple ArcGIS Portal use? Ie Webmap from one portal item, Featurelayer from different portal, portal item?

A: Yes, you can instantiate multiple Portals in a single application.

 

Q: Using the ArcGIS/CLI, is there a cache to clear or some way to ensure that an updated version works correctly?

A: You can run npm update to see if there are newer modules you can use.

 

Q: When will 3.x features (like SnappingManager, etc.) be migrated from 3.x to 4.x? Is there any performance difference between 3.x and 4.x?

A: These features are planned in iterative releases over the next few releases in the JSAPI. Performance with larger amounts of data will scale better in 4x.

 

Q: Is it necessary to use esriloader to import modules of the API?

A: No, it is not.

 

Q: Do you know if the angular esriloader is also importable vs. require? 

A: You should be able to import it for use in applications as well.

 

Q: Sometimes I struggle with getting access to the current map via child components, so I am always looking for advice on best practices or patterns for sharing map instances across components in angular (I know this isn't really an angular webinar, but I thought I'd throw this out there anyways).

A: This can be handled via some form of state management, possibly with injectable services in your components.

 

Q: I'm using const[EsriMapViw] = await loadModules([esri/views/MapView] to load modules. Is this now obsolete?

A: You can continue using esriLoader if you want to in certain instances, but is not required in most applications.

 

Q: Is ArcGIS API compatible with Angular ?

A: Yes.

 

Q: What is  CLI?

A: Command Line Interface

 

Q: Can my JQuery functions run in a Type Script project?

A: Yes

 

Q: In Tsconfig.json >> module: "AMD".  What are the options besides AMD?

A: None, "CommonJS", "AMD", "System", "UMD", "ES6", "ES2015" or "ESNext"

 

Q: Using promis is the most difficult part of ArcGIS Api for JavaScript. Do you mean using Typescript makes it easier?

A: You can use async/await. I don't think it's much easier. It is a good idea to get more familiar with Async and Promises in JavaScript. It is not unique the JSAPI.

 

Q: Will you have any big change on ArcGIS API for Javascript 5.0 like 3.x to 4.x?

A: We currently have not made plans for a 5.0.

 

Q: Is Typescript more relevant than JavaScript?

A: TypeScript is a superset of JavaScript. I wouldn't call it more relevant. In our experience, it scales well and helps us write safer code.

 

Q: How can we load base maps using TypeScript?

A: It works the same as loading them in JavaScript.

 

Q: What is the different between JavaScript and TypeScript?

A: TypeScript provides type safety.

 

Q: I've noticed that you use export = foo and at other times export someFunction. I know export = allows you to workaround the ClassName.default issue in vanilla JS. Do you have an internal rule for when and how to use the type of export functions?

A: In writing applications we do either export const foo = something or export default Foo. No need to do export = foo. Usually I export default classes and export other helper functions. No hard and fast rules.

 

Q: Is there a link to the cli documentation?

AGitHub - Esri/arcgis-js-cli: CLI to build a template application and widgets using the ArcGIS API for JavaScript 

 

Q: How easy it is to use the JavaScript API with bootstrap and jQuery? Because I have encountered some issue while using it with Dojo.

A: I've used them before and they work fine. Be aware that any CSS framework may overwrite CSS for native DOM, such as table, header, span, that could impact the widgets of the JSAPI.

 

Q: Did we install a node package for ArcGIS?

A: Yes.

 

Q: Why do we want to watch viewmodel with an assessor?

A: Accessor allows the ability to watch for property changes. https://developers.arcgis.com/javascript/latest/guide/implementing-accessor/index.html

 

Q: Can you use ES6 and ArcGIS for JavaScript without TypeScript?

A: Yes.

 

Q: Could you please explain decorators? Are they part of ES6 or Typescript? And when do you apply them?

A: Decorators are a stage 2 proposal in JavaScript https://tc39.github.io/proposal-decorators/ TypeScript provides them and so do other JavaScript tools like Babel.

 

Q: Is TypeScript working with ArcGIS JavaScript 3.x?

A: Yes.

 

Q: What version of ArcGIS API for JavaScript support TypeScript?

A: 3x (https://github.com/Esri/jsapi-resources/tree/master/3.x/typescript) and 4x (https://github.com/Esri/jsapi-resources/tree/master/4.x/typescript)

 

If you have additional questions from this webinar, please leave your question in the comments section. We'd love to hear from you!

Outcomes