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.

C056051a062fb1054cb45d98177384aa?s=128

Fokke Zandbergen

October 22, 2015
Tweet

Transcript

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

    @FokkeZB
  2. Agenda: Cross-Platform Native Apps with JavaScript • Why Cross-Platform? •

    Why Native? • Why JavaScript? • Why Titanium? • Alloy • Appcelerator Platform
  3. Why Cross-Platform?

  4. Because you can’t bet on one platform

  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
  6. Because these platforms run on thousands of devices

  7. Targeting multiple platforms without Titanium ! Product Management Team 

    Team Team
  8. Targeting multiple platforms with Titanium ! Product Management Team

  9. Why Native?

  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
  11. What cross-platform for long has worked like  "

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

  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
  14. How JavaScript 2 Native works 

  15. How JavaScript 2 Native works 

  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
  17. Why JavaScript?

  18. Relatively easy to find

  19. Relatively affordable

  20. JavaScript is everywhere

  21. Why Titanium?

  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
  23. Alloy

  24. var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize:

    60 }, color: 'red' }); var window = Ti.UI.createWindow(); window.add(text); window.open();
  25. <Alloy> <Window> <Label>Hello, world!</Label> </Window> </Alloy> 'Label': { font: {

    fontSize: 60 }, color: 'red' } $.index.open();
  26. None
  27. Themes & Widgets app 
 controllers views styles assets widgets

    controllers views styles assets themes styles assets
  28. <Alloy> <Window> <Label platform="ios">Hello, world!</Label> </Window> </Alloy> 'Label[formFactor=tablet]': { color:

    'red' } if (ENV_PRODUCTION) { $.index.open(); } $.index.open(); index.xml index.tss windows/index.js Conditional Code index.js
  29. Appcelerator Platform

  30. None
  31. None
  32. Thank you October 22, 2015 Fokke Zandbergen @FokkeZB