Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PhoneGap 101

PhoneGap 101

or: how I learned to stop writing platform-specific code and love JavaScript, HTML and CSS

mattrogish

March 11, 2013
Tweet

More Decks by mattrogish

Other Decks in Programming

Transcript

  1. PhoneGap 101 @MattRogish (matt.rogish@gmail.com) or: how I learned to stop

    writing platform-specific code and love JavaScript, HTML and CSS Monday, March 18, 13
  2. Matt Rogish Monday, March 18, 13 Hi, I’m Matt. I

    work at Funding Gates, etc.
  3. To APP or not to APP... Monday, March 18, 13

    Before we get into PhoneGap proper, there’s still some debate as to whether or not we should do mobile apps at all
  4. Monday, March 18, 13 A lot of folks think they

    are stupid, dying, proprietary, etc. etc.
  5. Monday, March 18, 13 That they lead to fragmentation of

    code
  6. Monday, March 18, 13 And that you should just write

    HTML apps (or HTML5, depending on your target audience)
  7. Monday, March 18, 13 I agree, writing native apps is

    a miserable experience
  8. Monday, March 18, 13 But - LOTS of native functionality

    outside of the browser sandbox. Functionality that has no desktop browser analog.
  9. Monday, March 18, 13 So that comes back to needing

    native code to access these components. Lame!
  10. Monday, March 18, 13

  11. Monday, March 18, 13 So, we want a mix -

    HTML5 and Javascript to write apps in ways that are cross-platform in a language we know and love and native code to access things that aren’t (YET) exposed in the browser
  12. Monday, March 18, 13 Let’s think about this. We need

    to access native features across multiple disparate platforms
  13. Monday, March 18, 13 That’s PhoneGap! It allows you to

    mix HTML, JS, and native code all in a nice tidy package
  14. Cordova : PhoneGap :: WebKit : (Chrome|Safari) Monday, March 18,

    13
  15. Monday, March 18, 13

  16. Monday, March 18, 13 But, you may ask - why

    would I choose PhoneGap over any of the other platforms? Consider PhoneGap’s philosophy
  17. “The purpose of PhoneGap is for PhoneGap to cease to

    exist” - Brian LeRoux, Adobe Monday, March 18, 13
  18. The purpose of <Other Mobile Platform> is for <Other Mobile

    Platform> to cease to exist? Monday, March 18, 13 Do the other cross-platform mobile application frameworks exist so they’ll be obsolete? Or does it exist to further lock you in to their technology stack? When the magical day occurs when the W3C and Device Manufacturers all have full Javascript interoperability occurs, will you be able to easily port your apps to it? To mobile web? Hmm. Ponder that.
  19. Monday, March 18, 13 Titanium/appcelerator is a commercial product designed

    to lock you in. Not further the standard open web
  20. Monday, March 18, 13 “Contact Sales” = enterprisey, expensive

  21. Monday, March 18, 13

  22. What is PhoneGap? Monday, March 18, 13 So, anyway, on

    to the good stuff.
  23. Monday, March 18, 13

  24. Monday, March 18, 13 It’s simply a www directory, with

    all your static web content. And by static I mean “No server required” - aka what we used to make in Dreamweaver back in the late 90s/early 2000s. But this aint no Web1.0 stuff - this is full on webkit-y goodness.
  25. Monday, March 18, 13 PhoneGap opens a browser, full screen

    and without all the chrome - and navigates to your index.html
  26. Monday, March 18, 13 As you can see, this is

    all HTML, CSS, Javascript. You can open it in your local browser and do development. You just have to be careful to not call hardware-specific things when not on a device, which is easy to test.
  27. Monday, March 18, 13

  28. Monday, March 18, 13 PhoneGap is an interface between YOUR

    Javascript and the native code. It’s a bridge that allows you to call native (and thus hardware) code from a standard, consistent Javascript API. You’re also not limited to PhoneGap native code, you can easily write code that extends their API for your own doings (like analytics, augmented reality, etc.). The downside, of course, is you’d need to write it for every platform in every language. D’oh!
  29. Monday, March 18, 13 Current support

  30. Monday, March 18, 13 There’s also a vibrant plugin community

    that offers native code components for different platforms. All licensed MIT/BSD - aka do what you want with it.
  31. Monday, March 18, 13 There’s also PhoneGap build. An automated

    service to take your project file (the www directory we saw earlier) and turn that into a compiled binary for iOS, Android, etc.
  32. Monday, March 18, 13 But Phonegap build can’t be used

    as an excuse not to test. SO many different devices (android in particular) have weird quicks across OS versions. Lots of testing needed
  33. Monday, March 18, 13 A product called Weinre allows you

    to debug on a live, running app!
  34. Yeah, but can I make real apps with it? Monday,

    March 18, 13 So - yeah, vibrating the device is fine and all, but what about interactivity and data collection? How do I persist my stuff so when the app opens again, it’s not brand new?
  35. SQLite DOM Key-Value File System HTTP Monday, March 18, 13

    PhoneGap, via webkit, supports <each>. The cool thing about HTTP is that since your app is running in a privileged sandbox via file:// you can do XHR to *any domain*. That’s something you can’t do on a normal web site; you’d need your server to process xhrs, or you’d have to use JSON-P or some other hax
  36. Monday, March 18, 13

  37. http://www.chromeexperiments.com/webgl Monday, March 18, 13 But even JS is getting

    3d-accelerated graphics.
  38. Monday, March 18, 13

  39. vascript Monday, March 18, 13 I think a lot of

    people still view JS as a toy language. It isn’t. As a ruby developer, I’ve pulled a lot of cool things from JS, and I’ve brought a lot of ruby stuff to JS.
  40. Okay, okay. How do I get started? Monday, March 18,

    13
  41. Monday, March 18, 13

  42. Native Monday, March 18, 13

  43. PG Monday, March 18, 13

  44. 1. Download & Install PhoneGap & Pre- requisites 2. Write

    HelloWorld.html 3. ??? 4. Profit! Monday, March 18, 13 First, you need to have the pre-requisites. For iOS, that’s Xcode and a Mac. For Android, that’s the Android SDK (Unix and Windows). For WinMo, a Windows PC/VM and the right .NET stuff. etc. You can quickly download and install PhoneGap from PhoneGap.com Write a HelloWorld HTML file, press compile, and voila!
  45. “???” explained... or: getting from zero to app in 60

    seconds Monday, March 18, 13 But it’s a lot harder than that. You have to build single-page javascript applications. You need to interface with server APIs if you want to do anything interesting. You need to know about WebKit and CSS3 on different devices, and all that stuff. We’ve done all that, and we’ve released it open source.
  46. Monday, March 18, 13

  47. Monday, March 18, 13

  48. Monday, March 18, 13

  49. Monday, March 18, 13

  50. Monday, March 18, 13

  51. Monday, March 18, 13

  52. Monday, March 18, 13

  53. Monday, March 18, 13

  54. Thank you! Any Questions? • matt.rogish@gmail.com / @MattRogish • http://groups.google.com/group/phonegap

    • http://www.meetup.com/The-New-York- Phone-Gap-Devlopers-Enthusiasts-Meetup/ Monday, March 18, 13