26
Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets @ccoenraets

Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Embed Size (px)

Citation preview

Page 1: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Cross-Platform Mobile Apps withHTML, JavaScript, and PhoneGap Christophe Coenraets@ccoenraets

Page 2: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Resources

@ccoenraets

http://coenraets.org

http://github.com/ccoenraets

[email protected]

Page 3: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

What?

3

Page 4: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Mobile Application Development Challenge

4

Samsung BadaWindows PhoneBlackBerry MobileBlackBerry QNXAndroidApple iOS Nokia

Objective-C Java NDK ActionScript J2ME C# C++ C+++ +

Page 5: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

The “Gap”

§ Package HTML/JS/CSS assets as NativeApplication

§ Expose device capabilities as JavaScript APIsconsistent across platforms

5

Page 6: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

The “Gap”

§ PhoneGap is a “wrapper” and a “bridge”

§ PhoneGap is NOT:§ A full-stack JavaScript framework

§ An architectural framework

§ A UI framework

6

Page 7: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

PhoneGap works with any Framework

7

Page 8: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Access to Device Features

8

http://phonegap.com/about/features

Page 9: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

What if you need more?

§ PhoneGap is extensible with Plugins model that enables you to write your ownnative logic to access via JavaScript

§ All phonegap APIs are plugins

§ There are lots of open source plugins athttps://github.com/phonegap/phonegap-plugins

9

Page 10: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

10

DEMO: What does a PhoneGap app look like?

Page 11: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Open Source

11

§ PhoneGap/Cordova was contributed to Apache by Adobe

§ You can get involved today!

http://incubator.apache.org/cordova/

Page 12: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

build.phonegap.com

§ Continuous deployment

§ No SDK required

§ GitHub compatible

§ Remote debugging

Page 13: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Debugging with Weinre

Page 14: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

How?

14

Page 15: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Before

Page 16: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

After: “Single Page App”

<html><head> <title>My Huge App</title> <script src="my-huge-app.js"></script></head></body><body></html>

Page 17: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Characteristics of a Single Page App

§ Views are built dynamically

§ Templates to the rescue

§ History handled by # or push state

§ Data obtained through RESTful JSON, JSONP services

§ Structure / Patterns needed to handle complexity

17

Page 18: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Choosing a stack

18

DOM

Architecture

UI

Page 19: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Example: Backbone Directory

19http://github.com/ccoenraets/backbone-directory

Page 20: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Backbone.js Routing

20

Page 21: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Backbone.js Models and REST

21

Page 22: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Employee Directory RESTful API

HTTP Method URLGET api/employeesGET api/employees/1GET api/employees/1/reportsPOST api/employeesPUT api/employees/1DELETE api/employees/1

22

Page 23: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Backbone.js Views

23

Page 24: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Templates: Before

24

Page 25: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Templates: After

§ Check out Mustache.js, Underscore.js, Handlebar.js, etc

25

Page 26: Cross-Platform Mobile Apps with HTML, JavaScript, …gotocon.com/dl/qcon-london-2012/slides/Christophe...Cross-Platform Mobile Apps with HTML, JavaScript, and PhoneGap Christophe Coenraets

Resources

@ccoenraets

http://coenraets.org

http://github.com/ccoenraets

[email protected]