Sample App: Mobile jQuery without jQuery Mobile


Let me preface this post by saying that I’m not advocating this approach versus the other. These are just experiments.

In my previous post, I shared a sample Employee Directory application built with jQuery Mobile. In this post, you’ll find another version of the same application: this version uses jQuery core, but not jQuery Mobile.

One of the nice things about jQuery Mobile is that it has built-in support for native-like animated view transitions. To achieve this, jQuery Mobile loads the different pages of your app inside a single document so that it can animate them in and out of the viewport. These animations are nice, however, depending on your application, loading pages into a single document may sometimes make you feel like you are fighting the system. For example, history management, deep linking, same page transitions, and name spaces (unique ids) may be harder to handle.

This version of the application loads pages “the traditional way”. The downside is obviously that you don’t get the animated transitions, but it makes other things easier to manage. Trade offs.

Another key feature of jQuery Mobile is its “progressive enhancement” approach. You annotate HTML elements to indicate their role (page, header, listview, footer, etc). jQuery Mobile then uses these annotations to inject styles and behaviors. With just a few annotations, you have an application that looks and behaves like a native mobile app. Without JQuery Mobile, making the application look good required a lot more CSS work, but in the end you are also in control of every pixel on the screen.

Again, these are just experiments. I’m interested to hear what you think. What has been your experience? How do you handle page loading and transitions?

Run the Application

Click here to run the application.

Download the Source Code

You can download the source code (HTML, JavaScript, CSS, PHP services and SQL script) here.

PhoneGap

You can use PhoneGap to package this application for different platforms. This version of the application doesn’t use any of the PhoneGap native APIs (GPS, camera, accelerometer, notification, etc). In my next blog post, I’ll show the same application getting the data from a local database (using the PhoneGap database API) as opposed to PHP services.

Update

I posted a version of the same application getting data from a local database using the PhoneGap database apihere.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s