$30 off During Our Annual Pro Sale. View Details »

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.

Fokke Zandbergen

October 17, 2015
Tweet

More Decks by Fokke Zandbergen

Other Decks in Technology

Transcript

  1. Titanium
    Develop Native Mobile Apps with JavaScript
    Fokke Zandbergen @FokkeZB

    View Slide

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

    View Slide

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

    View Slide

  4. NO!

    View Slide

  5. View Slide

  6. Wrapped HTML Apps
    polling
    JSON
    “localhost”
    XMLHttpRequest

    system
    APIs
    !

    View Slide

  7. “The Bottleneck”

    View Slide

  8. It just feels “sticky”

    View Slide

  9. iOS TabGroup?
    Android Drawer?
    Uh?!

    View Slide


  10. JS 2 Native Apps
    JSCore/V8
    APIs
    system
    APIs
    UIKit etc.

    View Slide


  11. V8
    APIs
    system
    APIs
    We’re not alone

    View Slide

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

    View Slide

  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

    View Slide

  14. “The Bridge”

    View Slide

  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

    View Slide

  16. “The Boat”

    View Slide


  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

    View Slide


  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  22. Spaghetti code

    View Slide

  23. View Slide

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

    View Slide



  25. Hello, world!


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

    View Slide

  26. View Slide



  27. Hello, world!


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

    View Slide

  28. Widgets






    Hello, world!

    index.xml
    widgets/hello

    View Slide

  29. Let’s play..

    View Slide

  30. Apps alone won’t cut it

    View Slide

  31. You need Triple

    View Slide

  32. You need Triple
    appcelerator.com

    View Slide

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

    View Slide

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

    View Slide

  35. Thank you
    Thanks to Ryan McGuire for the photo’s @bellsdesign
    Fokke Zandbergen @FokkeZB

    View Slide