Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Combining contextual information with Conditioner JS

Wednesday, August 13th, 2014 by Servage

ConditionerJS as responsive scriptAs a web developer, I have come to realize that the old fixed canvases of our desktops are rapidly breaking apart. In today’s development world, we have to venture out to the different device landscapes which are all a bit fuzzy at the moment. We are tasked with designing something flexible and organic, so that we can make an appropriate pitch for great user experiences and performance optimization, without distracting our users at all.

With this realization, I would like to have the reader look at JavaScript and its functionality on contemporary web programming, where hardware and software fragmentation is the norm. The most challenging part is deciding when our JavaScript should load, and when our media queries should run. Or technically speaking, we have to know the context, and based on contextual results, we have execute various scripts, and hence functionality.

For this situation, we have an effective tool in coding, called ConditionerJS. This tool decides the right moment to execute various scripts in the coding documents, including JavaScript.

Understanding Context on the Web & Mobile

Context means information about the environment where users are interacting. Principally, user context on the web with large devices are altogether different from mobile devices. Therefore, designing mobile context for a responsive website is a bit more challenging than a static desktop or laptop context. With mobile, hardware and software are not only determining factors, but also the touch gestures affecting the scenario.

Now, in such fluid scenarios, measuring various changes in context can be tricky from the web or mobile developer perspective. Whereas, JavaScript modules, with various tests, can help immensely. For instance, “resize” and “scroll” events on windows can tell the immediate context of the users. However, consideration for the measurements of only context are not our final goal. We also have to focus on user experience, according to changing conditions and the context of the user. Therefore, we must keep a sharp eye on the context related parameters and act accordingly. This is the place where ConditionerJS acts, by specifying the environment related conditions for your various modules and immediately loads the relevant JavaScript or media query, once the defined conditions are met.

Put more simply, it is the separation of concerns in order to make your JavaScript module more flexible, easy to maintain, and reusable all of the time.

Inner Workings of ConditionerJS

In order to understand the inner components of ConditionerJS, we will use an example of a map in UI, which loads all details when screen resolution is above 20em/500px; otherwise, slashes the content. Now we will code this module setting a “data-module” attribute instead define a class. For example:

20em)} and element:{seen}”> …

Now, we’ll review step-by-step to see what is happening when DOM finishes loading:

  • Now, ConditionerJS runs initial queries to the DOM for specific nodes that have “data-module” attributes. This working is based on the “querySelectorAll” functionality.
  • When DOM finds matches according to the “data-module,” it looks for the next defined condition “data-condition” and runs tests to determine whether it matches or not.
  • Here we have defined a ui/Map attribute value in “data-module” and set “min-width: 20em” as the data condition. Thus, if our viewport is greater than 20em/500px, the map will load. If otherwise, it will not load.
  • Here RequireJS (ui/Map) acts as reference module and ConditionerJS will fetch it.
  • As we know, RequireJS will use the “load” method and ConditionerJS will call a constructor for it.

Set of Tests/Modules for ConditionerJS

There are many sets of tests (which are modules in themselves) for Conditioners and the following are major ones, which are found the most:

  1. “query” and “supported” for “media” tests/module
  2. “seen”, “min-width” and “max-width” for “elements” tests
  3. “min-width” and “max-width” for window (size) tests
  4. “available” for “pointer” tests, etc.

No doubt, if you are a seasoned web or mobile developer you can write your own custom tests and create some interesting stuff in your projects.


References & More Reading
Frizz-Free JavaScript With ConditionerJS


Combining contextual information with Conditioner JS, 2.8 out of 5 based on 4 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.