By Gennadii Donchyts, Cloud Geographer, Google Cloud & Tyler Erickson, Founder, VorGeo
One of the most-loved features of Google Earth Engine is the ability to quickly create Earth Engine Apps — stand-alone no-code applications — from your analysis scripts. These Apps can be used to easily share your work with your co-workers, your boss, journal reviewers, your local planning commission… really anyone with an internet connection, since Apps do not require users to authenticate (unless you choose to restrict access to a specific group of users).
Apps present the Code Editor’s User Interface widgets to the user, while hiding the code that analyzes the data. While it only takes a few minutes to publish an App from a script, building a useful and intuitive user interface that responds to user input and delivers useful information can be challenging. No wonder the demand for UX Designers is growing!
Based on having built hundreds of Apps over the years, we would like to share some Tips & Tricks that will help control your Apps code complexity…
✓ Build your App in stages. Rome wasn’t built in a day, and most useful apps had more humble beginnings. Embrace an incremental development workflow, adding functionality in steps. At the 2024 Geo for Good mini-summits, the Apps & Dashboarding session presented an App development example with 14 stages (GitHub).
✓ Organize your script with a software design template. Keep code complexity under control by adopting a software design pattern for your scripts. This doesn’t require becoming an expert in MVC, MVP, or MVVM (although I like that pattern simply because the acronym looks cool), but rather just simply organizing your script into clear sections of code. Check out this template pattern used by the examples, or grab some popcorn and watch this video detailing the pattern. Or adopt another pattern that fits your group’s coding style. It makes it easier to find relevant code and your collaborators will thank you (even if that collaborator is you 6 months from now).
✓ Start by laying out your App’s UI elements. This could involve sketching on paper or diving straight into arranging panels and populating them with UI widgets with minimal styling. Don’t worry about getting the look perfect or that when you click a button it doesn’t do anything… adjusting the styling and adding behaviors can come later. For now, just think about how your user will interact with the elements in your skeleton layout.
✓ Wire up event-based interactions. Once you are happy with your layout, start wiring up interactions between UI elements. This is where the magic (or confusion) happens! Plan out what should happen when a user clicks a map or moves a slider. Be aware that events are handled asynchronously and in parallel, which can make behaviors difficult to debug.
- Pro tip: Although most widgets accept event handling callback functions as an initialization parameters (for example: ui.Button.onClick(callback)), creating stand-alone functions first can make it easier to test complex behaviors before adding them as a callback.
- Pro tip: While “responsive web design” is usually a primary goal, sometimes this is achieved by making your UI elements “less responsive” through the use of throttling.
✓ Build reusable functionality. The Earth Engine Code Editor includes some common widgets (buttons, sliders, map, chart), but you will often want to combine those widgets together with event-handling code to create custom widgets. For example, legends for continuous data layers and categorical data layers, layer information panels and. When you find yourself building the same (or similar) complex widgets, take the time to wrap that code in function so it can be easily reused. Polish it up, and share it with the community as a module.
✓ Save state with URL parameters. Earth Engine Apps do not have a mechanism for preserving state between uses, but you can preserve state by storing it as URL parameters. It can be helpful to preserve the location and zoom level of your map, as well as the state of any UI widgets that the user may update. With the applications state encoded in the URL, users of your app can directly share what is important to them.
Learn more by checking out this slide deck, which gives a perspective of where Earth Engine Apps fit into the broader spectrum of application development options, including an intro to Python Dashboards. The code and slide deck was developed as part of the 2024 Geo for Good mini-summits in São Paulo, Brazil and Dublin, Ireland. Many thanks to Valerie Pasquarella, Sheba Rasson, and Jeremy Malczyk and Michael Dewitt for helping to create the session content and co-teaching the sessions.
About the Author
