Mobile UI frameworks & other UI scripts - mobile

I'm looking for the best cross browser compatible swipe script for android, iphone and other touch phones. Has anyone used any of the available frameworks or have you used custom scripts? What is your experience with these?
SenchaTouch
jQTouch
Phone Gap
Unify Project
Any others? I am joining a mobile task force and would like to get more involved in one or more of these communities so I can provide some UI support.
Thanks,
Seth

First of all, let's sort out the apples and oranges.
PhoneGap and Appcelerator Titanium are NOT UI frameworks. They are both Web to Native bridging technologies. They provide JavaScript API's for mobile capabilities like accelerometer, contacts, GPS, telephony, etc. Also, they facilitate the creation of a deployable mobile app (versus a web page)
Sencha Touch, jqTouch, and jQuery Mobile are mobile UI frameworks that provide support for mobile UI concepts, like touch, swipe, transitions, small screen sizes, etc. They can run in a pure web page or be used in conjunction with PhoneGap or Appcelerator Titanium in a mobile app.
I'm not too familiar with the Unify Project, but it seems to be a bundle of PhoneGap plus their own UI framework.
Both Sencha Touch and jQuery Mobile are in early days, but already have some great capabilities and they're moving fast.

SenchaTouch is good, but be aware that it provides no native hardware support, so if you need access to the phone hardware, you will need PhoneGap or equivalent.
I hear good things about jqTouch, but haven't tried is personally.
Another option is Appcelerator. If you need to write an app for mobile devices, it is a really approachable framework. You write javascript code, and their machinery compiles it to the appropriate platform. Note that this is for writing apps that run on a mobile device directly, not for writing apps that run in a browser on a mobile device.

I found jqTouch to be great on top of the PhoneGap technology however you need to understand that all the "good looking" UI kits are built on HTML 5 and so far you'll be disappointed with the HTML 5 support from Android devices. You'd think Google would be on this like ants on syrup but you'd be wrong. The jqTouch works like a dream on almost all iOS based devices and quite poorly on most Android devices.
As for Titanium, it still appears and feels web based and there are no UI styles to my knowledge. This means it "attempts" to look native whereas with PhoneGap and JQT you can get a really nice theme. So if you want "snazy" then go PG and something else. Titanium is far more stable than JQT when you're building for iOS and Android so that is a plus but it would be really nice if they did some kind of theme engine.
note over time this answer will become irrelevant as Android improve their HTML 5 support and those UI frameworks become more stable :)

Related

Agile Toolkit and Bootstrap

I am using CI, but seriously considering a move to ATK4. The SaaS code I build always has to be desktop & mobile accessible, so recent projects have relied on Twitter's Bootstrap layouts to allow a good browser experience, regardless of screen size.
How does ATK4 handle mobile browsers, especially small screen like on phones? Is it really just a matter of the theme you choose with Theme Roller, and if so, are the any themes that are known for a both a good mobile & desktop experience with ATK4?
Agile Toolkit is targeted at the UI development, and primarily the desktop browser UI. The site is still usable on mobile devices, just like any jQuery UI site.
However, if you would like to use a different CSS engine, you are free to do so, simply change your shared.html file to have the necessary includes and you would need to write more templates. Well, you are writing templates right now anyway with CI, so it's pretty similar experience.

Moving from web to native applications

