Cross-platform Native App ontwikkeling met Appcelerator

Cross-Platform Native App
ontwikkeling met Appcelerator
De Haagse Hogeschool

15 maart 2015
Fokke Zandbergen

@FokkeZB

Fokke Zandbergen
Developer Evangelist
@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?

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 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

Omdat je te maken hebt met duizenden type devices

Per-platform ontwikkeling
!Product Management
Team
Team
Team

Cross-platform ontwikkeling
!Product Management Team

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

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✔
✔

Cross-platform Native App ontwikkeling met Appcelerator

You need Triple
appcelerator.com

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

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

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 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

Bestandsstructuur
conﬁg
code & assets▾ Resources
▾ images
logo.png
app.js
main.js
utils.js
tiapp.xml

Titanium Classic
});
color: “red”
});
function open() {
}
);
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

▸ 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

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

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 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
});
color: “red”
});
function open() {
}
);
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 uniﬁed CLI ✔ ✔
Publish / Production ✔ ✔ ✔
Collaboration ✔ ✔
Studio ✔ ✔
LiveView, Proﬁler 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 ✔

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

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

Cross-platform Native App ontwikkeling met Appcelerator

More Related Content

What's hot (8)

Similar to Cross-platform Native App ontwikkeling met Appcelerator (20)

More from Fokke Zandbergen (17)

Recently uploaded (20)

Cross-platform Native App ontwikkeling met Appcelerator