# Show and Tell ## ESRI ArcGISMap JS and Vue --- ## :dart: Purposes To share my recent experience in developing a GIS web application - :dart: Introduce how and why to use ==`Vue`== with ==`ESRI ArcGIS MapSDK`== - :dart: Introduce ==`MVVM`== development pattern and its pros and cons --- ## :bow: Disclaimer > :bow: me no GIS expert. > :bow: me no web developer. > [name=Chris Lam] [time=2023] --- don't shoot me 🙏 --- ## :hammer_and_wrench: Used tools Vite ![Vite](https://hackmd.io/_uploads/SkmwhwkEp.png "Vite" =50x) Vue2 ![Vue2](https://hackmd.io/_uploads/S133CPkNa.png "Vue2" =50x) Vuetify2 ![Vuetify2](https://hackmd.io/_uploads/HJ1zydyN6.png "Vuetify2" =50x) Pinia ![Pinia](https://hackmd.io/_uploads/BkpTxdkEp.png "Pinia" =50x) ESRI ArcGIS Maps SDK for JavaScript  --- ## What is ![ESRI ArcGIS Maps SDK for JavaScript](https://hackmd.io/_uploads/HycBZOy4p.png "ESRI ArcGIS Maps SDK for JavaScript" =50x) - :hammer_and_wrench: a tool to build GIS Web Application :world_map: - built by [![Esri](https://hackmd.io/_uploads/SyDWi1gNp.png "esri" =50x)](https://www.esri.com/en-us/home) - **it costs** 💰 - 🔐 [needs an API key](https://developers.arcgis.com/documentation/mapping-apis-and-services/security/tutorials/create-and-manage-an-api-key/) to use. - 💸 UoM paid for it, for normal usage. --- similar opensource (free) projects - Leaflet [![leaflet](https://hackmd.io/_uploads/SkfjPd1Np.png "leaftlet" =50x)](https://leafletjs.com/) - OpenLayer [![OpenLayer](https://hackmd.io/_uploads/Syq7JF1E6.png "OpenLayer" =50x)](https://openlayers.org/) --- ## 🤔 How does it look like? [](https://developers.arcgis.com/javascript/latest/sample-code/featurelayerview-query-distance/live/) --- # 🤔 Why Esri/EsriJS - Industrial standard - [defra](https://compliance-data.defra.gov.uk/), [met office](https://climate-themetoffice.hub.arcgis.com/), [ons](https://ons.maps.arcgis.com/home/index.html) ...etc - [Ready made Widgets](https://developers.arcgis.com/javascript/latest/api-reference/) - Event based development at core --- 🛑 enough background. --- # 🤔 Why so many tools? --- :::danger :warning: **Native EsriJS Problems** - **`VanillaJS`** :dizzy_face: - **`AMD` *i.e.* `require()` method** :dizzy_face: ::: --- - :cry: hard to maintain - :cry: hard to use 3rd parties libraries - :cry: hard to add custom widget - :cry: hard to manage state at runtime see [sample code](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=featurereduction-cluster-filter-slider) --- :::info :bulb: use Framework Vite ![Vite](https://hackmd.io/_uploads/SkmwhwkEp.png "Vite" =50x) + Vue2 ![Vue2](https://hackmd.io/_uploads/S133CPkNa.png "Vue2" =50x) to handle the maintance, customization, and libraries issues ::: --- 1. ![Vite](https://hackmd.io/_uploads/SkmwhwkEp.png "Vite" =50x) uses [`ESM`](https://developers.arcgis.com/javascript/latest/tooling-intro/#esm-modules-and-amd-provide-the-same-functionality) to import libraries/packages or handle `.env` variables / build process. 2. ![Vue2](https://hackmd.io/_uploads/S133CPkNa.png "Vue2" =50x) allows Component-based development 3. ![Vue2](https://hackmd.io/_uploads/S133CPkNa.png "Vue2" =50x) allows easy development in custom widget --- :::danger :warning: **State management Problem** In Vue, two independent components cannot directly communicate ::: --- how native vue component communicate to each other? 1. `emit` (child -> parent) 2. `props` (parent -> child) 3. event bus (global emitter/listener), normally 3rd party libraries `mitt` --- - 1 or 2 very easy to make your code becomes 🍝 in when you use it for state management - 3 is better but it is not too `vue`. --- :::info :bulb: use Pinia ![Pinia](https://hackmd.io/_uploads/BkpTxdkEp.png "Pinia" =35x) to handle the component state. ::: --- see [demo](https://fdq09eca.github.io/ShowAndTell/) --- ![Vue2](https://hackmd.io/_uploads/S133CPkNa.png "Vue2" =50x) + ![Pinia](https://hackmd.io/_uploads/BkpTxdkEp.png "Pinia" =35x) ~ MVVM M ==**V**== VM: vue component i.e. `<template></template>` MV ==**VM**==: pinia store --- MVVM pros: - clear sepeartion in gui and logic - easier to collabrate - easier to mantain/debug - [cross-platform ready](https://mokkapps.de/blog/building-a-vue-3-desktop-app-with-pinia-electron-and-quasar) - Quasar Framework [](https://quasar.dev/) - Electron [](https://www.electronjs.org/) --- Thank you.