Category: Review


Wanna jump right into creating amazing scalable mobile applications?
Need a good and concise walk through on how to get started with phonegap?
Should I stop asking questions and get to the post already?!!

Yes * 3.

The first thing you should know about phonegap is that it isn’t only used to create “iPhone apps” or “Android apps”, it’s designed for mobile device development. PhoneGap was created for devices that use a modern web browser and if they’re not, they should be thrown in a pit of fire. WebKit is the most up to date web browser engine among its peers; it follows the latest standards by the W3C including HTML5 and CSS3.

By exposing the values of the native application programmer using JavaScript, calls to the native device allow for application development using only HTML, JavaScript, and CSS.  With this in mind, PhoneGap makes it possible to develop for mobile technologies that adopt the latest standards in web browsing. Currently, PhoneGap is capable of developing applications for iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry. Future plans for PhoneGap include support for Nintendo DS and Playstation Portable (and other forward thinking platforms that use web browsers). PhoneGap is free and open source software that is hosted on Github.

Software used to develop apps

The software used to create PhoneGap applications varies depending on which platform you are writing for. For instance when developing for BlackBerry, you need to be using a specific version of Windows with an Integrated Development Environment (IDE) called Eclipse. I was interested in developing for iPhone, so I used an application called Xcode that is freely available through Apple and is exclusively used on Macs. In addition to Xcode, Apple also offers a free piece of software called Dashcode. Dashcode can be used to develop iPhone web applications, which can then be imported into Xcode and complied as a PhoneGap application. An advantage of using Dashcode is that it includes a library of icons and scripts that are common to most iPhone apps.

XUI

XUI is an open source JavaScript library developed by the creators of PhoneGap. Taken from the source, the following is their description of XUI:

We hear your words. Why another JavaScript framework?! When development of PhoneGap was under way we noticed slow load times for modern JavaScript frameworks such as Prototype, MooTools, YUI, Ext and (yes) even jQuery. A big reason why these libraries are so big is because is mostly they contain a great deal of cross browser compatibility code. The mobile space has less browser implementations (so far) and different needs. Thus XUI.

XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera with future support under consideration for IE Mobile and BlackBerry.

XUI is a lightweight framework (7.8KB minified) whose syntax is similar to the jQuery JavaScript framework.

jQuery Mobile
Oh no they didn’t!
Yes, it’s true. You can use jQuery mobile with phonegap. Check out my jQuery mobile review here!

Writing an app with PhoneGap

PhoneGap has a strict directory structure that when followed correctly, makes developing with it a breeze. When opening a PhoneGap project through your IDE (Xcode, Aptana, etc), PhoneGap has a directory titled www. The files for your project are stored in this directory. There is phonegap.js file (where the magic happens) included that is required for your app to run; it acts as the interface between the device and the web browser. In addition to that, it is also helpful to manually include the XUI or jQuery mobile library for optimal DOM manipulation.

Unlike most common web sites, efficient mobile web development only needs one page: index.htm. This saves multiple trips to the server (or local files) when making a web app (or native application). Each page (represented by a div or section tag) that is visited in your app is accessed through multiple div tags in the index file. This means that an entire mobile application can be built using only one HTML file.

Testing

Xcode provides an emulator that simulates the iPhone interface and interactions. This is extremely helpful when testing aesthetics and functionality. The IDE also offers the ability to test the app straight from the device you are developing for. When connected, there is an option to build the app to the device for testing. This is important when working with such functions as the Accelerometer (for X, Y, and Z axis) and vibrating functions.

In addition to the built in simulator, the developers also created their own testing environment called PhoneGap Simulator. This simulator is built with Adobe Air and is freely available for download. The advantage of using the Phonegap Simulator is that it has multiple skins to test your app on. For instance, if you are creating an application that you intend on distributing on multiple devices, using their simulator will help debug and catch any errors across devices. Phones currently supported for simulation include iPhone, Android G1, BlackBerry Storm/Bold, Palm Pre, Nokia N97, and Samsung Epix. To make things even more awesome, they’ve also included FireBug lite (FireBug is a extension for the Firefox web browser that helps web developers debug code on the fly).

Are you ready to create your very own multi-platform application using phonegap?!
Wanna find out even more about how it works? Check this out: http://bit.ly/3Fwc8L

Is this post over?!

Yes. Yes it is. Thank you.

A (not so) long time ago there was this little framework created called jQTouch. This for me was an amazing moment because, as the name implies, it was written on top of jQuery. I ❤ jQuery. A mobile framework that works with jQuery simply excited me beyond words.

At the time, I needed an excuse to build a mobile website so I wrote some crappy single page apps just to get my feet wet. It was pretty awesome. The only downside for me was that it was a bit sluggish. The animations were still very impressive. There are a bunch baked in animations that can satisfy your transition needs. There is also an option to create your very own transitions with very limited code.

