Titanium: Develop Native Mobile Apps with JavaScript

Introduction to Titanium (and Alloy) for Mobilisation 2015 in Łódź, Poland.

Transcript

1. Titanium Develop Native Mobile Apps with JavaScript Fokke Zandbergen @FokkeZB
2. Appcelerator Developer Evangelist @FokkeZB NL Freelance App Developer Try Share Improve gitT.io TiCons
3. WOW! I can use my skills to build truly native  apps!
4. NO!
6. Wrapped HTML Apps polling JSON “localhost” XMLHttpRequest  system APIs !
7. “The Bottleneck”
8. It just feels “sticky”
9. iOS TabGroup? Android Drawer? Uh?!
10.  JS 2 Native Apps JSCore/V8 APIs system APIs UIKit etc.
11.  V8 APIs system APIs We’re not alone
12. var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize: 60 }, color: 'red' }); var window = Ti.UI.createWindow(); window.add(text); window.open();
13. 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
14. “The Bridge”
15. 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 
16. “The Boat”
17.  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
18.  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
19. var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize: 60 }, color: 'red' }); var window = Ti.UI.createWindow(); window.add(text); window.open();
20. 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
21. 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
22. Spaghetti code
24. var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize: 60 }, color: 'red' }); var window = Ti.UI.createWindow(); window.add(text); window.open();
25. <Alloy> <Window> <Label>Hello, world!</Label> </Window> </Alloy> 'Label': { font: { fontSize: 60 }, color: 'red' } $.index.open(); index.xml index.tss index.js
27. <Alloy> <Window> <Label platform="android">Hello, world!</Label> </Window> </Alloy> 'Window[formFactor=tablet]': { backgroundColor: 'green' } if (ENV_TEST) { $.index.open(); } Conditional Code
28. Widgets <Alloy> <Window> <Widget src="hello" /> </Window> </Alloy> <Alloy> <Label>Hello, world!</Label> </Alloy> index.xml widgets/hello
29. Let’s play..
30. Apps alone won’t cut it
31. You need Triple
32. You need Triple appcelerator.com
33. ✓ Native UI… NO HTML ✓ Cross Platform JS API ✓ Direct API Access ✓ Alloy MVC framework ✓ Modules & Widgets ✓ You need Tripple
34. I can use my skills to build truly native  apps! WOW!
35. Thank you Thanks to Ryan McGuire for the photo’s @bellsdesign Fokke Zandbergen @FokkeZB