Building Native Mobile Apps using Javascript with Titanium

Introducing Titanium, Alloy and Hyperloop to the JavaScript Lab Meetup on January 18th, 2016.

Transcript

1. JavaScript Lab
   January 18, 2016
   Building Native Mobile Apps using
   Javascript with Titanium
   

   View Slide

2. Fokke Zandbergen
   Developer Evangelist
   Appcelerator
   @FokkeZB
   

   View Slide

3. Program
   1. Appcelerator: More than Apps
   2. JS2Native: No WebView
   3. Titanium: SDK & Cross-Platform API
   4. Alloy: MVC for Titanium
   5. Hyperloop: Access any (3P) API in JS
   Slides will be linked from @FokkeZB tomorrow morning
   

   View Slide

4. Appcelerator: More than Apps
   

   View Slide

5. And Why This is Great News for All
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. 2 Native
   

   View Slide

10. NO!
    

    View Slide

11. HTML Apps
    
    !
    

    View Slide

12. HTML Apps
    

    View Slide

13. JS2Native
    

    View Slide

14. Titanium
    

    View Slide

15. Architecture
    Alloy Codebase Development
    JavaScript
    Package
    Run-time
    Titanium
    Module APIs
    Titanium
    Core APIs
    Hyperloop
    APIs
    Kroll
    (iOS/Android)
    HAL
    (Windows)
    3P APIs OS Device & UI APIs Platform
    

    View Slide

16. Hello World
    var window = Ti.UI.createWindow({
    backgroundColor: “white"
    });
    var label = Ti.UI.createLabel({
    text: “Hello World”
    });
    label.addEventListener(“click”,
    function open() {
    alert(“Hello World”);
    }
    );
    window.add(label);
    window.open();
    Ti API
    

    View Slide

17. Ti.createMyFartApp()
    Ti.UI.createX() // Cross-platform UI View factories
    Ti.UI.X // The UI View proxy the factory creates
    Ti.UI.iOS.X // Platform specific UI View factories
    Ti.X // Cross-platform device APIs
    Ti.Android.X // Platform specific device APIs
    require(“ti.map”).X // CommonJS & Titanium Modules
    

    View Slide

18. docs.appcelerator.com
    

    View Slide

19. File Structure
    ▾ Resources
    ▾ images
    logo.png
    app.js
    main.js
    utils.js
    tiapp.xml config
    code
    

    View Slide

20. View Slide

21. Alloy MVC
    

    View Slide

22. Classic Spaghetti
    var window = Ti.UI.createWindow({
    backgroundColor: “white"
    });
    var label = Ti.UI.createLabel({
    text: “Hello World”
    });
    label.addEventListener(“click”,
    function open() {
    alert(“Hello World”);
    }
    );
    window.add(label);
    window.open();
    style
    logic
    markup
    

    View Slide

23. 
    
    Hello World
    
    
    ”Window”: {
    backgroundColor: “white”
    }
    function open() {
    alert(“Hello World”);
    }
    $.index.open();
    index.xml
    index.tss
    index.js
    Alloy
    

    View Slide

24. ▸ app
    ▾ Resources
    ▾ alloy
    ▾ controllers
    index.js
    backbone.js
    CFG.js
    underscore.js
    ▾ images
    logo.png
    alloy.js
    app.js
    utils.js
    tiapp.xml
    ▾ Resources
    ▾ images
    logo.png
    app.js
    main.js
    utils.js
    tiapp.xml
    ▾ app
    ▾ assets
    ▾ images

    logo.png
    ▾ controllers
    index.js
    ▾ lib
    utils.js
    ▾ styles
    index.tss
    ▾ views
    index.xml
    ▾ widgets
    alloy.js
    config.json
    tiapp.xml
    File Structure
    

    View Slide

25. What happens to your XML and TSS?
    
    
    
    

    

    
    

    

    “#bar”: {

    color: “white”

    }
    Ti.UI.createFoo();
    Ti.bar.createFoo();
    require(“bar”).createFoo();
    Alloy.createController(“foo”)

    .getView();
    Alloy.createWidget(“foo”)

    .getView();
    $.bar = Ti.UI.createFoo();
    Ti.UI.createFoo({

    bar: “zoo”

    });
    $.bar = Ti.UI.createFoo({

    color: “white”

    });
    

    View Slide

26. A lote more..
    • Platform specific code blocks and assets
    • Platform/Environment specific config file
    • Underscore + Moment.js: built-in libraries
    • Backbone.js: events, models and data-binding
    • Alloy Themes: Ideal for white label apps
    • Alloy Widgets: Re-use code across apps
    • …
    

    View Slide

27. View Slide

28. View Slide

29. 
    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();
    How you used to extend Titanium
    

    View Slide

30. Hyperloop for Windows
    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();
    

    View Slide

31. 
    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

32. 
    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

33. Hyperloop for Android
    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);
    

    View Slide

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

    View Slide

35. labs.appcelerator.com
    

    View Slide

36. www.appcelerator.com/signup
    

    View Slide

37. Slides will be linked from @FokkeZB tomorrow morning
    Thank You !
    

    View Slide