Subscribe to this blog!

My first impressions about Sencha Touch and jQuery mobile

There’s a war going on outside, no man is safe from. Prodigy in ‘Survival of the fittest’

If you are into mobile development you’ll know that there’s a war between native and html5 apps. I want to be prepared for the battle so I ended up doing a spike, choosing Sencha Touch and jQuery mobile as weapons.

The two of them are UI frameworks, based on HTML5, CSS3 and javascript, so they work in any browser that supports those technologies. It’s very convenient, so you can code, test and debug in your computer browser, doing less deployments to your mobile device. You can even use these frameworks for making a website since they offer all the UI elements and AJAX support that you’ll need.

The main slogan of this kind of frameworks is that you can code your app once and deploy it in as many devices as you want. The reality is that if you need access to device features (such as camera, contacts or so) you’ll need another libraries (given by PhoneGap, for instance), but you can use these frameworks to develop the code that must be cross-platform and leave the device details for later.

Since I only wanted to do a sneak peek of how they worked, I did only two simple examples:

Sencha Touch

Sencha Touch provides a bunch of Javascript classes to build your app. Everything can be developed only using those js objects, so you can forget about HTML code. Set your containers and panels, insert widgets into them and voilá! Sencha Touch will render a pretty page.

I did a simple sign up form that you can play with here an take a look at the Sencha code here.

A simple form made with Sencha Touch

As you can see in the code, in this form we have a panel form with an items array where you set the desired fields.

var formBase = {
	scroll: 'vertical',
	url: '',
	items: [{
		xtype: 'fieldset',
		title: 'Sign up form',
		instructions: 'Please, fill in the form.',
		defaults: {
			required: true,
			labelAlign: 'left',
			labelWidth: '40%'
		},
		items: [
		{
			xtype: 'textfield',
			name : 'username',
			label: 'User name',
			useClearIcon: true,
		},
		...

After arranging and configuring the form elements via the object properties, we set the screen size (no extra work if it’s displayed on a phone), attach our previous panel to the form and finally show it.

if (Ext.is.Phone) {
	formBase.fullscreen = true;
}
else { // Showing in a browser
	Ext.apply(formBase, {
	autoRender: true,
	floating: true,
	modal: true,
	centered: true,
	hideOnMaskTap: false,
	height: 320,
	width: 480
});

form = new Ext.form.FormPanel(formBase);
form.show();

And that’s it. All this form was made using only Sencha javascript classes.

jQuery mobile

On the other hand, jQuery mobile uses the new custom data attributes that were introduced in HTML5. It will do the hard work if you don’t want to care about CSS and javascript but leaving the door opened if you change your mind.

I did a even simpler page than the other one. I simply embeded my crafstman bio generator into a jquery mobile page. This is how it looks.

Craftsman bio generator with jQuery mobile

The jQuery mobile part is really simple. The body code is:

<body onload="onBodyLoad()">
	<div data-role="page" data-fullscreen="true">
		<div data-role="header" >
			<h1>Craftsman bio generator</h1>
		</div>
		<div data-role="content">
			<p id="bioText">How you doing?</p>
			<a id="theButton" href="#" data-role="button">Generate bio!</a>
		</div>
		<div data-role="footer" >
			<h4>hacheka.com</h4>
		</div>	
	</div>
</body>

The page template consists in one main div with the attribute data-role=”page” and three others divs (header, content and footer). You can play with this page here and have a look to the source code.

jQuery mobile will carry the weight and transform that simple code into a good looking web page.

My premature conclusions

These pages were really simple but my objective was only to make a first approach to webapps development. The two frameworks are very powerful and come with a bunch of UI widgets and other web stuff. I encourage you to spend a few hours doing experiments with them.

I personally prefer the native way but if you already know javascript you’ll save lots of hours doing real work instead of learning new languages. I’d rather go with jQuery mobile as a personal taste and I’ll write a post about how to use it for real cross-platform development, testing a simple webapp (probably the omnipresent bio generator) in iPhone and Android. I swear.

Bye!

  • David Woodfin

     Hi, thanks for your comment. I’m glad you find this collection useful.
    Thanks