PhoneGap 101

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

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