Introduction Cross-Platform Native App development with JavaScript using Appcelerator Titanium and Alloy for an internal developer forum of a European multinational.

1. Cross-Platform Native Apps
with JavaScript
October 22, 2015
Fokke Zandbergen
@FokkeZB

2. Agenda: Cross-Platform Native Apps with JavaScript
• Why Cross-Platform?
• Why Native?
• Why JavaScript?
• Why Titanium?
• Alloy
• Appcelerator Platform

3. Why Cross-Platform?

4. Because you can’t bet on one platform

5. Because there’s no such thing as one platform
1.0 1.1 1.5 1.6 2.0 2.0.1 2.1 2.2 2.3-2.3.2 2.3.3-2.3.7 3.0
3.1 3.2 4.0-4.0.2 4.0.3-4.04 4.1 4.2 4.3 4.4 5.0 5.1
2011 2012 2013 2014 2015
0%
20%
40%
60%
80%
100%
The white line shows the market share of the leading API level at any time
The white line shows the market share
of the leading API level at any time
iOS 9
57%iOS 8
33%
Earlier
10%
October 5th, 2015
developer.apple.com

6. Because these platforms run on thousands of devices

7. Targeting multiple platforms without Titanium
!Product Management
Team
Team
Team

8. Targeting multiple platforms with Titanium
!Product Management Team

9. Why Native?

10. What does Native mean?
⎕ The developer uses the vendor’s toolchain
⎕ The developer uses the platform’s language(s)
⎕ The developer uses the platform’s APIs
⎕ The user experience is as expected on the platform

11. What cross-platform for long has worked like
"

12. What it sometimes looked like
iOS TabGroup?
Android Drawer?
Uh?!

13. What Native means to us
⎕ The developer uses the vendor’s toolchain
⎕ The developer uses the platform’s language(s)
⎕ The developer uses the platform’s APIs
⎕ The user experience is as expected on the platform✔
✔
JavaScript 2 Native

14. How JavaScript 2 Native works


15. How JavaScript 2 Native works


16. 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, iOS and Android

17. Why JavaScript?

18. Relatively easy to find

19. Relatively affordable

20. JavaScript is everywhere

21. Why Titanium?

22. DE
0
200
400
600
800
2012 2013 2014
Thousands
DE
0
100
200
300
400
2012 2013 2014
Millions
IBM
KONY
SAP
PEGASYSTEMS
ADOBE
XAMARIN
TELERIK
SENCHA
SALESFORCE.COM
MICROSTRATEGY
APPLE
MICROSOFT
ORACLE
GOOGLE
DSI
MOTOROLA SOLUTIONS
EMBARCEDERO
CLICKSOFTWARE
VERIVO SOFTWARE
CHALLENGERS LEADERS
NICHE PLAYERS VISIONARIES
COMPLETENESS OF VISION
ABILITYTOEXECUTE
AS OF SEPTEMBER 2014

23. Alloy

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();

27. Themes & Widgets
app
controllers
views
styles
assets
widgets
controllers
views
styles
assets
themes
styles
assets

28. <Alloy>
<Window>
<Label platform="ios">Hello, world!</Label>
</Window>
</Alloy>
'Label[formFactor=tablet]': {
color: 'red'
}
if (ENV_PRODUCTION) {
$.index.open();
}
$.index.open();
index.xml
index.tss
windows/index.js
Conditional Code
index.js

29. Appcelerator
Platform

32. Thank you
October 22, 2015
Fokke Zandbergen
@FokkeZB