Titanium Alloy & Backbone

1,481 views
1,295 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,481
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Titanium Alloy & Backbone

  1. 1. TITANIUM & BACKBONE Mads Møller CTO – Napp mm@napp.dk @nappdev
  2. 2. TITANIUM OG BACKBONE • • • • • • Hvorfor cross platform Alloy Backbone Middleware Case stories Q&A
  3. 3. HVORFOR CROSS PLATFORM
  4. 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. 5. ALLOY
  6. 6. ALLOY • Model View Controller Framework – – – – Vedligeholdt afAppcelerator Modulopbygning XML, CSS og JS Backbone til databehandling
  7. 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. 8. BACKBONE.JS
  9. 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. 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. 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. 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. 13. BACKBONE I ALLOY • Og meget meget mere… www.backbonejs.org
  14. 14. MIDDLEWARE
  15. 15. MIDDLEWARE • Uden middleware • Med middleware
  16. 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. 17. CASE STORIES
  18. 18. CASE: ORBICON
  19. 19. CASE: ORBICON • I felten med en tablet – SOAP webservice • SOAP Backbone adapter • Oversæt XML -> JSON – Custom kort / overlays – Kort data – Tracking
  20. 20. CASE: ABB
  21. 21. CASE: ABB • Moduler & API integration – Native moduler: PDF, PUSH – Cloud service integration • Middleware: PDF konvertering – Tracking
  22. 22. CASE: TO-DOOR
  23. 23. CASE: TO-DOOR • Intern app – Geo tracking – Navigation • Middleware – C5 dynamics integration • Middleware – Rapportering – SMS til slutkunde
  24. 24. CASE: STELLA POLARIS
  25. 25. CASE: STELLA POLARIS • Bruger drevet indhold – Event app • Nyheder, kort, program, social – Custom Backbone Rest API adapter – Integration til Twitter & Instagram • Middleware
  26. 26. Q& A Mads Møller CTO – Napp mm@napp.dk @nappdev

×