Skip to main content

MSFS Avionics Framework

This avionics framework is a React-like framework based on Typescript and JSX, which allows users to leverage the powerful component composition skills that come with frameworks like React, while keeping the implementation light enough and opinionated enough to promote MSFS TS/JS development best practices.

info

FSComponent and the accompanying avionics framework documented here is a separate extension of the official MSFS SDK presently being used in several new avionics systems. As such, it represents a somewhat-fluid API that may change slightly over time as more of the framework is developed.

If you are using only the official MSFS SDK components and not referencing this avionics framework, many portions of this documentation will not apply.

A Primer on FSComponent​

FSComponent is heavily based on the React API and will feel very familiar to users who have done work in React and/or with JSX. However, while frameworks like React, Angular, and Vue.js all offer excellent ways of componentizing code and maintaining reusablity with good architectural boundaries, they unfortunately represent a kind of "worst case" performance load when using them with a real-time, low latency system like a game or a simulation, for the following reasons:

  • Props and state changes potentially cause a large number of virtual DOM nodes to be generated on changes as components re-render.
  • Changes originating high in the tree can cause huge swaths of nodes to render, and often the causes and solutions for optimization are not always intuitive for users.
  • Resultant DOM nodes are generally cached, but the way they are used and inserted can cause the area to re-paint, an operation that is to be heavily avoided with the Coherent GT JS framework used inside the simulator.
  • The garbage generated from all these allocations can stress the garbage collector, causing GC pauses (seen as sim stutters) as large amounts of no-longer-needed virtual and real DOM nodes and accompanying data is collected.

As a result, FSComponent was built avoiding these issues by promoting paradigms that allow developers to keep local state and update only as necessary.

Similarities Between React and FSComponent​

  • Components are built using JSX and classes, with a render() method.
  • Components can be passed properties from their parents.
  • Components can be reused, nested, and can be passed children for display and manipulation.

Differences Between React and FSComponent​

  • All FSComponent components are class based; there are no functional components.
  • Components do not re-render on props changes.
  • Since there are no automatic re-renders, there is no need for a state or setState().
  • Use of ref is actually encouraged as opposed to discouraged.

Avionics displays are generally extremely stateful, and thus this alternative approach fits excellently into the space as well as provides a very robust performance path.