After some time, I decided that I’d do a mobile version of my resume. Why not?! I could use this project as a great excuse to:

  1. Have a mobile version of my resume (I’m a dev, this could impress potential employees…)
  2. Learn the jQTouch framework and have fun doing it (since I’m doing it for myself)
  3. Find a new job..

It came out fantastic. It took only a few hours to put together and it did what I wanted it to do: look awesome and impress a potential employee. Then, I was introduced to phonegap: the secret weapon to bind these two magical entities.

I was lucky enough to attend an amazing training session with the uber geeks from phonegap. I learned that I can combine mega forces and use jQuery, jQTouch, and sprinkle the magic of phonegap and BAM!!! – create a fully functioning mobile website turned native mobile application. During this time, jQuery mobile was only a wish. I remember like it was yesterday…

Brain Leroux (from phonegap) said that he ran into John Resig and teased him about coming out with “jQuery mobile”, a mobile version of jQuery. He said at the time that Resig was “working on a solution”. No jQuery mobile yet? That’s fine, the guys at phonegap rolled their own API called XUI. It’s a JavaScript micro-framework that filled the gap when it comes to mobile JavaScript development. It has very similar syntax to jQuery and is very easy to use. But it’s not jQuery – which was fine, until now…

After weeks of anticipation, the jQuery team released jQuery mobile. The morning it was released (10/16/10), I literally spent the entire day going through every page in the documentation and re-building my original resume app. Again, it took only a few hours to put together. It has a very simple templating scheme that even a blind folded panda could pick up.

Like jQTouch, jQuery mobile carries the concept of having single page applications. This means that your entire site can (and should, under the correct circumstances) be written on one HTML page. This is also beneficial if you want to use phonegap to make it a native app; it’s small in file size and easy to maintain.

In jQuery mobile, each page is represented by a div tag with some special attributes. Here’s the template for a “page” in a jQuery mobile app:

<div data-role=”page” id=”” data-theme=””>
<div data-role=”header” data-theme=””>
<h1>Page title</h1></div>
<div data-role=”content”>
<h2>Title</h2>
<p>Test</p>
<ul data-role=”listview”>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>
</div>
<div data-role=”footer” data-position=”fixed”></div>
</div>

Some elements have a special attribute called data-role. When this attribute is added to a specific DOM element, it turns it into a badass mobile element that can kick your ass. Some values for the data-role attribute  include:

  • header
  • page
  • content
  • footer
  • listview
  • list-divider
  • collapsible
  • fieldcontain
  • button

I’m sure there are more, so keep your eyes peeled. Each value can only be assigned to it’s intended usage. So for example you can’t use the “button” value on a ul; it’s reserved for an href tag.

Another cool aspect that got picked from jQueryUI is… theming! There are currently 5 available themes with more in the works. Each element that turns into a mobile feature can have theme set to it. The themes can be assigned using the data-theme attribute. There are currently five available themes, each one assigned letters: a, b, c, d, e. The built in themes can make for some pretty interesting visual contrasts.

Anyone can create a nice simple app using jQuery mobile. It runs super smooth too, especially with the updates made to jQuery 1.4.3. If you don’t have time to view the documentation at your desk, the API documentation is written with JQuery mobile, which means you can see it on your mobile device! Double awesome!

I urge you to check it out ASAP. It’s the first release, so you as a developer can contribute and stay way ahead of the curve by getting into it early.

http://jquerymobile.com/

I recently purchased (yes, I actually paid for it) a group of ebooks from extraordinary devs Amy Hoy and Thomas Fuchs (creator of script.aculo.us). These books come jam packed with JavaScript goodness. It’s written very well, even for those who hate reading. The authors make learning about JavaScript entertaining as well as informative.

This isn’t a book to learn JavaScript; it’s about JS performance and how you can get the most out of your code. Let’s face it, JavaScript is becoming more and more popular everyday. It’s everywhere. It’s on this site, it’s in your email client, it’s probably in your toaster. If you think you are a pretty decent JavaScript developer, you are probably wrong; there is always room for improvement (always).

Not only do you get four (yes, 1,2,3,4) action packed ebooks with priceless content, you also get the infamous DOM MONSTER! (muhahahahahha!!!). It’s a DOM inspector tool that you can add as a bookmarklet and call to any page. It works on all major browsers and provides extremely helpful hints on your mark up. Sure, I can post it here, but that’s just not cool. Get your own copy! It’s $39.99, don’t be a cheapo.

Finally, the best part about this awesome package is the goodies! What JS book would be complete without code examples? Your copy will come with a goodies folder that has everything you need to kick ass (figuratively).

I haven’t gone through all of the material yet, but from what I have so far, it’s pretty damn epic. There are jokes, code examples, and pretty pictures – what more can a lazy reader ask for?! They have seriously made learning fun again. I highly recommend you pick up a copy at javascriptrocks.com.

Do it, or a kitten will die. It’s true.