Traditional vs. Alloy Titanium dev

alloy_index.js

$.index.open();

alloy_index.tss

"Window": {
    backgroundColor: '#fff'
},
"Label": {
    color: '#999',
    font: {
        fontSize:20,
        fontFamily:'Helvetica Neue'
    },
    textAlign:'center'
}

alloy_index.xml

<Alloy>
    <TabGroup>
        <Tab title="Tab 1" icon="KS_nav_views.png">
            <Window title="Tab 1">
                <Label>I am Window 1</Label>
            </Window>
        </Tab>
        <Tab title="Tab 2" icon="KS_nav_ui.png">
            <Window title="Tab 2">
                <Label>I am Window 2</Label>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

traditional_app.js

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var label1 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 1',
	font:{
            fontSize:20,
            fontFamily:'Helvetica Neue'
        },
	textAlign:'center',
	width:'auto'
});

win1.add(label1);

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

var label2 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 2',
	font:{
            fontSize:20,
            fontFamily:'Helvetica Neue'
        },
	textAlign:'center',
	width:'auto'
});

win2.add(label2);



//
//  add tabs
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  


// open tab group
tabGroup.open();