I'm looking to make a single-page web app that works exclusively on the iPad, like Gmail on the iPad and the iPad User Guide. An app like this must be made using a framework that allow web pages to behave in ways much more akin to iPad's native applications (momentum scrolling, split-view panes, UIKit-style interface), but done completely in HTML5, CSS3, and JavaScript (with WebKit and Safari extensions like iOS-specific multi-touch and gesture events).
The only public framework I've found that targets the iPad in this matter is Sencha Touch. Naturally, Google and Apple aren't sharing the libraries they've written (ie. PastryKit, AdLib, etc). Are there any others (the open-source only license for Sencha Touch is prohibitive, and jQTouch is only for small-screen devices like the iPhone 4, and not the iPad)? How would I go about writing momentum scrolling and split-view panes like this? Any good resources/tutorials/books/links on these advanced topics?
For a lot of reasons, people want to write web apps for the iPad that can compete with native.
I don't think you'd have to do it yourself. The sencha touch commercial license is free, so you won't have to open up your own code. On the iPad it looks really good.
You can also use PhoneGap to put a native wrapper around it so most users won't notice it's a web app.
Jquery mobile is also an option but it doesn't look as good as sencha, IMHO
Sencha Touch license
PhoneGap
Also checkout App Titanium... You develop in Javascript, but it renders your app as native code...
Take a look at SproutCore and:
http://blog.sproutcore.com/post/531215199/introducing-sproutcore-touch
http://touch.sproutcore.com/hedwig/
http://www.npr.org/webapp
Related
What is the difference of native packaging between Sencha touch2 and PhoneGap?
Many people use PhoneGap to natively package app based on Sencha touch, but I find that Sencha touch 2 has a new feature of native packaging.
So which type of native package is better in Performance, scalability, functionality, maturity, etc. ?
How do you choose?
PhoneGap is a middle-platform which is able to access some native APIs on many platforms and its interface language is Javascript. This means that PhoneGap is able to work with many cross-platform mobile web frameworks, such as: Sencha Touch, Titanium, jQuery Mobile, etc.
Sencha Touch 2 also provides a few native APIs (currently available on iOS, Android) through its SDK.
If you are not going to use any native APIs, then they don't have any major differences on performance and functionality as the only work done is just to wrap your Javascript code into a webview native component on corresponding device.
Lastly, the 2 main differences are:
PhoneGap provides much more APIs than Sencha Touch SDK.
PhoneGap supports 7 platforms, while Sencha Touch SDK only 2.
I had the same questions, I agree it's a real mess at first glance. Here is a very good article that "clears up confusion" quite well.
To quote the gist of the article:
Sencha Touch (and jQuery Mobile) are mobile web frameworks. You can use these technologies to create web-based, mobile apps. They don’t have access to any native API’s.
You can use Sencha Touch and jQuery Mobile inside both PhoneGap and Titanium. If you decide your html/js is cool as a native app too, you can use either PhoneGap or Titanium to wrap a browser around your app and put it in the app store or marketplace. This is where, I think, the confusion comes. Putting your Sencha Touch or jQuery Mobile apps in a native wrapper doesn’t make it a native app. It makes it appear as if it is a native app. You might get some extra functionality from PhoneGap or Titanium API’s, but it’s still not necessarily a ‘native’ app. It’s a web app running locally on the device. It’s a great way to use web technologies inside a native-like area.
The difference is that Sencha Touch allows you to build native iOS-Applications even on Windows, whereas PhoneGap 'only' bundles your HTML files into an XCode project, which further needs to be compiled on OSX for distribution/packaging.
I am a web developer who needs to build an HTML5 mobile app - which we will need to try and submit to app stores, including Apple's App store. Therefore, I need to somehow wrap my app into a native framework.
That being said, I don't have time to learn the nitty gritty of Objective-C and figure it all out.
I am trying to decide between using a service like PhoneGap, or simply creating a smaller native app with a webview that pulls up my mobile app from my site's server.
In this case, the only native hardware that my app needs to be in touch with are push notifications (probably through Urban Airship) and Geolocation (which can be accomplished via HTML5).
When is it wise to go with something like PhoneGap vs. simply creating a UIWebView, and vice versa? Which would you suggest in this case?
Apple is loyal enough to PhoneGap apps - almost no problems with approval on iStore. You should just follow Apple Human Guidelines and everything should be OK.
PhoneGap provides lot's of different and interesting features. Also it's cross-platform - works great on iOS, Android, WP7 etc. I think it's the best way to wrap your HTML5 and JS.
Talking about pushes - if you select phonegap, i recommend to look at pushwoosh service.
Can I pack the HTML5 from playn to be used as an iOS app using some thing like phonegap, or another method?
You can. Bear in mind that when using WebKit in a Phonegap-style application, you lose the benefit of just-in-time compiling in the JavaScript VM. So your game will be slower. If you don't need to integrate with the iOS App Store, a better solution is to have users get to your app via regular Mobile Safari and then click "Add to home screen" which will install your HTML5 app in a very app-like manner on their home screen and allow it to run with the JavaScript JIT.
Eventually PlayN will also support native compilation for iOS, but the above approaches are useful stopgaps if you plan to ship a game soon.
I have just come across the Mobile application toolkit which enables me to expose my web app built on Asp.NET MVC 2 on an iPhone and other mobile devices. However how would I expose my site on an iPad?
Are there any toolkits out there?
JD
Well, what I do is just using a Framework. I used to use jQTouch but now I'm using jQueryMobile as it works better in Android and Opera Mobile (to use with Nokias or any mobile device) much better that the last time I use jQTouch (before Jonathan took over the project).
if a user is using an iPad or any other desktop browser, I sent the user to my desktop views, if using any other iDevice, Android or Opera Mobile, I set the user to use jQueryMobile Views.
It's quite easy to accomplish this with MVC2, the controllers are the same, methods are the same, you just redirect to a different view.
I choose to should my web application in desktop mode in the iPad cause I add some meta to it and that works fantasticaly fine in the iPad, you could also use any Framework or develop a new html5 view to work with the iPad if you don't want to mess up what you have already.
You need to rememer that in an iPad, there is no "hover" effect, and a click is a tap, though Mobile Safari does a pretty good job on click events, you could create a new set of views that use this new techniques, as well, the full set of Safari CSS3 and other bonus, such as geolocation, browser database, etc
more under Apple Technical Note: Preparing Your Web Content for iPad
I hope this helps, if you need more, please more precise question
I received the task to add a mobile-friendly version of our website. Apps for iPhone and Android already exist (and their browsers are really good), so the focus of this website lies on Symbian and Blackberry devices.
As I am a lazy programmer, I wanted to use some frameworks that help me in developing this website. I have found numerous frameworks like iUI or iWebkit that focus on iPhone and Android devices and bring a very nice look and feel to mobile websites. And there are other frameworks like PhoneGap which focus on building applications for mobile devices.
But I have not found a framework that is targetted on mobile websites for Symbian and / or Blackberry. Is there something like that or do I have to start from scratch? Or are the browsers for these devices so bad that I have to write very basic HTML?
Jonas
I only know mobile web templates for UI in nokia phone. They are good for blackberry too
BlackBerry browser isn't awful, it gets an Acid3 score of 93/100.
I do the clear majority of my web-browsing on my BlackBerry, almost all of it in Opera Mini. I haven't even tried the Acid tests on Opera Mini, I know it'd just be a waste. :) But, Opera means I don't have to do side-to-side scrolling, back and forward are lightning fast (retrieved from memory when they can), it has rudimentary tabs, and the latency is probably 1/10th or better the latency of the native browser.
I'd rather see your application work well in Opera than work perfect in the native browser.