iUI vs. jQuery Mobile

In the wild west of mobile web optimized frameworks, two of the biggest competitors are iUI and jQuery mobile. This article is an objective comparison between the two.

Current Stable Version

iUI jQuery Mobile
0.31 last updated Oct 2009 1.0bs last updated yesterday

Analysis: iUI is sorely outdated. Don’t develop with a framework that isn’t actively being worked on. It’s like trying to build a car with parts that are 50 years old and if it breaks, there is no one to fix it but yourself. They are working on a .40 and a .50 release, but that still isn’t very much development in the 5 years it’s been around.

Framework Size

iUI jQuery Mobile
51kb uncompressed 256kb uncompressed 27kb compressed

Analysis: jQuery mobile is extremely bloated to begin with, but does a lot better once it’s compressed. One of the biggest problems with frameworks is that if you don’t use everything that they offer, then you are incurring overhead. Especially when you should be squeezing every last optimization out of your mobile application as possible.

Device Support

iUI jQuery Mobile
iUI supports iOS, Android, Rim OS6, MeeGo, Bada, WebOS, … smartphones and tablets. Official support list

Analysis: jQuery mobile seems to go into a lot more detail about what devices are supported, and how much they are supported. To me this suggests that they have more knowledge about different devices and therefore have a more stable framework.

Styling

iUI jQuery Mobile
Attempts to mimic the iPhone interface (thus the “i” in iUI) Attempts to mimic the iPhone interface, but provides a theme mechanism

Analysis: both frameworks look fairly similar, but jQuery mobile has many more built-in elements that you can use. That’s partly why it’s got a larger size. I feel this is bad on the part of both frameworks because you shouldn’t force an Android user or a Blackberry user to conform to an iPhone interface.

Skills Needed

iUI jQuery Mobile
Basic HTML Basic HTML

Analysis: both frameworks require minimal HTML skills, and as long as you don’t need to do any customization you don’t need to know CSS or JavaScript. However, since jQuery mobile provides more pre-built elements, you can probably get a lot further with it than you can with iUI before you start needing some more technical skills.

General Conclusion

jQuery Mobile is a much more active project which provides better support and more interface elements than iUI. iUI was one of the original mobile frameworks, but lack of contributor support has left it antiquated and lacking in features. It doesn’t take much knowledge to do get started with either framework, but one of the nice things about jQuery Mobile is that if you need to start customizing it, if you know jQuery, you’ll already be off to a quick start. However, the emphasis on an iPhone style interface leaves both frameworks lacking in my opinion. Mobile web apps should be styled and customized and neither framework lends to itself to this. I would recommend jQuery Mobile over iUI. If you need a small framework that doesn’t have any default styling or canned elements, then I suggest you look at XUI or Zepto.

Doctrine 1.2 Custom Accessor and Mutator


	public function setTableDefinition()
	{
		parent::setTableDefinition();
		$this->hasAccessor('name', 'getName');
	}

public function setPassword($password)
    {
    	$encryptor = new MISC_Encrypt(Settings::$encryptionKey);
        return $this->_set('password', $encryptor->encrypt($password));
    }
public function getPassword()
    {
    	$encryptor = new MISC_Encrypt(Settings::$encryptionKey);
        return $encryptor->decrypt($this->_get('password'));
    }

Building a Mobile JS Framework: Part 1

If you read my article Choose a Mobile Framework, it could be that you walked away from it the same way that I did. I walked away feeling that there wasn’t a one-size-fits-all solution. The frameworks that include the biggest set of features were also the frameworks that bogged down the most when trying to heavily customize the design of the application.

I immediately had the thought that I could do better. Here are some of the basic requirements I had for my framework.

  • Small
  • Quick
  • Contain page navigations
  • Track history with the browser buttons
  • Load all content via ajax
  • Highly efficient
  • A very customizable design
  • Support non-webkit browsers and desktop browsers
Let’s take a look at each one of those in a little more detail.

Small

This is necessary because on the mobile web, you want screaming speed. If someone has to wait for more than 5 seconds for a website to load, you’ve lost them. So many of the frameworks are fairly large (30kb or more just for the framework). That doesn’t leave much room for your design and customizations. XUI and Zepto are the smallest, and provide a very basic jQuery style functionality. I decided to start my framework based off of XUI and only build what I need on top of it. With a modular architecture, that allows me to only incorporate the code I need for the functionality I have. It doesn’t leave any bloated overhead of unused features.

