Jacob Waller: Webifying Titanium Development
3 likes•1,024 views
Kranium is a utility library for developing cross-platform mobile applications using Titanium, leveraging popular web development frameworks like jQuery and Backbone. It simplifies the process of creating UI components and managing state while offering integration with tools for live updates and testing. Currently in open beta and hosted on GitHub, Kranium aims to enhance development efficiency by providing easy access to essential web technologies in mobile environments.
![Titanium development
K({
type: 'tabgroup',
tabs: [{
cls: 'myTab',
window: {
cls: 'myWindow',
children: [{
text: 'Hello world!',
cls: 'mylabel',
click: function(){
alert('You clicked me!');
}
}]
}
}]
}).open();
Is now more pleasant, quick and sexy!](https://image.slidesharecdn.com/waller-kranium-111011124716-phpapp02/85/Jacob-Waller-Webifying-Titanium-Development-26-320.jpg)
![Titanium development
Stylus
K( .myTab
type: "tabgroup" icon path/to/my/icon
tabs: [
className: "myTab" window
window: background-color #ccc
className: "myWindow" bar-color #00a
children: [
text: "Hello world!" .myLabel
className: "mylabel" text-align center
] color #333
] shadow-color #fff
).open() shadow-offset-y -1
font-size 20
font-weight bold
With lots of possibilities!](https://image.slidesharecdn.com/waller-kranium-111011124716-phpapp02/85/Jacob-Waller-Webifying-Titanium-Development-28-320.jpg)
![Example
app.js!
K({
type: 'window',
children: [{
type: 'loggedinstatus'
}]
}).open();
var i = 0;
setInterval(function(){
Ti.App.fireEvent('authchange', {
loggedIn: !!(++i % 2)
});
}, 1000);](https://image.slidesharecdn.com/waller-kranium-111011124716-phpapp02/85/Jacob-Waller-Webifying-Titanium-Development-59-320.jpg)
![Example
app.js!
K({
type: 'window',
children: [{
top: 10,
type: 'loggedinstatus'
},
{
bottom: 10,
type: 'loggedinstatus'
}]
}).open();
var i = 0;
setInterval(function(){
Ti.App.fireEvent('authchange', {
loggedIn: !!(++i % 2)
});
}, 1000);](https://image.slidesharecdn.com/waller-kranium-111011124716-phpapp02/85/Jacob-Waller-Webifying-Titanium-Development-60-320.jpg)
![// Define model
RowModel = Backbone.Model.extend({
type: 'tableviewrow'
});
// Define collection
RowCollection = Backbone.Collection.extend({
model: RowModel,
comparator: function(model) {
return model.get("title");
}
});
// Create todos collection
todos = new RowCollection();
todos.add([
{ title: "An example todo" },
{ title: "Another example todo" },
]);
// Create todolist
var todolist = K.create({
type: 'todolist',
collection: todos
});](https://image.slidesharecdn.com/waller-kranium-111011124716-phpapp02/85/Jacob-Waller-Webifying-Titanium-Development-64-320.jpg)
![exports.Class = Window.extend({
navBarHidden: true,
init: function(o){
this.titleLabel = K.createLabel({
className: 'titleLabel'
});
todos.bind('all', this.updateTitleLabel.bind(this));
this.updateTitleLabel();
this.children = [{
type: 'toolbar',
className: 'todoToolbar',
items: [{
type: 'textfield',
className: 'todoInputTextField',
events: {
"return": function(e){
todos.add({ title: e.value });
}
}
},
'spacer',
this.titleLabel]
}, todolist];
this._super(o);
},
updateTitleLabel: function(){
var completed = todos.filter(function(m){ return m.get('hasCheck') }).length;
this.titleLabel.text = completed + ' / ' + todos.length + ' todos';
}
});](https://image.slidesharecdn.com/waller-kranium-111011124716-phpapp02/85/Jacob-Waller-Webifying-Titanium-Development-66-320.jpg)
Jacob Waller: Webifying Titanium Development
- 1. Kranium Webifying Titanium Development Jacob Waller
- 3. +! +! +! →!
- 4. +
- 5. http://flic.kr/p/9wLZkJ! Kranium • Webifying Titanium Development!
- 6. " Cross platform apps using javascript! " Shared business logic! " Native UI! " Device API:s!
- 7. Why cross-platform? " One codebase! " Faster development → cheaper development! " Less code → less bugs! " Focus on one language and one tool!
- 8. Why not cross-platform? " Potential bugs in cross-platform frameworks! " Somewhat harder stepping outside the box! " Might still need platform branching! " Less speed and more memory usage!
- 9. Cross Platform is Hard " iOS! " Android! " Objective-C! " Java! " XCode! " Eclipse!
- 10. Titanium takes the hit http://flic.kr/p/91Zydu!
- 11. Cross Platform Medicine http://flic.kr/p/8dZbk4! " Must use lowest common denominator! " Go with a low-level API! " Must focus on getting the “atoms” behave the same across platforms!
- 12. Low-level http://flic.kr/p/75b2DJ! Means powerful!
- 13. Low-level http://flic.kr/p/5JDvZM! Also means annoying to build large stuff!
- 14. Low-level http://flic.kr/p/nyxCW! Is it therefore wrong?!
- 15. NO
- 16. High-level " Low level building blocks let us build high- level abstractions! " Upon which we can build awesome stuff!
- 17. High-level http://flic.kr/p/8ovJYH!
- 18. Titanium " Titanium Mobile has a low-level core API:s for each platform it supports! " Lets cover it in platform- independent high-level awesome-sauce!
- 19. But how? http://flic.kr/p/9wfuUh!
- 20. Parallel " Web development has low-level API:s! " document.createElement! " element.style.backgroundColor!
- 21. Web development if (el.addEventListener) { el.addEventListener("mouseover", myFunction, false); el.addEventListener("mouseout", myFunction, false); } else if (el.attachEvent) { el.attachEvent("onmouseover", myFunction); el.attachEvent("onmouseout", myFunction); } else { el.onmouseover = myFunction; el.onmouseout = myFunction; } Used to be painful, slow and ugly!
- 22. Web development $(el).bind("mouseover mouseout", myFunction); Is now pleasant, quick and sexy!
- 23. Ecosystem
- 24. Titanium development var tabGroup = Ti.UI.createTabGroup(), shadowColor: '#fff', shadowOffset: { win1 = Ti.UI.createWindow({ y: -1, backgroundColor: '#ccc', x: 0 barColor: '#00a', }, title: 'My window' font: { }), fontSize: 20, fontWeight: 'bold' tab1 = Ti.UI.createTab({ } icon: 'path/to/my/icon', }); title: 'My tab', window: win1 win1.add(label1); }), label1.addEventListener('click', function(e){ alert('You clicked me!'); label1 = Ti.UI.createLabel({ }); text: 'Hello world!', textAlign: 'center', tabGroup.addTab(tab1); color: '#333', tabGroup.open(); Used to be somewhat painful, slow and ugly!
- 25. Welcome Kranium http://flic.kr/p/9wLZkJ!
- 26. Titanium development K({ type: 'tabgroup', tabs: [{ cls: 'myTab', window: { cls: 'myWindow', children: [{ text: 'Hello world!', cls: 'mylabel', click: function(){ alert('You clicked me!'); } }] } }] }).open(); Is now more pleasant, quick and sexy!
- 27. Titanium development .myTab { icon: path/to/my/icon; } window { background-color: #ccc; bar-color: #00a; } .myLabel { text-align: center; color: #333; shadow-color: #fff; shadow-offset-y: -1; font-size: 20; font-weight: bold; } Is now more pleasant, quick and sexy!
- 28. Titanium development Stylus K( .myTab type: "tabgroup" icon path/to/my/icon tabs: [ className: "myTab" window window: background-color #ccc className: "myWindow" bar-color #00a children: [ text: "Hello world!" .myLabel className: "mylabel" text-align center ] color #333 ] shadow-color #fff ).open() shadow-offset-y -1 font-size 20 font-weight bold With lots of possibilities!
- 29. Kranium " Lovechild of the following stunning web frameworks:! " jQuery / Zepto! " Backbone! " Jade! " Livetanium / Livereload! " Sizzle / mini.js! " Jasmine! http://bit.ly/3vVcI! " JSS / Stylus / Sass / LESS! " JSConsole / Weinre!
- 30. Comparison
- 31. jQuery / Zepto " Easy access selector engine! $('.content > .label, .hello').text('hello!'); $(el).find('.content'); $('.content', el);
- 32. jQuery / Zepto " Chainable collections with helper functions! $(el) .text('hey') .css({ color: '#f00' }) .parent('.row') .bind('click', onClick) .append(stuff);
- 33. jQuery / Zepto " Simplified API:s! $.ajax({ type: 'GET', url: 'http://some/url', success: function(data, status, xhr){ alert(data); } });
- 34. Titanium " Let’s see how these look in the low-level Titanium API!
- 35. Titanium " Easy access selector engine?! N/A
- 36. Titanium " Chainable collections with helper functions?! el.text = 'hey'; el.color = '#f00'; var parent = el.getParent().getParent().children().filter (function(el){ return /(^|s+)row(s+|$)/.test(el.className); }); parent.addEventListener('click', onClick); stuff.forEach(function(toAdd){ el.add(toAdd); });
- 37. Titanium " Simplified API:s?! var xhr = Ti.Network.createHTTPClient(); xhr.open('GET', 'http://some/url'); xhr.onload = function(data, status, xhr){ alert(data); }); xhr.send();
- 38. Kranium " Lets look at the same functionality using Kranium!
- 39. Kranium " Easy access selector engine! $('.content > .label, .hello').text('hello!'); $(el).find('.content'); $('.content', el);
- 40. Kranium " Chainable collections with helper functions! $(el) .text('hey') .css({ color: '#f00' }) .parent('.row') .bind('click', onClick) .append(stuff);
- 41. Kranium " Simplified API:s! $.ajax({ type: 'GET', url: 'http://some/url', success: function(data, status, xhr){ alert(data); } });
- 42. Kranium http://bit.ly/bW1zP5! " Tries to invent as few wheels as possible! " Instead piggyback on the ideas and momentum of existing great web frameworks!
- 43. What to piggyback? " jQuery / Zepto! " Backbone! " Jade! " Livetanium / Livereload! " Sizzle / mini.js! " Jasmine! " JSS / Stylus / Sass / LESS! http://flic.kr/p/7dpmyF! " JSConsole / Weinre!
- 44. What IS Kranium? " A utility library to include in your app! " A command line program!
- 45. Utility library " Exposes a jQuery-like object called K (or $)! " Exposes Backbone integration! " Exposes Jade template engine! " Implements simple selector engine! " Implements enhanced styling! " Implements extendable modules!
- 46. Command line program " Built on NodeJS and NPM! " Initiates Kranium resources in project! " Pipes live updates! " Two-way console! " Jasmine reporter!
- 47. Template engine A great template engine is a huge help in keeping your code:! " DRY! " separated! " consise!
- 48. Jade " Lightweight! " Supports custom compilers! " Compiles templates to functions! " Beautiful syntax! " Consise! " In active development!
- 49. Jade example
- 50. // test.jade view.board label.boardTitle Board view.boardMessages - each msg, user in users label.boardMessage= user + ' says ' + msg
- 51. K.jade('test.jade', { users: { jacob: 'yeah', david: 'what', conny: 'hi', aida: 'hello', calle: 'yup' } });
- 52. .board { top: 10; left: 10; } .boardMessages { top: 30; layout: vertical; } .boardMessage { height: 20; top: 10; } .boardTitle { top: 0; height: auto; font-weight: bold; }
- 53. JSS " Great feature in theory - gives Separation of Concerns! " Hasn’t always been working well ! " Not powerful and extendable enough!
- 54. KSS " A styling layer implemented in the javascript context! " Everything created using K function is styled appropriately! " Style based on Types, Classes and IDs! " Platform branching using psuedo selectors! " Variable evaluation!
- 55. KSS label { color: #000; font-size: 16dp; } label:android { font-size: 17dp; text-align: left; } tableview:ios { style: Ti.UI.iPhone.TableViewStyle.GROUPED; }
- 56. KUI http://flic.kr/p/6a3wzw! " Extendable UI Modules! " Simple Inheritance! " Automatic KSS loading!
- 57. Example kui/loginstatus.js! exports.Class = Label.extend({ className: "loginstatus", init: function(opts) { this.events = { app: { authchange: this.updateStatus.bind(this) } }; this._super.call(this, opts); this.updateStatus(); }, updateStatus: function(e) { this.el.text = "Logged " + (e && e.loggedIn ? "in" : "out"); } });
- 58. Example kui/loginstatus.kss! .loginstatus { color: #f00; }
- 59. Example app.js! K({ type: 'window', children: [{ type: 'loggedinstatus' }] }).open(); var i = 0; setInterval(function(){ Ti.App.fireEvent('authchange', { loggedIn: !!(++i % 2) }); }, 1000);
- 60. Example app.js! K({ type: 'window', children: [{ top: 10, type: 'loggedinstatus' }, { bottom: 10, type: 'loggedinstatus' }] }).open(); var i = 0; setInterval(function(){ Ti.App.fireEvent('authchange', { loggedIn: !!(++i % 2) }); }, 1000);
- 61. Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions and views with declarative event handling...
- 63. Code walkthrough
- 64. // Define model RowModel = Backbone.Model.extend({ type: 'tableviewrow' }); // Define collection RowCollection = Backbone.Collection.extend({ model: RowModel, comparator: function(model) { return model.get("title"); } }); // Create todos collection todos = new RowCollection(); todos.add([ { title: "An example todo" }, { title: "Another example todo" }, ]); // Create todolist var todolist = K.create({ type: 'todolist', collection: todos });
- 65. // kui/todolist.js exports.Class = BackboneView.extend({ type: 'tableview', editable: true, events: { click: function(e){ var model = todos.getByCid(e.rowData._modelCid); model.set({ hasCheck: !model.get('hasCheck') }); }, "delete": function(e){ var model = todos.getByCid(e.rowData._modelCid); todos.remove(model); } } });
- 66. exports.Class = Window.extend({ navBarHidden: true, init: function(o){ this.titleLabel = K.createLabel({ className: 'titleLabel' }); todos.bind('all', this.updateTitleLabel.bind(this)); this.updateTitleLabel(); this.children = [{ type: 'toolbar', className: 'todoToolbar', items: [{ type: 'textfield', className: 'todoInputTextField', events: { "return": function(e){ todos.add({ title: e.value }); } } }, 'spacer', this.titleLabel] }, todolist]; this._super(o); }, updateTitleLabel: function(){ var completed = todos.filter(function(m){ return m.get('hasCheck') }).length; this.titleLabel.text = completed + ' / ' + todos.length + ' todos'; } });
- 68. Polyfill missing UI " Android lacks many simple UI modules! " Navbar! " TabbedBar! " ButtonBar! " Toolbar! " Extendable TabBar" " Kranium implements these!
- 71. Extend Base UI K.createTableview({ pullToRefresh: true, refresh: function(){ K.ajax({ url: 'http://example.com/service.json', success: this.render }); }, render: function(data){ this.setData(data.rows.map(this.createRow)); }, createRow: function(o){ return K.createTableViewRow({ title: o.name }); } });
- 72. Livetanium " Kranium integrates Livetanium! " Gives you live updates of KSS style changes as well as module updates!
- 74. Jasmine describe('Demo', function() { describe('Titanium Object', function(){ it('Ti == Titanium', function(){ expect(Titanium).toEqual(Ti); }); it('Ti.App', function(){ expect(Titanium).toBeDefined(); }); }); describe('TabGroup', function(){ it('Has tabgroup', function(){ expect(K('tabgroup').length).toBeGreaterThan(0); }); it('TabGroup.activeTab.title === "test"', function(){ expect(K('tabgroup').get(0).activeTab.title).toEqual("test"); }); }); });
- 76. Console
- 78. Summary " Consists of a command line program and an includable library! " Ports the best web development libraries and technologies to Titanium! " Polyfills parts missing between platforms! " Helps you with your KISS:ing and keeps you DRY!
- 79. Available now " Currently in open beta! " Source under MIT License! " Hosted on GitHub! " Pull requests and co-maintainers welcome" " http://github.com/krawaller/kranium!
- 80. Available now " Beware! " There will be bugs! " API far from frozen!
- 81. Available now " Works best with iOS, but Android getting there! " CLI works best on Mac OSX! " Will be tested and fixed for Linux and Windows !
- 83. Installation " 1. Install NodeJS and NPM! " 2. Run `npm install kranium`! " 3. There is no step 3!
- 85. Thank you + @litenjacob! [email protected]! [email protected]!
- 86. Go contribute please! http://flic.kr/p/9C7DZZ!