SLIDE 1
ADOBE @CCOENRAETS HTTP://COENRAETS.ORG
CHRISTOPHE COENRAETS
CROSS PLATFORM MOBILE APPS WITH PHONEGAP
htps://github.com/ccoenraets
CROSS PLATFORM MOBILE APPS WITH PHONEGAP CHRISTOPHE COENRAETS - - PowerPoint PPT Presentation
CROSS PLATFORM MOBILE APPS WITH PHONEGAP CHRISTOPHE COENRAETS - - PowerPoint PPT Presentation
CROSS PLATFORM MOBILE APPS WITH PHONEGAP CHRISTOPHE COENRAETS ADOBE @CCOENRAETS HTTP://COENRAETS.ORG h t ps://github.com/ccoenraets N Platforms = N Apps Objective-C Java NDK J2ME C# C++ C++ C/C++ N = 1 ? Objective-C Java NDK J2ME
SLIDE 2
SLIDE 3 Objective-C Java NDK C# J2ME C/C++ C++ C++
N Platforms = N Apps
SLIDE 4
N = 1 ?
SLIDE 5 Objective-C Java NDK C# J2ME C/C++ C++ C++
SLIDE 6 Objective-C Java NDK C# J2ME C/C++ C++ C++
SLIDE 7
Package as Native App Access device features
Mobile Sites Mobile Apps
SLIDE 8
Hybrid Apps
C/C++ C++ C++ C# J2ME Java Objective-C
SLIDE 9
Accessing Device Features
JavaScript OS
SLIDE 10
User Experience Platforms
SLIDE 11
Is this an App?
SLIDE 12
Hybrid App Native App Access App Store App Store Updates App Store + Instant App Store Graphic HTML, Canvas, SVG Native Performance Slower * Faster * Device APIs Yes No Language Web Objective C / Java / C Connectivity Online / Offline Online / Offline Push Notification Yes Yes
SLIDE 13
PhoneGap Performance
- 1. Keep small footprint (and avoid unneeded libs)
- 2. Use Tap events, not Click events
- 3. Use hardware accelerated CSS transitions
SLIDE 14
BBC Olympics
SLIDE 15
Untappd
SLIDE 16
Salesforce.com Logger
SLIDE 17
Building Hybrid Apps
PhoneGap Build
ipa apk OTA xap wgz ipk
+ +
SLIDE 18
ARCHITECTING HYBRID APPS
SLIDE 19
Old School: UI generated at the server-side in PHP, JSP, ASP, RoR, CF, ...
SLIDE 20
<html> <head> <title>Huge App</title> <script src="huge-app.js"></script> </head> <body></body> </html>
New School: Single Page Application UI built dynamically at the client-side in JavaScript
SLIDE 21
Framework Landscape
DOM Architecture UI Full stack Custom stack
SLIDE 22
Router
Router = Backbone.Router.extend({ routes: { "" : "list", "employees/:id" : "details” }, list: function() { $('#list').html('<div>Employee List</div>'); }, details: function(id) { $('#details').html('<div>Employee Details</div>'); } });
SLIDE 23
View
EmployeeView = Backbone.View.extend({ template: _.template($('#employee-tpl').html()), initialize: function () { this.render(); }, events: { "click .save": "save" }, render: function () { $(this.el).html(this.template(this.model.toJSON())); }, save: function () { this.model.save({firstName: $('#firstName').val()}); } });
SLIDE 24
Model
Employee = Backbone.Model.extend({ urlRoot: "api/employees" }); emp = new Employee({firstName: 'Joe', lastName: 'Smith'}); emp.save();
SLIDE 25