titanium alloy & backbone
DESCRIPTION
An introduction to BackboneJS used in Titanium Alloy. Notice: The slides are written in Danish.TRANSCRIPT
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