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.

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