RSS

Tag Archives: PhoneGap

Top 10 Performance Techniques for Mobile Web Apps

Christophe Coenraets (Adobe technical evangelist) did a great talk on Top 10 Performance Techniques for PhoneGap Mobile Web Apps (link)

I thought I’d quickly outline the techniques discussed in his talk

#10 Don’t generate the UI at the server-side
– Create the UI in javascript at the client-side
– Insert views into- or remove from the DOM

#9 Don’t wait for the data to display the UI
– Perception management
– People will wait for data, not for UI

#8.1 Cache static data
– LocalStorage / SQLite

#8.2 Cache Dynamic Data
– Present cached data first, then
– update UI when requested data arrives

#8.3 Cache JS query selectors
– assign selectors to avoid traversing the DOM repeatedly
– Coding convention tip: prefix ‘$’ to selector variables e.g ‘var $backButton’

#8.4 Cache Precompiled templates

#7 Use CSS transitions with hardware acceleration
– (CSS) transform: translate3d()
– micro-library: https://github.com/ccoenraets/PageSlider

#6 Avoid ‘Click-Event 300ms’ Delay
– micro-library: FastClick : https://github.com/ftlabs/fastclick

#5 Use CSS Sprites
– ala Glyphicons

#4 Limit use of shadows and gradients

#3 Avoid reflow (re-layouts)
– Build UI off-DOM then apply

#2 Do you need that framework?

#1 Test. Test. Test
– Test with production data
– Test with many devices
– test with bad networks

 
Leave a comment

Posted by on June 4, 2013 in HTML5, Mobile, PhoneGap

 

Tags: , , , ,

The (Unofficial) Google Weather API

I thought this post would be useful as a follow on from my last post “Using Google Docs As A Webservice”, where I showed how you can use the ‘publish as ATOM feed’ feature of Google Spreadsheet to read dynamic data from your mobile app using PhoneGap and XUI.

In this installment, I’m adding the ability to present the weather in my mobile app (still using PhoneGap and XUI), building on what we used in the previous post. Let’s have a look:

As the title suggests, Google have an unofficial API for retrieving weather information, that is simply a GET request to an iGoogle URL.  The one I’m using for CAPE TOWN is:
http://www.google.co.za/ig/api?weather=Cape+Town&hl=en_US

As you might , you simply specify your city as the ‘weather’ parameter, eg:
[New York City] http://www.google.co.za/ig/api?weather=New+York+City&hl=en_US
[Tokyo, Japan] http://www.google.co.za/ig/api?weather=Tokyo,Japan&hl=en_US

If you examine the response XML, you’ll notice some things:
– You get the ‘current conditions’, Today’s conditions and the next 3 day forecast.
– The wind speed is returned in MPH.
– The forecast low and high temps are in Fahrenheit

Let’s see some code:

igweather.js

Here, I’ve created 2 functions: loadCurrentWeather() and loadForecastWeather() -> They sound be self explanatory:


http://paste.org/pastebin/api/35517

weather.html

Here is a snippet of the page body to display the weather data. The Javascript and HTML files make “heavy” use of element ids (to separate presentation from data model):
Notice that I load the functions when the body loads.


http://paste.org/pastebin/api/35518

and this is what my implementation looks like:

I hope you find this post helpful. If you find any errors or and have tips or crits, I’d love to hear from you!

Thanks for reading! Happy hacking.

 
13 Comments

Posted by on June 28, 2011 in Mobile

 

Tags: , , , ,

Using Google Docs As A WebService

I picked up this little gem of a trick from Herman Lintvelt’s (@hermanlintvelt) Domain Specific Language (DSL) talk, at AppsWorld Africa at the beginning of the month, where he walked through the processes of creating a DSL for a SASSI Pocket Guide app for Android and iOS.  His example used a Google Spreadsheet to maintains the status of indigenous to South Africa, and  using the ‘Publish as a web page”feature, he demonstrated how the Spreadsheet RSS export be used as a webservice…niffty, huh!

In this post, I’ll demonstrate how to do it using PhoneGap and XUI.

Firstly we’ll create some data in a Google Doc Spreadsheet, then “Publish as a web page” in ATOM format:

A good option to set is “Automatically republish when changes are done”.


Great! Now we’ve got data we can use in our mobile app. Next, we’ll need to add some Javascript to our PhoneGap app to request our webservice data using XUI.

The Javascript code for XUI (using XHR) looks something like this:

What the function does is make a XUI XHR request to the Spreadsheets ATOM feed to read the data. It then iterates the each of the <entry> elements (each <entry> element represents a row in the Spreadsheet.

We then read each cell value (maintained in the <content> element) to build up the Header row and data row(s) and a HTML table which we then set as the document element with the id “ui_events”.

The Javascript method can be invoked by a timer or when a button is pressed.

 
15 Comments

Posted by on June 22, 2011 in Mobile

 

Tags: , ,

PhoneGap is RAD!

I have been evaluating the PhoneGap mobile application framework for about a month now and so far I’ve been really impressed!PhoneGap

The PhoneGap website describes the framework as “…and HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best…HTML and Javascript”.

The framework is really a RAD (rapid application development) tool to accelerates a n applications development time.  To test this theory/promise out, I decided to develop an application on the PhoneGap framework.  The application is called MyCiti which has the routes and times for Cape Town’s MyCiti bus system. While PhoneGap can target the major platforms like iOS, BlackBerry and Meego(Nokia), I settled on Android, since I own an Android device and this application would be useful for me.  To my excitement, I was able to put together a pretty slick-looking (terribly static) application using JQueryMobile after about 3 hours of coding….PhoneGap delivered on their promise!

*PhoneGap was developed by the mad scientists at Nitobi in 2009 as their submission to the Web 2.0 Expo Launchpad competition.

 
Leave a comment

Posted by on June 21, 2011 in Mobile

 

Tags: ,