Quick

I want it to initially load quickly, and also load pages quickly. By default, the first page that loads only contains the very basic markup necessary, then it quickly loads the homepage via ajax. All of the animations should be quick as well. There is nothing worse than a web application that feels sluggish.

Contain Page Animations

This is one thing that I quickly learned I was taking for granted in some of the bigger frameworks like jQuery mobile and Sencha Touch. I am referring to the animation that happens when you click on a link, and then the next page slides in from the side, and also the opposite animation when you go back a page. I realized I would have to code that stuff by hand, but it was also a good way of learning how it works. I decided to support 3D webkit animations so the animations would be incredibly smooth on devices that have the 3D acceleration support. I also built it to degrade gracefully for browsers that don’t support 3D transforms. This makes it nice when porting the site over to a desktop version.

Track History with Browser Buttons

This gets into the topic of saving the state of the application. With ajax heavy applications this can become difficult to do. Luckily I found a good JS library that I could easily integrate into my framework that gave me the functionality I needed.

Load all Content Via Ajax

I particularly wanted this because I think that it makes for a better user experience on a mobile device. When you load all your content via ajax, their browser isn’t going to another page, which increases your overhead exponentially. Although, I still wanted a backup to be able to load pages via standard GET requests just in case.

Highly Efficient

Mostly what I mean by this is how it utilizes the DOM. For example, jQuery mobile works by loading all of your content into a bunch of divs (“pages”) and then hiding and showing those divs based off of what you want. I decided to go with an approach that only uses two divs. One of them to hold the content you’re currently looking at, and the other one to hold the content that you’re navigating to. That way I can load content into the second div, and once the content is loaded, slide it into view using animations. This keeps the DOM from becoming cluttered and should remove the need for garbage collection.

A Very Customizable Design

This is more of a personal pet peeve of mine. So many mobile frameworks try to be the iPhone interface, but yet they want to be cross-mobile compliant. I think this is a joke. Android users have Android devices for a reason. It’s because they don’t want to be on an iPhone. The user experience is completely different on an Android and the way interfaces are structured. Besides, if you’ve ever worked with a designer on a mobile app, they aren’t going to stick to the pre-canned designs.
This means my framework wouldn’t have any styles built into it. All design and styles are completely up to you. This gives great flexibility at the cost of more work-load. You can’t just use it out of the box and expect it to look ok. That’s fine with me though.

Support Non-Webkit and Desktop Browsers

A lot of our clients want a mobile site, and then they want the same thing on Facebook. Rather than code two separate application front-ends I wanted my framework to be able to downgrade animations gracefully (even for IE6), and then have the ability to switch the CSS file in case the design doesn’t stretch or scale.

Spotify – 5 Reasons not to Join

Spotify is a new music service that has been very popular in Europe and has just recently made it’s debut in the US. It markets itself as a new way of listening to music by allowing you to listen to “any artist” and “any album” with millions of tracks online that you can instantly stream. It’s main competitor is of course the music streaming giant Pandora. I decided to take Spotify for a spin to see if it was all it was cracked up to be, and not even 24 hours later, I already cancelled my account. Here are some objective reasons of why I didn’t like the service.

1) It doesn’t remember your actions between computers. I initially installed it on my work computer. I started listening to some songs, and I “starred” several songs. Once I got home and got it installed on my home computer I expected to find the songs that I had starred. Nope, they were nowhere to be found. Despite their marketing of being able to take your music anywhere and listen to it anytime, you can’t set it up on multiple computer and have it sync your library between them. I thought it was supposed to be some sort of cloud music. I guess I was wrong.

2) In order to play the music on your iPhone you have to pay for the premium service at $9.99 a month. That’s pretty expensive when iTunes already lets me put music on my device that I can listen to offline for FREE. It is laughable to think that they want people to pay for something they can already do for free.

3) It’s OK for finding music that you WANT to find, but it doesn’t have a good way of discovering new music. You can search for music for a certain genre, but in order to listen to it you have to select the songs and then add them to your queue. Of course, everytime you search it brings you to the top of the list with songs ordered by popularity, so it’s incredibly hard to discover songs further down the list.

4) It’s not brainless. That’s one thing I like about Pandora. I can just listen to music and I don’t have to think about it. With Spotify, it’s much more of a social music thing that they are going for, and I just can’t set it up in the background to play music while I work. I constantly have to go back to it and find new songs to add to my queue.

