9 Apr
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.
Wikipedia supports Blackberry, Window Phone 7, Android, and iOS. Looking through their codebase there are some interesting things to note. The biggest take away is PhoneGap development requires strong JavaScript expertise (>90% of the project code is JS).
- 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.
- JavaScript is broken into modules (window scoped), using the return { fn: fn } syntax.
- All templates are in the index.html file as script tags with a type of text/html, rendered using Twitter's Hogan.
Libraries Used:
- 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!
Coding Techniques, HTML5, Javascript
by Paul Sayre | 4/9/2012 7:33pm
by Paul Sayre | 4/9/2012 7:33pm
No comments found.