Altering Application State through Query Params

What is Application State

Application state is a loaded and contextual term. It can mean many things, but here application state is the memory/behavior of an application at any given time. The state is determined based on a series of events and actions led by a user. Where are we now. What has been requested and therefore what should we show up.

One of the intentionally designed constraints on REST's HTTP architecture is to create a stateless web server. The server should remember nothing and start from a clean slate every time it communicates, it's the job of the client-browser to define/resume the state of the application.

The request we send from the client should be visibly clear as to the intention of the request and all the details we want the server to respond with.

Nice article about statelessness that allows the web to scale and why it is a vital part of the REST design:

There are many ways to manipulate the state of an application, and an equal number of popular JavaScript libraries to help with the process. But wanted to focus on an elemental approach by way of query params.

What are Query Parameters?

In a nutshell, it's the key-value pairs expressed in the url after the '?' sign, and separated by '&'. Consider:

Here, sort=ASC, and page=4 are the query params. The first part is the key, the second the associated value. Setting up query params is a great way to express state. The best part is that you get a shareable url that will hold onto the state of your web application. So if you spent hours finding a gift on an obscure eCommerce site, and you wanted to share the item on page 7 which was filtered down based on, let's say, income and geography- then all you have to do is share the link since the state of the app has been saved in the url via query params.

These dynamic segments of the url most commonly represent the model's serialization. But can include other application states.

Ember has a template helper, aptly named: query-params. This works in conjunction with the transitionTo and link-to methods. The controller also takes queryParams property. The Ember Docs do a great job explaining the entire concept:

Based on the docs, there are 3 ways in Ember:

  1. Controller
  2. link-to helper
  3. transitionTo

Common Gotchas:

The value of a query param must be a static value and not a computed property.

If the value is not set as null, it will default to the value it is set as.

Currently query params are set in route level controllers.