An introduction to BackboneJS used in Titanium Alloy. Notice: The slides are written in Danish.

1. TITANIUM & BACKBONE
Mads Møller
CTO – Napp
mm@napp.dk
@nappdev

2. TITANIUM OG BACKBONE
•
•
•
•
•
•
Hvorfor cross platform
Alloy
Backbone
Middleware
Case stories
Q&A

3. HVORFOR CROSS PLATFORM

4. 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

5. ALLOY

6. ALLOY
• Model View Controller Framework
–
–
–
–
Vedligeholdt afAppcelerator
Modulopbygning
XML, CSS og JS
Backbone til databehandling

7. ALLOY MVC
Controller – /controllers/index.js
$.win.open(); // opens the window
View – /views/index.xml
<Alloy>
<Window id=“win” class="container">
<Label id=”text" text=”Hello World"/>
</Window>
</Alloy>
Style – /styles/index.tss
".container": {
backgroundColor: "white"
},
”#text": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000"
}
Model - ?

8. BACKBONE.JS

9. 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..

10. BACKBONE I ALLOY
Adapter
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;
}
}

11. BACKBONE I ALLOY
Controller
var teams = Alloy.createCollection('baseball'); // get adapter
teams.fetch(); // get data from remote server
$.index.open(); // open window
View
<Alloy>
<Window class="container">
<TableView id="table" dataCollection="baseball">
<TableViewRow>
<Label id="city" text="{city}"/>
<Label id="name" text="{name}"/>
</TableViewRow>
</TableView>
</Window>
</Alloy>

12. 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 + ';');
};

13. BACKBONE I ALLOY
• Og meget meget mere…
www.backbonejs.org

14. MIDDLEWARE

15. MIDDLEWARE
• Uden middleware
• Med middleware

16. 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

17. CASE STORIES

18. CASE: ORBICON

19. CASE: ORBICON
• I felten med en tablet
– SOAP webservice
• SOAP Backbone adapter
• Oversæt XML -> JSON
– Custom kort / overlays
– Kort data
– Tracking

20. CASE: ABB

21. CASE: ABB
• Moduler & API integration
– Native moduler: PDF, PUSH
– Cloud service integration
• Middleware: PDF konvertering
– Tracking

22. CASE: TO-DOOR

23. CASE: TO-DOOR
• Intern app
– Geo tracking
– Navigation
• Middleware
– C5 dynamics integration
• Middleware
– Rapportering
– SMS til slutkunde

24. CASE: STELLA POLARIS

25. CASE: STELLA POLARIS
• Bruger drevet indhold
– Event app
• Nyheder, kort, program, social
– Custom Backbone Rest API adapter
– Integration til Twitter & Instagram
• Middleware

26. Q& A
Mads Møller
CTO – Napp
mm@napp.dk
@nappdev