Embed Size (px)
Citation preview
Cross-Platform Native App ontwikkeling met Appcelerator
De Haagse Hogeschool15 maart 2015
Fokke Zandbergen@FokkeZB
Agenda
• Operation Information Overload (~45m)
• Pauze (15m)
• From Zero to App (tot 20:45)
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?
WaaromCross-Platform?
Omdat je je zelden tot één platform kunt beperken
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 20150%
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 shareof the leading API level at any time
Maart 2016developer.apple.com
Omdat je te maken hebt met duizenden type devices
Per-platform ontwikkeling
! Product Management
! Team
Team
# Team
Cross-platform ontwikkeling
! Product Management Team
Waarom Native?
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
HTML Apps ! #"
Hoe Cross-Platform lang gewerkt heeft
Write once, fail everywhere
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✔
✔
JS2Native
2 Native
Wie is Appcelerator?
Apps alone won’t cut it
You need Triple
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
825.000 ontwikkelaars
395.000.000 devices
Hoe werkt Titanium?
Architectuur
Alloy Codebase Development
JavaScript
PackageRun-time
TitaniumModule APIs
TitaniumCore APIs
HyperloopAPIs
Kroll(iOS/Android)
HAL (Windows)
3P APIs OS Device & UI APIs Platform
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
Ti.createMyFartApp()
Ti.UI.createX() // Cross-platform UI View factoriesTi.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
docs.appcelerator.com
Bestandsstructuur
config
code & assets▾ Resources ▾ images logo.png app.js main.js utils.jstiapp.xml
Hoe werkt Alloy?
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
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
XML & TSS naar JS conversie
XML & TSS naar JS conversie
▸ app▾ Resources ▾ alloy ▾ controllers index.js backbone.js CFG.js underscore.js ▾ images logo.png alloy.js app.js utils.jstiapp.xml
▾ Resources ▾ images logo.png app.js main.js utils.jstiapp.xml
Bestandsstructuur
▾ app▾ assets ▾ images logo.png▾ controllers index.js▾ lib utils.js▾ styles index.tss▾ views index.xml▾ widgetsalloy.jsconfig.json
▸ Resourcestiapp.xml
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” });
Themes & Widgets
app
controllers
views
styles
assets
widgets
controllers
views
styles
assets
themes
styles
assets
Hyperloop?!
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();
# 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();
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);
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);
! 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);
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();
From Zero to App
• Appcelerator OSS vs Platform
• Dependency Hell
• Titanium & Alloy installeren
• Onze eerste app in 10 best practices
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 / 10GBArrow Push 1M 10MArrow Web ✔
Arrow Builder ✔
Analytics 30 days 12 monthsSLA 99%Support community ✔
Labs ✔
Appcelerator Studio
www.appcelerator.com/signup
www.appcelerator.org
Dependency Hell
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
Installatie OSS
I can use my skills
to build truly native ! # apps!
WOW!
www.tislack.org
![Native...Eigenschaften von Native Advertising im Vergleich mit Display Werbung Native Advertising bringt dem Leser den meisten Nutzen „Wenn Sie [Native Advertising] mit Werbung vergleichen….“](https://img.pdfslide.tips/doc/110x75/5f0d65997e708231d43a2660/native-eigenschaften-von-native-advertising-im-vergleich-mit-display-werbung.jpg)
