TitaniumDevelop Native Mobile Apps with JavaScript

Fokke Zandbergen @FokkeZB

AppceleratorDeveloper Evangelist

@FokkeZB

NL

FreelanceApp

Developer

Try Share

Improve

gitT.io

TiCons

WOW! I can use my skills

to build truly native " # apps!

NO!

Wrapped HTML Apps

polling

JSON

“localhost”

XMLHttpRequest " #

system APIs

!

“The Bottleneck”

It just feels “sticky”

iOS TabGroup?

Android Drawer?

Uh?!

" #

JS 2 Native Apps

JSCore/V8 APIs

system APIs

UIKit etc.

#

V8 APIs

system APIs

We’re not alone

var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize: 60 }, color: 'red' });

var window = Ti.UI.createWindow();

window.add(text); window.open();

var text = Ti.UI.createLabel({ text: 'Hello, world!', font: { fontSize: 60 }, color: 'red', focusable: true });

var window = Ti.UI.createWindow();

if (Ti.Platform.name === 'android') { window.add(Ti.UI.Android.createProgressIndicator()); }

window.add(text); window.open();

Platform-specific code

“The Bridge”

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();

Modules

"

“The Boat”

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 iOS

var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize: 60 }, color: 'red' });

var window = Ti.UI.createWindow();

window.add(text); window.open();

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

"

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

Hyperloop for Android

Spaghetti code

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();

index.xml

index.tss

index.js

<Alloy> <Window> <Label platform="android">Hello, world!</Label> </Window> </Alloy>

'Window[formFactor=tablet]': { backgroundColor: 'green' }

if (ENV_TEST) { $.index.open(); }

Conditional Code

Widgets<Alloy> <Window> <Widget src="hello" /> </Window> </Alloy>

<Alloy> <Label>Hello, world!</Label> </Alloy>

index.xml

widgets/hello

Let’s play..

Apps alone won’t cut it

You need Triple

You need Triple

appcelerator.com

✓ Native UI… NO HTML✓ Cross Platform JS API✓ Direct API Access✓ Alloy MVC framework✓ Modules & Widgets✓ You need Tripple

I can use my skills

to build truly native " # apps!

WOW!

Thank you

Thanks to Ryan McGuire for the photo’s @bellsdesign

Fokke Zandbergen @FokkeZB