Getting started with Kranium.js – a brilliant framework for Titanium Mobile

At Codestrong, the first official conference for Titanium Mobile developers in SF a few weeks ago, fellow swede Jacob Waller presented his latest project – one awesome app framework built on the previous success of Livetanium and web techniques like Sizzle, Backbone.js and Jasmine. Here’s a short introduction to the concept to get you started.

So what is Kranium.js?

“The result of merging Titanium with web development techniques, creating a cyborg which is greater than just the sum of its parts. It will significantly speed up development and styling, and is useful both for prototyping and production apps.”
From Kranium.js Codestrong intro

“Kranium has enough brains to let your brain focus on the crucial stuff while developing Titanium Mobile apps. Kranium transfers some well known practices and techniques from web development to Titanium Mobile development. It’s both spiritually and physically the lovechild of [...] great web tech.”
From kraniumjs.com

Components

Kranium.js tries to simplify UI component creation and promote a clean modular pattern, which works very well for mobile apps.

// Vanilla Titanium Mobile example from kraniumjs.com
var tabGroup = Ti.UI.createTabGroup(),
    win1 = Ti.UI.createWindow({
        backgroundColor: '#ccc',
        barColor: '#00a',
        title: 'My window'
    }),
    tab1 = Ti.UI.createTab({
        icon: 'path/to/my/icon',
        title: 'My tab',
        window: win1
    }),
label1 = Ti.UI.createLabel({
    text: 'Hello world!',
    textAlign: 'center',
    color: '#333',
    shadowColor: '#fff',
    shadowOffset: {
        y: -1,
        x: 0
    },
    font: {
        fontSize: 20,
        fontWeight: 'bold'
    }
});
win1.add(label1);
label1.addEventListener('click', function(e){
    alert('You clicked me!');
});
tabGroup.addTab(tab1);
tabGroup.open();

Kranium.js cleans this up nicely and provides a very readable structure for creating deep objects.

// Example from kraniumjs.com
K({
    type: 'tabgroup',
    tabs: [{
        cls: 'myTab',
        window: {
            cls: 'myWindow',
            children: [{
                text: 'Hello world!',
                cls: 'mylabel',
                click: function(){
                    alert('You clicked me!');
                }
            }]
        }
    }]
}).open();

Extending components

Our re-usable components are stored in a folder kalled kui and custom components will be lazily autoloaded when needed. You can easily extend your app with custom components using the CommonJS module pattern and then easily create new instances of this custom component.

When creating components, I would suggest using a strong namespace pattern. I’m a fan of the Cocoa style naming, so my subclass of Label would in this example be called ARLoginStatusLabel – better to have a longer name that actually explains the components purpose.

// kui/ARLoginStatusLabel.js
exports.Class = Label.extend({
    init: function(opts) {
        this.events = {
            app: {
                authchange: this.updateStatus.bind(this)
            }
        };
        this.updateStatus();
        this._super.call(this, opts);
    },
    updateStatus: function(e){
        this.text = "Logged " + (e && e.loggedIn ? "in" : "out");
    }
});
// Instantiate in another file
var label = K.create({
    type: "ARLoginStatusLabel"
});

Use CSS to style components

Kranium.js ships with it’s own take on a CSS port for Titanium Mobile, which is actually pretty competent. Using the kranium init or kranium watch commands in Termninal will start an auto-compiler service for Sass, LESS and CoffeeScript files, with optional live in-app updating through sockets.

window {
	background-color: #777;
	barColor: #333;
}
.alert {
	background-color: #f00;
}

Queries with Sizzle

One thing I have worked hard on the past months is Adamantium.js, an idea that came from missing the query selector pattern, coming from web development. Kranium.js uses a modified version of the well-known Sizzle engine and emulates the DOM in a natural way.

$("window").bind("open", function (e) {
	alert("A window was opened");
	K.log(e.source);
});

It appears that support for pseudo selectors is lacking and all Sizzle filter methods are not yet implemented, but I think that will change over the coming months. I hope to be able to contribute, maybe through another open source library.

Console and Jasmine testing

As if it wasn’t enough, Kranium.js also comes with a Jasmine BDD integration and a localhost console – these two features will really improve any app development cycle and I hope I get to use this a lot.

How to install

Okey, so the only thing left now is to install Kranium.js and download the demo application. If you don’t have NodeJS installed, download and install it first. Then install the Kranium.js command line tool by running sudo npm install kranium -g in your terminal and use kranium –version to verify installation.

I look forward to testing Kranium.js during the coming weeks, but I have to say that I am so far very impressed. This looks promising and I hope to be able to contribute.

• Kranium.js

• Titanium Mobile