Introducing webpack support for Titanium

webpack support for Titanium
webpack support for Titanium

Starting with Titanium SDK 9.1.0, you can now use webpack as a build pipeline for all your app’s assets, delivering a completely new development experience for Titanium.

Visit our webpack guide if you want to jump right into all the technical bits.

Why webpack?

The default processing of source code in a Titanium project covers everything from transpilation and polyfilling to basic Node.js shims. However, it lacks one important thing: An easy way to be customized and add new features per project.

This is where the new webpack build steps in. It brings the huge webpack ecosystem to Titanium, allowing you to easily add new features to your project. But don’t worry, you don’t have to deal with webpack’s extensive configuration files. Everything is pre-configured, so it works out of the box.

Some of the great features that come with the webpack build include:

  • Faster build times for both clean and incremental builds, especially for larger projects.
  • Easily use your favorite modules from NPM. Just install them into the project root.
  • Highly customizable via a simple plugin API, which allows you to add new features by adding additional loaders and/or plugins. For example, @titanium-sdk/webpack-plugin-typescript adds support for TypeScript to your Titanium project.
  • Web UI to view build results and analyze your app bundle assets.

Getting started

All webpack builds in Titanium are managed by a plugin for the Appcelerator Daemon (or appcd for short), which starts a build on-demand and also makes sure to stop it after a certain amount of inactivity. This ensures fast build times while you are working on your project and automatically saves system resources when you stop and don’t need the webpack build anymore.

For appc CLI versions 8.0.0+, appcd comes bundled with the CLI so you will already have it. If you use the ti CLI you need to install appcd globally on your machine.

npm i -g appcd

After appcd is installed you need to add @appcd/plugin-webpack by running the following:

npm i -g @appcd/plugin-webpack

Appcd will automatically detect the new plugin and start it on demand. Now that all the necessary tooling for webpack is installed you can create your first Titanium project with webpack support enabled.

# appc-cli
appc new --template webpack-default

# ti-cli
ti create --template webpack-default

Want to migrate an existing project to the webpack build? No problem, just follow our migration guide.

Benchmarks

Last but not least, let’s take a quick look at the improved build times we mentioned earlier. For this, we ran some benchmarks on two different Alloy projects.

The first numbers are for our very own KitchenSink, a relatively simple example app that demonstrates a lot of the APIs that Titanium features.

Task Standard Webpack
Clean build  32s  30s 
Incremental build 8s 789ms 

For such a small project the gain for the clean build is not that noticeable, but the incremental build with webpack shaves off a good seven seconds. That’s quite nice already.

Now, the bigger the project gets, the better the build time improvements become. The following benchmarks were done with a large-scale real-world project that contains ~100 controllers/views, ~20 widgets, and NPM dependencies.

Task Standard Webpack
Clean build  2m 6s  1m 36s 
Incremental build 20s 1s 861ms 

Even the clean build is 25% faster now. The incremental build time was also cut down from roughly over twenty seconds to under two seconds!

Further reading

For more details go check out our Webpack Guide.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.