TITANIUM & BACKBONEMads Møller

CTO – Napp

mm@napp.dk

@nappdev

TITANIUM OG BACKBONE

• Hvorfor cross platform• Alloy• Backbone• Middleware• Case stories• Q&A

HVORFOR CROSS PLATFORM

HVORFOR CROSS PLATFORM

• Én kodebase– Samme features på alle platforme

• Én udviklingsafdeling– Java, objective-c, c# samlet i ét

• Kortere produktionstid– 60% hurtigere udviklingstid– Oftere nye features

ALLOY

ALLOY

• Model View Controller Framework– Vedligeholdt af Appcelerator– Modulopbygning– XML, CSS og JS– Backbone til databehandling

$.win.open(); // opens the window

<Alloy><Window id=“win” class="container">

<Label id=”text" text=”Hello World"/></Window>

</Alloy>

View – /views/index.xml

Controller – /controllers/index.js

ALLOY MVC

".container": {backgroundColor: "white"

},”#text": {

width: Ti.UI.SIZE,height: Ti.UI.SIZE,color: "#000"

}

Style – /styles/index.tss

Model - ?

BACKBONE.JS

BACKBONE – HVAD ER DET?

– Overførsel af data• Typisk fra server til app

– Databehandling• Sortering, filtering mv.

– Gem data lokalt i appen• Database, filsystem

– Bygger på RESTful JSON

– Uafhængig af data strukturen• XML, JSON osv..

BACKBONE I ALLOY

exports.definition = {config: {

columns: { "city": "string", "name": "string"},adapter: {

type: "sql",collection_name: "baseball"

}},extendModel: function(Model) {

_.extend(Model.prototype, {// extended functions and

properties go here});return Model;

},extendCollection: function(Collection) {

_.extend(Collection.prototype, {// extended functions and

properties go here});return Collection;

}}

Adapter

var teams = Alloy.createCollection('baseball'); // get adapter

teams.fetch(); // get data from remote server

$.index.open(); // open window

<Alloy><Window class="container">

<TableView id="table" dataCollection="baseball">

<TableViewRow><Label id="city"

text="{city}"/><Label id="name"

text="{name}"/></TableViewRow>

</TableView></Window>

</Alloy>

View

Controller

BACKBONE I ALLOY

BACKBONE I ALLOY

• Udvid - custom backbone adapter– Alloy har indbygget: sql, – REST API, SOAP mv.

• Migrations (SQL)

migration.up = function(migrator) { migrator.db.execute('ALTER TABLE ' + migrator.table + ' ADD COLUMN country TEXT;');};

migration.down = function(migrator) { var db = migrator.db; db.execute('DROP TABLE ' + migrator.table + ';');};

BACKBONE I ALLOY

• Og meget meget mere…

www.backbonejs.org

MIDDLEWARE

MIDDLEWARE

• Uden middleware

• Med middleware

MIDDLEWARE – HVORFOR?

• Mission: “Thin client”– Jo mindre app’en gør, desto bedre

• Det positive– Hurtigere app– Mindle ventetid for app brugeren– Nemmere opdatering/fejlrettelse

• Det negative– Kræver langt større servere

CASE STORIES

CASE: ORBICON

CASE: ORBICON

• I felten med en tablet– SOAP webservice

• SOAP Backbone adapter• Oversæt XML -> JSON

– Custom kort / overlays– Kort data– Tracking

CASE: ABB

CASE: ABB

• Moduler & API integration– Native moduler: PDF, PUSH– Cloud service integration

• Middleware: PDF konvertering

– Tracking

CASE: TO-DOOR

CASE: TO-DOOR

• Intern app– Geo tracking– Navigation

• Middleware

– C5 dynamics integration• Middleware

– Rapportering– SMS til slutkunde

CASE: STELLA POLARIS

CASE: STELLA POLARIS

• Bruger drevet indhold– Event app

• Nyheder, kort, program, social

– Custom Backbone Rest API adapter– Integration til Twitter & Instagram

• Middleware

Q& AMads Møller

CTO – Napp

mm@napp.dk

@nappdev