Cross-platform Native App ontwikkeling met Appcelerator

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.

C056051a062fb1054cb45d98177384aa?s=128

Fokke Zandbergen

March 15, 2016
Tweet

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

  17. None
  18. 2 Native

  19. Wie is Appcelerator?

  20. Apps alone won’t cut it

  21. You need Triple

  22. You need Triple appcelerator.com

  23. None
  24. None
  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
  26. None
  27. None
  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?!

  43. None
  44. None
  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
  52. None
  53. None
  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