Cross-Platform Native Apps with JavaScript
0 likes•391 views
The document discusses the benefits of creating cross-platform native apps with JavaScript, highlighting why it's essential to cater to multiple platforms due to the diverse range of devices available. It explains the meaning of 'native' in app development, emphasizing the importance of using vendor toolchains and platform-specific languages for optimal user experience. Additionally, it introduces Titanium and Alloy as frameworks that facilitate building such applications, providing code snippets to illustrate their functionality.
![<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](https://image.slidesharecdn.com/slides-160119074131/85/Cross-Platform-Native-Apps-with-JavaScript-28-320.jpg)
Cross-Platform Native Apps with JavaScript
- 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
- 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
- 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 ABILITYTOEXECUTE 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();
- 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
- 32. Thank you October 22, 2015 Fokke Zandbergen @FokkeZB