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
   

   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