PhoneGap By Example: Wikipedia
I've been working with PhoneGap a lot lately while building our iOS and Android apps: Mobile Wine Tour. One of the hardest parts of working with a new technology is finding good examples to learn from. There are tons of tutorials on the net, but I haven't found a good, active, live project; until now.
Wikipedia stated an open source project on Github for their mobile app about 7 months ago. Since then PhoneGap has been upgraded from v1.0.0 to 1.5.0, grew from supporting 3 platforms to 7, was bought out by Adobe, gifted to the Apache foundation and open sourced, and changed name from PhoneGap to Callback to Cordova. That's a lot of change! And since it's hosted on Github you can view all the commit history.
- Each platform has it's own subdirectory, with it's own platform specific plugins.
- A platform stub script uses user agent sniffing to import plugin scripts.
- Uses a .goodscroll / .badscroll class to determine whether to use iScroll or overflow:scroll for scrolling.
- There are two CSS files, app.css and common.css, which total less then 1500 lines. The common.css is pulled in from a remote SVN using a make file.
- All templates are in the index.html file as script tags with a type of text/html, rendered using Twitter's Hogan.
- Lawnchair - Simple JSON storage
- jQuery - DOM manipulation and events
- Zepto - Ajax (looks like a temp hack?)
- Hogan - Templating library
- Leaflet - Maps library for OpenStreetMaps
- MediaWiki - Accessor for Wikipedia Data
- Crypto-JS - Provides various hashing functions
- iScroll - Scrolling library for Web Apps
There's a lot of interesting stuff here in this code and is well worth a look. This is not a good place to start learning how to use PhoneGap, but it is a good example of PhoneGap in the real world. If you find anything worth noting, let us know in the comments!