API Development

Freedom of Choice: Alternative Editors for Building Titanium Apps

| Jason Kneen |

What is your IDE of choice?

Developers love their IDEs!

An IDE will often have a large and faithful following who will spend a good deal of time trying to convince other developers of the benefits of their IDE and the faults of the other IDEs. This is one reason that it’s great that you can build Titanium mobile apps with any IDE! As we have said in previous posts, any tool that is capable of editing text will work!

Now, depending on your level of comfort with Titanium and your IDE, you may be convinced to try a couple of the alternative IDEs out there that have some extensions for Titanium to make your life even easier.

GitHub Atom

Atom is a free source editor created by the GitHub team and released in 2015. It’s based on Electron and was created to be a “hackable text editor”. While creating Titanium apps with Atom does not require a special plugin, Axway created an Atom plugin that makes things even easier. The Titanium Atom plugin adds snippets, commands, deployment, and more.

Here’s what you need to get started: Appcelerator development tools and UI package for the Atom text editor in GitHubAtom

Microsoft Visual Studio Code

For many years, my Titanium IDE of choice was Appcelerator Studio before I moved to using Atom and the CLI. Studio comes with a load of features including integrated debugging and tools to help design the layout of your Titanium apps, but I switched to Atom to get a faster and more extendable development experience using the CLI.

All that changed in 2016, when Microsoft released Visual Studio Code – a free, lightweight, extensible source code editor also based on Electron. Although it shares the same “Visual Studio” name as Visual Studio Professional, the differences between full VS and VS Code were very evident. VS Code was designed for Node.js and quick to load and very responsive (even with multiple instances running).

In 2018, Axway released a VS Code plugin for Titanium that added all kinds of benefits to Titanium developers including commands for building, deploying, syntax auto-complete, and more! There have been more recent releases of the plugin since then that continue to add more features and stability.

Here’s what you need to get started: Titanium Extension for Visual Studio Code in the Visual Studio Marketplace

VS Code

Once installed, you’ll benefit from the following features:

Build tools

These are available in the command palette and help you quickly build for iOS, Android to simulator or device or AppStores.

Autocompletion 

On initial launch, autocomplete suggestions are generated for the active Titanium SDK in your project and the Alloy version in your active CLI.

Autocompletion helps speed up development by providing quick references to Titanium APIs and Alloy markup as well as references to modules, widgets and assets within your project. Autocomplete suggestions can be regenerated by running the Generate autocomplete suggestions command from the command palette.

Titanium APIs and Alloy markup suggestions are provided in Titanium JavaScript and Alloy XML and TSS files. This includes classes, properties, methods and events.

autocomplete

Project references

Suggestions for other controllers, modules and widgets are presented when referencing through a Titanium function or Alloy markup.

Class and ID references

Suggestions for classes and IDs declared or defined in related Alloy XML and TSS files are presented.

Images

Image suggestions are presented where appropriate.

Open related files

Opening related Alloy files is supported (see above commands list). This can also be done by right-clicking in an active editor.

  • From View, open related Style and/or Controller
  • From Style, open related View and/or Controller
  • From Controller, open related View and/or Style

Jump-to-definition

Jump-to-definition support is provided for quickly accessing the definition or usage of Alloy markup and to easily generate new definitions. Images can be previewed inline.

Alloy

From Views, click through to style definitions for tags, classes and IDs, in related or global TSS. Click through to event definitions in the related controller. Definitions can also be presented inline.

A prompt is displayed to generate undefined styles or functions.

Strings

Click on localized string references to jump to their definition. The option to generate undefined strings is provided.

Images

Click on an image path to open a preview. For iOS, where multiple scaled images exist with the same name the first is opened (e.g. @2x).

Snippets

Code snippets for common Alloy and Titanium APIs are provided for use in Alloy controllers and modules. A description of the snippet and link to documentation are provided where appropriate. Type the prefix and the autocomplete overlay will be displayed with matching snippets.

We’re working on this extension all the time, adding new features and capabilities – and the latest update being worked on will add debugging!

The extension is open source, so you can access the code, fork and submit your own pull requests for changes. You can find the repo at Appcelerator development tools and UI package for Visual Studio Code on GitHub.