topic Re: Template for a new custom web app in ArcGIS JavaScript Maps SDK Questions

Template for a new custom web app

MichailMarinakis1 — Tue, 28 Feb 2023 14:51:04 GMT

Hi all,

4 years ago, we created a production application based on arcgis js cli. During these years, we have created a lot of custom widgets for this app, following esri documentation, and we have migrated from:

JS version 4.13 to 4.26,
AMD to ESM,
webpack 4 to 5,
typescript 3.1.1 to 4.7.4,
calcite maps 0.0.9 to calcite design 1.0.7 (partially, still on going),
...

Everything is working like charm and all the necessary tools to deploy to a production environment were included with the cli e.g. service workers, minification, PWA, etc. It saved us a loot of time! We considered that the cli was the tool to build production custom web applications.

We want to start developing a new custom web app. We found out that the arcgis-js-cli is going to be deprecated (with a recommendation to use vite).

We have been looking at the repo https://github.com/Esri/jsapi-resources:

The custom widget sample has a deprecation flag (with a comment to use the UI component library of our choice (like react? so it is recommended not to use the UI framework of custom widgets? ))
We noticed also a strong promotion of vite at most of the samples, instead of webpack.
There are not so many typescript samples, even though it is promoted from the documentation here.

What we are looking for is, a stable, "building for production", template to give us a boost start. So the question is, if we want to start creating a new custom web app, is there any official best practices/documentation/resources/recommended tools from esri?

I know there is no single answer, there are a lot of parameters to make a decision like that, just wondering if there is a consensus in the forum here or something that is already discussed between esri developers 😀

Thank you!

Re: Template for a new custom web app

AndyGup — Tue, 28 Feb 2023 17:20:36 GMT

Hi @MichailMarinakis1 thanks for the questions, and we are glad everything worked like a charm.

Correct, as you are discovering there isn't a one-size-fits-all solution to implementing custom applications built with modern JavaScript build tools, templates and frameworks. There are many excellent third-party choices, they all have their area of expertise and they iterate, constantly. Our recommendation is to prototype a variety of approaches and see what works best for you and your organization's unique requirements. Our goal for the JavaScript Maps SDK is to work with the widest number of these.

That's what happened with arcgis-js-cli, over time the variety and advancements of modern choices for ESM developers made its' interpretation of project scaffolding obsolete.

Re: Template for a new custom web app

MichailMarinakis1 — Wed, 01 Mar 2023 09:08:27 GMT

Hi @AndyGup ,

thanks for the reply! Just to clarify, if we start to develop a new custom web app, is it OK to use esri custom widgets UI framework ? We got a bit worried with this deprecation flag at the github project 😅

Re: Template for a new custom web app

AndyGup — Thu, 02 Mar 2023 00:16:31 GMT

For fully custom widgets, use the UI library of your choice. We want to re-evaluate how custom widgets work. Additionally, the JS Maps SDK uses legacy TypeScript decorators, and we have documented that for custom widgets you need to set useDefineForClassFields to false. This could potentially limit the TypeScript target that you want to use, in the future. And there are also new decorator changes coming in TypeScript 5.0 that we need to investigate.

Re: Template for a new custom web app

MichailMarinakis1 — Thu, 02 Mar 2023 09:08:54 GMT

Great, it's more clear for us now! Thank you for the response

Re: Template for a new custom web app

GIS_Weasel — Tue, 11 Apr 2023 13:25:25 GMT

Andy,

we're in the same position as @MichailMarinakis1 here, but I personally don't think this response adds anything -- simply repeating "For fully custom widgets, use the UI library of your choice" isn't helpful; I saw that in the repo and was concerned enough to search here for a response.

We're migrating some legacy content from 3.x to 4.x, and don't have a large development team. If Vite is a dead end, I'd appreciate a handle on what is going to be supported long term, and what the best-practice development toolchain for this looks like.

Kind regards.

Re: Template for a new custom web app

AndyGup — Tue, 11 Apr 2023 21:08:38 GMT

Hi @GIS_Weasel we are going to clarify the deprecation wording and sync that up with any SDK documentation pages. The good news is only the custom widget sample, itself, is being deprecated. You can continue to use Vite, you can extend the capabilities of the 4.x esri/widgets/Widget class, and you can continue to use the SDK's viewModels. Note that the React and Vue samples are using Vite, and so are the downloadable ESM-based SDK samples. Our goal is for the SDK to be compatible with all the major frameworks and module bundlers.

