In part 1 of “Teaching Programming for GIS,” we discussed the value of learning Python to become a modern GIS user who can script and extend desktop functionality, clean and organize data, and connect to other software platforms. Web programming is equally valuable in the job market, so this part 2 addresses the teaching of practices and skills for coding web maps and apps.
A few years back, Eric van Rees published a short article summarizing the five types of developers, and two of the key profiles are front end and full stack. Front end means you focus on creating apps that run in the web browser, while full stack means that you can do it all, from the browser to the server to the database and services in between. If you are just getting initiated, don’t worry about becoming a full-stack dev or about needing to teach it all.
Students these days should know about front-end development: the easiest, most satisfying way to see things come alive on the web. (A caveat is that here we assume students want to improve their coding skills and not just use the no-code ArcGIS Experience Builder, which is enough for many people.) With a bit of experience coding HTML5, CSS, JavaScript, and some calls to an application programming interface (API) to provide access to web mapping functionality, a person with average computer knowledge can have a credible web app running in a day, whereas a decade ago, it might have taken a week or a month.
Preparation for that fine day can require quite a few hours of coding calisthenics, so for a teacher, the question becomes, How do I provide those hours—in extended classes or as prerequisites, where the student does the work at home? In speaking with several instructors of GIS programming courses, the common denominator is the lack of time to squeeze it all into a semester. One suggestion is to include programming in all GIS courses—a bit of Python here, a bit of R there, and then some JavaScript—so the load is spread out.
For the front-end developer—there is a sort of stack of technologies and practices to learn before you even think about geospatial web apps. Here are some suggestions distilled from several conversations I’ve had with Esri developers:
- The first step is to get a refresher on basic internet technology: HTTP, URLs, HTML, and all that. Later web programming tutorials will assume the learner knows the basic details behind how the internet works, so you probably don’t want to waste time teaching that in a GIS course. There are many good tutorials on the web such as “How does the Internet work?” from Mozilla (see also the related topics on that page).
- To get deeper into HTML5—and like I said in the previous article, the more hours the better, within reason—we recommend one of the many courses at Udemy. Some of these courses will include CSS, too, and while useful, the Esri web developers I spoke to said that the basics of CSS will be enough. For more on partial map layouts, see the Map UI Patterns tutorial.
- Next to learn is the combination of the JavaScript (js) language and Chrome DevTools as a popular way to test and debug js code. Again, Udemy has great JavaScript courses, and once you know the basics, there are many cheat sheets and web tutorials, such as JavaScript30 and 33-js-concepts, that provide practical tips and tricks. The same is true for DevTools; there are many tutorials out there. And here is another example showing debugging in different editors.
- Once the JavaScript begins to flow, the code needs to be hosted and run somewhere. Do you have a web server? Fortunately, GitHub is now a go-to site not only for sharing and managing code but also for hosting web apps for free! Students need to learn GitHub anyway, so doing this is a double win.
- Supposing we have gotten this far and are writing, debugging, and hosting JavaScript, my dev contacts highly recommend getting familiar with and joining the online programming communities—at first to rely on them for help and later to give back and offer your own help. Three communities that were recommended are The Spatial Community, Stack Overflow, and the ArcGIS API for JavaScript community. Newbies should remember a few things upon joining: (a) Observe for a while before you jump in; (b) be kind and ask nicely and precisely; (c) note that these are not necessarily Esri-only communities; and (d) when possible, provide your code on something like CodePen.io, which makes it so much easier for people to help.
- So now you or your students have done your groundwork—hours of it. Remember, the more time invested, the more errors encountered and, therefore, the more learning experiences. It’s time to jump into the ArcGIS Developer site and start using the APIs and tools available there. Students can sign up for an ArcGIS Developer account to get access to a free tier of services for managing map tiles, geocoding, calculating routes, and more. This is a good way to also learn about managing an account autonomously and accessing the API keys. But students can also gain access to the same services via their university named user account, which might make more sense if the programming activity is connected to a course or degree requirement (e.g., a master’s degree project).
- The ArcGIS Developer site provides access to and documentation on APIs from both Esri and third parties including open-source projects. The Esri Leaflet API is a good, simple way to get started connecting your website to basic front-end visualization tools and then to ArcGIS services. It is also a nice example of mixing open-source front-end tools and ArcGIS tools. These Esri plug-ins to Leaflet are also available on GitHub.
- After gaining experience with Esri Leaflet, the next step in terms of functionality is to try ArcGIS API for JavaScript. This API is a whole world in itself, with a growing collection of functionality that rapidly is leaving the web mapping competitors behind and is nearing the holy grail of online GIS. That site has a large collection of tutorials and samples.
There are many examples and code samples on the ArcGIS Developer website. Also, the Learn.arcgis.com site has a nice 1-hour, 45-minute lesson showing you how to build a 3D globe app with ArcGIS API for JavaScript.
In the process of programming web apps, a common pattern emerges: publishing and consuming layers, web maps, and feature services. A trick to keep in mind is that you can open the new Map Viewer, search for, select, and visualize (test out) the layers that you’d like to use in your JavaScript project, save and publish (to the public), then copy the item ID from the URL parameters and paste it into your js code. Voilà, your js project is connecting to just the right mashup of content.
A possible next step in the endless web programming journey would be to use popular programming frameworks, such as Angular and React, to allow more productive and creative app development. In simple terms, the role of a framework is to help you scale up small apps to become much larger apps. Among other things, these frameworks help teach the basics of user interface (UI), user experience (UX), state management, design, and other best practices.
Finally, it should be kept in mind while teaching/learning web programming that several basic GIS coding patterns will emerge and are good to keep an eye on and reuse. Our web developers tell me that when they are looking to hire new programmers, they hope candidates will be familiar with patterns such as query, renderers, symbology, working with layers, request/response, data preprocessing, and creation and publication of services (as mentioned above).
None of this is carved in stone; there are many ways to go about each of the steps covered here. But hopefully, these suggestions coming from seasoned Esri web tool developers will be useful in guiding both instructors and learners in their web programming journey.