Got a problem, and I am pretty sure there is a solution for this.
Currently we have a Website that sells goods & integrates with a thirty party for shopping cart. The shopping cart integration is through standard web re-direct.
Product works well on desktop browser. Its not that bad on browsers on tablets. Not so great on phone browsers. The problem on mobile device is for obvious reasons, as the pages are optimized.
The standard approach we can do is go about optimizing for mobile browsers, and be happy. My team is flying with optimizing for mobile web, because they think apps will be very difficult to do.
If we choose to go the native app model, is developing a library or package for each platform the only way? I am thinking, no in current world with so much technology advancement. I am not a fan of browser view on device, not the smooth experience.
Are there other options available? I was looking at HTML5 hybrid applications, but can't put a finger to be sure that will work for what I am looking for.
Frameworks aside, often times you can use a stylesheet meant for mobile devices and hide everything that is not absolutely vital. You could also consider WML, but I think you could live without it IMAO.
Writing apps for the iOS will require an investment in Apple developer tools and training in Objective-C. Android will call for Java and Eclipse, to name a few things.
When it comes to "native apps", you will need to code for whatever platform you are depending on. The number of platforms you work with is entirely up to you, but yes, each new platform may require a different implementation.
Personally, I would add some specialized markup/styles to make as many browsers as possible happy. If you want to expand, try to see where your target audience really lies and reach out to them on any medium you can afford to build on. I would zone in on specialized applications if there are benefits really worth chasing down that road.
Hybrid applications is a good option, but probably the devil in a box.
The hybrid approach with HTML5 fits your developer, because they will still use HTML, CSS and JS (e.g. with PhoneGap), but on the other hand you will get an medium satisfying UI (what you said you are not a fan of).
Pure native applications is probably a bit too much of all good, if your web app runs fine in a browser.
A way could be to go with compiled hybrid and cross-platform compatible solutions like xamarin or appcelerator, especially appcelerator uses JS, which is an advantage for you. This could result in a native UI (implemented in JS) and shared business logic code. So there are two benefits for you; first, just use JS, second, shared business logic code -> less work.
Other alternative would be to go with responsive or adaptive websites, realized with the help of CSS.
If you are looking for developing a hybrid app (phonegap + angularJS + backend), I would like to recommend Monaca. I've just recently discover it. It is very cool since it has phonegap inside its framework and its own backend. Moreover, it also has a fast and lightweight UI framework called OnsenUI which is based on Topcoat and AngularJS.
Even it is a hybrid app but it will give users the native application feel since it also provides native components to use in your hybrid apps. What is impressive about it, you don't even need to build and install your app to your device every time during development. That's what I love the most about this.
I hope it helps since I think it is just like what you are asking for. I'm just a novice developer and I find it is very easy to use.

ExtJS vs Sencha Touch for RIA

I'm trying to bootstrap a Rich Internet Application, which will have a complex canvas (think: Visio), and should work according to these principles:
it would run in a browser
it would run on a tablet (Android or other)
supports complex drawing, drag & drop etc.
runs on its own (eg. without a server component) happily
can leverage conventional & touch UI as needed - user can draw a line with a mouse or using the touchscreen
I was thinking about using a Javascript framework and found ExtJS, whose demos I quite like and checking the API docs it seems it supports all the low level GUI stuff I need (think: Ext.draw package, especially Ext.draw.Sprite).
But then I also found Sencha Touch, which seems to be leveraging the same technology stack, only for the mobile. However the API is much more limited (no Ext.draw available), and only runs in Webkit browsers, as far as I can understand. But it supports touch-based interaction.
Is there a way to create an app that works in a browser but can also be "compiled" to native mobile/tablet code (eg. with PhoneGap)? Or is this just a dream and these two cannot mix at the moment?
PS. checked the other similar questions but they seem to be quite out of date.
Short answer: it is currently just a dream I'm afraid.
Long answer: Sencha Touch and ExtJS share a lot of underlying logic and are somewhat similar, but I would say you'd only be able to reuse 50% of your code, at most, when trying to port one to the other.
jQuery Mobile and jQuery UI share similar issues at the moment - they have both created nice mobile UI frameworks, which only support webkit browsers, meaning there's no easy way of developing rich apps that run in desktops and on mobile platforms. Hopefully these projects will merge their mobile and desktop frameworks at some point in the future to allow us to create apps that can be deployed across both without a massive rewrite. There will always be differences in the way mouse and touch screen events work but I wish that was the only thing we had to consider.
Extjs is for desktop application, while Sencha touch & touch charts are for mobile, eg. tablet or Android.
#JunkMyFunk is right, you'd only be able to reuse 50% of your code at most.
The definition of class is not the same between Extjs and sencha touch which means currently you can't mix Extjs with sencha touch, the namespace will conflict if you do that way.

