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.

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();
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
32. Thank you October 22, 2015 Fokke Zandbergen @FokkeZB