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.

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