What occurs to the JavaScript code following the compilation of the app using Titanium Mobile?

After installing Titanium from appcelerator, I successfully built the "KitchenSink" example application.

Now, I'm curious about where the javascript code ends up in a built app.

I searched through the Xcode project and the resulting application located at 

Library/Application Support/iPhone Simulator/....KitchenSink.app
, but couldn't find any function names or string texts from the .js files.

The closest information I came across was an answer on How Does Appcelerator Titanium Mobile Work?, although it didn't completely clarify the process for me.

My question is: Is the javascript code compiled into binary code (and if so, what compiler is used?), or is it transformed into a special data format and interpreted during runtime?

Update:

In the build/android directory of KitchenSink, I found:

michal:bin mac$ find . -name table_view_layout\*
./assets/Resources/examples/table_view_layout.js
./assets/Resources/examples/table_view_layout_2.js
./assets/Resources/examples/table_view_layout_3.js
./assets/Resources/examples/table_view_layout_4.js
./assets/Resources/examples/table_view_layout_5.js
./classes/org/appcelerator/generated/examples/table_view_layout.class
./classes/org/appcelerator/generated/examples/table_view_layout_2.class
./classes/org/appcelerator/generated/examples/table_view_layout_3.class
./classes/org/appcelerator/generated/examples/table_view_layout_4.class
./classes/org/appcelerator/generated/examples/table_view_layout_5.class
michal:bin mac$ unzip -t app.apk | grep table_view_layout
    testing: assets/Resources/examples/table_view_layout.js   OK
    testing: assets/Resources/examples/table_view_layout_2.js   OK
    ...

In my exploration of app.apk, all I could find were class files corresponding to each javascript file. This led me to believe that on Android, javascript is compiled for JVM. But then why can't these be found in app.apk?

javascriptiphoneandroidobjective-ctitanium

Answer №1

Contrary to popular belief, Titanium is not simply a wrapper around a web view like Phonegap. While Jeff's explanation in the linked answer is technically accurate, Marshall Culpepper offers a more insightful perspective:

It is true that Titanium Mobile initially utilized the WebView in both Android and iOS before version 1.0. However, since our 1.0 release in March 2010, this has changed significantly.

Post 1.0, we have incorporated two distinct JavaScript runtimes into our applications, eliminating the need for a WebView entirely. The entire app execution, from beginning to end, is now controlled by JavaScript, supported by a wide range of Native APIs that facilitate seamless integration. This spans UI elements, core functionalities like Networking and Filesystem operations, database interactions, and OS-specific features such as JS Activities in Android.

Regarding the JavaScript runtime aspect, we use a modified version of WebKit's JavaScriptCore in iOS and a snapshot of Rhino 1.7 R3 CVS in Android. The handling of your JavaScript source code varies based on the platform, generally following these steps:

  • We analyze the source statically to identify references to Titanium modules
  • Localization strings, app metadata, and density-specific images are converted into platform-specific equivalents
  • In iOS:
    • An XCode project/configuration is created
    • JS Source is base64 encoded and embedded as a variable in a generated C file
    • The final binaries are produced using xcodebuild
    • Provisioning profiles, signing keys, etc., are applied
    • iTunes and related tools are used to deploy the IPA to iOS devices
  • In Android:
    • An Android/Eclipse project is set up
    • In "Development" mode, JS source is added as APK assets
    • In "Distribution" (production) mode, the JS is compiled to Java bytecode with the Rhino JSC compiler
    • dex, aapt, and other Android SDK utilities are employed to build the final APK
    • adb and keytool handle installation on emulators/devices

While there is much more intricacy to delve into at each step, the primary message is clear: we no longer rely on WebView as our JavaScript engine. Nevertheless, there is provision for embedding WebViews if needed, accompanied by straightforward integration to access Titanium APIs within them.

Answer №2

Jhaynie's explanation in the linked question highlights how Titanium takes your JavaScript code and transforms it into something akin to Objective-C.

Typically, in a web application, the browser interprets your JavaScript and internally executes associated native code (potentially C++). For example, when encountering a script like getElementById(), the browser will utilize its own C++ methods for implementation. However, Titanium anticipates this JS->C++ (or JS->Objective-C) conversion in advance and compiles it directly. Although an interpreter remains open for dynamic code, the tool aims to convert and compile as much as possible.

This process results in a significant departure from the original script appearance. Any elements requiring interpretation undergo transformation, altering symbols (e.g., myTestFunction() could become A() or even 10001101001101).

The conventional use of JavaScript involves real-time interpretation by a runtime program. In contrast, Titanium preprocesses the script similar to other programs, such as web browsers do. It identifies dependencies on the Titanium API within the script and maps symbols directly to Objective-C for iPhone applications.

  • JavaScript pre-processing:

    Titanium anticipates the execution logic of the script based on its dependencies with the Titanium API and performs necessary setups. This enables efficient mapping of symbols to native code before actual runtime interpretation occurs.

  • Compilation where feasible:

    By analyzing code interpretation and dependencies, Titanium determines what portions can be compiled and what must remain interpretable, preserving Javascript dynamics. While details about this selection process are scarce, the resulting interpreted script is more efficiently mapped to native code, offering improved performance compared to regular JavaScript.

    On iPhone, compilable C code is processed using GCC to generate a native binary.

  • Create a runnable app:

    With the compilation and interpretation processes complete, you now possess a mobile-ready application. The compiled code operates swiftly, while the remaining interpreted sections maintain efficiency for near-instantaneous speed.:P

I hope this clarifies the underlying mechanisms; that's the gist of it! :D

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Assess the scss styles specific to components following the global min.css in a React application

