App Tailoring

While the bulk of an iTwin.js app is portable, it must also be tailored to fit each configuration and platform well. An app's UI and functionality may vary if it supports more than one configuration. And, an app can integrate platform-specific functionality.

App Packaging and Deployment

An app is prepared for deployment by "last mile" scripts. Different scripts will be used to package and deploy Web apps, Electron apps, and mobile apps. The packaging of the app will vary by configuration and target platform. The scripts will normally select different entry points for different deployments, as explained next.

Configuration-Specific Main

An app frontend typically has a different "main" for each configuration to do the following:

• Change the app's UI and functionality to suit the configuration and platform.
  • Do platform-specific initialization:
    • UI "chrome"
    • Entitlements
    • Other platform integration
  • Tailor the GUI
• Configure interfaces on the client side.
  • You may apply the backends-for-frontends pattern.
  • Web apps have several configuration options, as described in the article on writing an interactive Web app.

An app backend may have a different "main" if it supports more than one configuration. For more information, see:

• Web app
• Desktop app
• Mobile app

The last-mile packaging and deployment scripts select the appropriate main for frontend and backend.

Change the GUI

An app's UI is contained within its frontend. The look and feel of the GUI is largely contained within its HTML and CSS resources. Swapping in a different GUI can be a simple as swapping in a different style sheet or HTML page, leaving the supporting JavaScript the same. You can develop and test the various version of the GUI in a single development environment. You can also write the frontend JavaScript to tailor the GUI at run time. Configuring the UI is generally done in the configuration- and platform-specific frontend main.

Use Platform-specific Modules

An interactive app can use platform-specific modules that are supplied by the host platform in JavaScript. Mobile platforms such as iOS and Android, provide JavaScript classes for services that are specific to mobile apps. The Electron desktop platform provides all of the features of nodejs. Platform-specific modules must be used in guarded code.

Backends for Frontends

Following the backends-for-frontends pattern, an app would ideally use different backend services for different configurations, rather than trying to rely on a one-size-fits-all backend service. The iTwin.js RpcInterface architecture encourages and supports the BFF pattern. It is easy to write and deploy app-specific backends, because a backend is just a TypeScript class that deals only with the app's functionality, not communication details. It is easy for an app to choose the mix of backend services that match its configuration, because RpcInterfaces, as TypeScript classes, are first class objects that can be managed at runtime.

Last Updated: 15 June, 2021