Hybrid app development with HTML5, Javascript and CSS.

1. PhoneGap
A Developers Experience

2. Co-owner and Developer
at
Hello! I’m Tyler Johnston
@tylerjohnst @tylerjohnst
ahoyconsulting.com

3. What is PhoneGap?
PhoneGap is a framework for developing cross-platform
mobile applications using HTML, CSS, and Javascript. It is
based on the Apache Cordova project and is currently
maintained by Adobe.

4. Wait, I thought it was native?
applications. They are displayed using a full scree

5. Native App - apk/ipa/etc
Native APIs
Native WebView
Your Code

6. What Phone Features?
• Accelerometer
• Camera
• Capture
• Compass
• Connection
• Contacts
• File
• Geolocation
• Media
• Notification
• Storage
navigator.notification.vibrate(1000)
Wonderful APIs

7. Where Can My App Run?
• iOS (iPhone/iPad)
• Android
• Windows Phone 7
• Blackberry OS WebWorks 7
• Symbian WRT
• webOS

8. • Plugin interface for accessing native code
from the Javascript API.
• Very active community, developing some
really cool stuff.
• MapKit
• Flashlight
• Barcode scanner
• NFC
• Badges
• In App Purchases

9. Who is using this magical
framework?

10. The Right Tool
• PhoneGap is like any other tool, it should be
used for the right job.
• PhoneGap accelerates using data driven
applications.
• Not a great solution for apps that require
significant horsepower to run.

11. The Web Can Be Fast!
Don’t let the original Facebook app fool you. It
wasn’t HTML5 that made the app slow and
clunky. It was just a bad application.
Even though it is the web you have to think
about performance from the beginning.

12. Bring Your Own Tools
PhoneGap just gives you a web browser. Bring your own tools

13. page application. There are plenty of tools out ther

14. WHAT I’VE LEARNED

15. Performance
• Lazy load as much as you can.
• Defer rendering below the “fold.” (Load 10
of the 30 sub views, then the rest.)
• Precompile templates.
• Only fetch required collections needed for
the initial view.
• _.defer/setTimeout is your friend.

16. Prevent “Render Flash”
• Render off screen, animate in.
• Preload images. Each additional image is another
network request. View will render before the image
request even begins.
• Even fancier to build your own local cache.
• Manually disable the splash screen after your app has
initialized.
var path = ‘path/to/img.png’;
images = {};
images[path] = new Image;
images[path].src = path;
$(body).append(images[path]);

17. Performance
• Minify and concat all of your CSS/JS. Each
even though it’s a mobile app there are still
network requests that are fired to local disk
but with near zero latency.
• Use image sprites if you can, again, the less
asset requests the better the app will
function and seem more “native.”

18. Making Compilation Easier• Middleman (with the Middleman-Phonegap
plugin)
• Ruby on Rails-like asset pipeline. Supports
all the sprockets and rails plugins for almost
all templates. (Haml, Sass, Slim, Less) If it
works with Sprockets it works with
Middleman.
• Almost zero configuration. Only depends on
Ruby.
• Minify, concat, linting. All built in.

19. Track your references!
Memory leaks tend to be worse on mobile as it
will cause your entire app to force closed by
the OS once it uses enough resident memory.

20. FastClick.js
ms delay on the “click” event. FastClick.js is a polyfi
s the difference between a responsive app and a sl
hrome for Android has removed this. FastClick acco

21. Animations
• All mobile phones can optimize DOM elements to be animated
using the GPU. Using the GPU will cause the animations to be
silky smooth.
• To enable GPU acceleration on a DOM element append the
following CSS rules:
• GPU enabled DOM elements take significantly more memory.
The best solution being to only place it on elements which you
wish to perform animations on. Using the * selector will lead to
lots of pain and crashes.
transform: translate3d(0,0,0);

22. Styling
• Just because your app can be compiled and deployed
to multiple platforms it does not mean all of your user
interactions work across all platforms.
• iOS and Android have very different ways of displaying
UI.
• Action bars are usually opposite.
• Home buttons do different functions.
• Android and Windows have physical buttons.
• Loading different stylesheets at compile time is a very
easy solution to solving that problem.

23. Android 2.x Makes Me Cry
• Really, really, really old version of
Webkit.
• Nasty bugs.
• Really, really, really slow.
• Lack of most of CSS3 basic
features.
• Animations
• Gradients
• Shadows (Box and Text)

24. PhoneGap Build is Amazing
• Handles compilation of your
application to all available
platforms.
• Code signing for deployments
to App Stores
• Removes need for entire build
environment on the local
machine
• Remote debugging
• Hydration
• Test deployments
• Free for one app, $9.99 for up
to 25. Included if you have

25. Deploying to the App Store
• Once you have your binary you can begin
the process of submitting your app to the
respective app store.
• All signed binaries from PhoneGap build are
ready to upload.

26. The Google Play store is very straight
forward. Setup your account and upload
your signed APK and you are ready to
go. There is no approval process here.
By far the easiest store to deploy to.

27. • First release can take upwards of a month to get approved to the store
regardless of the framework used.
• Apple has some strict guidelines on how your app should function.
• Apps may not boot to a blank screen. So assets must be stored on
the device to make sure the app loads to an interactive state.
• Requiring external libraries on the initial load will cause you to fail the
audit.
• The code that does reside on the device must make it “interactive”
enough. Apple has a rule that all apps have to “contribute” to the
iPhone experience.
• But they will (hopefully) approve you. Using PhoneGap is not grounds
enough to reject an app. There are still a ton of reasons why they will
reject you. Be diligent!

28. Good luck and go make some awesome
stuff!
Questions? Comments?