Introduction talk on Phonegap. Tells you why you should care about mobile, and how to start off using Phonegap. After seeing this presentation you should be able to start a Phonegap project pretty rapidly and feel comfortable with the file structure you're working in and structures of the platforms you're building your app for.

1. Getting started with
010PHP, October 10th
2013

2. And you are?
 Patrick van Kouteren
 Lead developer – Infopact Netwerk & Communicatie
 Developer (& owner) – WeDesignIt
 F1, Running, Aquaria, CODING
pvankouteren
@pvankouteren
IRC pvankouteren

3. Mobile facts and estimates
(http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/)

4. Increments in mobile share of web traffic in just
two years:
North America: +69%
Asia: + 192%
Africa is getting started..

7. Joining the OS party..

8. Application considerations
 Target audience?
 App? WebApp? Responsive website?
 Focus on one or a couple of platforms?

9. Introducing Phonegap
 Adobe / Nitobi
 Apache Cordova
 Goal: to cease to exist
 Abstraction for many platforms, different
programming languages

10. What does it do?
• HTML5 container
• Javascript APIs to device functionalities
• Plugins

11. How to install
• Prerequisite: Node.js
• Dependent on build type: target platform(s)
SDK(s)
Installing:

12. Getting started: Phonegap CLI

13. Getting started: Phonegap CLI

14. Getting started: Phonegap CLI

15. Getting started: Phonegap CLI

16. File structure
• merges
• platforms
• plugins
• www
Platform specific code to merge
Build output per platform
Project plugins
Project code

18. config.xml
• App name, description, author
• App behavior (“preferences”)
• App permissions (“preferences”)
• Icon and splash screen locations
• Whitelisting of domains (like urls for in-app
browser)

19. config.xml: preferences

20. Creating an app..
• HTML5
• CSS: plain, Twitter Bootstrap, TopCoat
• Javascript: plain, AngularJS, Ember,
Backbone.js, Knockout.js, Knockback.js,
Spine…
And/or
• Frameworks/libaries: jQuery mobile (tip: save
time, use the themeroller..), Sencha, Phone.js

21. Creating an app..
• Still kind of a wild west..
• Use what works for you
• For the sake of speed: layers and code size

22. Creating an app: HTML

23. Creating an app: Javascript

24. App testing: Javascript
• Unit testing: Jasmine provided on creation
• Selenium, appium

25. App testing: User testing
• Regular browser testing
• Browser plugin: Ripple
• Devices > browser!

26. App testing: User testing

27. App testing: User testing

28. App testing: User testing

29. App testing:
• Once built: Simulators for Android, Xcode etc.

30. Building
• Local: SDKs needed!
• Remote: build.phonegap.com
• 1st private app / Open source: free
• 2-25 private apps: >= $ 10/month

31. Building local on CLI

32. Building local on CLI

34. Looks familiar?

35. Applied config.xml

36. Testing on devices
• Browser never as accurate as device
• Various screen sizes and resolutions
• Input lag
• Touch instead of mouse: drag / swipe events

37. Testing on devices

38. Testing on devices
OpenDeviceLab
http://opendevicelab.com

39. Phonegap is an awesome tool..
but...

40. .. not unlimited awesome
• Abstraction layer: less responsive than native
• It uses browser components of OS
• Yes, browser related stuff still holds
(who wants to work with Windows Mobile now?)
• Games: canvas, javascript, hardware rendering

41. Platforms and tools support

42. Platforms and tools support

43. Some issues I encountered..
• (iOS) fixed header: initial scollpane offset
• Fix: trigger window resize on start
• (Android < 3, jQuery Mobile) <select> items not
showing
• Fix: data-native-menu=“false”

44. Some issues I encountered..
• (iOS) Splash screen config: statusbar on splash
screen display
• Fix: Enable this in CODE, not in Xcode
• (Android) Splash screen duration: config setting
not used
• Fix: Enable this in code

45. Summarized
• Many platforms out there (still increasing)
• HTML, CSS, JS -> native project with container
• Powerful CLI tool
• No standards: Pick the tools that work for you
• Testing options, UX: device > browser
• Support for many platforms, APIs, but not all

46. Future
• Native vs. HTML5
• HTML5 app structure seems to converge:
• Chrome apps
• Firefox OS (mobile + TV!)
• Phonegap
• Tizen (mobile + TV!)
• By 2014, mobile internet expected to take
over desktop usage

47. Useful resources
• http://docs.phonegap.com
• http://diveintohtml5.info
• http://coenraets.org/blog/
• http://devgirl.org
• http://phonegap-tips.com

48. Questions?

49. Thanks!
Questions, comments:
pvankouteren | @pvankouteren | IRC pvankouteren