Lezing voor de SIG Apps en de Regio Den Haag van Ngi-NGN op De Haagse Hogeschool over cross-platform native app ontwikkeling met Appcelerator Titanium en Alloy.

1. Cross-Platform Native App
ontwikkeling met Appcelerator
De Haagse Hogeschool
15 maart 2015
Fokke Zandbergen
@FokkeZB

2. Fokke Zandbergen
Developer Evangelist
@FokkeZB

3. Agenda
• Operation Information Overload (~45m)
• Pauze (15m)
• From Zero to App (tot 20:45)

4. Operation Information Overload
• Waarom Cross-Platform?
• Waarom Native?
• Wie is Appcelerator?
• Hoe werkt Titanium?
• Wat heeft Elon Musk’s Hyperloop ermee te maken?
• Hoe werkt Alloy?

5. Waarom
Cross-Platform?

6. Omdat je je zelden tot één platform kunt beperken

7. Omdat er niet zoiets bestaat als één 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
De white line shows the market share
of the leading API level at any time
Maart 2016
developer.apple.com

8. Omdat je te maken hebt met duizenden type devices

9. Per-platform ontwikkeling
!Product Management
Team
Team
Team

10. Cross-platform ontwikkeling
!Product Management Team

11. Waarom Native?

12. Wat betekent “Native” eigenlijk?
⎕ De developer gebruikt de platform tools
⎕ De developer gebruikt de platform taal/talen
⎕ De developer gebruikt de platform’s APIs
⎕ De user experience is zoals men op het platform verwacht

13. HTML Apps
"
Hoe Cross-Platform lang gewerkt heeft

14. Write once, fail everywhere

15. Wat “Native” volgens ons betekent
⎕ De developer gebruikt de platform tools
⎕ De developer gebruikt de platform taal/talen
⎕ De developer gebruikt de platform’s APIs
⎕ De user experience is zoals men op het platform verwacht✔
✔

16. JS2Native

18. 2 Native

19. Wie is Appcelerator?

20. Apps alone won’t cut it

21. You need Triple

22. You need Triple
appcelerator.com

25. 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
825.000 ontwikkelaars
395.000.000 devices

28. Hoe werkt Titanium?

29. Architectuur
Alloy Codebase Development
JavaScript
Package
Run-time
Titanium
Module APIs
Titanium
Core APIs
Hyperloop
APIs
Kroll
(iOS/Android)
HAL
(Windows)
3P APIs OS Device & UI APIs Platform

30. Hello World
var window = Ti.UI.createWindow({
backgroundColor: “black"
});
var label = Ti.UI.createLabel({
text: “Hello, world!”,
color: “red”
});
label.addEventListener(“click”,
function open() {
alert(“Hello, world!”);
}
);
window.add(label);
window.open();
Ti API

31. Ti.createMyFartApp()
Ti.UI.createX() // Cross-platform UI View factories
Ti.UI.X // The UI View proxy the factory creates
Ti.UI.iOS.X // Platform specific UI View factories
Ti.X // Cross-platform device APIs
Ti.Android.X // Platform specific device APIs
require(“ti.map”).X // CommonJS & Titanium Modules

32. docs.appcelerator.com

33. Bestandsstructuur
config
code & assets▾ Resources
▾ images
logo.png
app.js
main.js
utils.js
tiapp.xml

34. Hoe werkt Alloy?

35. Titanium Classic
var window = Ti.UI.createWindow({
backgroundColor: “black"
});
var label = Ti.UI.createLabel({
text: “Hello, world!”,
color: “red”
});
label.addEventListener(“click”,
function open() {
alert(“Hello, world!”);
}
);
window.add(label);
window.open();
style
logic
markup

36. Titanium Alloy
<Alloy>
<Window>
<Label onClick=”open”>Hello World</Label>
</Window>
</Alloy>
”Window”: {
backgroundColor: “black”
}
”Label”: {
color: “red”
}
function open() {
alert(“Hello World”);
}
$.index.open();
index.xml
index.tss
index.js

37. XML & TSS naar JS conversie

38. XML & TSS naar JS conversie

39. ▸ app
▾ Resources
▾ alloy
▾ controllers
index.js
backbone.js
CFG.js
underscore.js
▾ images
logo.png
alloy.js
app.js
utils.js
tiapp.xml
▾ Resources
▾ images
logo.png
app.js
main.js
utils.js
tiapp.xml
Bestandsstructuur
▾ app
▾ assets
▾ images
logo.png
▾ controllers
index.js
▾ lib
utils.js
▾ styles
index.tss
▾ views
index.xml
▾ widgets
alloy.js
config.json
▸ Resources
tiapp.xml

40. Alloy XML & TSS wordt classic Titanium
<Foo>
<Foo ns=“Ti.bar”>
<Foo module=“bar”>
<Require src=“foo”>
<Widget src=“foo”>
<Foo id=“bar”>
<Foo bar=“zoo”>
“#bar”: {
color: “white”
}
Ti.UI.createFoo();
Ti.bar.createFoo();
require(“bar”).createFoo();
Alloy.createController(“foo”)
.getView();
Alloy.createWidget(“foo”)
.getView();
$.bar = Ti.UI.createFoo();
Ti.UI.createFoo({
bar: “zoo”
});
$.bar = Ti.UI.createFoo({
color: “white”
});

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

42. Hyperloop?!

45. Titanium API uitbreiden dmv modules

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();

46. Hyperloop for Windows
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();

47.  Hyperloop for iOS
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);

48.  Hyperloop for iOS
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);

49. Hyperloop for Android
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);

50. Abstractie heeft zijn voordelen
var window = Ti.UI.createWindow({
backgroundColor: “black"
});
var label = Ti.UI.createLabel({
text: “Hello, world!”,
color: “red”
});
label.addEventListener(“click”,
function open() {
alert(“Hello, world!”);
}
);
window.add(label);
window.open();

51. From Zero to App
• Appcelerator OSS vs Platform
• Dependency Hell
• Titanium & Alloy installeren
• Onze eerste app in 10 best practices

54. OSS INDIE $39/m TEAM $259/m
Ti CLI ✔ ✔ ✔
Ti SDK CI & Second-last GA ✔ ✔
Alloy ✔ ✔ ✔
AppC unified CLI ✔ ✔
Publish / Production ✔ ✔ ✔
Collaboration ✔ ✔
Studio ✔ ✔
LiveView, Profiler etc. ✔ ✔
Premium modules ✔
Arrow DB 1M / 5GB 10M / 10GB
Arrow Push 1M 10M
Arrow Web ✔
Arrow Builder ✔
Analytics 30 days 12 months
SLA 99%
Support community ✔
Labs ✔

55. Appcelerator Studio

56. www.appcelerator.com/signup

57. www.appcelerator.org

58. Dependency Hell

59. Installatie OSS
• Titanium CLI
/appcelerator/titanium
[sudo] npm install -g titanium && ti setup
• Titanium SDK *
/appcelerator/titanium_mobile
ti sdk install -b 5_2_X -d
• Alloy CLI
/appcelerator/alloy
[sudo] npm install -g alloy

60. Installatie OSS

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

62. www.tislack.org