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! @DasaPaddock @AndyGup @ReneRubalcava @BenElan

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Template for a new custom web app

MichailMarinakis1

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!

Finde mehr Beiträge mit dem Tag

Accepted answers

AndyGup

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.

All comments

MichailMarinakis1

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 😊

dndhm

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...

MichailMarinakis1

Perfect! thank you again for the prompt response.

AndyGup

@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/.

MichailMarinakis1

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?

GIS_Weasel

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.

MichailMarinakis1

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

AndyGup

MichailMarinakis1

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 😅

AndyGup

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.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.