Titanium Develop Native Mobile Apps with JavaScript Fokke Zandbergen @FokkeZB 

Appcelerator Developer Evangelist @FokkeZB NL Freelance App Developer Try Share Improve gitT.io TiCons 

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

NO! 

No content

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 

No content

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

Hello, world! 'Label': { font: { fontSize: 60 }, color: 'red' } $.index.open(); index.xml index.tss index.js 

No content

Hello, world! 'Window[formFactor=tablet]': { backgroundColor: 'green' } if (ENV_TEST) { $.index.open(); } Conditional Code 

Widgets Hello, world! 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