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. Agenda: Cross-Platform Native Apps with JavaScript • Why Cross-Platform? •

    Why Native? • Why JavaScript? • Why Titanium? • Alloy • Appcelerator Platform
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize:

    60 }, color: 'red' }); var window = Ti.UI.createWindow(); window.add(text); window.open();
  8. Themes & Widgets app 
 controllers views styles assets widgets

    controllers views styles assets themes styles assets
  9. <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