Anatomy of an App

What makes an app native? What matters when making apps native?

Links: https://gist.github.com/2491334

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