Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross-platform Native App ontwikkeling met Appcelerator

Cross-platform Native App ontwikkeling met Appcelerator

Lezing voor de SIG Apps en de Regio Den Haag van Ngi-NGN op De Haagse Hogeschool over cross-platform native app ontwikkeling met Appcelerator Titanium en Alloy.

Fokke Zandbergen

March 15, 2016
Tweet

More Decks by Fokke Zandbergen

Other Decks in Technology

Transcript

  1. Cross-Platform Native App
    ontwikkeling met Appcelerator
    De Haagse Hogeschool

    15 maart 2015
    Fokke Zandbergen

    @FokkeZB

    View Slide

  2. Fokke Zandbergen
    Developer Evangelist
    @FokkeZB

    View Slide

  3. Agenda
    • Operation Information Overload (~45m)
    • Pauze (15m)
    • From Zero to App (tot 20:45)

    View Slide

  4. Operation Information Overload
    • Waarom Cross-Platform?
    • Waarom Native?
    • Wie is Appcelerator?
    • Hoe werkt Titanium?
    • Wat heeft Elon Musk’s Hyperloop ermee te maken?
    • Hoe werkt Alloy?

    View Slide

  5. Waarom

    Cross-Platform?

    View Slide

  6. Omdat je je zelden tot één platform kunt beperken

    View Slide

  7. Omdat er niet zoiets bestaat als één platform
    1.0 1.1 1.5 1.6 2.0 2.0.1 2.1 2.2 2.3-2.3.2 2.3.3-2.3.7 3.0
    3.1 3.2 4.0-4.0.2 4.0.3-4.04 4.1 4.2 4.3 4.4 5.0 5.1
    2011 2012 2013 2014 2015
    0%
    20%
    40%
    60%
    80%
    100%
    The white line shows the market share of the leading API level at any time
    De white line shows the market share

    of the leading API level at any time
    Maart 2016

    developer.apple.com

    View Slide

  8. Omdat je te maken hebt met duizenden type devices

    View Slide

  9. Per-platform ontwikkeling
    !
    Product Management
    Team

    Team
    Team

    View Slide

  10. Cross-platform ontwikkeling
    !
    Product Management Team

    View Slide

  11. Waarom Native?

    View Slide

  12. Wat betekent “Native” eigenlijk?
    ⎕ De developer gebruikt de platform tools
    ⎕ De developer gebruikt de platform taal/talen
    ⎕ De developer gebruikt de platform’s APIs
    ⎕ De user experience is zoals men op het platform verwacht

    View Slide

  13. HTML Apps

    "
    Hoe Cross-Platform lang gewerkt heeft

    View Slide

  14. Write once, fail everywhere

    View Slide

  15. Wat “Native” volgens ons betekent
    ⎕ De developer gebruikt de platform tools
    ⎕ De developer gebruikt de platform taal/talen
    ⎕ De developer gebruikt de platform’s APIs
    ⎕ De user experience is zoals men op het platform verwacht


    View Slide

  16. JS2Native

    View Slide

  17. View Slide

  18. 2 Native

    View Slide

  19. Wie is Appcelerator?

    View Slide

  20. Apps alone won’t cut it

    View Slide

  21. You need Triple

    View Slide

  22. You need Triple
    appcelerator.com

    View Slide

  23. View Slide

  24. View Slide

  25. IBM
    KONY
    SAP
    PEGASYSTEMS
    ADOBE
    XAMARIN
    TELERIK
    SENCHA
    SALESFORCE.COM
    MICROSTRATEGY
    APPLE
    MICROSOFT
    ORACLE
    GOOGLE
    DSI
    MOTOROLA SOLUTIONS
    EMBARCEDERO
    CLICKSOFTWARE
    VERIVO SOFTWARE
    CHALLENGERS LEADERS
    NICHE PLAYERS VISIONARIES
    COMPLETENESS OF VISION
    ABILITY TO EXECUTE
    AS OF SEPTEMBER 2014
    825.000 ontwikkelaars
    395.000.000 devices

    View Slide

  26. View Slide

  27. View Slide

  28. Hoe werkt Titanium?

    View Slide

  29. Architectuur
    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

  30. Hello World
    var window = Ti.UI.createWindow({
    backgroundColor: “black"
    });
    var label = Ti.UI.createLabel({
    text: “Hello, world!”,
    color: “red”
    });
    label.addEventListener(“click”,
    function open() {
    alert(“Hello, world!”);
    }
    );
    window.add(label);
    window.open();
    Ti API

    View Slide

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

  32. docs.appcelerator.com

    View Slide

  33. Bestandsstructuur
    config
    code & assets
    ▾ Resources
    ▾ images
    logo.png
    app.js
    main.js
    utils.js
    tiapp.xml

    View Slide

  34. Hoe werkt Alloy?

    View Slide

  35. Titanium Classic
    var window = Ti.UI.createWindow({
    backgroundColor: “black"
    });
    var label = Ti.UI.createLabel({
    text: “Hello, world!”,
    color: “red”
    });
    label.addEventListener(“click”,
    function open() {
    alert(“Hello, world!”);
    }
    );
    window.add(label);
    window.open();
    style
    logic
    markup

    View Slide

  36. Titanium Alloy


    Hello World


    ”Window”: {
    backgroundColor: “black”
    }
    ”Label”: {
    color: “red”
    }
    function open() {
    alert(“Hello World”);
    }
    $.index.open();
    index.xml
    index.tss
    index.js

    View Slide

  37. XML & TSS naar JS conversie

    View Slide

  38. XML & TSS naar JS conversie

    View Slide

  39. ▸ 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
    Bestandsstructuur
    ▾ app
    ▾ assets
    ▾ images

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

    View Slide

  40. Alloy XML & TSS wordt classic Titanium








    “#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

  41. Themes & Widgets
    app

    controllers
    views
    styles
    assets
    widgets
    controllers
    views
    styles
    assets
    themes
    styles
    assets

    View Slide

  42. Hyperloop?!

    View Slide

  43. View Slide

  44. View Slide

  45. Titanium API uitbreiden dmv modules

    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();

    View Slide

  46. 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

  47.  Hyperloop for iOS
    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);

    View Slide

  48.  Hyperloop for iOS
    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);

    View Slide

  49. 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

  50. Abstractie heeft zijn voordelen
    var window = Ti.UI.createWindow({
    backgroundColor: “black"
    });
    var label = Ti.UI.createLabel({
    text: “Hello, world!”,
    color: “red”
    });
    label.addEventListener(“click”,
    function open() {
    alert(“Hello, world!”);
    }
    );
    window.add(label);
    window.open();

    View Slide

  51. From Zero to App
    • Appcelerator OSS vs Platform
    • Dependency Hell
    • Titanium & Alloy installeren
    • Onze eerste app in 10 best practices

    View Slide

  52. View Slide

  53. View Slide

  54. OSS INDIE $39/m TEAM $259/m
    Ti CLI ✔ ✔ ✔
    Ti SDK CI & Second-last GA ✔ ✔
    Alloy ✔ ✔ ✔
    AppC unified CLI ✔ ✔
    Publish / Production ✔ ✔ ✔
    Collaboration ✔ ✔
    Studio ✔ ✔
    LiveView, Profiler etc. ✔ ✔
    Premium modules ✔
    Arrow DB 1M / 5GB 10M / 10GB
    Arrow Push 1M 10M
    Arrow Web ✔
    Arrow Builder ✔
    Analytics 30 days 12 months
    SLA 99%
    Support community ✔
    Labs ✔

    View Slide

  55. Appcelerator Studio

    View Slide

  56. www.appcelerator.com/signup

    View Slide

  57. www.appcelerator.org

    View Slide

  58. Dependency Hell

    View Slide

  59. Installatie OSS
    • Titanium CLI
    /appcelerator/titanium
    [sudo] npm install -g titanium && ti setup
    • Titanium SDK *
    /appcelerator/titanium_mobile
    ti sdk install -b 5_2_X -d
    • Alloy CLI
    /appcelerator/alloy
    [sudo] npm install -g alloy

    View Slide

  60. Installatie OSS

    View Slide

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

    View Slide

  62. www.tislack.org

    View Slide