Native-like Apps with PhoneGap

Best practices for HTML-based apps.

What is PhoneGap?

An application container that allows you to build natively installed apps using HTML, CSS & JavaScript

Build your UI with HTML, CSS & JavaScript

Access native functionality through PhoneGap

Package your app for distribution

Why are we talking about PhoneGap?

You can easily build Salesforce apps with PhoneGap

In fact, the Salesforce Mobile SDK is built on top of PhoneGap

Or you can build them with ForceTK.js

(Force.com JavaScript REST Toolkit)

Let's take a moment and look at some apps...

BBC Olympics

Zombie Jombie

Wikipedia

Untappd

Bit Timer

US Census Browser

Adobe SCInsight

All of these are built with PhoneGap

Let's take a look at some apps...

What makes an app feel native?

  • UI Styles
  • Interactivity
  • Smooth Performance
  • Fast Response Time

Compare.

Make your apps feel like apps!

Make your apps responsive

    MOUSE events are slow

    TOUCH events are fast

Make your apps fast and efficient

    Preload Images

    Use hardware acceleration

    transform: translate3d(0,0,0); is your friend

Make your apps fast and efficient

    Throttle event handling

    requestAnimationFrame(); or render loops mitigate cpu load

    Avoid gratuitous animation/UI when not critical

Andrew Trice

Technical Evangelist
Adobe Systems