5) It doesn’t import iTunes smart playlists. Nearly all of my iTunes playlist are smart ones that are dynamically generated by how much I like them, or when they were added to my library, or how many times I’ve played them. When I went to import my iTunes libraries, it left all of the smart playlists out, so it made it unusable. That was the final straw that made me go and cancel my account.

Nice try Spotify, I actually don’t know why Europeans like you so much.

Have you had the chance to try Spotify? Let me know what you thought about it.

Browser.js – A JavaScript alternative to Browser.php

Browser.php is a script used to detect browser versions. Recently, I was working on a project that required the same functionality from JavaScript. Thus, I ported the code over from PHP to JavaScript and give it freely for you to use and enjoy.

The original site for Browser.php can be found here.

You can download Browser.1.0.js here (25k).

You can download Browser.1.0.min.js here (16k).

My Honest Review of the MMO: Rift

Rift MMO

As I eagerly await the release of Star Wars: The Old Republic, I decided to spend my time looking at some of the other new MMOs out there on the market. It’s hard to review an MMO without having some kind of context of games to compare it to. You also need to understand that these are just my opinions, and I know you’ll disagree with them. I’m going to try to be unbiased and objective, but don’t flame in the comments just because you don’t agree with me.

I held off reviewing this game until I’ve played it for a couple of months, so I hopefully have some good insight into the game.

Character Creation

Somewhat underwhelming. It’s a middle-of-the-road process where you select predefined features for different slots on your character. I’ve seen worse (Star Trek Online), I’ve seen some on par (Lord of the Rings), but I’ve seen a lot better (EVE Online, DC Universe Online, WoW, Aion). In my opinion the character creation process should teach you something about the game and the world you’re going to be playing in. EVE Online, and Aion do a good job of that. With Rift I had a hard time telling the two main factions apart, and just as much trouble telling the races apart. I was left with the question “why should I choose this faction instead of that faction”?

User Interface

I really like that you can completely customize the user interface. You can change the location of every single UI element which helped me to get much more comfortable with it because I could rearrange things to something more familiar. I think more games should allow you to do this.

Class System

I liked the class system much more than a typical MMO like WoW or LotR. The ability to blend three different roles really allows you to develop a character that plays to your style. The only downside is that it can be pretty overwhelming which choices you should make.

Gameplay

The gameplay is on par with most MMOs. The real selling point of this game is supposed to be they dynamic content with rifts opening up and spewing enemies all over the land. It was ok for the first couple of weeks, but then it turned more annoying as I was just trying to level up my character and go through quests, so the rifts kept getting in my way. In my opinion it’s not a big enough unique selling point to make the game stand out.

Even after two months of playing this game, I still don’t really understand the world and the struggle that everyone is going through. I mean… I understand what’s happening NOW with all the rifts, but it doesn’t do a good enough job of telling a story. Some games have stories to tell like LotR, WoW, and Aion while in other games you are the story like EVE Online and Star Trek Online. If a game has a story to tell, I want to experience the story without having to read a bunch of tiny text in a quest dialog window.

Conclusion

Rift is an MMO that offers only a couple unique selling points that other MMOs of it’s class don’t offer. An advanced class system along with dynamic content in the world aren’t enough to make it stand out and really be something special. It was fun to play for a couple of months, but didn’t get me hooked enough to continue playing it.

Let me know what you thought about the game. Do you agree with my review or disagree with it?

Choosing a Mobile Web Framework

In this day and age you don’t have to go far to find a framework that claims to be the BEST and MOST SUPPORTED mobile framework EVER!!! Three years ago, there were only a handful. IUI was there, JQTouch was there, and Sencha Touch was early on the scene. In the last year, there has been dozens of new frameworks on the scene. So, with all those frameworks, how in the world can you choose which one is right for you?

I’m not going to go into depth on every framework that is out there. A simple Google search for “mobile web frameworks” will put lists and lists of frameworks in front of your face, but that still doesn’t get you any closer to deciding which one is right for you.

I’ve used many of the frameworks, and I know the pros and cons of them. I’ve used them on client projects and on personal projects. I’ve used them with heavily customized styles, and I’ve used them with lightly customized styles. I’ve used them on iPhones, Androids, iPads, and Blackberry devices. When I talk about mobile frameworks, I know what I’m talking about. Let’s take a look at some of the most important criteria you should have when choosing a framework.

