Cross-platform Native App ontwikkeling met Appcelerator

Lezing voor de SIG Apps en de Regio Den Haag van Ngi-NGN op De Haagse Hogeschool over cross-platform native app ontwikkeling met Appcelerator Titanium en Alloy.

Transcript

1. Cross-Platform Native App ontwikkeling met Appcelerator De Haagse Hogeschool 15 maart 2015 Fokke Zandbergen @FokkeZB
2. Fokke Zandbergen Developer Evangelist @FokkeZB
3. Agenda • Operation Information Overload (~45m) • Pauze (15m) • From Zero to App (tot 20:45)
4. Operation Information Overload • Waarom Cross-Platform? • Waarom Native? • Wie is Appcelerator? • Hoe werkt Titanium? • Wat heeft Elon Musk’s Hyperloop ermee te maken? • Hoe werkt Alloy?
5. Waarom
 Cross-Platform?
6. Omdat je je zelden tot één platform kunt beperken
7. Omdat er niet zoiets bestaat als één 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 De white line shows the market share
 of the leading API level at any time Maart 2016
 developer.apple.com
8. Omdat je te maken hebt met duizenden type devices
9. Per-platform ontwikkeling ! Product Management Team  Team Team
10. Cross-platform ontwikkeling ! Product Management Team
11. Waarom Native?
12. Wat betekent “Native” eigenlijk? ⎕ De developer gebruikt de platform tools ⎕ De developer gebruikt de platform taal/talen ⎕ De developer gebruikt de platform’s APIs ⎕ De user experience is zoals men op het platform verwacht
13. HTML Apps  " Hoe Cross-Platform lang gewerkt heeft
14. Write once, fail everywhere
15. Wat “Native” volgens ons betekent ⎕ De developer gebruikt de platform tools ⎕ De developer gebruikt de platform taal/talen ⎕ De developer gebruikt de platform’s APIs ⎕ De user experience is zoals men op het platform verwacht ✔ ✔
16. JS2Native
18. 2 Native
19. Wie is Appcelerator?
20. Apps alone won’t cut it
21. You need Triple
22. You need Triple appcelerator.com
25. 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 825.000 ontwikkelaars 395.000.000 devices
28. Hoe werkt Titanium?
29. Architectuur Alloy Codebase Development JavaScript Package Run-time Titanium Module APIs Titanium Core APIs Hyperloop APIs Kroll (iOS/Android) HAL (Windows) 3P APIs OS Device & UI APIs Platform
30. Hello World var window = Ti.UI.createWindow({ backgroundColor: “black" }); var label = Ti.UI.createLabel({ text: “Hello, world!”, color: “red” }); label.addEventListener(“click”, function open() { alert(“Hello, world!”); } ); window.add(label); window.open(); Ti API
31. Ti.createMyFartApp() Ti.UI.createX() // Cross-platform UI View factories Ti.UI.X // The UI View proxy the factory creates Ti.UI.iOS.X // Platform specific UI View factories Ti.X // Cross-platform device APIs
 Ti.Android.X // Platform specific device APIs require(“ti.map”).X // CommonJS & Titanium Modules
32. docs.appcelerator.com
33. Bestandsstructuur config code & assets ▾ Resources ▾ images logo.png app.js main.js utils.js tiapp.xml
34. Hoe werkt Alloy?
35. Titanium Classic var window = Ti.UI.createWindow({ backgroundColor: “black" }); var label = Ti.UI.createLabel({ text: “Hello, world!”, color: “red” }); label.addEventListener(“click”, function open() { alert(“Hello, world!”); } ); window.add(label); window.open(); style logic markup
36. Titanium Alloy <Alloy> <Window> <Label onClick=”open”>Hello World</Label> </Window> </Alloy> ”Window”: { backgroundColor: “black” } ”Label”: { color: “red” } function open() { alert(“Hello World”); } $.index.open(); index.xml index.tss index.js
37. XML & TSS naar JS conversie
38. XML & TSS naar JS conversie
39. ▸ app ▾ Resources ▾ alloy ▾ controllers index.js backbone.js CFG.js underscore.js ▾ images logo.png alloy.js app.js utils.js tiapp.xml ▾ Resources ▾ images logo.png app.js main.js utils.js tiapp.xml Bestandsstructuur ▾ app ▾ assets ▾ images
 logo.png ▾ controllers index.js ▾ lib utils.js ▾ styles index.tss ▾ views index.xml ▾ widgets alloy.js config.json ▸ Resources tiapp.xml
40. Alloy XML & TSS wordt classic Titanium <Foo> <Foo ns=“Ti.bar”> <Foo module=“bar”> <Require src=“foo”>
 <Widget src=“foo”>
 <Foo id=“bar”> <Foo bar=“zoo”>
 
 “#bar”: {
 color: “white”
 } Ti.UI.createFoo(); Ti.bar.createFoo(); require(“bar”).createFoo(); Alloy.createController(“foo”)
 .getView(); Alloy.createWidget(“foo”)
 .getView(); $.bar = Ti.UI.createFoo(); Ti.UI.createFoo({
 bar: “zoo”
 }); $.bar = Ti.UI.createFoo({
 color: “white”
 });
41. Themes & Widgets app 
 controllers views styles assets widgets controllers views styles assets themes styles assets
42. Hyperloop?!
45. Titanium API uitbreiden dmv modules  var blur = require('bencoding.blur'); var view = blur.createBasicBlurView({ blurRadius: 5, image: '/images/background.png' }); var window = Ti.UI.createWindow(); window.add(view); window.open();
46. Hyperloop for Windows 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();
47.  Hyperloop for iOS var Hyperloop = require("hyperloop"); var TiApp = require("TiApp"); var UIViewController = require("UIViewController"); var UILabel = require("UILabel"); var UIColor = require("UIColor"); var UIScreen = require("UIScreen"); var CGRect = require("CGRect"); var NSTextAlignment = require("NSTextAlignment"); var label = UILabel.initWithFrame(CGRect.Make(0, 0, UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height )); label.setText('Hello World!'); label.setTextColor(UIColor.redColor()); var viewController = UIViewController.init(); viewController.view.setBackgroundColor(UIColor.whiteColor()); viewController.view.addSubview(label); TiApp.app().showModalController(viewController, false);
48.  Hyperloop for iOS var Hyperloop = require("hyperloop"); var TiApp = require("TiApp"); var UIViewController = require("UIViewController"); var UILabel = require("UILabel"); var UIColor = require("UIColor"); var UIScreen = require("UIScreen"); var CGRect = require("CGRect"); var NSTextAlignment = require("NSTextAlignment"); var label = UILabel.initWithFrame(CGRect.Make(0, 0, UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height )); label.setText('Hello World!'); label.setTextColor(UIColor.redColor()); var viewController = UIViewController.init(); viewController.view.setBackgroundColor(UIColor.whiteColor()); viewController.view.addSubview(label); TiApp.app().showModalController(viewController, false);
49. Hyperloop for Android var TextView = require('android.widget.TextView'), Activity = require('android.app.Activity'), Color = require('android.graphics.Color'), RelativeLayout = require('android.widget.RelativeLayout'), Gravity = require('android.view.Gravity'), TypedValue = require('android.util.TypedValue'); var text = new TextView(activity); text.setText("Hello World!"); text.setTextColor(Color.RED); text.setTextSize(TypedValue.COMPLEX_UNIT_PX, 60); var layout = new RelativeLayout(activity); layout.setGravity(Gravity.CENTER); layout.setBackgroundColor(Color.BLACK); layout.addView(text); var activity = new Activity(Ti.Android.currentActivity); activity.setContentView(layout);
50. Abstractie heeft zijn voordelen var window = Ti.UI.createWindow({ backgroundColor: “black" }); var label = Ti.UI.createLabel({ text: “Hello, world!”, color: “red” }); label.addEventListener(“click”, function open() { alert(“Hello, world!”); } ); window.add(label); window.open();
51. From Zero to App • Appcelerator OSS vs Platform • Dependency Hell • Titanium & Alloy installeren • Onze eerste app in 10 best practices
54. OSS INDIE $39/m TEAM $259/m Ti CLI ✔ ✔ ✔ Ti SDK CI & Second-last GA ✔ ✔ Alloy ✔ ✔ ✔ AppC unified CLI ✔ ✔ Publish / Production ✔ ✔ ✔ Collaboration ✔ ✔ Studio ✔ ✔ LiveView, Profiler etc. ✔ ✔ Premium modules ✔ Arrow DB 1M / 5GB 10M / 10GB Arrow Push 1M 10M Arrow Web ✔ Arrow Builder ✔ Analytics 30 days 12 months SLA 99% Support community ✔ Labs ✔
55. Appcelerator Studio
56. www.appcelerator.com/signup
57. www.appcelerator.org
58. Dependency Hell
59. Installatie OSS • Titanium CLI /appcelerator/titanium [sudo] npm install -g titanium && ti setup • Titanium SDK * /appcelerator/titanium_mobile ti sdk install -b 5_2_X -d • Alloy CLI /appcelerator/alloy [sudo] npm install -g alloy
60. Installatie OSS
61. I can use my skills to build truly native  apps! WOW!
62. www.tislack.org