Slide 1

Slide 1 text

Anatomy of an App Andrew Lunny, PhoneGap/Adobe

Slide 2

Slide 2 text

Me @alunny Computer Scientist Nitobi Software Adobe Systems Author

Slide 3

Slide 3 text

Me @alunny Computer Scientist Nitobi Software Adobe Systems Author Apache Cordova Mostly out of date

Slide 4

Slide 4 text

PhoneGap Build Six Platforms No SDKs No Problem build.phonegap.com

Slide 5

Slide 5 text

PhoneGap Build Six Platforms No SDKs No Problem build.phonegap.com (there are still many problems)

Slide 6

Slide 6 text

PhoneGap Build Six Platforms No SDKs No Problem build.phonegap.com (there are still many problems) BETA

Slide 7

Slide 7 text

cross-platform native mobile apps using HTML5

Slide 8

Slide 8 text

cross-platform native mobile apps using HTML5

Slide 9

Slide 9 text

cross-platform native mobile apps using HTML5

Slide 10

Slide 10 text

cross-platform native mobile apps using HTML5 ‣ Objective-C ‣ Java ‣ Android flavor ‣ BlackBerry flavor ‣ C#

Slide 11

Slide 11 text

cross-platform native mobile apps using HTML5

Slide 12

Slide 12 text

cross-platform native mobile apps using HTML5 VS

Slide 13

Slide 13 text

cross-platform native mobile apps using HTML5 VS

Slide 14

Slide 14 text

cross-platform native mobile apps using HTML5 VS This is not a real problem

Slide 15

Slide 15 text

cross-platform native mobile apps using HTML5 VS This is not a real problem Your app is not a runtime

Slide 16

Slide 16 text

cross-platform native mobile apps using HTML5 VS

Slide 17

Slide 17 text

cross-platform native mobile apps using HTML5 VS A different distinction

Slide 18

Slide 18 text

VS citizens tourists

Slide 19

Slide 19 text

VS citizens tourists ‣ Responsible ‣ Considerate ‣ Knowledgable

Slide 20

Slide 20 text

VS citizens tourists ‣ Crass ‣ Self-Serving ‣ Ignorant

Slide 21

Slide 21 text

VS non-jerks jerks

Slide 22

Slide 22 text

http://al3x.net/2011/01/15/user-hostile-platforms.html

Slide 23

Slide 23 text

the gray mystery meat of client-side software slow, ugly, inconsistent, awkward

Slide 24

Slide 24 text

These apps just ain’t right, and people can tell.

Slide 25

Slide 25 text

Slide 26

Slide 26 text

People can tell? Trivia: Most popular hybrid app on iOS?

Slide 27

Slide 27 text

People can tell?

Slide 28

Slide 28 text

Slide 29

Slide 29 text

only one in a pile of the resulting applications might even begin to pass for native

Slide 30

Slide 30 text

pass for native how do you why should you what does it mean to

Slide 31

Slide 31 text

Not Native jerks slow ugly inconsistent awkward tourists

Slide 32

Slide 32 text

Not Native jerks slow ugly inconsistent awkward tourists mystery meat!

Slide 33

Slide 33 text

Native fast pretty consistent elegant citizens

Slide 34

Slide 34 text

Native fast pretty consistent elegant citizens obvious vegetables!

Slide 35

Slide 35 text

Using a native SDK won’t get you there

Slide 36

Slide 36 text

Using native APIs won’t get you there

Slide 37

Slide 37 text

Having principles will get you there

Slide 38

Slide 38 text

How can I be an elegant citizen of the platform?

Slide 39

Slide 39 text

http://www.tbray.org/ongoing/When/201x/2010/10/30/ Three-Android-Software-Rules

Slide 40

Slide 40 text

I started wondering why all software, without exception, isn’t written this way.

Slide 41

Slide 41 text

three rules crash-only loose coupling remove decoration

Slide 42

Slide 42 text

three principles web native hybrid

Slide 43

Slide 43 text

three principles death is certain you’re not alone stop doing so much

Slide 44

Slide 44 text

WARNING pseudocode ahead

Slide 45

Slide 45 text

death is certain

Slide 46

Slide 46 text

nasty, brutish and short ‣ killed by the OS (or the browser) ‣ interrupted ‣ network dropped

Slide 47

Slide 47 text

$.on(‘deviceready’, function () { // BAD lotsOfExpensiveOperations() // GOOD minimalStartup() }) start up quickly

Slide 48

Slide 48 text

$.on(‘resume’, function () { resumeAppState() }) listen for lifecycle events $.on(‘pause’, function () { saveAppState() })

Slide 49

Slide 49 text

$.on(‘offline’, function () { app.hasNetwork = false }) listen to the network $.on(‘online’, function () { app.hasNetwork = true })

Slide 50

Slide 50 text

$.on(‘anythingImportant’, function () { saveDataLocally() replicateWithServer() }) always save state! always!

Slide 51

Slide 51 text

you’re not alone

Slide 52

Slide 52 text

your (okay) app lists + buttons data

Slide 53

Slide 53 text

your (super) app lists + buttons data the world

Slide 54

Slide 54 text

‣ Web: hyperlinks! ‣ Android: intents ‣ iOS: custom URL scheme ‣ future: web intents communication

Slide 55

Slide 55 text

function share(thing, where) { if (where == ‘facebook’) { fbShare(thing) } else if (where == ‘twitter’) { twitterShare(thing) } else { alert(“don’t use “ + where) } }) roll your own

Slide 56

Slide 56 text

function share(thing, where) { if (where == ‘facebook’) { open(“fb://” + thing) } else if (where == ‘twitter’) { open(“twitter://” + thing) } else { alert(“don’t use “ + where) } }) URL schemes

Slide 57

Slide 57 text

Register Service see webintents.org

Slide 58

Slide 58 text

var intent = new Intent("http:// webintents.org/share", "text/uri-list", "http://news.bbc.co.uk"); window.navigator.startActivity(int ent); Invoke Action see webintents.org

Slide 59

Slide 59 text

stop doing so much

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

http://bit.ly/pg-native

Slide 62

Slide 62 text

And then... *pow*... performance issues that weren't related to anything that I could find: it seemed some combination of CSS/ HTML/JavaScript was getting in the way.

Slide 63

Slide 63 text

I've finally pared it down to nothing but Zepto unless I really really need something else. Even just getting away from core JQuery makes a big difference.

Slide 64

Slide 64 text

do you need a scrolling library a UI library an MVC library boilerplate

Slide 65

Slide 65 text

var $ = document.querySelectorAll.bind(document) // and something like Element.prototype.on = Element.prototype.addEventListener $(‘#mylink’)[0].on(‘touchstart’, handleTouch, false) Use what’s there

Slide 66

Slide 66 text

avoid decoration

Slide 67

Slide 67 text

build lots of small apps

Slide 68

Slide 68 text

you can always have less code

Slide 69

Slide 69 text

death is certain you’re not alone stop doing so much

Slide 70

Slide 70 text

Thank You @alunny build.phonegap.com links: http://bit.ly/devcon-links