Start up with javascript API 4.X

[vijaybadugu]

I have worked extensively with 3.x version of it. as part of migration process, I would like to start developing apps in a newer version of arcgis JavaScript 4.x. 

Could you please suggest  where can I start it from ,

[Egge-Jan_Pollé]

Hi @vijaybadugu,

Have you seen this page already?

Migrating from 3.x to 4.28 | Overview | ArcGIS Maps SDK for JavaScript 4.28 | ArcGIS Developers

Here an overview is provided for developers like yourself, with knowledge of and experience with the 3.x API, looking to migrate to 4.x.

Most important message here, as far as I am concerned:

Consider rewriting applications instead of simply trying to update them.

And if you have any more specific challenges, this community is there to help. Always.

Cheers,

Egge-Jan

[vijaybadugu]

I am developing a new production web application for a department.  do I need to use any framework or develop simply using legacy JavaScript development (AMD)  did for 3.X? 

[BlakeTerhune]

---

@vijaybadugu wrote:

I am developing a new production web application for a department.  do I need to use any framework or develop simply using legacy JavaScript development (AMD)  did for 3.X? 

---

No frameworks are necessary. You can develop everything in your JavaScript Maps SDK 4.x app with plain, vanilla JavaScript. Although Esri notes on building with AMD:

For new projects integrating the API into third party frameworks or build tools we recommend using local builds with @arcgis/core ES modules.

You should build with ES Modules.

Apparently esri-loader will be going away with the next release (4.29).

heads up: esri-loader is deprecated in 4.29 of the... - Esri Community

[Egge-Jan_Pollé]

Yes, as @BlakeTerhune suggests, you should really consider, while you are already migrating from 3.x to 4.x, to also leave the legacy AMD modules, with their require() statement, behind and switch to ES Modules instead.

For a quick comparison between AMD and ES, you might have a look at this blog post by @AndyGup : ArcGIS API for JavaScript – Working with frameworks and build tools just got easier – Part 2 (esri.c...

And sample apps, provided by Esri, ae available here: jsapi-resources/esm-samples at main · Esri/jsapi-resources · GitHub

[SaurabhUpadhyaya]

@Egge-Jan_Pollé @BlakeTerhune @vijaybadugu As per my experience in migrating from 3.X to 4.X lots of new libraries added and some libraries are deprecated so may required to resolve custome widgtes one by one.

Now my question to @Egge-Jan_Pollé @BlakeTerhune I am using NextJS with latest ArcGIS Core 4.28 and facing performance issue in production enviornment, its taking to much time to loading the library. When i checking chrome inspect --> Network tab showing some files are calling from "https://js.arcgis.com"?

How to resolve this because in production enviornment client is not allowing other third party URLs   ?

How to improve the performance?? Can you please please some github link using NexTJS(latest) and ArcGIS Core (Latest) where everything is calling from own server ?

Below arcgis map libraries want to use.

import ArcGISMap from "@arcgis/core/Map";

import MapView from "@arcgis/core/views/MapView";

import Legend from "@arcgis/core/widgets/Legend";

import TileLayer from "@arcgis/core/layers/TileLayer";

[Egge-Jan_Pollé]

Could this be useful? Building ArcGIS API for JavaScript Apps with NextJS (esri.com). It comes with the source code for the application in this blog post on github.

[SaurabhUpadhyaya]

I tried this code but this code is 2 Yrs old and many libraries are not available in 4.28 with latest version of NextJS. 

If anyone some sample code using 4.28 please share.

[Ranga_Tolapi]

@SaurabhUpadhyaya 

Relax, enclosed the jsapi-nextjs sample code upgraded to @arcgis/core version 4.29.3, for you 👍

Steps to follow to extract the attached zip file.

1. Extract contents (jsapi-nextjs.txt) from the attached jsapi-nextjs.zip file using password (that's the password)
2. Rename the extracted file (jsapi-nextjs.txt) extension from .txt to .zip
3. Extract jsapi-nextjs.zip for the upgraded source code.

[SaurabhUpadhyaya]

@Ranga_Tolapi Thank you sir.