titanium: develop native mobile apps with javascript

35
Titanium Develop Native Mobile Apps with JavaScript Fokke Zandbergen @FokkeZB

Upload: fokke-zandbergen

Post on 13-Jan-2017

162 views

Category:

Mobile


0 download

TRANSCRIPT

Page 1: Titanium: Develop Native Mobile Apps with JavaScript

TitaniumDevelop Native Mobile Apps with JavaScript

Fokke Zandbergen @FokkeZB

Page 2: Titanium: Develop Native Mobile Apps with JavaScript

AppceleratorDeveloper Evangelist

@FokkeZB

NL

FreelanceApp

Developer

Try Share

Improve

gitT.io

TiCons

Page 3: Titanium: Develop Native Mobile Apps with JavaScript

WOW! I can use my skills

to build truly native " # apps!

Page 4: Titanium: Develop Native Mobile Apps with JavaScript

NO!

Page 5: Titanium: Develop Native Mobile Apps with JavaScript
Page 6: Titanium: Develop Native Mobile Apps with JavaScript

Wrapped HTML Apps

polling

JSON

“localhost”

XMLHttpRequest " #

system APIs

!

Page 7: Titanium: Develop Native Mobile Apps with JavaScript

“The Bottleneck”

Page 8: Titanium: Develop Native Mobile Apps with JavaScript

It just feels “sticky”

Page 9: Titanium: Develop Native Mobile Apps with JavaScript

iOS TabGroup?

Android Drawer?

Uh?!

Page 10: Titanium: Develop Native Mobile Apps with JavaScript

" #

JS 2 Native Apps

JSCore/V8 APIs

system APIs

UIKit etc.

Page 11: Titanium: Develop Native Mobile Apps with JavaScript

#

V8 APIs

system APIs

We’re not alone

Page 12: Titanium: Develop Native Mobile Apps with JavaScript

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

var window = Ti.UI.createWindow();

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

Page 13: Titanium: Develop Native Mobile Apps with JavaScript

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

Page 14: Titanium: Develop Native Mobile Apps with JavaScript

“The Bridge”

Page 15: Titanium: Develop Native Mobile Apps with JavaScript

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

"

Page 16: Titanium: Develop Native Mobile Apps with JavaScript

“The Boat”

Page 17: Titanium: Develop Native Mobile Apps with JavaScript

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

Page 18: Titanium: Develop Native Mobile Apps with JavaScript

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

Page 19: Titanium: Develop Native Mobile Apps with JavaScript

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

var window = Ti.UI.createWindow();

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

Page 20: Titanium: Develop Native Mobile Apps with JavaScript

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

Page 21: Titanium: Develop Native Mobile Apps with JavaScript

"

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

Page 22: Titanium: Develop Native Mobile Apps with JavaScript

Spaghetti code

Page 23: Titanium: Develop Native Mobile Apps with JavaScript
Page 24: Titanium: Develop Native Mobile Apps with JavaScript

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

var window = Ti.UI.createWindow();

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

Page 25: Titanium: Develop Native Mobile Apps with JavaScript

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

'Label': { font: { fontSize: 60 }, color: 'red' }

$.index.open();

index.xml

index.tss

index.js

Page 26: Titanium: Develop Native Mobile Apps with JavaScript
Page 27: Titanium: Develop Native Mobile Apps with JavaScript

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

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

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

Conditional Code

Page 28: Titanium: Develop Native Mobile Apps with JavaScript

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

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

index.xml

widgets/hello

Page 29: Titanium: Develop Native Mobile Apps with JavaScript

Let’s play..

Page 30: Titanium: Develop Native Mobile Apps with JavaScript

Apps alone won’t cut it

Page 31: Titanium: Develop Native Mobile Apps with JavaScript

You need Triple

Page 32: Titanium: Develop Native Mobile Apps with JavaScript

You need Triple

appcelerator.com

Page 33: Titanium: Develop Native Mobile Apps with JavaScript

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

Page 34: Titanium: Develop Native Mobile Apps with JavaScript

I can use my skills

to build truly native " # apps!

WOW!

Page 35: Titanium: Develop Native Mobile Apps with JavaScript

Thank you

Thanks to Ryan McGuire for the photo’s @bellsdesign

Fokke Zandbergen @FokkeZB