titanium #mds13
TRANSCRIPT
June 7th, 2013www.fokkezb.nlTitanium
FOKKEZANDBERGEN
• What is native?
• HTML5 vs native
• Titanium
• Alloy Framework
• Appcelerator Platform
• Summary
• Q&A
Titanium
What is native?The myth of native languages
“Applications must be originally written in Objective-C, C, C++, or JavaScript as executed
by the iPhone OS WebKit engine”- iPhone OS 4 beta proposed license (2010)
C#
CC++
Objective-C
JavaScriptRuby Python
Lua
Scheme
LispSmalltalk
Haskell
ActionScript
.NET languages
ANY language compiled to ARM objectsANY language you write a compiled interpreter for
QT
What is native?The myth of compiled languages
Would you call these inferior?
https://github.com/languages
HTML5 vs Native!= interpreted
PHP
HTML/JS/CSSoutput
Machine
compilation
C
interpretation
input
C++
Machine
compilation
output
UI
HTML5 vs Native== web-in-an-app
?
UIoutput
Machine
compilation
Objective-C
interpretation
HTML5 vs Native== web-in-an-app
?
UIoutput
Machine
compilation
Objective-C
interpretation
input
Objective-C
Machine
compilation
output
UI
HTML/JS/CSS
HTML5 vs NativeCompared
HTML5 NativeWeb UI Native UI
Performance bottlenecks Accelerated performanceOpen data Secured data
Slow standards bodies Thousands of API’sNo monetization model One-Click-Buy200+ Browser versions iOS + 28 Android versions
Single code base Multiple code baseHuge / Cheap expertise Scarce / Expensive expertise
Direct distribution Indirect distribution~ 75.000 apps ~ 1.200.000 apps
What if...
Best of Both?
Titanium= native
JavaScript
UIoutput
Machine
compilation
Objective-C / Java
interpretation
100%NATIVE
TitaniumFacts
• Multi-platformiOS, Android, Blackberry, Tizen, MobileWeb, Windows
• Native UI
• Thousands of interpretable API’s
• Custom API modules marketplace
• Single codebase
• Titanium Studio IDE
• Familiar JavaScript
• 465.000+ developers
• 185+ countries
• 55.000+ apps in public stores
• 136.000.000+ devices
• NBC, PWC, Mitsubishi, Reuters
• imgZine, Snowciety, WappZapp
TitaniumCode
var window = Ti.UI.createWindow({backgroundColor: “white”
});
var label = Ti.UI.createLabel({color: “black”
});
label.addEventListener(“click”,function() {
require(“windowTwo”);}
);
window.add(label);window.open();
It gets...
Even Better!
Alloy Framework
Benefits
• Write up to 50% less code
• Re-style apps using themes
• Re-use code using widgets
• Bind abstracted data models
• Separate concerns, e.g. design
Compilation
• Cleans conditional code & assets
• Compiles XML and TSS to JS
• Compresses JS
• Fully integrated in Studio
• Widget marketplace coming
Alloy Framework
<Alloy><Window>
<Label onClick=”open”>Hello World</Label></Window>
</Alloy>
“Window”: {backgroundColor: “white”
}
“Label”: {color: “black”
}
function open() {require(“windowTwo”);
}
$.index.open();
views/index.xml
controllers/index.jsstyles/index.tss
But wait...
There is more!
Appcelerator PlatformMobile first
Appcelerator PlatformCompared
Titanium AppceleratorSDK SDK
Enterprise Connectors
Marketplace MarketplaceAlloy Alloy
Titanium Studio Appcelerator StudioTiShadow LiveView / Code Analyzer / Performance Profiler
Automated Tests / MonitoringFlurry / Google AnalyticsTitanium Cloud Appcelerator Cloud
5M push / 5M API / Client SSL / NodeJS > 10M push / 10M API / Server SSL / NodeJS
Best Effort / Community Support 99+ SLA / Live Supporthttp://www.appcelerator.com/plans-pricing/
Appcelerator PlatformCloud
5+MLN
Appcelerator Platfrom
Titanium
Alloy
Summary
ACS
FREE
Test
Analytics
Support
[email protected] @FokkeZB
www.amsterdam-titanium.nlmeeting every 2 monthstalks • discussion • beer