When WURFL marries Client-Side: Introducing WURFL.js

When WURFL marries Client-Side: Introducing WURFL.js

Marriage is a wonderful institution, but who wants to live in an institution?” – Groucho Marx

by Jon Arne Saeteraas, VP of Innovation, and Luca Passani, CTO, Scientiamobile

WURFL.jsOne month ago, we announced WURFL.js (pron: WURFL DOT J-S), but we had not mentioned it on our blog yet. The “trial period” is over and it is time to promote the new beautiful creature a bit more prominently. There’s a lot to be gained for developers here.

Let us back up a little bit. There was a time when mobile web development done right implied the usage of server-side detection in order to work around the limitations of mobile devices. The predominance of smartphones on one side and the advent of Responsive Web Design (RWD) and Progressive Enhancement (PE) on the other have made the situation simpler for developers who prefer to avoid having to deal with server-side techniques to handle issues related to user-experience. As we discussed multiple times, server-side adaptation introduces a cost that many, particularly small and medium-sized organizations, are not that willing to pay.

Does this mean that optimizing UX for tablet and mobile devices is a bad idea? no, it does not. It simply means that optimization has a cost. As everything in life, cost must be stacked up against the benefit that a solution provides, and server-side is often expensive for those who want to make their site mobile-friendly, particularly when compared to the advantages of managing all the adaptation logic within the boundaries of one single page.

Being conscious of this, we decided to apply the old saying “If the mountain won’t come to Muhammad then Muhammad must go to the mountain” and created a solution that marries the power of WURFL with the model that most web developers love: solve the problem by throwing a little Javascript at it.

This is how WURFL.js was born. With WURFL.js, the only thing one needs to do is to include this script on one’s page:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

For those not familiar with it, the “//” syntax will allow one to embed the script in pages served through both HTTP and HTTPS.

The WURFL.js script will contain a JavaScript object with the following properties: the complete device name, form factor and a boolean is_mobile:

{"is_mobile":true,
 "complete_device_name":"Google Nexus 7",
 "form_factor":"Tablet"}

That’s of course assuming you are browsing the page with a Nexus 7, or the object will return the properties that relate to the HTTP client you are using at the moment.

If you are familiar with WURFL already, you may wonder what capabilities are these. These are three virtual capabilities that we have introduced for the purposes of WURFL.js and that are derived from the capabilities you are already familiar with, such as brand_name, model_name, is_wireless_device and so on.

Here are the possibile values of the WURFL.js properties:

complete_device_name

The name the device is known by. Typically make and model, a “group” of devices, or a more generic definition.

form_factor

Desktop
App
Tablet
Smartphone
Feature Phone
Smart-TV
Robot
Other non-Mobile
Other Mobile

is_mobile

true or false. True if the device is a tablet, Smartphone or other mobile device.

Once again, the data you get in the JavaScript object is unique to your device and browser. The content of the JavaScript file is generated server-side after the WURFL API (which one exactly is transparent to you) has analysed the HTTP request and determined the client capabilities.

Once the script is loaded, you will be able to do things like:

if(WURFL.is_mobile){
    //dostuff();
}

or

if(WURFL.form_factor == ‘Tablet’){
    //domorestuff();
}

Which has been the Holy Grail of web developers going mobile-friendly for quite some time.

Better iOS device detection
For reasons that were probably only known to Steve Jobs, Apple has always gone out of its way to disguise the hardware of its devices in HTTP requests. For example, at the time of this writing, iOS 7 can run on 5 different iPhone hardware specs, going all the way from iPhone 4 to iPhone 5C. This is an issue that has always made us (and most WURFL users) very sad.

Having WURFL.js delivered to the client, gives it the ability to identify tricky detection cases and sniff a little bit around once the script lands on the client. In the case of iOS devices, we are often able to detect the actual device and we happily reflect that knowledge in the Javascript WURFL object itself. For example, in the case of an iPhone 5C, you will find:

 "complete_device_name":"Apple iPhone 5C",

Believe us. This is cool.

Demo of WURFL.js
The wurfl.io web site is a demonstration of WURFL.js . If you view source, you will see how we used WURFL.js.

The most common way to use this kind of contextual data is to tweak user experience based on what the device or browser is capable of. On wurfl.io, for example, we are disabling background video and parallax scrolling for mobile devices. Further, advertising is included as a demo since that is also a common issue for many webmasters. More interesting, possibly, is the Google Analytics example where we show how WURFL data easily can be put into Google Analytics for custom processing.

Google Analytics has some mobile metrics built in, but the WURFL data can give your reports an extra gear. WURFL.js enables new reports that gain better insight into how your users access your content. Below is an example of different form factors on a web page:

wurfljsgoogleanal

Believe us. This is cool too.

Did we mention it’s free?
WURFL.js is essentially a free service. As long as your site is publicly available and does not require users to access its content through payment or paid subscriptions, you can use WURFL.js free of charge (you might want to read the License, though). Again. This is very very cool.

Conclusions
WURFL.js Community Edition is a cool new service launched by ScientiaMobile. WURFL.js can be perfectly integrated in websites that use techniques such as Responsive Web Design and Progressive Enhancement to deliver further optimization through Javascript. If you adopt it on your site, feel free to drop us a note. We will happily feature it in our blog.

Enjoy

Jon Arne and Luca

PS: Note from Luca. You guys noticed that we snatched @jonarnes and he now works for ScientiaMobile, right?

  • Ceasar

    Really nice try. I have used it now for one week en twice there were hickups with your server. Yesterday it tooks 20 seconds to load so it blocks the rest of the website.
    For now I deleted the js and use my own solution.

    Without a 24 seven reachable DNS server this cannot be used if you seriously about your website performance

  • Luca Passani

    Thank you for your message, Cesar.

    In all openess, you are right about th fact that there were a couple of hiccups in the WURFL.js service. The reality is that adoption of the service has grown to several tens of millions of requests per day over the past month or so. We have solid system monitoring that will notify about the health of WURFL.io, and automatically restart servers and create new ones when capacity is reached. In a couple of occasions the system has been overwhelmed by the spike of usage or by issues with AWS, but you can trust us that each of those occasions has served the purpose of beefining up the infrastrcture: deployment of extra capacity and extra auto-recovery mechanisms. In short, please bear with us. You won’t be disappointed.