Mobile web libraries – jQTouch

June 17th, 2010

The state of mobile web development is quite good nowadays, we have WPtouch, we have iUI, but there is always room for other libraries. jQTouch is yet another mobile web UI library. It is based on jQuery, and it is not like iUI, it has taken a different approach, it tries to keep the same convention of letting the user create simple interfaces via HTML, but at the same time it leverages jQuery.

This project not only uses jQuery but extends it, part of jQTouch is a jQuery plugin which has huge benefits: theoretically I can take the jQTouch plugin and use only some parts of it, even create yet another mobile web UI. This is the part where jQTouch differentiates itself from iUI, I think it is better than iUI in this perspective, it gives coders more possibilities.

jQTouch also had descent documentation.

Since I’m comparing jQTouch and iUI, I must also note that iUI seems to have more features and seems to be more mature. A thing they have in common is neither of them works in Opera Mini, but I feel it’s more Opera Mini’s fault.

Since I’m a coder, who has much love for jQuery, I certainly prefer jQTouch for a bigger project, it looks to be more well crafted from a coder perspective, but if I were to do a simple site and fast, I would probably choose iUI, because it has more to offer out of the box.

To close this I encourage anyone to try out both and decide which one has the most features that are needed.

Mobile web libraries – iUI

June 16th, 2010

Mobile computing is evolving, we either catch up with it or remain out of this growing market. Mobile devices usually have small screens which most of the time makes it impossible to create a one size fits all design. I already wrote about WPtouch, and how simple it is to make a WordPress blog to be mobile-friendly. But we need something that can help us out in other scenarios, we don’t want to start developing for mobiles from scratch, because it is both hard and expensive(actually hard=n*expensive) so we want to avoid it.

I discovered a library called iUI, it’s a web framework for creating interactive iPhone and iPod compatible web UIs from simple html. It has a simple and intuitive HTML API, that most web developers can pick up instantly. The written HTML is utilized by a JavaScript/CSS engine, that turns it into an iPhone web application.

This is how a typical(partial) iUI markup looks like:

<div class="toolbar">
 
        <a id="backButton" class="button" href="#"></a>
        <a class="button" href="#searchForm">Search</a></div>
<ul id="home" title="Music">
	<li><a href="#artists">Artists</a></li>
	<li><a href="#settings">Settings</a></li>
	<li><a href="stats.gtpl">Stats</a></li>
	<li><a href="#themes">Theme Switcher</a></li>
	<li><a href="#iui-cache-panel">HTML5 WebApp Cache</a></li>
	<li><a href="http://code.google.com/p/iui/" target="_self">About</a></li>
	<li>Nothing</li>
</ul>
<ul id="artists" title="Artists">
	<li class="group">B</li>
	<li><a href="#TheBeatles">The Beatles</a></li>
	<li><a href="#BelleSebastian">Belle &amp; Sebastian</a></li>
	<li class="group">C</li>
	<li><a href="#CrowdedHouse">Crowded House</a></li>
	<li class="group">J</li>
	<li><a href="#JennyLewis">Jenny Lewis</a></li>
	<li><a href="#JohnMayer">John Mayer</a></li>
	<li class="group">Z</li>
	<li><a href="#Zero7">Zero 7</a></li>
</ul>

Full working example found here: http://iui.googlecode.com/hg/web-app/samples/music/music.html#_home

The concept is simple, there are pages, which can be ULs or DIVs, which contain elements, mostly A tags, which link to other pages by referring to them via link hash, for example: <a href=”#foo”>Go to foo page</a>. There is also support for iPhone-like form controls and AJAX form submissions and of course themes.

This video(direct download) explains most of the features and usages better than I can, and there is always the wiki and the source documentation.

This project is developing nice in general, however last time I checked the code it wasn’t too pretty it was really ugly at some parts and a flaw is that this only works in modern browsers and does not work under Opera Mobile, because it uses JavaScript timing functions which Opera Mobile does not support.

So if either clean code or Opera support is a requirement then iUI may not be an option, otherwise it is definably worth considering. Note that the project is relatively young so I think it will improve in the future, a new feature it is bringing is iPad support.

Mobile web libraries – WPtouch

June 15th, 2010

If you have a WordPress blog(like this one here) and want it to function optimally under iPhones, iPads and Android devices and don’t want to code it yourself , this is the solution for you. WPtouch is a plugin that detects a set of mobile browsers, and creates an alternative mobile UI that accommodates to the small screen size and looks a lot like a native mobile application. Having this plugin installed is a huge difference maker, mobile users won’t have two scrollbars and won’t have to use zooming to read articles.

This is a commercial product, but it is actually not that significant, the pricing is quite reasonable, compared to the cost it would take to develop this from scratch. The reason I say that the pricing is not significant is the fact that this plugin is licensed under GPLv3, which makes this a very favorable deal.

That’s why WPtouch Pro is fully compatible with WordPress’ GPL license. That means once you buy it you’re free to use the purchased software as you see fit. Support and automatic upgrades from us are tied to your purchased license, but you’re free to use the original software in whatever way it suits you.

For a lot of people the free version should be enough. The free version also allows potential customers to experience it before grabbing hold of the credit card. The pro versions give a lot of reason for purchase too, definably worth considering.

