Showing posts with label JQuery Mobile. Show all posts
Showing posts with label JQuery Mobile. Show all posts

Saturday, February 25, 2012

HTML5 Mobile Apps builder - Easy-Peasy-Tiggzi

After writing some code with PhoneGap and Sencha Touch / jQueryMobile, I found myself wanting an easier solution especially to consume REST APIs.

<rant>In fact, consuming a REST API for Parse.com(A PaaS / hosted MongoDB instance) from an HTML5 application found me writing a custom Phonegap plugin / extension for Parse.com (which one of these days will probably find its way to Github).</rant>

Thus, on one of those "There's got to be a better way" whims, I was looking around for an easier way to make a basic business apps that can read / write (CRUD) data to a cloud server.

Tiggziui

And late one night, I stumbled upon Tiggzi which is a hosted solution that allows you to create mobile apps inside a browser using jQueryMobile UI controls and easily integrates Rest APIs for mobile backends.

Using Tiggzi (and following this video), I was able to create an app that reads QR codes and writes that data to Parse.com (a mobile PaaS back-end, ) in just a few hours.

Tiggzi_emulator

So, here are my thoughts...

Pros:

  • Easy to work with, no IDE / configuration / Android / iOS SDK required for basic prototyping
  • Very easy to integrate bar / QR code reader and to consume REST APIs,
  • Testflight style remote app deployment and testing (probably the coolest feature of this service)
  • Prompt support

Cons / Limitations:

  • Needs better documentation / more content on best practices etc.
  • Some UI controls are a little bit unintuitive
  • Takes a little getting used to (esp. for folks used to of typical IDEs, like me)
  • Will costs real money for making non-trivial apps

Here is the data on Parse.com (The bar / QR codes were read from products / QR generators using an Android phone and written to Parse.com).

Tiggzidatainparse

And here is the same data inside the emulator.

Tiggzi_parsedata

 

Summary: Tiggzi is an interesting way to make basic read / write mobile apps, and for a simpler business app it certainly deserves consideration.

However, for apps that need a superior UX (higher visual and interaction fidelity) and a tighter device integration / better performance, Tiggzi may run into the limitations of jQueryMobile controls and constraints of Phonegap itself.

 

Wednesday, December 21, 2011

HTML5 for mobile - Comparing JQueryMobile and Sencha Touch

I have been playing around with some HTML5 / JS frameworks that allow creation of mobile web sites and can be integrated with platforms such as PhoneGap for creating mobile apps.

The two frameworks that I have tinkered around with are JQuery Mobile and Sencha Touch. Here is what I found...

Jqmvssencha

 

JQueryMobile

Summary: Easier to learn framework with a strong focus on mobile web / apps. Has a larger corporate backing / partners, and is integrated with Adobe Dreamweaver CS 5.5.

Pros:

• Much easier to learn as compared to SenchaTouch

• Newer version has good basic themes and themeroller makes custom theming easy

• UI controls appear better focused on mobile devices e.g. 

 - By default labels are above the text input boxes which preserve real estate on mobile devices

 - iPhone style Flip switches work out of the box and allow text on both sides of it Ref: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-switch.html

  - Placeholder text for dropdowns works as expected (broken in Sencha touch)

Cons:

• Less Object oriented / more web site programming like when it comes to wiring events etc. For non-trivial applications, it may almost require using another framework such as backbone or Knockout

• Rough at the edges, Transitions may flicker and sometimes are not smooth

• Some UI controls do not work very well (Fixed toolbars that are overlaid everytime on vertical scrolling make the UX very flaky)

 

Sencha Touch

Summary: A more robust OO style architecture with a strong focus on mobile web / apps.

Pros:

• True MVC style architecture

• Takes a SASS based object oriented approach to theming

• Much smoother / flicker free transitions than JQM

• Nicer iPhone style theme and icons (better than JQM's, IMO)

Cons:

• Steeper learning curve, changes from Sencha 1.x to 2 in coding styles etc. do not help

• UI is more oriented towards web design than mobile design e.g.

  - Form style UI layout with labels on the side of text boxes

  - iPhone style Flip switches (Toggle in Sencha world) require .css changes (https://github.com/tomalex0/SenchaTouch-Form-iosToggleField/commit/0b7de60782...