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

Building Native Mobile Apps using Javascript with Titanium

Building Native Mobile Apps using Javascript with Titanium

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

Fokke Zandbergen

January 18, 2016
Tweet

More Decks by Fokke Zandbergen

Other Decks in Technology

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