Quick Overview: A Few Moments with Titanium
Tutorial Details
- Technology: JavaSript
- Tutorial Length: 4 Minutes
- Topic: iPhone Development
Those of you who follow us on Twitter might know that I’m currently working on an iPhone app for the tutorial sites. However, there’s just one problem: I have no Objective-C experience! Luckily, a service called Appcelerator allows us to build native desktop and mobile (iPhone in my case) apps using the web technologies that we already know, like JavaScript! Before we launch an in-depth two-part series detailing how to create and sell an iPhone app from scratch later this month, I thought I’d give you a basic overview of how it works.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Ive been working on some apps for the University of Lincoln and Im seriously impressed with Titanium. Once you understand how it all links together its wonderfully simple to create some really awesome stuff. Additionally theyve got Blackberry and Symbian support on the way to join iPhone and Android. If Ive got one gripe its that the documentation still isnt friendly enough for beginners however as Jeffrey said, if you look at the Kitchen Sink app it implements everything you can do with Titanium.
Oh, so sweet! I have just got to check this out!
Niiiiiice! Been waiting for you guys to do a titanium tut since the iPad was announced. Thanks Jeffrey!
I’m on my iPad . . And I can’t watch this. :(. Damn you Apple . .
Actually never mind, just didn’t load the first time. It embeds a YouTube player in the page to get around. Great video! I’ve been really interested in this and would love more tutorials on the subject!
Are you sure? Try again. :) It’s working for me.
That looks fantastic, it will allow me much more flexibility in the projects that I’m doing if I can use my Javascript knowledge rather than having to learn Objective C! I look forward to the tutorials on this :D
I’m going to assume that you can do Android as well, but still no iPhone on PC… Correct?
Android is just as simple with Titanium, with the exception of the emulator being really, really slow. Without a handset, it would be impossible for me to test anything at all. But that might have something with my low CPU laptop to do.
And sorry, no iPhone for PC yet, if ever..
Looking forward to the two-parter!
Hey Torkild – we just shipped Titanium 1.2, which will get a lot of noise around enabling iPad development… but Android got a nice improvement on the API coverage and dev speedup to fix the issue you are describing.
Cheers,
Scott Schwarzhoff
VP, Marketing
Appcelerator, Inc.
Awesome. Can’t wait for the two-parter.
That is pretty cool cant wait to have the app as well! I been waiting for it!
I am looking forward to working with Titanium to create some applications for the Android. I’ve really wanted to make mobile applications, but haven’t had the time to go and learn a new language and new platform.
This is awesome. Very interested to see the tutorials on this.
Thanks for this Jeff. I will be waiting patiently for the series as I will try to make my first iPhone app.
this might sound stupid but where did you get that iphone simulator at?
No questions are stupid. :) Visit developer.apple.com to download the SDK.
Joy and elation! I’m soooooo looking forward to this 2 part series!
I am actually a convert from Adobe AIR+AJAX to titanium for my desktop apps and proud to say that it is much more powerful than Adobe AIR. It allows me to create a desktop app with full native functionality without the paranoia of security which Adobe AIR has. In fact Adobe is more geared towards promoting their flash platform and in the end ignores JS developers even though AIR supports JS.
Titanium is available for mobile and desktop both and AIR is not. Titanium is a boon for JS developers.
Good video.
Too bad even with titanium I can’t develop for iphone/ipad since I don’t have a mac… well i guess android is still there for me :P
This is great!
Thanks for the tip!
Woow.. awesome, bring us to the future :D
Very cool! This is just like PhoneGap! http://www.phonegap.com/
Actually, its not like PhoneGap. PhoneGap uses a UIWebView and stores your application in there, whereas Titanium compiles your code as a native iPhone Application. Titanium as a result will run faster on the iPhone than PhoneGap.
However, having fooled around with Titanium, I would like to point out a few flaws:
1. You are trusting on a middleman for your application.
2. Not all iPhone SDK features are implemented, including certain animations, and you can’t make anything Game related on Titanium (OpenGL not really supported)
3. Other things like iPod Library access are not supported.
4. Apple may not approve your application, because the code that Titanium generates may not be suitable to them (since you aren’t really handcoding the Obj-C component, you cannot gauge how well it is written)
This doesn’t mean Titanium is bad, but it’s not the be-all and end-all. I recently made some simple apps using Titanium, but returned to the iPhone SDK and Objective-C because I felt its best to learn the native tools.
The Javascript is not compiled into Objective-C, but is compiled into object code and rendered via webkit.
Matt, I think you are mistaken. It does not render via Webkit. This may be what PhoneGap does, but not Titanium.
Check this brief to see how Titanium works (little long):
Titanium takes your Javascript code, analyzes and preprocesses it and then pre-compiles it into a set of symbols that are resolved based on your applications uses of Titanium APIs. From this symbol hierarchy we can build a symbol dependency matrix that maps to the underlying Titanium library symbols to understand which APIs (and related dependencies, frameworks, etc) specifically your app needs. I’m using the word symbol in a semi-generic way since it’s a little different based on the language. In iPhone, the symbol maps to a true C symbol that ultimately maps to a compiled .o file that has been compiled for ARM/i386 architectures. For Java, well, it’s more or less a .class file, etc. Once the front end can understand your dependency matrix, we then invoke the SDK compiler (i.e. GCC for iPhone, Java for Android) to then compile your application into the final native binary.
So, a simple way to think about it is that your JS code is compiled almost one to one into the representative symbols in nativeland. There’s still an interpreter running in interpreted mode otherwise things like dynamic code wouldn’t work. However, its much faster, much more compact and it’s about as close to pure native mapping as you can get.
We’re obviously still got plenty of room to improve this and working on that. So far in our latest 1.0 testing, it’s almost indistinguishable from the same objective-c direct code (since in most cases it’s exactly mapped to that). From a CompSci standpoint, we can now however start to optimize things that a human really couldn’t easily do that – much like the GCC compiler already does today.
This looks awesome, I’m looking forward to see the rest!
Awesome! cant wait for the next tut!
Why do i feel its going to be a tuts+ paid tutorial? maybe because my subs ended… hehehe!
This is just what I was waiting for!
Can’t wait to see more tutorials on Titanium :)
This is awesome!
It’s great to see services like this popping up in conjunction with Flash CS5 using an LLVM to transcode AS3 to Obj-C. I’ve been trying to get to grips with Obj-C and the Three20 framework (used for the facebook app) this past week but the learning curve is rather sharp for us web-programmers with little or no C experience.
Really looking forward to the upcoming tuts series. We all need to be versed for this stuff for the future so it’s awesome to see Tuts doing a series on mobile deployment for web-programmers.
Darnn Jeff only an Iphone app and no android app?? :P
Its realy annoying that its limited only on MAC. :(
Thanks Jeffrey! I’m also learning it and I want more and more tuts about it!
Btw, you are doing an awesome work. I love that site.
I am so looking forward to this tutorial. The only thing holding me back from buying an iPhone is the high monthly fee. Maybe if these tutorials can teach me how to make a few apps and I earn some money from it, yeah, be cool
No go for iPhone, waiting for something better.
Man, how do u guys find these AMAZING tutorials!!!
KEEP UP THE GREAT WORK. this is by far the best site on the net!
I tried Titanium a couple of weeks ago but it kept crashing on me. Have you had that problem?
Pretty sure they’ve fixed that bug.
Awesome overview Jeffrey; I’m definitely going to check this out!
Extremely excited to read the tutorial! Great job!
I don’t really see why you’d choose to use javascript when there are other, better alternatives. To me, javascript is a necessary evil when working with the browser. If there’s the option to use a more robust, properly object-orientated language then why not use it? Personally I’d love to see an ‘iTuts’ site added to the network, teaching real iphone/app development instead of these workarounds that only really make sense for hobbyists.
If you really want to use javascript then build a web app. Otherwise learn Objective-C, or hire someone, to take full advantage of the SDK and not run into the almost inevitable app store problems.
Our next Tuts+ site will be Mobiletuts+ launching in mid-April – it will teach native development for all mobile platforms :)
I’m looking forward to that…
…in early May!
Don’t get me wrong, Titanium is a great innovation which I love using (mainly for desktop development), but I would really like to make a truly native app, not a preprocessed-into-native-code-from-non-native-code app
I wouldn’t call JavaScript an evil by any means. On the contrary, it’s quite powerful.
I agree that javascript can be quite powerful, but from my experience developing applications with languages that use classical inheritance offers a lot more in terms of code reuse, extensibility, effective debugging, etc. More importantly though, I disagree with the idea of developing an application based on you current skill-set instead of what makes most sense for the project.
Javascript can be powerful, when used correctly, but that doesn’t explain why you’d want to shoe-horn it into a project to produce a third-rate iphone app when you could use it to create a more accessible web version. As Google were forced to with their voice application.
http://www.wired.com/epicenter/2010/01/google-voice-web-app-circumvents-apples-blockade/
I’m looking forward to the launch of Mobiletuts.
So basically you are saying that Titanium is pointless software. Using such logic same can be applied to jQuery. I disagree with you 100%.
In what sense is it the same as jquery? jQuery builds higher level functionality on top of the same language, it doesn’t recompile to a completely different language. If you had said the same logic could be applied to GWT or haXe then you’d have a more valid point. However, whilst I don’t completely agree with those tools either, at least they offer the ability to develop in a more mature environment (Java/haXe respectively). Titanium seems to offer the opposite, i.e. developing in a notoriously unstable, untestable language and then compiling to one that offers all these benefits. You can quote Crockford and talk about the ‘expressiveness’ of functional languages all you like, but there’s a reason classical inheritance is the standard for any serious development.
Rich is right and this is nothing like JQuery.
The point i’d make is that Obj-C is quite a steep learning curve. I’d agree that it would be great to see a Tuts site dedicated to Mobile Development but tools like this enable web devs to deploy for mobile platforms, using their current skillset and, tbh, it looks pretty powerful from the various demos available.
No you wouldn’t be able to leverage OpenGL and build 3D environments with it but you can do a lot of other stuff for simpler apps. It’s kind of like Flash CS5 utilizing an LLVM to transcode AS3 to Obj-C. It’s great for those of us who are well-versed in AS and not at all in C but it’s by no means a permenant solution for more serious development projects.
Personally, i’m looking forward to diving into both Titanium JS and C. There’s a huge lack of accessible info out there for beginners looking to dev for the iPhone so in-roads like this are great.
I most definitely want to see the tutorials on using Appcelerator! Can’t wait!!! :-)
Nice overview Jeff. I got a few questions though, when you compile the javascript does it translate into Objective-C and Coca or does it stay javascript. I mean when you run it though X-code.
Also noob question what the heck is an object literal?
It does not stay as Javascript – it is converted into a native binary at compile time (obj-c for all purposes).
An object literal is Javascript’s way of declaring objects. For example:
var car = {
tires: 4,
windshield: 1,
name: “Honda Civic”,
getCarName: function() {
return this.name;
}
};
Now, car is an object specified through the object literal above. You can now call on the car object by doing things such as var carname = car.getCarName(); or var numTires = car.tires;
This javascript code is not safe. If you switch name value with “Toyota Prius” page could crash.
I was a beta tester from version 0.6 (?) and I wasn’t overly impressed because I couldn’t find any good documentation and the api was completely different, instead of app.js there was app.xml and every window was an html file. The recent improvements will hopefully make it much better.
Im wondering how the sourcecode looks before compilation though. Not the JS, but the actual conversion. I wonder if the pre-comp code is just bloated all the way to hell and back just to accommodate for possible events and whatnot.
Personally i like the idea, but im a bit skeptical. I agree learning Objective-C isnt something you do over the weekend, but i also dont like to run into limitations using software like this. Limitations that i perhaps would not have had if i coded everything myself.
Being able to port it directly to Android is a nice touch though.
Is it free?,
can i make iphone apps with a PC? or only MAC?
This is deffinety really interesting but I do have to agree with what some people have said. To me, I wonder how this is really any better than just using Obj-C. It feels a little odd, like trying to shove a square into a circle. It’s just not the correct tool for iPhone development. This could almost all be done with a web app. Why take the shortcuts? Why not really get your hands dirty and learn how iPhone development works under the hood! I would really like to see more tutorials on real iPhone development with Objective C. But that’s just my thoughts. Keep up the great work!
UGH. PHP support ? WTF ? I’ve been poking around with this thing to try and make a native desktop application for OS X.
At first i tried using my existing php skills to display “Hello World”. I know how much simpler could it get right ? Well gave me a simple output: . No php parsing/rendering whatsoever.
Then i gave the .html file a .php extension and changed it in the tiapp.xml file as well. No joy.
While being quite irritated already i tried to find something on this subject on their website. First of all finding anything on there about devving a simple desktop app proved to be quite a task, mostly because there is ZERO usable info about it on their site. Yes something about taking php vars/values and converting them in to other vars/values in javascript and whatnot, but nothing to the point and useful. Truly shameful.
I tried finding something usable through google and came up empty. I guess that for making iPhone/iPad apps this stuff will work as long as you use simple html and javascript, but god forbid you try to use php. I’m sure as hell not going to download the iPhone SDK just to see what that brings me.
As for these apps being native, i’d hardly call them that. Contained web applications maybe. All this thing basically does is build an app which features a very simple browser, serving pages from a contained webserver and database. Plus when you try to move the built application to a mac without titanium installed…. you first have to download all the stuff it needs to even work. So in a way i even doubt that the webserving and database handling that seems to be done in-app, is actually in app and not just an instance of their framework.
Personally i’d say grab XCode and a copy of Aaron Hildegass’ book “Cocoa programming for Mac OS X”, read through it and use Cocoa’s frameworks and Interface builder. I bet that if you’d read into the stuff you’d be faster building it that way than trying to half-@ss something with software like this.
/rant
And on top of that, when you click on a link called “How to completely remove Titanium from your computer” you get a 404…
Please fix it because i want this thing gone asap.
The desktop and mobile versions of Titanium have two different methods of packaging/distribution. On the desktop side, we do wrap an instance of webkit with native chrome, notifications, etc. This gives us a nice cross-platform capability that works well across PC, Mac, and Desktop. Titanium Developer itself is a Titanium-written application… and I’d wager it looks as native as any desktop app. In June, in fact, we’ll have one huge web ISV release a Titanium social desktop app to over 140 million people. They’re betting big on Titanium.
On the mobile side, we’ve gone the direct JS==>binding route. I can tell you with 100% certainty that the apps that are coming out over the next 3 weeks are produced by some of the largest companies in the world, for some of the biggest brands that everyone will be familiar with.
Finally, in terms of learning Objective-C, I’d say that while you of course can do that, you will write the same app in about 20% of the time and across multiple platforms.
I’ll post links to these apps on this site as they’re released.
I admire you for trying to get people into developing apps using their existing skills. However, while digging through your site and software i found it particularly hard to find any info on how to actually get php working.
I would even be bold enough to say that if you were developing a desktop app to run cross-platform, you’d be better off developing a web-application (ran from an actual webserver or by using wamp, mamp or lamp) and running it in a application like Fluid.
I did however feel that Titanium is more geared towards the mobile applications though. Just about every vid i was presented with on your site was for about 80%+ focused on mobile development. I agree that a system like this might be more beneficial there. However, i am wondering, when i want to use a Titanium app on a mac system without titanium installed it needs to download a whole bunch of dependencies first. How did you solve that with mobile apps ? I’d also love to know the approximate filesize of the application Jeffrey is creating. Shouldn’t be more than a couple of megs right ?
I am obviously not the biggest fan on the desktop side but i can see this working for mobile applications though. I just that the desktop side of this app is more of an afterthought. I mean, it’s a stripped down browser, serving pages from a very bare httpdaemon. A simple Hello World test didn’t even work. Heck i copy/pasted a couple of your script examples to see if i could somehow get PHP to work. I tried the script tags, script tags with a type specified even slung in a the regular php tags but nothing. WAMP/LAMP/MAMP + Fluid (or similar apps for windows/linux) will do that out of the box.
I realize these comments seem quite harsh but i’m merely pointing things out that strike me as odd.
Here is my problem and maybe someone can help with this?
I have installed it, set the sdk for android level 5, and still nothing . It keeps saying this project not configured for android.
My advice would be wait for Flash CS5 to be released and build an iphone app using the new deployment tool, should be a lot easier than learning C!
I agree this looks quite promising, but lacking PHP support is there any way a titanium-built app can connect to external data sources such as a MYSQL server? If so, has anybody seen any info on this?
Hi Guys
Here are six more great Titanium tutorials.
http://www.youtube.com/user/cheetomoskeeto
Enjoy
With the iPhone OS4 announcement today, seems Apple is trying to stop the use of intermediary translation compilers like Titanium.
This could be a massive blow.
http://developer.appcelerator.com/blog/2010/04/apple-4-0-and-titanium.html
That’s exactly what I was thinking; why put all the work into an iPhone app if Apple isn’t going to approve it?
This really sucks; I was looking forward to learning Titanium.
I agree, it seems Apple might want to put a stop to companies like Appcelerator. Wonder what the outcome will be over the coming weeks when they get clarification from Apple and if it will halt this run to stuff like this and phonegap.
Seems pretty certain that Apple will not allow any third party frameworks such as this to create native apps. This includes the flash cs5 compiler and possibly Unity3d. Daring fireball has a good post about it
http://bit.ly/byorsN
He sums it up well by saying:
“What Apple doesn’t want — and as we see now, is not going to allow — is for anyone other than Apple to define the framework for native iPhone apps. What Apple is saying here is, if you’re going to write a native iPhone app, then you need to target our platform; if you want to do something else, then target the iPhone with an optimized web app.”
This seems par for the course with Apple and for a site dedicated to web technologies I was kinda surprised to see this post, though I suppose most of you are using Macs and iPhones already so I guess that’s why.
I know the user base is no where near but I kinda thought that webOS would be a better mobile platform for this site to work with. Put all that HTML5 and Javascript knowledge to direct use rather than using middleware. The SDK works in Mac, Linux or Windows and Ares will let you make apps from within a browser.
Yeah seem’s like Apple want’s to block Adobe’s Flash CS5 to compile apps for iPhone.
There’s no reason except for Steve J hating flash.
Sucks for the Devs
I’ve read somewhere there is a way to get around these rules.
As i understand SDK’s like Unity3d doesn’t compile stuff but rather creates a “ready-to-compile” xCode project. That could be the loophole that SDK’s like Titanium are rooting for.
WebOS anyone?
Apple is going to ban all frameworks for iPhone Developement in OS 4.
Only Objective-c and C++ Allowed!@
According to a Tweet from @jhaynie (CEO of Appcelerator), it looks like Apple could just be targeting Adobe Flash CS5.
http://twitter.com/jhaynie/status/11894517776
and
http://developer.appcelerator.com/blog/2010/04/update-on-apple-sdk-4-0-and-tos.html
Great summary of Titanium and the possibilities.
I like your easy-to-follow style of explaining things (yes, i’m new to nettuts ;)).
Looking forward to your full tutorial, thanks a lot!
Thanks, Rick! Great to have a new reader!
I think titanium may be useful for blackberry and android, but not iphone. with the potential of banning non native development I wouldn’t bother getting too far into it for iphone. Learn objC. I think apple is right to shut out non native apps since that last thing I would want to see is a bunch of bloated 3rd party apps written by someone with little or no real world programming experience showing up in the app store.
Just not worth the potential headaches. I will look into it for Android though and blackberry.
I was really excited to have a look at this tuts series but it appears to be defunct now that Apple have updated their TOS for OS 4.0 banning intermediary layers.
It’s just killed Titanium, MonoTouch and Flash CS5 on the platforms so there’s little point in investigating this any further.
Looks like we’re all stuck. If you want to deploy for iPhone OS, you’re going to have to learn Obj-C.
It would be great (i mean really, really awesome) if Tuts could do a premium series on developing for mobile platforms, centering on both iPhone and Android. There’s a severe lack of accessible information geared towards web devs on deploying for these platforms and with mobile gaining traction at an exponential rate, it’s important that we learn these skillsets.
Agreed, but i don’t think Nettuts is the place for tuts on how to build non-web applications for mobile devices. Web-applications however would be a good idea.
I personally would btw not be using a 3rd party / private framework. Knowing Apple they will apps from Titanium and some others (except for Flash of course ;) ) and then kick them out of the appstore 3 or 4 months down the road. That means you’d have to completely start over.
Unless Titanium finds a way to compile in to a XCode project so a developer could then build the with XCode, which basically bypasses Apples new TOS.
I was really excited about this as well… I don’t know what apple is thinking. It seems to me the more people they have developing for iPhone the better. I think they are making a huge mistake. A developer I work with just spent months of his time working on an app using monotouch… Now he needs to start over in a language he has zero experience with. And I’m sure there are many others in the same boat.
Jeffrey – What are your plans for the tuts+ app now?