Application Architecture Guide
This guide explains the underlying structure of a Fitbit application, and how the various elements are related.
A new application typically begins with the following folder structure:
/app/ /common/ /companion/ /resources/ /settings/
This folder structure allows the build process to correctly compile and bundle the application for installation on the device, and build the companion and settings for installation on the mobile device (if required).
/settings/folders are optional.
/companion/ folders can contain multiple
During the build process, the scripts are automatically compiled, bundled and optimized by the TypeScript compiler and rollup.js. This produces a single ECMAScript 5.1 file for the application, and another file for the companion.
/settings/ folder should contain a single React
JSX file, named
This folder contains the application logic which executes on the device. Code in this folder has access to the Device API and is capable of interacting directly with the presentation layer, communicating with the companion, or reading and writing settings.
index.ts file must exist in this folder, and must not be
empty, or the build process will fail.
This folder contains the companion logic which executes on the mobile device. Code in this folder has access to the Companion API and is capable of making direct requests to the internet, and communicating with the application.
index.ts file exist in this folder, the companion will be
Files within this folder can be shared between the application and companion to minimize duplication. Create each file as an ES6 module, then import that module into your application or companion.
The build process will automatically perform tree shaking to exclude any unused modules from the final output.
This folder contains all of the resources which are bundled with the application during the build process.
This is the main Fitbit SVG file where the application user interface markup is defined. This is a mandatory file.
This Fitbit SVG file controls which system widgets are available for use within
index.gui file. This is a mandatory file.
Fitbit CSS files can be included in the application by creating a
/resources/*.png and /resources/*.jpg
All image files which are included in the resources folder can be used in the
presentation layer by referencing them within an
<image> element in the