Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross-platform Native App ontwikkeling met Appc...

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.

Fokke Zandbergen

March 15, 2016
Tweet

More Decks by Fokke Zandbergen

Other Decks in Technology

Transcript

  1. 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?
  2. 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
  3. 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
  4. 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 ✔ ✔
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. ▸ 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
  12. 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”
 });
  13. Themes & Widgets app 
 controllers views styles assets widgets

    controllers views styles assets themes styles assets
  14. 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();
  15. 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();
  16.  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);
  17.  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);
  18. 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);
  19. 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();
  20. From Zero to App • Appcelerator OSS vs Platform •

    Dependency Hell • Titanium & Alloy installeren • Onze eerste app in 10 best practices
  21. 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 ✔
  22. 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