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 Slide

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

    View Slide

  3. Why Cross-Platform?

    View Slide

  4. Because you can’t bet on one platform

    View 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 Slide

  6. Because these platforms run on thousands of devices

    View Slide

  7. Targeting multiple platforms without Titanium
    !
    Product Management
    Team

    Team
    Team

    View Slide

  8. Targeting multiple platforms with Titanium
    !
    Product Management Team

    View Slide

  9. Why Native?

    View Slide

  10. 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 Slide

  11. What cross-platform for long has worked like

    "

    View Slide

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

    View Slide

  13. 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 Slide

  14. How JavaScript 2 Native works

    View Slide

  15. How JavaScript 2 Native works

    View Slide

  16. 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 Slide

  17. Why JavaScript?

    View Slide

  18. Relatively easy to find

    View Slide

  19. Relatively affordable

    View Slide

  20. JavaScript is everywhere

    View Slide

  21. Why Titanium?

    View Slide

  22. 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 Slide

  23. Alloy

    View Slide

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

    View Slide



  25. Hello, world!


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

    View Slide

  26. View Slide

  27. Themes & Widgets
    app

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

    View Slide



  28. 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 Slide

  29. Appcelerator
    Platform

    View Slide

  30. View Slide

  31. View Slide

  32. Thank you
    October 22, 2015
    Fokke Zandbergen

    @FokkeZB

    View Slide