How Does Appcelerator Titanium Mobile Work?

Question

I'm working on building an iPhone app with Titanium Mobile 1.0 and I see that it compiles down to a native iPhone binary. How does this work? Seems like it would take a lot of heavy lifting to analyze the JavaScript code and do a direct translation into Objective-C without having a superset language like 280 North's Objective-J and Cappuccino.

Answer 1

If I package my simple ample code I get a ~80MB gzip archive (original Code ~1kB). Within the package - among others - you can find my source html and js files. There are also a lot of libraries (ssl for example) shipped with the package (because you can have low-level access to a lot of things within this framework).

I think that they take your code and wrap around some kind of interpreter software and libraries. In my case it would be like if I pack my html and js code next to a tiny browser that only displays my site.

How ever, as long as the code works on every supported system in the same way its a nice thing.

Answer 2

I think that Appcelerator just takes all your HTML and JavaScript code and packs it into the executable binary. This is similar to Adobe's Flash CS5, which takes all the flash resources and places them into the binary, not in the App bundle. Flash does, however, really compile the ActionScript code - in contrast to Appcelerator, which just uses the JavaScript code and Apple's UIWebView (so I think at least).

The corresponding Wikipedia article also leads me to this conclusion, since it states that they support jQuery, Prototype etc. out of the box. On the other hand, it claims that the AppCelerator cross-compiler was compiled using itself, which would be evidence of a native compiler. Now I am confused...

Answer 3

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.