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.
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.
- 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.
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.