Cross-platform Native App ontwikkeling met Appcelerator

Slide 1

Slide 1 text

Cross-Platform Native App ontwikkeling met Appcelerator De Haagse Hogeschool 15 maart 2015 Fokke Zandbergen @FokkeZB

Slide 2

Slide 2 text

Fokke Zandbergen Developer Evangelist @FokkeZB

Slide 3

Slide 3 text

Agenda • Operation Information Overload (~45m) • Pauze (15m) • From Zero to App (tot 20:45)

Slide 4

Slide 4 text

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?

Slide 5

Slide 5 text

Waarom  Cross-Platform?

Slide 6

Slide 6 text

Omdat je je zelden tot één platform kunt beperken

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Omdat je te maken hebt met duizenden type devices

Slide 9

Slide 9 text

Per-platform ontwikkeling ! Product Management Team  Team Team

Slide 10

Slide 10 text

Cross-platform ontwikkeling ! Product Management Team

Slide 11

Slide 11 text

Waarom Native?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

HTML Apps  " Hoe Cross-Platform lang gewerkt heeft

Slide 14

Slide 14 text

Write once, fail everywhere

Slide 15

Slide 15 text

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 ✔ ✔

Slide 16

Slide 16 text

JS2Native

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

2 Native

Slide 19

Slide 19 text

Wie is Appcelerator?

Slide 20

Slide 20 text

Apps alone won’t cut it

Slide 21

Slide 21 text

You need Triple

Slide 22

Slide 22 text

You need Triple appcelerator.com

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Hoe werkt Titanium?

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

docs.appcelerator.com

Slide 33

Slide 33 text

Bestandsstructuur conﬁg code & assets ▾ Resources ▾ images logo.png app.js main.js utils.js tiapp.xml

Slide 34

Slide 34 text

Hoe werkt Alloy?

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Titanium Alloy Hello World ”Window”: { backgroundColor: “black” } ”Label”: { color: “red” } function open() { alert(“Hello World”); } $.index.open(); index.xml index.tss index.js

Slide 37

Slide 37 text

XML & TSS naar JS conversie

Slide 38

Slide 38 text

XML & TSS naar JS conversie

Slide 39

Slide 39 text

▸ 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

Slide 40

Slide 40 text

Alloy XML & TSS wordt classic Titanium         “#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”  });

Slide 41

Slide 41 text

Themes & Widgets app   controllers views styles assets widgets controllers views styles assets themes styles assets

Slide 42

Slide 42 text

Hyperloop?!

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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();

Slide 46

Slide 46 text

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();

Slide 47

Slide 47 text

 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);

Slide 48

Slide 48 text

Slide 49

Slide 49 text

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);

Slide 50

Slide 50 text

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();

Slide 51

Slide 51 text

From Zero to App • Appcelerator OSS vs Platform • Dependency Hell • Titanium & Alloy installeren • Onze eerste app in 10 best practices

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

OSS INDIE $39/m TEAM $259/m Ti CLI ✔ ✔ ✔ Ti SDK CI & Second-last GA ✔ ✔ Alloy ✔ ✔ ✔ AppC uniﬁed CLI ✔ ✔ Publish / Production ✔ ✔ ✔ Collaboration ✔ ✔ Studio ✔ ✔ LiveView, Proﬁler 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 ✔

Slide 55

Slide 55 text

Appcelerator Studio

Slide 56

Slide 56 text

www.appcelerator.com/signup

Slide 57

Slide 57 text

www.appcelerator.org

Slide 58

Slide 58 text

Dependency Hell

Slide 59

Slide 59 text

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