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

Cross-Platform Native Apps with JavaScript

Cross-Platform Native Apps with JavaScript

Introduction Cross-Platform Native App development with JavaScript using Appcelerator Titanium and Alloy for an internal developer forum of a European multinational.

Fokke Zandbergen

October 22, 2015
Tweet

More Decks by Fokke Zandbergen

Other Decks in Technology

Transcript

  1. Cross-Platform Native Apps
    with JavaScript
    October 22, 2015
    Fokke Zandbergen

    @FokkeZB

    View full-size slide

  2. Agenda: Cross-Platform Native Apps with JavaScript
    • Why Cross-Platform?
    • Why Native?
    • Why JavaScript?
    • Why Titanium?
    • Alloy
    • Appcelerator Platform

    View full-size slide

  3. Why Cross-Platform?

    View full-size slide

  4. Because you can’t bet on one platform

    View full-size slide

  5. Because there’s no such thing as one 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
    The white line shows the market share

    of the leading API level at any time
    iOS 9
    57%
    iOS 8
    33%
    Earlier
    10%
    October 5th, 2015

    developer.apple.com

    View full-size slide

  6. Because these platforms run on thousands of devices

    View full-size slide

  7. Targeting multiple platforms without Titanium
    !
    Product Management
    Team

    Team
    Team

    View full-size slide

  8. Targeting multiple platforms with Titanium
    !
    Product Management Team

    View full-size slide

  9. What does Native mean?
    ⎕ The developer uses the vendor’s toolchain
    ⎕ The developer uses the platform’s language(s)
    ⎕ The developer uses the platform’s APIs
    ⎕ The user experience is as expected on the platform

    View full-size slide

  10. What cross-platform for long has worked like

    "

    View full-size slide

  11. What it sometimes looked like
    iOS TabGroup?
    Android Drawer?
    Uh?!

    View full-size slide

  12. What Native means to us
    ⎕ The developer uses the vendor’s toolchain
    ⎕ The developer uses the platform’s language(s)
    ⎕ The developer uses the platform’s APIs
    ⎕ The user experience is as expected on the platform


    JavaScript 2 Native

    View full-size slide

  13. How JavaScript 2 Native works

    View full-size slide

  14. How JavaScript 2 Native works

    View full-size slide

  15. 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, iOS and Android

    View full-size slide

  16. Why JavaScript?

    View full-size slide

  17. Relatively easy to find

    View full-size slide

  18. Relatively affordable

    View full-size slide

  19. JavaScript is everywhere

    View full-size slide

  20. Why Titanium?

    View full-size slide

  21. DE
    0
    200
    400
    600
    800
    2012 2013 2014
    Thousands
    DE
    0
    100
    200
    300
    400
    2012 2013 2014
    Millions
    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

    View full-size slide

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

    View full-size slide



  23. Hello, world!


    'Label': {
    font: {
    fontSize: 60
    },
    color: 'red'
    }
    $.index.open();

    View full-size slide

  24. Themes & Widgets
    app

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

    View full-size slide



  25. Hello, world!


    'Label[formFactor=tablet]': {
    color: 'red'
    }
    if (ENV_PRODUCTION) {
    $.index.open();
    }
    $.index.open();
    index.xml
    index.tss
    windows/index.js
    Conditional Code
    index.js

    View full-size slide

  26. Appcelerator
    Platform

    View full-size slide

  27. Thank you
    October 22, 2015
    Fokke Zandbergen

    @FokkeZB

    View full-size slide