Anatomy of an App

Transcript

1. Anatomy of an App Andrew Lunny, PhoneGap/Adobe

2. Me @alunny Computer Scientist Nitobi Software Adobe Systems Author

3. Me @alunny Computer Scientist Nitobi Software Adobe Systems Author Apache

   Cordova Mostly out of date

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

5. PhoneGap Build Six Platforms No SDKs No Problem build.phonegap.com (there

   are still many problems)

6. PhoneGap Build Six Platforms No SDKs No Problem build.phonegap.com (there

   are still many problems) BETA

7. cross-platform native mobile apps using HTML5

8. cross-platform native mobile apps using HTML5

9. cross-platform native mobile apps using HTML5

10. cross-platform native mobile apps using HTML5 ‣ Objective-C ‣ Java

    ‣ Android flavor ‣ BlackBerry flavor ‣ C#

11. cross-platform native mobile apps using HTML5

12. cross-platform native mobile apps using HTML5 VS

13. cross-platform native mobile apps using HTML5 VS

14. cross-platform native mobile apps using HTML5 VS This is not

    a real problem

15. cross-platform native mobile apps using HTML5 VS This is not

    a real problem Your app is not a runtime

16. cross-platform native mobile apps using HTML5 VS

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

18. VS citizens tourists

19. VS citizens tourists ‣ Responsible ‣ Considerate ‣ Knowledgable

20. VS citizens tourists ‣ Crass ‣ Self-Serving ‣ Ignorant

21. VS non-jerks jerks

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

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

    awkward

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

25. <aside>

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

27. People can tell?

28. </aside>

29. only one in a pile of the resulting applications might

    even begin to pass for native

30. pass for native how do you why should you what

    does it mean to

31. Not Native jerks slow ugly inconsistent awkward tourists

32. Not Native jerks slow ugly inconsistent awkward tourists mystery meat!

33. Native fast pretty consistent elegant citizens

34. Native fast pretty consistent elegant citizens obvious vegetables!

35. Using a native SDK won’t get you there

36. Using native APIs won’t get you there

37. Having principles will get you there

38. How can I be an elegant citizen of the platform?

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

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

    this way.

41. three rules crash-only loose coupling remove decoration

42. three principles web native hybrid

43. three principles death is certain you’re not alone stop doing

    so much

44. WARNING pseudocode ahead

45. death is certain

46. nasty, brutish and short ‣ killed by the OS (or

    the browser) ‣ interrupted ‣ network dropped

47. $.on(‘deviceready’, function () { // BAD lotsOfExpensiveOperations() // GOOD minimalStartup()

    }) start up quickly

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

    $.on(‘pause’, function () { saveAppState() })

49. $.on(‘offline’, function () { app.hasNetwork = false }) listen to

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

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

    always!

51. you’re not alone

52. your (okay) app lists + buttons data

53. your (super) app lists + buttons data the world

54. ‣ Web: hyperlinks! ‣ Android: intents ‣ iOS: custom URL

    scheme ‣ future: web intents communication

55. function share(thing, where) { if (where == ‘facebook’) { fbShare(thing)

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

56. 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

57. <intent action="http://webintents.org/ share" type="image/*" href="share.html" disposition="window|inline" /> Register Service see

    webintents.org

58. 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

59. stop doing so much

60. None

61. http://bit.ly/pg-native

62. 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.

63. 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.

64. do you need a scrolling library a UI library an

    MVC library boilerplate

65. var $ = document.querySelectorAll.bind(document) // and something like Element.prototype.on =

    Element.prototype.addEventListener $(‘#mylink’)[0].on(‘touchstart’, handleTouch, false) Use what’s there

66. avoid decoration

67. build lots of small apps

68. you can always have less code

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

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