Support

This is perhaps the most important aspect of any framework. Some frameworks only provide API documentation (like Sencha Touch and JQuery Mobile), which is good if you want complete documentation, but it lacks in telling you how it all fits together. Other frameworks like Wink don’t mind telling you how it all fits together, but you don’t get full documentation if you really want to manipulate the application.

The other aspect of support is how quickly you can find answers to undocumented features. Typically you need to reach out to the community for answers. The more established a framework is (like Sencha Touch and JQTouch) the better and more responsive the community is.

The level of support will determine how quickly you learn to use the framework, and how quickly you can deal with obstacles that you come across. If you are going to create a heavily customized or richly featured application, then you want to find good support with a good community that can help you out when you get into a tough spot.

Win: JQuery Mobile, Sencha Touch

Fail: just about everyone else

Custom Design

This is where a lot of frameworks absolutely FAIL. Most frameworks force you (and you’re users) to conform to their designs, layouts, and animations. For some people, this is fine, but if you want to take Sencha Touch and put a high customized design on it, you’re going to run into performance nightmares when using it on anything but an iOS device or the newest Androids.

One good concept when it comes to building user interfaces is to not re-train a user how to use a well-known interface. For example, the typical interfaces on an iPhone are completely different than the typical interfaces on an Android. Why on Earth would you want force Android users to learn an iPhone interface? They chose an Android for a reason. Are you so arrogant that you alone can determine that an iPhone interface is superior to an Android interface?

In order to provide a highly customized interface, you’re going to want as much control over the looks and interactivity while retaining as much performance as you can. This is where smaller frameworks like XUI come in that merely provide a core set of tools and it’s up to you to make them look how you want.

Win: XUI

Fail: JQuery Mobile, JQTouch, Sencha Touch, many many others, so many others

Performance

Most frameworks show you demos of all their layouts, interfaces, and animations so you can test them out and see how wonderful they are. That’s only half the story though. What you’ll quickly find out is that when you start building your own application and customizing designs or animations, it’s quickly going to bog down. If you want to retain the original performance level, you’re going to have to stick with how they design things. The arrogance!

If you’re fine sticking with their designs, then that’s fine… nothing against that. That’s why I used JQuery Mobile on one of my projects because it was for iOS users only and I wanted something quick, simple, elegant, and not highly customized. It worked perfectly! However I’ve worked on projects that required a lot of styling and design and most frameworks performance quickly fell short especially on non-iOS devices.

Win: XUI

Fail: JQuery Mobile, JQTouch, Sencha Touch, too many to mention

Continued Development

The ideal framework will have an active development cycle. You don’t want to use a framework that was only created by one guy in order to fix a certain problem they had (ie. CiUI). Since technology is moving forward at such a fast pace, you want a framework that’s going to be around for at least a couple of years and that is going to be updated to move with technology.

Win: JQTouch (sorta), JQuery Mobile, Sencha Touch

Fail: CiUI, iUI, too manny to mention

Analysis

We’ve looked at some of the major criteria to take into account when trying to decide which mobile framework you should use. You need to have a framework with good support, good performance, and that will be around for a while. The bit about custom design isn’t for every project. There are only a handful of frameworks that are viable candidates at the current time.

Conclusion

JQuery Mobile, JQTouch, Sencha Touch, iUI, and XUI are the few and the proid. If you stick to that short list, you should be able to find something that suits your needs.

WordPress Akismet Alternative

It’s no secret that WordPress and Akismet are in cahoots. It’s one of the only plugins that comes pre-installed with WordPress and it’s shamelessly promoted. The real question though is “does it work”?

Literally, yes. It does work. As in, it’s not absolutely broken. I think what a lot of people are starting to see though is that it’s not working very well. It’s supposed to stop you from getting spam comments on your blog, and it used to do a pretty good job. As technology improves though, the spammers and hackers get smarter and smarter.

Some solutions are to put clunky captchas in place to try and weed out the automated bots from real humans, but you will quickly see that this method simply puts a barrier in front of people that will cause a huge decrease in comments. Not good.

I want to know a few things… How many of you are tired of Akisment and want an alternative solution? If there was an all-inclusive alternative, what kind of features would you want it to have? Leave a comment and let me know what you think.