Getting started with Kranium.js framework

At Codestrong, the first official conference for Titanium Mobile developers in SF a few months 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);
});

Sources : [Adam Renklint | Kraniumjs.com]