titanium alloy & backbone
DESCRIPTION
An introduction to BackboneJS used in Titanium Alloy. Notice: The slides are written in Danish.TRANSCRIPT
![Page 2: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/2.jpg)
TITANIUM OG BACKBONE
• Hvorfor cross platform• Alloy• Backbone• Middleware• Case stories• Q&A
![Page 3: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/3.jpg)
HVORFOR CROSS PLATFORM
![Page 4: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/4.jpg)
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
![Page 5: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/5.jpg)
ALLOY
![Page 6: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/6.jpg)
ALLOY
• Model View Controller Framework– Vedligeholdt af Appcelerator– Modulopbygning– XML, CSS og JS– Backbone til databehandling
![Page 7: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/7.jpg)
$.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 - ?
![Page 8: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/8.jpg)
BACKBONE.JS
![Page 9: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/9.jpg)
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..
![Page 10: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/10.jpg)
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
![Page 11: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/11.jpg)
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
![Page 12: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/12.jpg)
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 + ';');};
![Page 13: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/13.jpg)
BACKBONE I ALLOY
• Og meget meget mere…
www.backbonejs.org
![Page 14: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/14.jpg)
MIDDLEWARE
![Page 15: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/15.jpg)
MIDDLEWARE
• Uden middleware
• Med middleware
![Page 16: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/16.jpg)
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
![Page 17: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/17.jpg)
CASE STORIES
![Page 18: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/18.jpg)
CASE: ORBICON
![Page 19: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/19.jpg)
CASE: ORBICON
• I felten med en tablet– SOAP webservice
• SOAP Backbone adapter• Oversæt XML -> JSON
– Custom kort / overlays– Kort data– Tracking
![Page 20: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/20.jpg)
CASE: ABB
![Page 21: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/21.jpg)
CASE: ABB
• Moduler & API integration– Native moduler: PDF, PUSH– Cloud service integration
• Middleware: PDF konvertering
– Tracking
![Page 22: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/22.jpg)
CASE: TO-DOOR
![Page 23: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/23.jpg)
CASE: TO-DOOR
• Intern app– Geo tracking– Navigation
• Middleware
– C5 dynamics integration• Middleware
– Rapportering– SMS til slutkunde
![Page 24: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/24.jpg)
CASE: STELLA POLARIS
![Page 25: Titanium Alloy & Backbone](https://reader033.vdocuments.site/reader033/viewer/2022061213/5496d0beb4795985298b4630/html5/thumbnails/25.jpg)
CASE: STELLA POLARIS
• Bruger drevet indhold– Event app
• Nyheder, kort, program, social
– Custom Backbone Rest API adapter– Integration til Twitter & Instagram
• Middleware