Your SlideShare is downloading. ×
Titanium Alloy & Backbone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Titanium Alloy & Backbone

855
views

Published on

An introduction to BackboneJS used in Titanium Alloy. …

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

Published in: Technology, Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
855
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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