Introducing can-arcgis - Open source mapp framework

Blog Post created by roemhildtg on Feb 1, 2018

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. 

GitHub - roemhildtg/can-arcgis: CanJS app and components built for the ArcGIS JS API 4.x 


Screencast of can-arcgis using both web components and esri widgets


What is can-arcgis?


A new open source framework for building high performance web applications using the latest JS API. Lets break that down:

  • New: Yes, this is very new. New meaning new technology with the latest features, like JavaScript written in ES6. If you don't understand what that means, that is fine for now. Just know that ES6 is the next generation of JavaScript and helps developers write code faster. 
  • 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. 

Switching between different can-arcgis config apps

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.


Optional (but recommended):

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 Github:

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 


Step 2: Install packages

  1. Open VS Code and File -> Open Folder
  2. Browse to can-arcgis that you downloaded
  3. Go to View -> Integrated Terminal
  4. 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

  1. In you integrated terminal (vscode) type npm i -g live-server
  2. Once it finishes installing, type live-server
  3. 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


cmd install and server start


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.





GIS Developers

ArcGIS API for JavaScript