Introduction to Titanium (and Alloy) for Mobilisation 2015 in Łódź, Poland.

1. Titanium
Develop Native Mobile Apps with JavaScript
Fokke Zandbergen @FokkeZB

2. Appcelerator
Developer
Evangelist
@FokkeZB
NL
Freelance
App
Developer
Try
Share
Improve
gitT.io
TiCons

3. WOW! I can use
my skills
to build
truly native
 apps!

4. NO!

6. Wrapped HTML Apps
polling
JSON
“localhost”
XMLHttpRequest

system
APIs
!

7. “The Bottleneck”

8. It just feels “sticky”

9. iOS TabGroup?
Android Drawer?
Uh?!

10. 
JS 2 Native Apps
JSCore/V8
APIs
system
APIs
UIKit etc.

11. 
V8
APIs
system
APIs
We’re not alone

12. var text = Ti.UI.createLabel({
text: "Hello, world!",
font: {
fontSize: 60
},
color: 'red'
});
var window = Ti.UI.createWindow();
window.add(text);
window.open();

13. var text = Ti.UI.createLabel({
text: 'Hello, world!',
font: {
fontSize: 60
},
color: 'red',
focusable: true
});
var window = Ti.UI.createWindow();
if (Ti.Platform.name === 'android') {
window.add(Ti.UI.Android.createProgressIndicator());
}
window.add(text);
window.open();
Platform-specific code

14. “The Bridge”

15. var blur = require('bencoding.blur');
var view = blur.createBasicBlurView({
blurRadius: 5,
image: '/images/background.png'
});
var window = Ti.UI.createWindow();
window.add(view);
window.open();
Modules


16. “The Boat”

17. 
var Hyperloop = require("hyperloop");
var TiApp = require("TiApp");
var UIViewController = require("UIViewController");
var UILabel = require("UILabel");
var UIColor = require("UIColor");
var UIScreen = require("UIScreen");
var CGRect = require("CGRect");
var NSTextAlignment = require("NSTextAlignment");
var label = UILabel.initWithFrame(CGRect.Make(0, 0,
UIScreen.mainScreen().bounds.width,
UIScreen.mainScreen().bounds.height
));
label.setText('Hello World!');
label.setTextColor(UIColor.redColor());
var viewController = UIViewController.init();
viewController.view.setBackgroundColor(UIColor.whiteColor());
viewController.view.addSubview(label);
TiApp.app().showModalController(viewController, false);
Hyperloop for iOS

18. 
var Hyperloop = require("hyperloop");
var TiApp = require("TiApp");
var UIViewController = require("UIViewController");
var UILabel = require("UILabel");
var UIColor = require("UIColor");
var UIScreen = require("UIScreen");
var CGRect = require("CGRect");
var NSTextAlignment = require("NSTextAlignment");
var label = UILabel.initWithFrame(CGRect.Make(0, 0,
UIScreen.mainScreen().bounds.width,
UIScreen.mainScreen().bounds.height
));
label.setText('Hello World!');
label.setTextColor(UIColor.redColor());
var viewController = UIViewController.init();
viewController.view.setBackgroundColor(UIColor.whiteColor());
viewController.view.addSubview(label);
TiApp.app().showModalController(viewController, false);
Hyperloop for iOS

19. var text = Ti.UI.createLabel({
text: "Hello, world!",
font: {
fontSize: 60
},
color: 'red'
});
var window = Ti.UI.createWindow();
window.add(text);
window.open();

20. var Window = require('Windows.UI.Xaml.Window'),
TextBlock = require('Windows.UI.Xaml.Controls.TextBlock'),
Colors = require('Windows.UI.Colors'),
SolidColorBrush = require('Windows.UI.Xaml.Media.SolidColorBrush');
var text = new TextBlock();
text.Text = 'Hello, world!';
text.FontSize = 50;
text.Foreground = new SolidColorBrush(Colors.Red);
var window = Window.Current,
window.Content = text;
window.Activate();
Hyperloop for Windows

21. var TextView = require('android.widget.TextView'),
Activity = require('android.app.Activity'),
Color = require('android.graphics.Color'),
RelativeLayout = require('android.widget.RelativeLayout'),
Gravity = require('android.view.Gravity'),
TypedValue = require('android.util.TypedValue');
var text = new TextView(activity);
text.setText("Hello World!");
text.setTextColor(Color.RED);
text.setTextSize(TypedValue.COMPLEX_UNIT_PX, 60);
var layout = new RelativeLayout(activity);
layout.setGravity(Gravity.CENTER);
layout.setBackgroundColor(Color.BLACK);
layout.addView(text);
var activity = new Activity(Ti.Android.currentActivity);
activity.setContentView(layout);
Hyperloop for Android

22. Spaghetti code

24. var text = Ti.UI.createLabel({
text: "Hello, world!",
font: {
fontSize: 60
},
color: 'red'
});
var window = Ti.UI.createWindow();
window.add(text);
window.open();

25. <Alloy>
<Window>
<Label>Hello, world!</Label>
</Window>
</Alloy>
'Label': {
font: {
fontSize: 60
},
color: 'red'
}
$.index.open();
index.xml
index.tss
index.js

27. <Alloy>
<Window>
<Label platform="android">Hello, world!</Label>
</Window>
</Alloy>
'Window[formFactor=tablet]': {
backgroundColor: 'green'
}
if (ENV_TEST) {
$.index.open();
}
Conditional Code

28. Widgets
<Alloy>
<Window>
<Widget src="hello" />
</Window>
</Alloy>
<Alloy>
<Label>Hello, world!</Label>
</Alloy>
index.xml
widgets/hello

29. Let’s play..

30. Apps alone won’t cut it

31. You need Triple

32. You need Triple
appcelerator.com

33. ✓ Native UI… NO HTML
✓ Cross Platform JS API
✓ Direct API Access
✓ Alloy MVC framework
✓ Modules & Widgets
✓ You need Tripple

34. I can use
my skills
to build
truly native
 apps!
WOW!

35. Thank you
Thanks to Ryan McGuire for the photo’s @bellsdesign
Fokke Zandbergen @FokkeZB