Mobile application development frameworks : The Good, bad and ugly?

Over the last couple of years( or maybe less ) a number of different mobile application development frameworks have come up that promise you the ability to create cross platform( in some cases ) mobile applications without native device SDK programming. Some of these are OpenPlug, Redfoundry, Appcelerator, PhoneGAP, RhoMobile , Ansca-Corona
This list is steadily becoming bigger so it’s a bit of a challenge to know which are the good ones from the not so good and bad ones out there. Anyone in this group has any good/bad/ugly experience with any of these these ? If you've used any of these , are these really good enough to build real world applications ?
I'm just getting into rhomobile (Rhodes 3) and finding it very very good, mainly because I'm a Ruby/RoR developer and I am not having to face learning yet another development language and I'm finding this to be a thoroughly enjoyable experience although a little confusing to start with.
I'm tending to shy away from rhohub and develop on my local machine which I find a lot simpler to do for many reasons.
I previously had a play with buzztouch but it didn't produce a native looking app, however it works very well if you don't want to do anything too complex (functionality is quite limited)
I guess the best advice I can give you is to try out the different platforms starting with the platform that covers the language you prefer and see how you get on
We have used Phonegap to develop many cross platform applications. PhoneGap, also known as Apache Cordova, is a technology that lets programmers build a mobile application and then wrap it in the PhoneGap framework that can be installed as a native mobile application across multiple mobile device platforms easily.
Our experience with this has been very good in relation to the kind of data driven apps we have built.
If you are web programmer proficient in HTML5, CSS and JavaScript then PhoneGap brings you new opportunities! You can build native mobile apps using the web technologies that you know and love: HTML, CSS, and JavaScript. Applications that are developed using PhoneGap are hybrid applications. Parts of the application – mainly the UI, the application logic, and communication with a server, is based on HTML/JavaScript. The other part of the application that communicates and controls the device (phone or tablet) is based on the native language for that platform. PhoneGap provides a bridge from the JavaScript world to the native world of the platform, which allows the JavaScript API to access and control the device (phone or tablet).

What is the best 'method' to do an online MOBILE Text Based 'App'?

With all the different mobile phone browsers and the mobile market being so diverse I'm having a hard time deciding on a way to create a text based online game for mobile phones.
I was thinking about using HTML / CSS / Javascript for front-end and Python CGI for server-side (with a DB).
Now this seems like a very obvious choice... BUT I'm having a hard time finding the "limits" to each one... by that I mean at what point will a popular web browser stop 'supporting' a technology. Like when it comes to HTML I assume you cant use HTML5 features in all popular mobile browsers... or maybe some allow JS but not jQuery... or maybe some don't allow some common CGI features or DOM is weird... I do not know.
I have read a few different tutorials on various mobile web browser development but nothing really helps to answer my question.
So what I'm asking is basically:
What languages/technologies do you recommend for a Text based mobile online multiplayer turn based browser game that will need to dynamically load a lot of info?(front front end to back end)
What are some common limitations between popular mobile web browsers I should look out for? I want to be compatible with all popular mobile web browsers.
One of the things to keep in mind is that there is a plethora of mobile browsers out there (Look here for details). So you are probably better off starting with iphone, android and blackberry and maaaybe opera mini browser support. These browsers have sophisticated java script support and you would be able to provide a good user experience. Later on you can work on supporting other mobile browsers.
Regarding your questions, if you look at these browser specs (and they are readily available on Internet) you will see that you will be able to use quite a bit of web technologies (HTML, CSS, Javascript, etc). That wont be a showstopper for you. Designing for a small screen, and a great user experience on small screens, that will make or break your game.

Resources