First Phonegap Application: Balancing Javascript, CSS3 & HTML5

My First Phonegap (iPhone) Web-based Application: 95% Javascript, 5% jQuery

I was tasked with creating an iPhone application for my company, so I got started with performance and good architecture in mind (I won’t get into the Corodova project creation here, as it is quite boring and tedious) The first step required going over the new features that ECMAScript5 brought to the table. Along with that, I was able to have an intimate brain polish of Javascript, which in the end, helped me have a deeper understanding of how frameworks such as jQuery work.

After revisiting the fundamentals of the language, it became clear to me that I was wasting precious performance for no reason except to save a few characters in code. While testing benchmarks quite often during the creation of this app (jQuery vs Javascript) it was clear that Javascript was always the winner. (See post ”Increase performance by cutting down on jQuery”)

The 5% of jQuery code referenced in my app exists to easily call a few custom event listeners and for their nicely formatted $.ajax() method.

Every single animation was offloaded from the CPU to the GPU using CSS3 properties. This made profiling the application extremely fast, but the CSS rendering still takes time (properties that require repaints/reflows are still faster using native JS animations Myth busting CSS animations vs Javascript).

Anything that seemed too daunting for Javascript to handle, I now had the opportunity to offload to CSS3 and all the widgets I would previously use jQuery UI for I could create in HTML5. There was an awesome synergy that HTML5, CSS3 and ECMAScript 5 suite brought to the table.

Animating ‘slide up/down’ menus via CSS3
/** Using transforms rather than properties that require repaints/reflows. Transforms are easily interpreted on the GPU and don’t require a new bitmap to be create for each pixel animated (Read adobe link above)*/
.navMenu { /* Scale(x,y), when not visible, we scale it to 0 height */ transform: scale(1,0); transform-origin: right center; transition: transform .4s cubic-bezier(0,1,0.5,1); } .navMenu.isVisible { /* When visible class is added, the transform transition occurs*/ transform: scale(1,1); transform-origin: right center; transition: transform .4s cubic-bezier(0,1,0.5,1); }

The result is something like this:

While developing this app (first time I had created a web-based app without the aid of jQuery in a few years), I learned about the several new functions available in ECMAScript 5 (and even peeped into ES6). The big thing I took away from this learning episode was that the newer versions of Javascript are literally taking the best parts of Javascript frameworks and creating native functions for them.

Number one example is the newer selector engine, used in the ‘querySelector’ method. Peeping into ES6, it’s obvious that the groups wants to incorporate much of what MV* frameworks are bringing to the front-end world. I encourage the reader to always peep as to what is ahead before undergoing learning an entirely new language that may have a large learning curve, as Javascript standards are evolving fast, and including more and more of what is in demand.

The application is nearing its completion, and performance could not be better. It still doesn’t match the snappiness of a 100% native app, but I believe as CSS and JS engines progress on mobile browsers, the gap will eventually converge.

Upon completion, I plan to look into App Gyver & Steroids.js to create any new applications, as it seems to be the cool new way to create hybrid web apps.

3 thoughts on “First Phonegap Application: Balancing Javascript, CSS3 & HTML5

  1. I’m really enjoying the dessign and layout of your site.
    It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hiire out a designer tto
    create your theme? Superb work!

    • I am a ‘designer’, but I just got a stock theme, something simple, and added a little css to make it flare a bit. Appreciate it!