ISSUE Imagine we have a min.css file that needs to be imported globally: index.js import ReactDOM from "react-dom"; import App from "src/App"; import "library/library.min.css"; ReactDOM.render(<App />, document.getE ...

javascriptcssreactjsperformancesass

Smart TV device browser

I am encountering an issue with my application that displays a stream from the server to a WebView. The application works fine on my phone, but when I compile it on my TV box (Android TV box x96), the WebView does not display anything. Even after installin ...

androidwebviewandroid-tv

Submitting form via ajax whenever triggered

I am looking for a way to submit each form individually by clicking on the submit button. My question: How can I send each form separately and display the results accordingly? The code I have tried does not seem to be working, as nothing is being sent and ...

javascriptjqueryhtmlajax

Tracking the progress of downloads using AFNetworking 2.0 along with NSProgress and a customized ProgressView

I am currently facing some confusion while trying to track the progress of a Download Task using AFNetworking 2.0. I have created a singleton object to centralize my download operations, specifically for downloading podcast files within my app. Within my ...

iosiphoneobjective-cios7afnetworking-2

JavaScript, detecting repeated characters

I need to create a script that checks an input box (password) for the occurrence of the same character appearing twice. This script should work alongside existing regex validation. I believe I will need to use a loop to check if any character appears twice ...

javascriptvalidationloopsfor-loopcharacter

Advancing past the stage of developing basic functions in the document.ready() event handler

When I develop a website, I have a personal preference of creating a main JavaScript file with window.load and window.ready functions at the top. I find it easier to refactor any logic into separate functions within these functions for better readability. ...

javascriptjqueryrefactoringdocument-ready

Guidance on using an array to filter an object in Javascript

Looking at the object structure in Chrome Dev Tools, it appears like this: obj: { 1: {...}, 2: {...}, 3: {...}, 4: {...}, 5: {...}, } On the other hand, there is a simple array as well: arr: [1,3,5,7] The goal here is to filter the object bas ...

javascriptarraysvue.jsecmascript-6

Creating a custom if equals helper in Handlebars but encountering compilation errors

I have implemented a custom helper in Handlebars to create an if == "some string" type of helper. Here is the code for the helper: Handlebars.registerHelper('if_eq', function(a, b, opts) { if(a == b) // Or === depending on your needs ...

javascripthandlebars.js

Develop a personalized event that is compatible with all types of selectors

If I have a simple script that changes the background color of an element when clicked: $(".foo").on("change.color", function() { $(this).css("background-color", "red"); }); $(".foo").click(function() { $(this).trigger("change.color"); }); Currently ...

javascriptjquery

Submitting dataURL via Ajax using multipart/form-data

I'm currently working on a program that is responsible for extracting a dataURL from a canvas element and then transmitting it to the server side for conversion back into a JPG file. Now, my next step involves retrieving this image from the server pro ...

javascriptphpjqueryajaxforms

Is it possible to save any additions made to the DOM using JavaScript into local storage, so that it can be retrieved even after the page is reloaded?

Let's consider a scenario for testing purposes: you have a function that appends <li> elements inside an <ol> container, and you want to retain all the list items added. Is there a way to store them in Local Storage (or any other local sto ...

javascripthtmlcss

Using a JSON array, you can perform JavaScript replacements in a string by utilizing regular expressions

In order to replace all instances within {} with the corresponding data from a JSON array, I need to use a regex pattern that is case-sensitive. The number of placeholders enclosed in {}s may vary depending on the page. s ="<address><div>{Nam ...

javascriptregexjson

Viewing a PDF within a MUI tooltip

Currently, I am facing an issue where I am attempting to show a preview of a PDF file inside a Material-UI (MUI) Tooltip when a user hovers over a MUI ListItem. While I have successfully displayed previews of PNG and JPG files using Next.js' Image com ...

javascriptreactjspdf

creating a personalized gson converter with retrofit while making a GET request

My retrofit interface contains the following code: @GET void getName(@Query("name") String name, Callback callback); The HTTP request format for the above code is as follows: /getName?name=abcd However, in my case, the URL format should be like this: ...

javaandroidjsongsonretrofit

GSON version 2.0 and up: Unwrap and dissect any type of data fields

tag, I am currently working on retrieving a JSON string from a web service. The structure of this JSON string may vary depending on the content sent through the get request. I have been exploring examples using Gson, where they discuss converting the JSON ...

javaandroidjsongson

monitoring checkbox status in vue?

When using Vue, I have created dynamic checkboxes that display as shown below: <li v-for="element in checklist" :key="element.id" class="block w-full p-1"> <div v-if="element.taskId == task" clas ...

javascriptvue.jscheckboxaxios

When I attempted to use jQuery to access the innerHTML of list items, I encountered the issue of it returning as Undefined

For my grocery list application created with Angular 4, I need the user to click on an item and have it added to the bookmarked section. Despite using jQuery to access the innerHTML of the li when hovered over, the value keeps returning as "undefined." In ...

javascriptjqueryhtmlangular

What is the best way to calculate the difference between two dates in MongoDB?

I have two key dates: the sales_date (date of service sale) and the cancellation_date (date of service cancellation). I am looking to calculate tenure by month by subtracting the cancellation_date from the sales_date. Currently, this is the code I have: ...

javascriptnode.jsmongodbexpress

Include a Javascript library in an HTML document being dynamically loaded using Ajax and Jquery

My current project involves loading content from a separate HTML file using Ajax and handling specific Javascript functions. Here's what I'm aiming to achieve: I have two sets of files - index.html and modal.html, along with script.js and modal. ...

javascriptjqueryajax

Ways to refine date results using JavaScript

Here is the JavaScript code I have: $(".datepicker").datepicker(); $(".datepicker-to").datepicker({ changeMonth: true, changeYear: true, maxDate: "0D" }); This code ensures that the date selected cannot be beyond the cur ...

javascripthtml