Titanium: Develop Native Mobile Apps with JavaScript

Titanium: Develop Native Mobile Apps with JavaScript

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

C056051a062fb1054cb45d98177384aa?s=128

Fokke Zandbergen

October 17, 2015
Tweet

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!

  5. None
  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

  23. None
  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
  26. None
  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