Video: Top 10 Performance Techniques for PhoneGap Applications

Common Sense and Rocket Science

Common Sense and Rocket Science

In 2013 at Adobe MAX 2013, Christophe Coenraets – Developer・Speaker・Writer, and Developer Evangelist at Salesforce, did a talk entitled Top 10 Performance Techniques for PhoneGap Applications. The talk was video taped and is available on AdobeTV and his weblog.

This blog post is a break down of this video and the ten (10) techniques he spoke of. All ten (10) points are listed below in the order given. The numbers on the right hand side are approximate time marks where Chris discusses the subject.

  1. Don’t generate the UI on the server  ~ 5:00
  2. Don’t wait for the data to display the UI ~10:40
  3. Cache what you can
    1. Cache static data ~ 14:00
    2. Cache some dynamic data, appropriately
    3. Cache element (id) selectors ~ 17:40
    4. Pre-compile templates ~ 20:00
  4. Use CSS transition and hardware acceleration  ~ 23:00
  5. Avoid the 300ms delay & possibly use fastclick.js ~ 31:00
  6. Load images from one composite image ~ 37:45
  7. Limit shadows and gradients ~ 42:00
  8. Avoid reflow/re-rendering/re-layout/re-drawing the DOM ~ 43:15
  9. Do you need that framework? ~ 50:00
  10. TEST (with real data & real devices & a bad network) ~ 52:00

Summary of talk slide ~ 53:20

Slightly related to this topic is:

Crockford’s Javascript Style Guide from 2007

In this 2007 presentation at Yahoo!, which is meant to be the beginning of a three-course sequence (followed by “Theory of the DOM” and then “Advanced JavaScript”), Douglas Crockford explores not only the language as it is today but also how the language came to be the way it is.


Hybrid HTML5 Boilerplates: Breaking the Chains of Legacy

A roundup of boilerplates for Hybrid Mobile Application Development
This post has two parts: 1. the realization that there is a shift in thinking, and 2. a list of Popular HTML Boilerplates. The analysis and thinking comes from some one working on IoT for mobile devices, not desktop variations of shopping catalogues.

The key point: we do not need to carry the same legacy baggage that web developer and native mobile developers carry. It’s not just that we can develop faster, but also that we don’t have to carry legacy items, like support for IE7 and IE8.

The first part starts with a tale of conscious, but uncoordinated movement within the hybrid HTML5 community1.

A few weeks ago I released an HTML5 boilerplate for Phonegap development. Within days of this, Phonegap did a major release. Days afterwards I decide to step up the release of three (3) boilerplates. Midway through my work, I was taken back a bit when Brian Leroux tweeted the release of his version of a phonegap boilerplate, aka Phonegap-easy-start. So, I quickly finished up and released three (3) Phonegap Generic boilierplates.


<< brianleroux/phonegap-easy-start

Phonegap–Generic-Boilerplate #1 >>

My next thought was to do a quick blog of other Mobile/Cordova/Phonegap/Hybrid HTML Boilerplates. To my dismay, there were only seven (7) of any worth. Two (2) were from phonegap (start & hello-world), one for Cordova, one for ionic, and one other.2

At some point an epiphany came to me, namely, we do not need to carry the same legacy baggage that web developer and native mobile developers carry. It’s not just that we can develop faster, but also that we don’t have to carry legacy items, like support for IE7 and IE8 — OUCH!.

Phone/Mobile App vs. Mobile Web App
One distinction that is not completely clear to web developers is that stand-alone phone/mobile Apps have different requirements versus Web Apps3. Both are highly concerned with page layout, network access, and compability among mobile devices, but after that it differs. Stand-alone Apps have a variety of additional services that include access to sensors on the mobile device.

The Hybrid view of standard Boilerplates
There are a host of standard HTML5 boilerplates available right now, but only a handful are meant to work with stand-alone hybrid Apps, let alone mobile Apps. Currently, most boilerplates are mainly concern with:

  • page layout and legacy browser compatibility
  • Javascript integration (JQuery, Mootools, etc.)
  • Legacy Maintance
  • Workflow

Advantage of mobile HTML5 Boilerplates

  • Fewer legacy javascript issues, with opportunities to fix +20 year old issues.
  • Fewer legacy layout webbrowser issues, with a new issues added – like screen rotation.4
  • Viewing hardware change more rapidly, so legacy layout issues around screen width are exchanged for other challenges.5

So while, Hybrid HTML5 Boilerplates is definitely in infancy. A clean can and will be made. If you feel inclined to roll your own boilerplage, below the table is a list of Other HTML Boilerplates.



The Other HTML Boilerplate

If you’d like to do your own research for your own boilerplate design, here are some links to get you started.Five (5) searches I conducted

The review of links avoids Javascript Library specific implementations, like Jquery and Angular, and vendor embedded implementations, like Google Tool Kit.

The HTML5 Boilerplate

  • HTML5 Boilerplate is the grand-daddy of them all. It is all encompassing. It should be used a reference, becuase alot of the layout issues do not exist in newer layout engines.
  • HTML5 Reset is a simple set of best practices to get web projects off on the right foot.

Custom HTML5 Boilerplate Creators

  • Initializr – Base on either classic H5BP, Responsive, or Bootstrap
  • html shell – A barebones HTML5 boiler plate with *click* modification

HTML5 Boilerplate Static Responsive

  • Skeleton – A Responsive CSS Boilerplate
  • YAMB v2 – Yet another mobile boilerplate
  • Gridless – An awesome HTML5 & CSS3 boilerplate for mobile first responsive, cross-browser websites

Reviews of Boilerplates

Other Notable Links

PhoneGap Hello World app

A boilerplate for HTML5 phonegap applications

Provides a starter project for Ionic apps

Cordova Boilerplate

Html5 Native App Part Three

  1. Reframing Hybrid | PhoneGap Day EU 2015 (video 35m).
  2. The bottom half of this post has list of standard HTML5 boilerplate alternatives.
  3. Web Apps means Apps that sit in a browser and are not standalone.
  4. Even as I’m writting this, a rotation issue shows up on stackoverflow.
  5. With Android mobile, one issues was exchanged for another, with more than 200 screen sizes available.

What is five nines?

The Telecos and RBOCS believe they have to great features – High Availfive-nines_on_worldability and High Line Quality. The old commercial from US Sprint “You could hear a pin drop” was reminiscent for what this is about.

In any case, “five nines” meant you had “high availability” for a service. It is still widely used in the industry, but often ignored.

On this topic, the direct translation means

  • 99.999% uptime is just over 5 minutes per year of down time.
  • 99% uptime means 3 days per year – down.
  • 98% uptime means 7 days per year or about 30 minutes a day – down.