Hi and welcome! This blog post will introduce you to the new project can-arcgis and walk you through the steps to installing, building, and deploying a complete web app using the map app (mapp) framework.
What is can-arcgis?
A new open source framework for building high performance web applications using the latest JS API. Lets break that down:
- Framework - This is a framework for building applications, meaning it establishes a lot of opinions for you on how to structure the app, as well as providing a lot of functionality out of the box, such as automatically creating layers and widgets for you based on a simple config syntax.
- High Performance - Each "can-arcgis" app really can consist of many different configs which can load a completely different set of layers, widgets, and even views (2d vs 3d). Once build, the tools will automatically generate efficient and compact bundles, one for each config, and several others for modules that are shared between configs.
Quickly switching between different mapping applications can happen very easily
What's the catch?
Yes, that all sounds good, but there is a catch. The first, perhaps not so obvious one is the fact that the JS API uses Dojo, and the Dojo build system. Its fairly well known that other frameworks don't play super well with this system, and this framework is no exception, so currently the Esri API is loaded through the CDN, and not built into those modules mentioned above.
Rumor has it that Esri will eventually be mitigating this issue by removing the api's dependencies on dojo plugins. This would then allow can-arcgis to completely optimize its build process by bundling the esri modules as well, when and if that happens.
In the meantime, we'll keep using the CDN, and with modern browser technology and caching, app load time really isn't that terrible as you can see in the screenshot above. The first app may take a bit longer to load as files from the cdn are cached, but subsequent reloads will happen faster. In addition switching apps from one to another can happen almost instantly as files are not re-downloaded in this process.
How do I start?
Great! You've made it this far, so lets get started. First things first, you'll need a couple of programs installed.
- A good text editor (I'm using Visual Studio Code in this guide). Visual Studio Code - Code Editing. Redefined
Optional (but recommended):
- Git - a useful tool for downloading code, as well as maintaining your own https://git-scm.com/
Make sure when installing Node and Git to add their executable to the PATH.There is usually a box to check in the installer. This will let you type "node" and "git" into a Command Prompt.
Step 1: Download (clone) the code
Via Command Prompt:
Open a Command Prompt in a folder where you want to store the code. Use cd folder and cd .. to navigate up and down folders.
Type git clone https://github.com/roemhildtg/can-arcgis.git
Step 2: Install packages
- Open VS Code and File -> Open Folder
- Browse to can-arcgis that you downloaded
- Go to View -> Integrated Terminal
- Type npm install or npm i for short
Step 3: Get a web server:
Nodejs makes a great development server (don't use in production though). If you need a quick tool to get started, use live-server
- In you integrated terminal (vscode) type npm i -g live-server
- Once it finishes installing, type live-server
- This will open a web browser. Just browse to index-prod.html to access production version of the app, or index-dev.html to access the development version
Step 4: Customize!
The rest is up to you, the sky is the limit. As you make changes, live-server should automatically reload the browser if you're using development.html.
Be sure to check out the next few guide I am planning on writing to walk through creating a config from scratch, and customizing the layout.