I have the following task:
Develop an html5 hybrid application for major platforms (ios, android, wp8) with some native device features like push notifications and local storage.
The exact copy of this application should work in desktop browser, customers should use it as a mobile app 'preview'.
I am new to the HTML5 mobile development and tried only phonegap+jquerymobile, it had some performance issues.
Sencha, as I understand, is not compatible to desktop browsers.
Which set of tools would you recommend for such problem?
The framework we develop meets a lot of your requirements.
Have a look at qooxdoo Mobile:
http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2F
It works on
IE 10,11
Firefox Desktop
Google Chrome Desktop
Windows Phone 8
Android 2.3+
iOS 5+
Blackberry OS
I would go with Sencha Touch + PhoneGap and optionally ExtJs for a full working version of mobile app unless some of the native features weren't unavailable.
They are awesome.
http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/tabs
I would like to add one more note about PhoneGap + SenchaTouch
Sencha touch is html5 framework which can work in webbrowser or to be packed to native.
If you dont need camera, coordinates and some other advanced tools you can pack it with native sencha compiler (but for WP8 you still need PhoneGap).
in build.phonegap.com you can create 1 build for free to compile you sources to wp8, android, iphone, bada and some other.
Sencha touch is well documented http://docs-origin.sencha.com/touch/2.3.0/
Same sources will be able to work (if you done it right :) ) on phone as native app or as javascript solution on web.
and probably last one sencha touch is light weight, in my case application which takes photos also it has geolocation feature for search product in compiled mode it has near 600kb.
Related
What all possible support is there from open source world for building web based application for mobile/ipad touch screen?
I was going through http://jquerymobile.com/.. is it good plugin to develop web based application for mobile/ipad touch screens? Has any one used that..is it easy to customize?
what are the major challenges faced in using this?
Any other good tool/plugin for my development work?
PhoneGap is a framework to wrap your HTML5 app in a WebView, so you are able to deploy it like a native app. PhoneGap supports iOS, Android, Windows Phone, Bada, Symbian, Blackberry and WebOS.
Getting started with PhoneGap
jQuery Mobile is a Javascript framework for UI design of apps for mobile touch devices.
Getting started with jQuery Mobile
It is nice and easy to use for simple apps. jQuery Mobile is also themable and you can customize it with your own CSS.
If you want to deploy your web app as a native app in app stores, PhoneGap is the way to go, but you can also deploy your web app with jQuery Mobile UI on a web server, if you want it to be accessible online.
jQuery Mobile Docs:
PhoneGap is an HTML5 app platform that allows developers to author
native applications with web technologies and get access to APIs and
app stores. Applications are built as normal HTML pages and packaged
up to run as a native application within a UIWebView or WebView (a
chromeless browser, referred to hereafter as a webview).
PhoneGap Wiki:
jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
A unified user interface system across all popular mobile device
platforms, built on the rock-solid jQuery and jQuery UI foundation.
Its lightweight code is built with progressive enhancement, and has a
flexible, easily themeable design.
Seriously cross-platform & cross-device
jQuery mobile framework takes the "write less, do more"
mantra to the next level: Instead of writing unique apps for each
mobile device or OS, the jQuery mobile framework will allow you to
design a single highly branded and customized web application that
will work on all popular smartphone and tablet platforms. Device
support grid
Touch-optimized layouts & UI widgets
Our aim is to provide tools to build dynamic touch interfaces that
will adapt gracefully to a range of device form factors. The system
will include both layouts (lists, detail panes, overlays) and a rich
set of form controls and UI widgets (toggles, sliders, tabs).
Phonegap is another option. Which works for several platforms
We have used jQueryMobile as well as Sencha touch for developing web applications for touch screens.
Sencha Touch is the leading MVC-based JavaScript framework for building cross-platform mobile web applications. Sencha Touch leverages hardware acceleration techniques to provide high-performance UI components for mobile devices. New developers will appreciate the availability of Sencha Architect, a GUI tool that helps create interfaces as easy as drag and drop.
Which are the possible options for HTML5 framework which support both web and mobile development. For example, if I have to develop a application for web which is 100% iPad or Android tabs compatible (with touch, slide support) then what should be the ideal choice in LAMP environment.
I have heard of Sencha which looks like HTML5 mobile only framework. Please correct me if that's not the case.
Jquery Mobile is a great choice for cross-browser compatibility. In my experience it creates both great-looking mobile sites and desktop sites. It may take a bit of tweaking to get it working the way you want it, but overall I've found it to be the best solution.
www.jquerymobile.com
Any Javascript framework with just one API that supports both Desktop and Mobile (includes phones and tablets)? If not, why isn't there? What happens if I need to port the website from Desktop experience to Mobile experience, do I have to rewrite the entire website?
What do you think about Dojo or Ext JS?
Use Titanium at http://www.appcelerator.com/ for mobile development
Sencha has ExtJS and Touch. Both are very similar in API and worth taking a look.
If you are looking for HTML5 standard based mobile/desktop application, then look at Sench Touch. It works on mobile as well as desktop. Checkout the examples - http://dev.sencha.com/deploy/touch/examples/ - on your desktop (HTML5 compliant browsers) or on your mobile/iPad and see it in action.
Dojo 1.7 works no issue both on desktop and mobile, the only complain for me is the drag and drop API doesn't support touch for now
I was wondering what emulators everyone uses to test your mobile development, want to make sure I'm using the most accurate emulators/simulators.
I currently use the Electric Mobile Simulator from electric plum for iPad and iPhone simulation as well as Opera Mini and Mobile emulators. I have downloaded the Android SDK but have trouble making this work so am very dubious about the results I see on this.
I understand that using a real device to test my pages will merit the best results but Id also likes to have a decent emulator pack on my desktop just to give me a rough guide of how the development process is progressing.
All suggestions and feedback welcomed
Kyle
Get as many real devices as possible. Then, to ease the pain for mobile web development, hack something together like Shim: https://github.com/marstall/shim to coordinate all your browsing.
I use Opera Mobile Emulator with Opera Dragonfly as a debugging tool, which makes styling and scripting pretty easy 90% of the way. If running Opera (Mobile & Mini), you can connect your real devices to the developer tools window of Dragonfly - that's a great way to effectively scan your code.
The current commercial version of Electric Mobile Simulator states to render just as iOS. It actually comes very close. It basically is a Chrome fork - which works, because both Chrome and Safari are Webkit browsers. However, rendering pages that use flash fallbacks and other trickery might display differently on the simulator. EMS has built-in developer tools, which helps a lot finding those crummy css bugs. I use this tool a lot.
There was a free version of Electric Mobile Simulator, however it rendered most of the content equating to the operating system's browser (Can't find the version now however).
Android SDK is a giant. I used it before, and I doubt that it can offer you anything you couldn't achieve with Opera Mobile Emulator or Electric MS. It can be sluggish, slow responding - depending on the performance of your machine. However, simulating a device in Android SDK brings you very close to the real deal.
But in the end, you definitely need to test on real devices. Not all bugs show in simulators, also you can't precisely simulate touch events. We started collecting used mobile devices (iPhone3, iPad1, older Samsung models and so on); and will continue doing so.
Summary: Nothing replaces testing mobile sites on real devices, but emulators can speed up development from the project's start until the middle of beta stage.
You could also use DeviceAnywhere. With DA you test on real devices.
I am about to start writing a web app for the latest smartphones using HTML5, CSS3 and JavaScript. I don’t need a framework so much as a library like jQuery.
I looked at jQTouch which is great for iPhone and apparently has support coming for Android too but I am looking to cover Blackberry device Software v4.6 upwards and WebOS 5 as well.
Does anyone have any ideas of alternatives to jQTouch or experience using jQTouch with Android's native browser, Blackberry's browser or WebOS native browser?
Well you probably have to use jQuery. In the beginning of October, the jQuery community will release a jQuery Mobile Version, where you can use all the advantages of jQuery within almost every mobile browser.
Check their site out: http://jquerymobile.com/
Sencha Touch is a possible alternative, but I have no idea how well it works on BB and WebOS. I'm afraid that you won't find something that works well with BB, since they have switched to a Webkit based browser only recently.
I did a project for Android and iPhone using jQTouch. There were times when I had to fiddle with the code to get it working correctly but as a whole I found that almost everything worked on iPhone and Android. Where I started having problems was that the Android browser doesn't have nearly as much support for CSS3/HTML5 (especially with animations) and the app ran much slower on android as the browser doesn't have hardware accelerated graphics. This was a while ago so hopefully it has matured a bit now.
PhoneGap seems to be a reasonable cross-platform framework that supports encapsulating web app type development into an iPhone/iOS app, as well seeming to support some of the other platforms you asked about (but I have tried it on those).
http://www.phonegap.com/