I don’t want to outline the and compare all the features of WPtouch, it is presented perfectly at it’s site. To sum this all up, if you want mobile accessibility for your WordPress, this plugin is definably worth your time.

Homepage: http://www.bravenewcode.com/products/wptouch-pro/

Disclaimer: I am not affiliated with BraveNewCode Inc., the opinions expressed are solely my own. I just like and use the product.

Designing with Mockingbird

June 10th, 2010

Since I mostly work alone, I communicate with my clients directly, which most of the times, means that my opinion on user interface design matters. It’s can be challenging to code and worry about usability at the same time, but exchanging ideas can be even harder. Illustrating a design with words can be very difficult, which means that there is the need to draw some wireframes, mock-ups or blueprints of the design and send it to the client. The problem however is that traditional drawing tools are not good enough to do mock-ups, because they were not designed to do so.

My traditional method involved creating screenshots and editing it via Paint(or other simple drawing tool) afterwards. This method wasn’t that bad but it didn’t look too good and it had real content which could potentially distract the viewer. A few days ago I discovered a tool called Mockingbird, it is a web based tool that supposed to be the tool I was looking for all the time. I gave it a try and so far my reviews are positive. I can do UI concept illustrations real fast with this tool and share it by simply giving a link to the client.

Mockingbird requires a very fast registration, you don’t even need to confirm your email right away, and it is usable without any installation. It works in all modern browsers, which excludes Internet Explorer, but I doubt that developer care about that much. The browser requirement is because this is a HTML5 application which uses the Canvas element, it may be able to use it with IE9 if they manage to implement the Canvas element correctly. The user interface looks good, it mimics Mac OS X. Working with this fine tool involves a zero learning curve, it’s just drag n drop and resize.

Currently the usage of this tool is free, I hope it will remain free in the future and maybe charge for some extra features. Anyone is free to try it, trying it involves no registration. Mockingbird can be found at http://gomockingbird.com/

Netbeans 6.9 RC2 mini review

June 10th, 2010

Netbeans 6.9 RC has been out for a while, the reason I write a review today is because I wanted to test it and post my conclusions. I use Netbeans for web development, using PHP with Smarty server side. I am very satisfied with it, it basically brought small improvements with zero regressions, which is just what I would expect from an important development tool.

These are the changes I noticed so far:

  • Refactoring and find usages for CSS and HTML-like languages
  • Code completion and hyperlinking for id and class selector attributes
  • Refactoring to extract inlined styles to a separate style section
  • Smarty support(need to install as plugin): highlighting Smarty codes, custom delimiter support
  • Nicer file upload/download dialog
  • Password encryption
  • and many more

The only thing that should have been worked on is GIT integration, I am really seeing GIT rising to be the mainstream DVCS.

I did not notice any crashes and data corruption, everything works as expected in 6.8, so I encourage any web(PHP server side, didn’t test other languages) developer to upgrade to 6.9 RC it really brings nice improvements over 6.8.

Node.js

May 22nd, 2010

I just watched Ryan Dahl — Introduction to NodeJS on YUI Theater and I am very exited, it surprised me, it sounds really crazy without the details. Today’s web servers mostly use threads or processes for each request they serve. The problem with this is the fact that threads and processes cost resources(CPU cycles and RAM), this is justified by the fact that most requests start and end very quickly, however if we have a lot of concurrent requests things can really heat up. If a web server gets a lot of incoming requests at the same time it needs to have a lot of threads/processes running, which increase the RAM and CPU usage and decrease the response time. This is a grave problem if we have a high traffic site or a chat application which keeps a connection open for a very long time.

So the question may be asked: why do we use threads anyway?

The answer: We could use a nice event loop but the problem is that we have a lot of function calls that block the execution like this one:

result = db.query(“SELECT * FROM foo”);

This line of code will pause our current thread until we get a answer from the database, and it takes long(socket connections etc.). In an event loop we can’t afford to have these instructions pause our loop, that means that we would basically have our clients wait in line.

The resolution: Make them stop blocking us!

So If we were to turn these blocking routines into non-blocking routines we would live in a better world.

Let’s have a look at JavaScript. The browser is one threaded still we are fine with it, we don’t need no threads there: why is that?

It’s because we have instructions like these:

//do something time consuming
$.getJSON('ajax/some.php', function(data) {
  //wake me up when you are done!
  //do something with the result
});

So we have asynchronous, non-blocking routines in JavaScript, that’s why we don’t care about threads.

If this is better, why aren’t people using this instead of threads?

According to Ryan Dahl, this is mostly because of bad habits, it would be somewhat harder to teach non-blocking IO and basically most of the tools we have now have only blocking IO. I feel that the main reason is probably that most languages don’t make writing callbacks easy and simple, unlike JavaScript.

Solution: let’s write a one threaded web server with JavaScript.

This is what Ryan Dahl and others are doing, this is what Node.js is all about. They abstract the ugliness of the underlying libraries and make IO routines non-blocking.

One may note: JavaScript is not the fastest language…

Answer: V8(Chrome’s JavaScript engine) all the way!

Node.js is far from ready for prime time, but it is definably usable in some cases where we would really need it. I recommend those interested in this to watch the video presentation, and to go to http://nodejs.org/, download Node.js(it’s free, MIT license) and give it a try. I successfully compiled it under Debian unstable and now experimenting with it.