Cross-Platform Native Apps with JavaScript

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

GOOGLE

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