Polarfin - Making “things” better.
Filed under

framework

 

Creating Hybrid Mobile Applications with HTML, CSS, Javascript & PHP

I recently started looking around at different hybrid mobile frameworks, so I can create native iPhone Apps using web languages I already know (ie. HTML, CSS, Javascript, PHP). There are three main ones I took a look at and did some testing with: QuickConnectPhoneGap, and Appcelerator Titanium. In all my testing I looked specifically at uses for the iPhone. All of these have a lot of the same functionality like GPS, Accelerometer, Vibrate, System Sounds, etc and they are all FREE.

 
QuickConnect can create iPhone, Android, and Blackberry mobile apps. I love the installation of this development tool, its extremely easy. All you have to do is open the package, which will install a dashboard template, and the xcode template. you basically use Dashcode as you GUI tool for layout and use paths to your javascript and images. One suggestion is not to separate them into different folders, it makes things less organized, but when you deploy to xcode you need to strip all the file paths out anyways so you'll save yourself some time here. I can't really find any examples of using js libraries online, most examples you straight js but after some testing you can use jQuery and jqTouch (as well as others too like prototype, YUI, etc.). When you deploy to Xcode, you can then install it on your iPhone or run it in the iPhone simulator to see the result. It's important to note Xcode acts as the wrapper and saves all your source code to disk which makes it a true native app. The only calls that go out to your server would Ajax calls to a server-side language like PHP. Some features QC has that the others don't is a charting, the ability to embed google maps, cable networking, Bonjour networking and a drag & drop library. The documentation is a little lacking right now but it seems like its getting better, and the install does come with some examples to get you started. 
 
PhoneGap can create iPhone, Android, Palm OS, Symbian, and Blackberry apps. This installation is a little more difficult using git, and it doesn't have a Dashcode template in the installation. PhoneGap seems to be a little more popular then the rest though, and has a fairly large community. One major difference is that all your CSS, JS and images are actually stored on your server, which makes this technically more of a mobile web app, with native functionality. PhoneGap has workshops and great documentation. It also supports most js libraries. PhoneGap has limited functionality compared with QuickConnect, but if your looking to take your app truly cross mobile platform it excels in that area.
 
Lastly is Appcelerator Titanium, which can create iPhone, iPad, Android, Mac, Windows, Linux, and I've heard coming soon should be the Palm OS. This is the only tool that has its own developer tools. Also the only one that supports the iPad. I feel like this has the best documentation, it's very clear in each of it's steps. Also they have a video channel to help you get started. They have workshops and a university, which they will give you all the information you need to present to a class or user group you even get t-shirts, which I thought was pretty cool. The installation is probably the easiest of all too, just download their software and install whichever mobile SDK you plan on outputting your app to. It has many different APIs you mash with, and seems they use the js library Entourage.
 
In my upcoming project I'll most likely be using QuickConnect, because of it's robust features specifically for the the iPhone. However if I was going to release a cross mobile app I would probably use PhoneGap, with Appcelerator as a close second. I'll try post more as I dive further into these, but until then I hope this gives you a little more insight on what's out there.
 
UPDATE 7.7.2010
Another great place for tutorials on Appcelerator is Mobiletuts+.

 

 

Filed under  //   appcelerator   framework   mobile   phonegap   quickconnect  
Posted by Jd Fiscus 

Comments [3]

Finding the right JavaScript framework

To get this blog on the right track let's start off by talking about briefly JavaScript frameworks. Back in 2006 I was completely obsessed with MooTools. I'd stomp around telling all my fellow web designers and developer about how "It's the best JavaScript framework out there! It can do anything you want and the animation capabilities are so smooth. You're a fool for not using it!" Truth is, at the time, I didn't really know about jQuery and its simplistic approach. What would be 5 lines of code in MooTools was suddenly a single line using jQuery. Now my argument didn't seem so strong — if it even was in the first place. I have since swore jQuery as the best JavaScript framework (for now).

While jQuery has taken a lot of busy work out of making beautiful dynamic websites, I can't help but think that there has to be a better solution. Maybe jQuery is too easy and thus we end up writing sloppy scripts. One of the biggest things that has bugged me about jQuery is that there is no animation interruption handling when using effects like slideToggle or fadeIn. It can start this animation queue if used on something like a hover that can behave horribly. They do have a solution if you use their animation method. But that feels like a hack. I noticed that the people I look up to are all using Prototype and sometimes combining that with Script.aculo.us. While I haven't really messed around with this combo, you can see it's beauty on sites like Apple and in all of 37signals' apps.

With big names like that and a slew of other companies using it as their framework of choice for their web applications it makes me wonder if it's worth taking the time to learn and adopt. It would mean going back to writing numerous lines of code. But maybe that's worth it if the outcome is cleaner, smoother, and always behaves the way it was intended to.

Filed under  //   framework   javascript   jquery   mootools   prototype   script.aculo.us  
Posted by Levi Beach 

Comments [0]