Date post: | 13-Jan-2017 |
Category: |
Mobile |
Upload: | fokke-zandbergen |
View: | 194 times |
Download: | 1 times |
Cross-Platform Native Apps with JavaScript
October 22, 2015
Fokke Zandbergen@FokkeZB
Agenda: Cross-Platform Native Apps with JavaScript
• Why Cross-Platform?
• Why Native?
• Why JavaScript?
• Why Titanium?
• Alloy
• Appcelerator Platform
Why Cross-Platform?
Because you can’t bet on one platform
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 20150%
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 shareof the leading API level at any time
iOS 957%iOS 8
33%
Earlier10%
October 5th, 2015developer.apple.com
Because these platforms run on thousands of devices
Targeting multiple platforms without Titanium
! Product Management
! Team
Team
# Team
Targeting multiple platforms with Titanium
! Product Management Team
Why Native?
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
What cross-platform for long has worked like
" #"
What it sometimes looked like
iOS TabGroup?
Android Drawer?
Uh?!
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
How JavaScript 2 Native works
!
#
How JavaScript 2 Native works
!
#
#
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
Why JavaScript?
Relatively easy to find
Relatively affordable
JavaScript is everywhere
Why Titanium?
DEVELOPERS
0
200
400
600
800
2012 2013 2014
Thou
sand
s
DEVICES
0
100
200
300
400
2012 2013 2014
Millions
IBM
KONY
SAP
PEGASYSTEMSADOBE
XAMARIN
TELERIK
SENCHA
SALESFORCE.COM
MICROSTRATEGY
APPLE
MICROSOFT
ORACLE
DSI
MOTOROLA SOLUTIONS
EMBARCEDERO
CLICKSOFTWARE
VERIVO SOFTWARE
CHALLENGERS LEADERS
NICHE PLAYERS VISIONARIESCOMPLETENESS OF VISION
AB
ILIT
Y T
O E
XEC
UTE
AS OF SEPTEMBER 2014
Alloy
var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize: 60 }, color: 'red' });
var window = Ti.UI.createWindow();
window.add(text); window.open();
<Alloy> <Window> <Label>Hello, world!</Label> </Window> </Alloy>
'Label': { font: { fontSize: 60 }, color: 'red' }
$.index.open();
Themes & Widgets
app
controllers
views
styles
assets
widgets
controllers
views
styles
assets
themes
styles
assets
<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
Appcelerator Platform
Thank youOctober 22, 2015
Fokke Zandbergen@FokkeZB