Why Use a Hybrid Framework?
When developing mobile apps intended to be used by as many users as possible, dev teams want to make it available on as many devices as possible. That usually means developing for both iOS and Android. Developing two different code bases using native tooling and languages can be quite the undertaking for smaller teams. Reproducing the same experience across more than one platform requires using different tools, languages, and design philosophies. However, the end result is usually a very polished, fast, and smooth experience. This article and its tutorial are intended for experienced web developers that want to start developing for mobile with limited time, budget, and team members.
Smaller teams may not have the resources to concurrently develop and maintain different versions of an application. ArcGIS app developers are usually experienced web developers and getting comfortable developing for new platforms might not be in a budget or timeline. This is where hybrid frameworks can be utilized to great effect. There are always tradeoffs that must be considered, but hybrid mobile frameworks have come a long way and can produce very polished, “native looking” experiences.
Ionic is one-such framework ; it allows developers to use the web tools and languages they are comfortable with to create apps that run on multiple platforms. Ionic embraces the NPM ecosystem for handling dependencies, so building an ArcGIS app for mobile devices should be very familiar for most web developers. Ionic also supports popular MVC (Model-View-Controller) frontend frameworks such as Angular, React, and Vue for building responsive UIs, as well as Cordova plugins for accessing OS and hardware features. Ionic combines all of these to provide web developers a flexible toolbox to build a polished mobile experience.
This tutorial assumes that NPM is already installed. There is complete documentation on how to install NPM and most web developers already have it on their dev machines.
Installing Ionic is as simple as running the NPM install command in your favorite terminal:
$ npm install -g @ionic/cli
and the Ionic CLI command for creating the directory structure of a new Ionic app is as follows (must be an interactive terminal, Git Bash for Windows will not work):
$ ionic start
Ionic will prompt for answers to a few questions. For this tutorial the answers are:
The resulting project directory is a working Ionic app that you can run and check out by navigating into the project directory and running:
$ ionic serve
Ionic will start a web server and open a browser tab to the appropriate port. The blank app is ready to start development. The first thing to do is get ArcGIS installed. Again, in the terminal run:
$ npm install @arcgis/core --save
ArcGIS is now ready to go. Open src > app > home > home.page.ts to see the home page code, which is just an Angular component:
The first code changes are importing the necessary ArcGIS classes, instantiating a Map and MapView object, connecting it to the markup in home.page.html ,and sizing it to fill the available screen space by styling it in home.page.css – just like developing ArcGIS web apps. Make the following changes to the following files (changes highlighted in green and blue).
The Ionic web server should reload the browser tab and display a map.
In order to create the intended features, the device’s navigator must be used to display and update the user’s location on the map, and an ArcGIS ImageLayer will be used to display a radar imagery service from the National Weather Service. Make the following changes to display and update the user’s location on the map on a 10 second interval.
The subsequent browser refresh should display a marker on your current location like so:
All that needs to be done to make this simple app feature complete is add the National Weather Service’s radar service as a layer to the map with the following changes. The URL is cutoff in the screenshot below, but it is:
The app should now display radar images over the map. It’s clear skies at the GEO Jobe software development headquarters, but zooming out shows weather systems across the U.S.
The radar layer will refresh periodically giving the user current radar information in relation to their location.
This app can be built to run on iOS and Android. A Mac and XCode are necessary to build for iOS, and the Android SDK and Android Studio must be installed to build for Android. If those are installed, the ionic cap run <iOS / Android> command will compile the source code into XCode or Android Studio projects and open the appropriate IDE. From there, app packages can be built and installed on devices.
Hopefully, this article demonstrates some of the value of using hybrid mobile frameworks such as Ionic to build polished and performant ArcGIS mobile apps using web tools. As stated before, the advantages and drawbacks must be considered against the budget, timeline, and available resources of a dev team.
Have questions about this tutorial? Have an idea for an application, but need a team of developers to bring it to life? Reach out to us via e-mail or on Twitter. We’ll be delighted to talk with you!