Global Query Params for Deeply Stateful Ember Apps

One perennial issue we run into developing applications at NYC City Planning is the need for persisting deep application state within a URL. It is sometimes an overlooked but powerful feature to share a stateful hyperlink with other colleagues. This is especially true for interactive mapping applications where dozens of map layers and layer-specific filtering logic requires complex and carefully-named query parameters.

For our upcoming rework of ZoLa, the city’s zoning and land use mapping application, we needed a way to easily pass around a large mapping state object with numerous properties. As our JavaScript framework of choice, EmberJS ships with query params for free, but our need for deep and complex statefulness would’ve lent itself to very long and un-maintainable controllers, an issue others building similar apps have raised.

Joshua Hornby proposes using Ember Services (global singletons):

Here, a “date” service contains all query parameter state. The developer uses computed aliases to make them more accessible in whichever classes they need.

I’d propose something similar, but much simpler:

Here, we avoid the added cruft of aliasing properties from the service (and therefore re-creating the original problem) and name the controller’s query parameters directly. This approach, combined with the excellent Ember Parachute, will make things much more manageable in situations where deep and complex state must be preserved in the URL.

On top of that, you can even organize query parameters into a nested object. This can help with name-spacing the parameters. Here’s an example of a service:

This way, we are able to reference nested properties. For a working example, see this Ember Twiddle.