Hacking Titanium

33
Hacking Titanium David Bankier Director YY Digital @davidbankier [email protected]

description

Presented at Codestrong 2012 A quick look at three open source projects and the key hacks behind them: * TiShadow - Rapid, on-device, app development and testing tool. * TiHighlight - App dev on the go. * Cornwall - A WebView-Titanium Bridge.

Transcript of Hacking Titanium

Page 1: Hacking Titanium

Hacking Titanium!!!!

David Bankier!Director!

YY Digital!@davidbankier!

[email protected]!

Page 2: Hacking Titanium

Code is (mostly) evaluated at runtime!

Page 3: Hacking Titanium

TiHighlight!

tabGroup.setActiveTab(1);

try { if(current && current.close !== undefined) { current.close(); } current = eval(message.code); if(current && current.open !== undefined) {

tabGroup.activeTab.open(current); } } catch (e) { if(Ti.Platform.osname === 'android') { alert(e.toString()); } else { //iOS Error alert("Line: " + e.line + "\n" + e.message); } }  

Page 4: Hacking Titanium

TiShadow!

tishadow server node.js  express  socket.io  

Ace  

tishadow app TiSDK  (par7al)  

websockets  (socket.io)  

Page 5: Hacking Titanium

TiShadow!

try { if(current && current.close !== undefined) { current.close(); } current = eval(message.code); if(current && current.open !== undefined) { current.open(); } log.info("Deployed"); } catch (e) { log.error(utils.extractExceptionData(e)); }  

For  More:  Forging  Titanium  -­‐  Episode  23      

Page 6: Hacking Titanium

Code in Transit!

Page 7: Hacking Titanium

Cornwall!

$('#native').click(function() {

Cornwall.execute(function() { Titanium.Contacts.showContacts({}); }); });  

Page 8: Hacking Titanium

Cornwall!

var web_popup = function(a) { alert("Returned 'a' from Native: " + a.a);};$('#bounce').click(function() { Cornwall.execute(function() { alert("Hello From Native"); Cornwall.callback(web_popup)({a: "A"}); });});  

Page 9: Hacking Titanium

Cornwall!

Cornwall.execute = function (fn, arg) { try { var args = []; for (var i = 1, length = arguments.length; i< length; i++) { args.push(arguments[i]); } Ti.App.fireEvent("cornwall:" + Cornwall.id, {

fn: fn.toString(), args: args});

} catch (e) { alert(e); } }  

Page 10: Hacking Titanium

Cornwall!

var start = new Date();

$('#variables').click(function() { var text = 'Hello World'; Cornwall.execute(function(start, text) { alert("Started: " + start +

"\nText: " + text); },start, text); });  

Page 11: Hacking Titanium

Cornwall!

function evalFn(o) { try{ eval("(" + o.fn.replace(/Cornwall.callback\(([^\)]*)\)/g, "(function(o) { __web.evalJS('$1(' + JSON.stringify(o) + ');');})") + ")("+ JSON.stringify(o.args).substring(1).replace("]","") +")"); } catch (e) { alert(e); }};  

Page 12: Hacking Titanium

Cornwall!

var web_popup = function(a) { alert("Returned 'a' from Native: " + a.a);};$('#bounce').click(function() { Cornwall.execute(function() { alert("Hello From Native"); Cornwall.callback(web_popup)({a: "A"}); });});  

Page 13: Hacking Titanium

Cornwall!

(function() { alert("Hello From Native"); Cornwall.callback(web_popup)({a: "A"}); })()  

Page 14: Hacking Titanium

Cornwall!

function evalFn(o) { try{ eval("(" + o.fn.replace(/Cornwall.callback\(([^\)]*)\)/g, "(function(o) { __web.evalJS('$1(' + JSON.stringify(o) + ');');})") + ")("+ JSON.stringify(o.args).substring(1).replace("]","") +")"); } catch (e) { alert(e); }};  

Page 15: Hacking Titanium

Cornwall!

(function() { alert("Hello From Native"); Cornwall.callback(web_popup)({a: "A"}); })()  

Page 16: Hacking Titanium

Cornwall!

(function() { alert("Hello From Native"); (function(o) { __web.evalJS('web_popup('+ JSON.stringify(o) + ');'); })({a: "A"}); })()  

Page 17: Hacking Titanium

Apps in Transit!

Page 18: Hacking Titanium

•  Bundles source and assets!

•  Send bundle to device/s!

•  Unpack!

•  Execute!

TiShadow!

Page 19: Hacking Titanium

•  Allow require from the applicationDataDirectory

•  Do not cache CommonJS modules loaded from applicationDataDirectory

Tweaking TiSDK!

For  More:    Commit:  Allows  CommonJS  from  applica7onDataDirectory  

Page 20: Hacking Titanium

TiShadow!

tishadow app TiSDK  (par7al)  

Built  with  Custom  Titanium  SDK  

websockets  (socket.io)  

tishadow cli rewrites,  bundles  and  sends  off  your  

code.  

Page 21: Hacking Titanium

TiShadow!

! 16 + fs.readFileSync(src).toString()! 17 .replace(/Ti(tanium)?.Filesystem.(resourcesDirectory|getResourcesDirectory\(\))/g, "Ti.Filesystem.applicationDataDirectory + '"+app_name.replace(/ /g,"_")+"/'")! !

Redirect Resources!

Page 22: Hacking Titanium

TiShadow!

! 18 .replace(/require\(/g, "__p.require(")!  

Redirect Require Function!

Page 23: Hacking Titanium

TiShadow!

! 20 .replace(/([ :=\(])(['"])\/(.*?)(['"])/g, "$1__p.file($2$3$4)")! !

Redirect Assets!

Page 24: Hacking Titanium

TiShadow!

! 21 .replace(/Ti(tanium)?.API/g, "__log");!  

Redirect Logs!

Page 25: Hacking Titanium

There’s more…!

Page 26: Hacking Titanium

TiShadow!

15 var src_text = "try { var __p = require('/api/PlatformRequire'), __log = require('/api/Log'), assert = require('/api/Assert'), L = require('/api/Localisation').fetchString;\n"!!//...!!26 src_text += '} catch(e) { e.file="' + src + '"; __log.error(require("/api/Utils").extractExceptionData(e)); }';!  

Better Error Handling!

Page 27: Hacking Titanium

TiShadow!

! 19 .replace(/Ti.Locale.getString/g, "L”)!!

Dynamic Localisation!

Page 28: Hacking Titanium

TiShadow!

! 22 if (src.match("_spec.js$")) {! 23 src_text = "var jasmine = require('/lib/jasmine-1.2.0');var methods = ['spyOn','it','xit','expect','runs','waits','waitsFor','beforeEach','afterEach','describe','xdescribe'];methods.forEach(function(method) {this[method] = jasmine[method];});"! 24 +src_text;! 25 }!  

Fast(er) Testing Iterations!

Page 29: Hacking Titanium

TiShadow !

!22 .replace(/(.*?)\.addEventListener\(/g, "__events.addEventListener($1,");!!

Synchronising Events !

See  the  “click_sync”  branch  of  TiShadow  

Page 30: Hacking Titanium

#TiLondon!

tishadow app TiSDK  (par7al)  

Built  with  Custom  Titanium  SDK  

websockets  (socket.io)  

tishadow cli rewrites,  bundles  and  sends  off  your  

code.  

Page 31: Hacking Titanium

@TiLondon!

Page 32: Hacking Titanium

@Codestrong!

Coding on ANY device!

Page 33: Hacking Titanium

David Bankier!@davidbankier!

https://github.com/dbankier!!

[email protected]!