With regards to migrating custom 3.x content to 4.x, building custom UI within frameworks such as React, Angular or Vue is best done using their respective UI patterns and practices. Of course, you can also continue to use 4.x OOB SDK widgets within the MapView/SceneView. And, you can also incorporate the Calcite Design System: https://developers.arcgis.com/calcite-design-system/.

Re: Template for a new custom web app

GIS_Weasel — Wed, 19 Apr 2023 12:48:44 GMT

Thanks Andy, much clearer.

Re: Template for a new custom web app

MichailMarinakis1 — Fri, 28 Apr 2023 11:13:44 GMT

I have a following up question 😃

Normally, using custom widgets, we were able to extend existing esri widgets to custom ones. A sample of the code is below:

import { subclass } from "@arcgis/core/core/accessorSupport/decorators"; import Editor from "@arcgis/core/widgets/Editor"; import { CalciteFlowItem } from "@esri/calcite-components/dist/components"; @subclass("app.widgets.ErrorReporterEditor") export default class ErrorReporterEditor extends Editor { constructor(properties: __esri.EditorProperties) { super(properties); } render() { } }

We could do the same for the "View" of the widget i.e. the tsx and/or the "ViewModel" of the widget e.g.

import { subclass } from "@arcgis/core/core/accessorSupport/decorators"; import { fetchMessageBundle } from "@arcgis/core/intl"; import SearchViewModel from "@arcgis/core/widgets/Search/SearchViewModel"; @subclass("app.widgets.GlobalSearch.GlobalSearchViewModel") export default class GlobalSearchViewModel extends SearchViewModel { private refineYourSearchMessage: string = ""; constructor(params?: any) { super(params); this.init(); } }

If we use a UI library of our choice, then are we able to do something similar?

For example, if we could not extend esri widgets in react, then do we need to recreate e.g. the Search Widget with web/react components from scratch, instead of just extending it?

Re: Template for a new custom web app

AndyGup — Fri, 28 Apr 2023 15:54:38 GMT

@MichailMarinakis1 correct, you can extend the ViewModel. And, creating fully custom widgets means building your own functionality either by extending the Widget base class, or building from scratch using a UI library.

And, correct, we no longer provide the out-of-the-box widgets View files. There was little-to-no abstraction with the core internals, and that made for a very brittle approach, lots of breaking changes and limited our ability to upgrade capabilities.

Here's a ViewModel example: https://developers.arcgis.com/javascript/latest/sample-code/sketch-viewmodel-styler/.

Re: Template for a new custom web app

MichailMarinakis1 — Tue, 02 May 2023 08:30:21 GMT

Perfect! thank you again for the prompt response.

Re: Template for a new custom web app

dndhm — Tue, 11 Jul 2023 12:37:22 GMT

Hi @MichailMarinakis1 - it looks like you have successfully extended the Editor Widget recently. Were you able to customise the render output for the Editor's featureFormViewModel? I'm facing some challenges similar to those you mentioned in this thread and I'm hoping it's possible to customise the form view model without having to rebuild the whole widget from scratch...

Re: Template for a new custom web app

MichailMarinakis1 — Wed, 12 Jul 2023 14:23:11 GMT

Hi @dndhm, we did customize the editor tsx but not the FeatureForm. It is not recommended to customize widget's tsx 😁 and as from Release 4.27 it is officially deprecated (further information here). Just for reference, we extended the editor's tsx and we override the render function e.g.

render() { const element = super.render(); // custom code return element; }

In your case, the Editor widget exposes the featureFormViewModel but not the featureForm tsx (or does it? I couldn't find it). Normally, you may configure the featureFormViewModel.formTemplate (example here). If you want to achieve something more advanced, then I can think of these two ways forward:

Instanciate a new CustomFeatureForm() which extends from FeatureForm (or from esri.widgets.Widget) and you customize the UI (old legacy approach, not recommended)
You create a new custom ui, perhaps by using calcite design components, or based on your own ui framework e.g. react, (or both 😎), and you use the featureFormViewModel to develop your logic behind the UI. You can extend the viewmodel with extra custom methods and whatnot (recommended approach, further information here)

Hope i have helped 😊