I'm aware of several Javascript frameworks that assist in creating webapps for the iPhone and ipod Touch:
Joe Hewitt's iui -- http://code.google.com/p/iui/
Ciui -- A revised take on Joe's work by Vladimir Olexa of CNET -- http://code.google.com/p/ciui-dev/
WebApp -- by Chrilith. http://webapp.net.free.fr/ Unfortunately, he doesn't publish his code until after a release.
I'm leaning towards Ciui but want your thoughts.
Which toolkit do you use for iPhone webapps?
Thanks,
Larry
ADDED following from the answers:
Sproutcore
JQuery Mobile -- still under development. From the JQuery team
JQtouch -- superset of JQuery. Possible issue of library size
Cappuccino -- comment by Ryan McCuaig: by 280 North. In philosophy, they're porting Cocoa and Objective-C to the Javascript environment (right down to Objective-C style syntax extensions to Javascript and reusing NIB files. Quite incredible).
Wink
xui
Jo by Dave Balmer (blog). Designed to work with PhoneGap, it can be used to build web apps for iPhone, iPad, Android, plus native apps (via PhoneGap) for iPhone, Android, webOS, and Symbian. See the demo video. Set res to 720p to read the screen.
Zepto.js by Thomas Fuchs of scriptaculous fame
ChocolateChip-UI
JQtouch vs JQuery
Added Dec 12, 2010. Here is a comment on a public board about JQtouch vs JQuery mobile from Dave Oliver:
JQuery Mobile is another evolutionary step past JQTouch. JQTouch is stable now (and features are included in the Sencha Touch framework), while JQuery Mobile is only in Alpha state at this point.
Having "learned the lessons" of JQTouch, JQuery Mobile adopts some new philosophy that may or may not be to your liking. Among other things, it defines a "cross platform look and feel" (though it will later add a version of JQuery's automated theme generator). JQTouch, by comparison, is neutral (though you have to do some work to make your look and feel look the way you want it).
The primary negative you sometimes hear about JQTouch is the lack of a fixed position footer and sub-pane scrolling (reason: iPhone native apps have these features). It turns out other smart people have solved that problem in ways that work inside JQTouch (see, e.g., iScroll).
I think the JQuery team is working on a very compelling offering, and I think it will see a lot of interest and additional community scrutiny which is good. But, having experimented with it for a real application, it is - at this point - a bit too new to consider for production use. "Watch This Space", as they say.
Apple has provided some tools within Dashcode to quickly make basic native-looking web apps.
But...
I've been finding that I get buried in great big incomprehensible masses of div and event-listener spaghetti working down at the jQuery/Prototype level. We're looking into moving up a couple of levels of abstraction into MVC frameworks. What we feel we need is the web app equivalent of Cocoa Touch.
The two we're investigating are:
Sproutcore, which I understand is used by Apple for their Mobile Me web apps,
Cappuccino, by 280 North. In philosophy, they're porting Cocoa and Objective-C to the Javascript environment (right down to Objective-C style syntax extensions to Javascript and reusing NIB files. Quite incredible).
According to the Flickr team, for which I have much respect, you shouldn't use frameworks. Instead, focus on wringing out all performance possible via small size and careful http queries:
"1. Don’t Use a JavaScript Library or CSS Framework "
Flickr developer blog post
Related
We have recently developed an iPhone, iPad, Android application with the Rhodes framework and have found it to be painful to say the least. As we are approaching the finishing stages and now testing the app in mobile devices we find more bugs than were apparent in iPhone simulator and would like to change the development direction as it seems most of the Apps even showcased on the Rhodes site are super buggy and not as smooth as they should be.
Can anyone lend any insight on how we may take already developed front-end files with prepped JSON data to apply it to another framework to produce the application. We have learned how the jQTouch framework operates and feel comfortable developing but need to package this into an application.
Rapid development is a key concern as we are approaching a deadline on this project. Note our proficiencies are Ruby, ROR3, JQuery, Modern front-end (HTML5/CSS3)
I'm not familiar with Rhodes, but it seems like Phonegap might be a good solution for you. I'm not sure what your app needs to do, but your skills (HTML/CSS and jQuery in particular) would translate well.
Phonegap lets you create an app for both iPhone/Android, while using the same code. There's some tweaking when setting up your files... but the overall intent is that you're working with the same code (as opposed to having to create two separate apps).
For both iPhone/Android apps developed with Phonegap, you're basically working with files within a folder (much like you would work with files inside a folder on a server). It's a basic group of file types - image, javascript, css, etc. You build like you would for a browser.
jQTouch provides more of a look and feel, in terms of the buttons, UI and animation/transition between sections. Phonegap more or less wraps up all the code, and lets you bundle it as an app for iPhone/Android.
Additionally, if you need to access device-specific functionality like GPS, camera, etc... Phonegap has a nice library you can tap into. Again - same code for both iPhone/Android.
A quick reference to review (to see if Phonegap + jQTouch is a good fit for you) is Jonathan Stark's book: Building iPhone Apps with HTML, CSS, and JavaScript. You may also want to refer to the example files referenced in his chapters, here.
Final note: jQtouch is meant for smaller handhelds. Not sure how well it translates over to iPad, but just an FYI. I know less about Sencha Touch, but it's made by the same folks and might be another approach for larger screens.
I want to start developing IPhone application.
I need to understand something about it - I am working with a graphic designer.
If she supplies the GUI in HTML - will it be easy for me to develop with it?
How does it work? like regular web development?
Apple uses Objective C and Cocoa for iPhone applications. Neither uses HTML; you'll instead be using interactive controls like you'd find in a desktop application. Whether it's easy for you to develop using an HTML mockup will depend entirely on your skills with Cocoa. (In the same way I encourage designers to give me mockups in Photoshop knowing that I can easily build HTML versions of them.)
You might want to start with some of Apple's documentation on iPhone development: http://developer.apple.com/devcenter/ios/index.action
For GUI development of your own apps you have several options:
Code: UIKit framework in Objective-C
Interface Builder: Tool to click
your GUI together, but the logic
will be coded like in 1 in C, Obj-C
or C++
You can build a HTML gui and
present it in a web view, but for
native apps, this will only bring
you so far.
Oh, and no native Flash on iOS. :-)
You could write an app that uses HTML for its UI - in essence you'd simply be wrapping a webkit widget and driving your app from events generated by that UI. However, that's not going to give you a UI that really takes advantage of the phone.
For that, you need to get down and dirty with Objective C and the Cocoa Touch API for iOS. Another option is using Flash CS5, which is ActionScript based.
Strictly speaking, the answer is no, your HTML skills are not transferrable.
That said, there are two projects that deserve looking into, both of which are about producing native (or "native-ish") apps from HTML and JavaScript. The first is PhoneGap, and the second (which I think is more robust and promising) is called Appcellerator.
Neither of them give you really-and-truly full access to to the iPhone API, but they do allow a significant flattening of the learning curve for people who already have well developed web app skillz.
If you go the native route, bear this in mind: it took me about a month to go from being a web developer to being a slightly competent iOS developer, and six months or so to feel solid and reliable and productive with iOS.
We have a push based web-application. Recently, we planned to make an iPhone app for it. Much like Facebook has it's iPhone application as well as web presence. We are looking for a UI framework that can get us going quickly. I've leafed through PhoneGap and couple other JS based UI frameworks mentioned here. I am bit unsure what can suit us the best. So, I am looking for your suggestions.
Our constraints are as follows:
The framework should be JS based. We all are web-devs and want to avoid learning Objective C.
Framework should support iPhone's capabiilities as smoothly as a native app does. If not, we will prefer a JS framework which is the smoothest of all JS frameworks. So, this is the most important constraint.
It should support smooth swipe through screens, support rotation. Nice, if it can capture shake as well. But shake does not take preference over a better framework without shake support.
Nice to have -- with little or no modification in code, if the framework is supported on other touchscreen phones as well. Android and Symbian would be suffice. But again, we are focused on iPhone for now.
I am a bit curious to know what can be the best choice to start development with. I will be thankful if you share your experience with pros-and-cons of the framework that you have used.
Thanks
Nishant
I have been playing with following frameworks.
Jo
Sencha Touch
jQuery Mobile
These are for serving Web based mobile sites, they can then in turn be made into Apps for Android or iOS using PhoneGap
Of the 3, Sencha is the more mature project and has the most things out of the box. Jo looks very promising and would probably directly compete with Sencha. jQuery mobile is very interesting but just far to early to do any production code with it, too rough around the edges. jQuery mobile takes a different approach to the others as it is html based and it interperates the attributes on tags to turn things into tableviews or menus.
jQuery mobile is quicker to hack together and get your head around, where the other two take a little bit more thinking. But once you figure them out its easy enough.
If you don't want to serve the site via a url at all and want to just build an app then Appcelerator is the way to go. You write code in JS and it makes native Android or iOS apps for you. You will get access to pretty much the full Android/iOS api.
I have coded with appcelerator, however I am no longer going to use it and use one of the above frameworks, probably Sencha for just now. I can get access to the device native apis via PhoneGap and for simpler apps give a great experience cross device via a url.
In about 6 months, or sooner, I think jQuery mobile will be the daddy...
PhoneGap and Titanium allow you build native iPhone Apps based on HTML and JavaScript.
Has anyone gained experience with both? What are the differences?
There is a pretty lengthy discussion about PhoneGap VS Titanium (and Corona) on StackOverflow already that might be useful.
One of the big differences is that PhoneGap is MIT licensed and Titanium is (just recently changed) Apache licensed.
This article is a good summary of the practical and philosophical differences. Note its from an Appcelerator evangelist, but I still think its pretty impartial. In fact I think he shares Titanium more warts that I probably would :).
http://developer.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap.html
It's probably worth following the current Apple/Adobe spat, in which Mr Jobs has put the future of products that aren't written in language XYZ in the balance. OS 4 SDK states:
Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).
I believe Titanium is affected by this.
Well..! this is not certain that which is better to implement the project.
Both technologies are new and having their pros & cons as well.
Titanium says to keep native environment with the help of java Script Based framework, on the other hand the phoneGap provides everything inside the WebView, you only need to put your web based project having index.html inside the WWW folder, found in the project directory structure of the Project.
So if you comfortable with Web Works, phoneGap is suitable in this case otherWise you should go with Titanium.Its easier to use and fully facilitated.
Unfortunately Titanium is not opensource anymore. You can develop apps freely but You have to buy Indie account to publish an app to appstore which cost some money.
PhoneGap is a free and open source framework that allows you to create mobile apps using web APIs for any platforms (iOS, android,windows, Blackberry etc) you think of.
Titanium: Is a cross platform, where in the code you write in JS and Titanium API's will be converted to native code and look and feel of the app will be same as native apps.
PhoneGap: Is a hybrid platform, where in you write the code using web technologies like JS, HTML and CSS. Which uses web views present in the native devices to render the UI. Look and feel is not same as native apps.
I am going to develop a content rich application that ideally should have been an iPhone-app, but since I'm short on time, I will stick with technologies that I can, such as JQuery, CSS and HTML. The more mobile devices my site runs on besides iPhone, the better.
A brief search on the web leaves me with the impression that there are three tools I may use: iWebkit, JQTouch and iUI. I have toyed about with JQTouch, which I find impressive and simple to use.
With simplicity comes lack of customizability; I would very much like to have sliders and other cool features in my GUI.
Any comments on which of these three to go for?
I've talked about this subject a couple of days ago in a WebTuesday meeting, here are the slides of the presentation:
http://www.slideshare.net/akosma/webtuesday-mobile-web-applications-framework-overview
I talk about the following frameworks / technologies:
iUI
jQTouch
WebApp.net
iWebKit
SproutCore / Cappuccino
Yahoo! Blueprint
I personally have used iUI, and then later jQTouch, which I literally fell in love with.
I actually just finished writing and article comparing iUI and jQTouch. In my opinion, go with jQTouch because it covers a greater selection of WebKit browser phones like the Palm Pre, Droid and Nexus One.
It will be a slightly larger in file size because it includes the core jQuery library. But if you are already using jQuery in your site, that shouldn't matter.
You check out my article here: http://www.heinencreative.com/archives/articles/iui-vs-jqtouch/
I have done a short list of frameworks for this type of development see here and am working on an article comparing but the holiday and work intervened.
Personally i have done a site in iUI which was a conversion from a Mac Widget, so reused a lot of code. It was relatively easy to do, the code is solid (for iUI) and there is a site where there is support.
JQTouch looks good and so does iWebkit. Quickconnect is well supported and has a book associated with it (which by now should be wildly out of date) and Quickconnect claims to be useable for other mobile platforms as well.
Only hasving lloked i would probably go for JQTouch next time around as it will have mainstream support just with it being based on JQuery.
jQTouch and iUI work with QuickConnect Hybrid framework and PhoneGap.
jQTouch is jQuery web GUI framework for mobile devices (e.g. iPhone, Android, etc.).
iUI is javascript web GUI framework for mobile devices (e.g. iPhone, Android, etc.).
While QuickConnect and PhoneGap are Hybrid framework for mobile devices. For example in iOS, QuickConnect and PhoneGap use Xcode + iOS SDK + Javascript, while in Android, the two use Java + Android SDK + Javascript.
I use these frameworks, jQTouch is better than iUI at the moment. QuickConnect is also better than PhoneGap. However, PhoneGap is popular since it address other mobile OSes aside from iOS and Android. QuickConnect has support for iOS and Android.
I've gone with JQTouch for some prototyping as it seemed the best fit, and the most convenient for my needs.
Yet I would not recommend to build your main business around a webbased iPhone app. Even though it has quite a good set of features, it just doesn't feel responsive enough, and getting to get the app look perfectly like UX designed it can be some pain in the ass, as not the whole set of iPhone UI elements are implemented.
Yet I have to say that it was a matter of minutes to get a service-consuming app running that looks like a real iPhone app.
Jqtouch has the community support and also certain very helpful libraries now for persistence HTML5 support with inmemory db and even more so very fluid appearence.
I've started with iUI a way back but i'm now using jQTouch wich i find much better, specially if you like working with jQuery like me. Havent tried iWebkit though, but from what i've seen of it it can't compete with JQT.