Cross-Platform Native Apps with JavaScript

Slide 1

Slide 1 text

Cross-Platform Native Apps with JavaScript October 22, 2015 Fokke Zandbergen @FokkeZB

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Why Cross-Platform?

Slide 4

Slide 4 text

Because you can’t bet on one platform

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Because these platforms run on thousands of devices

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Targeting multiple platforms with Titanium ! Product Management Team

Slide 9

Slide 9 text

Why Native?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

What cross-platform for long has worked like  "

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

How JavaScript 2 Native works 

Slide 15

Slide 15 text

How JavaScript 2 Native works 

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Why JavaScript?

Slide 18

Slide 18 text

Relatively easy to ﬁnd

Slide 19

Slide 19 text

Relatively affordable

Slide 20

Slide 20 text

JavaScript is everywhere

Slide 21

Slide 21 text

Why Titanium?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Alloy

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Themes & Widgets app   controllers views styles assets widgets controllers views styles assets themes styles assets

Slide 28

Slide 28 text

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