Cross-Platform Native Apps with JavaScript
-
Upload
fokke-zandbergen -
Category
Mobile
-
view
199 -
download
1
Transcript of Cross-Platform Native Apps with JavaScript
![Page 1: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/1.jpg)
Cross-Platform Native Apps with JavaScript
October 22, 2015
Fokke Zandbergen@FokkeZB
![Page 2: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/2.jpg)
Agenda: Cross-Platform Native Apps with JavaScript
• Why Cross-Platform?
• Why Native?
• Why JavaScript?
• Why Titanium?
• Alloy
• Appcelerator Platform
![Page 3: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/3.jpg)
Why Cross-Platform?
![Page 4: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/4.jpg)
Because you can’t bet on one platform
![Page 5: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/5.jpg)
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
![Page 6: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/6.jpg)
Because these platforms run on thousands of devices
![Page 7: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/7.jpg)
Targeting multiple platforms without Titanium
! Product Management
! Team
Team
# Team
![Page 8: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/8.jpg)
Targeting multiple platforms with Titanium
! Product Management Team
![Page 9: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/9.jpg)
Why Native?
![Page 10: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/10.jpg)
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
![Page 11: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/11.jpg)
What cross-platform for long has worked like
" #"
![Page 12: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/12.jpg)
What it sometimes looked like
iOS TabGroup?
Android Drawer?
Uh?!
![Page 13: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/13.jpg)
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
![Page 14: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/14.jpg)
How JavaScript 2 Native works
!
#
![Page 15: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/15.jpg)
How JavaScript 2 Native works
!
#
![Page 16: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/16.jpg)
#
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
![Page 17: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/17.jpg)
Why JavaScript?
![Page 18: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/18.jpg)
Relatively easy to find
![Page 19: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/19.jpg)
Relatively affordable
![Page 20: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/20.jpg)
JavaScript is everywhere
![Page 21: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/21.jpg)
Why Titanium?
![Page 22: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/22.jpg)
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
![Page 23: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/23.jpg)
Alloy
![Page 24: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/24.jpg)
var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize: 60 }, color: 'red' });
var window = Ti.UI.createWindow();
window.add(text); window.open();
![Page 25: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/25.jpg)
<Alloy> <Window> <Label>Hello, world!</Label> </Window> </Alloy>
'Label': { font: { fontSize: 60 }, color: 'red' }
$.index.open();
![Page 26: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/26.jpg)
![Page 27: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/27.jpg)
Themes & Widgets
app
controllers
views
styles
assets
widgets
controllers
views
styles
assets
themes
styles
assets
![Page 28: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/28.jpg)
<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
![Page 29: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/29.jpg)
Appcelerator Platform
![Page 30: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/30.jpg)
![Page 31: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/31.jpg)
![Page 32: Cross-Platform Native Apps with JavaScript](https://reader034.fdocuments.net/reader034/viewer/2022052705/5877b8a71a28ab2c668b6403/html5/thumbnails/32.jpg)
Thank youOctober 22, 2015
Fokke Zandbergen@FokkeZB