The concept

There are a lot of very complete and handy frameworks for putting together a mobile web application, most of them are full featured and can reproduce a lot of the most common behaviours of mobile operating systems, like skinned buttons, carousels, lists, tables, tabbed sheets, popovers and beyond.

In the world of native programming, there is an object that is quite well known and is usually called in the same way, regardless the platform: that's the scrollview. Scrollviews are generical objects that are used for showing contents that are usually bigger than the available space. User can scroll its content with fingers in many ways: scrolling horizontally, vertically, with a paged approach and so on. Usually this object is subclassed in order to recreate specialized versions of these objects, like tables, lists and more.

After using some native applications, mostly on iOS and a bit on Android devices, I've noticed that are used quite everywhere. Springboards are carousels with icons, and both are paged scrollviews. The phone contact list is a vertical scrollview with items that covers the full width of the container, that are the table rows. Even the iOS Facebook app have its springboard and the horizontal scrolling bar with sections is a scrollview too.

That's why I thought that scrollviews are the vanilla of mobile apps. Are quite everywhere, just nested or with different parameters so, probably scrollviews is what marks a modern mobile application. VanillaOS is my personal attempt on checking if that's true: what can I do with HTML, CSS and just a scrollview object written in javascript? It will look like a native app?

The project

VanillaOS is a mobile OS that doesn't exist. And will never be. By the way it has its own gray-shaded style, his apps, icons and standards, borrowed here and there from the most famous stereotypes in mobile OSs. VanillaOS is a prototyping playifield made with just 3 things:

The rules are simple: just an HTML page for each application and use the less amount of javascript possible. How many well-known GUIs you can do?

The scrollview

The VanillaOS project's core is a scrollview implementation. While in most of the cases, the javascript implementations are of scrollview subclasses like lists and carousels, the VanillaOS's scrollview is just... a scrollview. When created into the webpage as a DIV element, it just shows its content in a scrollable box.

The VanillaOS scrollview is quite configurable, so you can reproduce the classic scenarios we've talked about: it can be paginated or scroll in just one direction but, mainly, doesn't implement any of them. Moreover, the VanillaOS scrollview tries to recreate the nesting behaviour that is crucial in native applications: if a scrollview isn't able to handle a particular scrolling gesture, it passes the command to the nested scrollviews. While is a very simple and natural concept, you'll soon understand that is the trick behind how native apps acts.

As I usually do in my project, I'm providing a bunch of examples in order to learn how the scrollview works (that's are my tries on the VanillaOS game) but, since my birthday is near, I've wrote a in-depth API manual. Obviously using VanillaOS so check that out in the mock-apps section.

As an added bonus, the VanillaOS scrollview supports mouse scrollwheels, so you can use that for desktop browsers web applications too.

The stylesheet

There is nothing fancy to say about the VanillaOS stylesheet. Is just a stylesheet. If provides a number of classes for creating tabbars, headers, table rows, springboard icons and so on using a number of well-known tricks.

While its main role is to give a skin to VanillaOS apps, his role is very important too: javascript based layouts are usually slower than CSS one so, the more we use the built in CSS classes in VanillaOS, the better is for the application performances.

Any of the shipped CSS classes are directly related to the scrollview object: it can work without the VanillaOS stylesheet. It just does what stylesheets can do better: making HTML more readable and compact.

The helpers

Javascript is obviously the main character of the VanillaOS examples, starting from the scrollview implementation. But is quite realistic that, if you want something more than scrolling things, you need a bit of more of code.

The helpers library of VanillaOS implements some quick way for creating DOM objects, getting them, changing its attributes and, as added bonus, showing passive notifications. While its target isn't to be a JQuery replacement (that is like insulting JQuery), it contains the allowed tricks you can use in VanillaOS mock-apps. Just give them an eye: is really small and can be useful in other contexts.

Wrapping up

All these elements will be tied up by a single HTML page, that will mock a particular use case of scrollview, trying to simulate some classic scenarios. That's the mock-app, a gui simulation obtained from scrollviews and styled objects. I've tried to test these web pages on a number of devices, ranging from iOS devices like iPad and iPhones to Android devices, like my Samsung Galaxy Ace and a Galaxy Tab borrowed at work. You can test them on desktop browsers too: it works on the latest versions of Firefox, Chrome, Safari and Opera. I just suggest you to play with mock-apps with smaller windows, since are thought for mobile devices, but should work ok with bigger screens.

The Mock-Apps

All the demos are bookmarklet-compatible on iOS, so add them to your home screen for viewing them in full screen! Click on the image to enlarge the screenshot or on the Try this Mock-App button for trying the related demo in your current browser.

The code

While testing scrollviews was a funny game for me, you can use the VanillaOS freely in your projects or for testing more layouts. In any case, I release the whole code of the scrollview and demos as MIT/GPL2 so you can play as you want trying to mimick native behaviours in webapps. You obviously can help making the scrollview (and demos) code more complete, bug-free and feature packed. Just drop an email to my usual email address (strip the numbers as usual). I'm forgetting anything? Huh... the code.

Download VanillaOS version 0.1

I usually use my Github repo for projects just when is needed, so if you're going to collaborate continuously, just let me know and I'll upload everything there.


I've to thank my GF Bianca for its patience as usual... this time the name of the project is by me and obviously, is really really bad ;)