Mobify Developer Blog Mobify
, August 7 2012

Introducing Mobify.js

A little over a week ago, we announced that we’re open-sourcing Mobify.js, our framework that helps you quickly adapt any website to any device under the MIT-license. The immediate reactions from the front-end community were exciting and encouraging.

In this post, we’d like to fully explain the history behind Mobify.js, what it is, what it comes with, where it’s headed and why you should use it if you’re building mobile websites. If you’re ready to start using it right away, check out the Mobify.js homepage or Mobify.js on GitHub.

History

At Mobify, we started with the vision to make the web better on all devices. As we say, "To Mobify the Web." Our first product to mobify the web was a proxy-based solution that was cutting edge in 2008. It provided a mobile version of the website at m.yoursite.com and over fifty thousand people built mobile websites on this product.

Over time, as we built larger websites, we started to discover the limitations to the proxy-based solution. The limitations hit us hard one morning after we’d been up all night trying to setup servers to meet PCI compliance. We knew there had to be a better way to build amazing mobile websites.

We started the Mobify.js project internally to provide an alternate solution and answer these inconsistencies across devices. As we built it we could see there was a need for a framework that went beyond building mobile website, but to adapt any website to any device. Mobify.js is now being used to power millions of daily mobile and tablet visits to sites like Starbucks, ideeli, Beyond the Rack, and lululemon.

What is Mobify.js?

Mobify.js is a framework for client-side adaptation of any site to any device. It consists of four key parts:

  • a JavaScript snippet that does device detection and bootstraps the adaptation. This is known as the Mobify.js tag and needs to go right after the head tag.
  • the tag loads the Mobify.js payload file that contains a series of operations that adapts the DOM constructed from the original source to an object that can be rendered with client-side templates. This final HTML produces a DOM that you see on your mobile browser.
  • mobify-client, which is a cross-platform command line program that runs within the Node.js runtime for creating fresh projects, building for production and deploying Mobify.js projects.
  • a set of modules that contain common, reusable design and code elements that serve as a showcase of building for mobile first. These modules have been tested across a wide range of devices and should significantly speed up development.

Since the adaptations are all run client-side, every page on your site lives at a single URL. Avoiding duplicating your content on another URL (i.e., m.yoursite.com) is great for SEO, social media sharing and user experience. You also don’t run the risk of your mobile site falling out of sync with your desktop site.

What's inside Mobify.js?

To get started with Mobify.js, we install the mobify-client through the node package manager. This package is comprised of two repositories: mobifyjs and mobify-client. The former includes the client-side adaptation code such as the templating language and the latter includes tools to build Mobify.js for production including concatenation and minification.

Mobile Templating Language

Mobify.js uses an asynchronous, lightweight and fast Javascript templating language built over Dust.js. We picked dust.js for its high performance, maturity, documentation and ease of use. Linkedin has done an extensive study on dust.js which is worth a read. Note that Mobify.js can be limited to the use of DOM adaptations only without ever having to create brand new templates.

Zepto.js

jQuery is one of the most popular JavaScript libraries out there, mainly because of its cross-browser support, going back all the way to IE6. However, the legacy support is a big portion of the codebase. Comparatively, Zepto.js is significantly smaller aiming to be in the 5-10 KB range, while still maintaining jQuery syntax compatibility. Zepto does this by cutting down the number of browsers supported (mobile is predominantly Webkit.)

We decided to ship with Zepto as bandwidth is a big issue on mobile. However, Mobify.js supports both jQuery and Zepto and we might decide to switch back to jQuery if they followed up on their plans to make it more modular.

Designer friendly class names

Mobify.js injects additional classes to a global wrapper like your site’s body tag to indicate properties about the mobile device environment. This includes information about screen size, operating system, pixel density and orientation. For example, the device orientation is presented by x-landscape and x-portrait, automatically updated when the orientation changes. To see how this works, check the source.

Batteries included

Mobify.js ships with two modules at present that were built from the ground up as mobile-first citizens. Most mobile web components like sliders and accordions that are widely used today are not meant for mobile and were hastily ported over from their desktop counterparts. Our modules were designed to be mobile-first and have been tested across a spectrum of devices. They come pre-packaged with markup, CSS styling and lots of examples to make it really easy to use. We will be digging into the philosophy and motivations behind our modules in a future post. Check out our current modules here

Production ready

The mobify-client comes built-in with a development web server, which compiles the API with your adaptations and templates on the fly for rapid development. For production use-cases, the mobify-client can build a highly compact version of Mobify.js using UglifyJS that removes comments, shortens variable names and does various other optimizations. The build artifact can be hosted statically by your webserver or on the Mobify Cloud Platform (which is free.)

Why should you use this?

Mobify.js provides a universal solution to building mobile websites. At Mobify, it’s used extensively across all of our customer sites and is flexible enough to work for many unique use cases.

It’s a simple way to build a clean and highly usable mobile website either from scratch or from an existing desktop site. Your adaptations are always described as deltas with respect to your desktop site, leading to shorter integration times.

The typical use-case is to use the mobify-client to compile a single payload file that is pushed to a content distribution network (CDN). The payload is cached on the device for five minutes so it doesn’t have to be re-downloaded on each new page request. We do quite a bit more front-end optimizations (e.g., the use of DOM storage) which we will be spilling out in the future.

Where is it headed?

By open-sourcing Mobify.js, we really want to empower developers to create great mobile experiences. If you’d like to help make Mobify.js better, feel free to fork it, file issues and watch its progress on GitHub. We aim to put out shiny new features every week, so keep checking back often to keep on top of what we’re up to.

You should also follow the Mobify.js team on twitter here.

Hope that article was useful for you!

Would you like to receive more mobile web tips in your inbox, right when we publish them?

Subscribe to Mobify’s Developer Blog!

You'll be joining a community of awesome, like-minded mobile developers.

And you'll get articles full of mobile web development tips and tricks, in your inbox, right when we publish them.