React.js

Для создания пользовательского интерфейса в системе используется библиотека React.js.

Подробнее о работе React.js в документации.

MobX.js

Для управления состоянием приложения используется библиотека MobX.js

MobX добавляет возможность наблюдать за существующими структурами данных, такими как объекты, массивы и экземпляры классов. Т.е. используется концепция observer/observable.

Базовые элементы библиотеки - это @observable, @computed, runInAction, reaction.

Пример класса с наблюдаемым свойством:

class ExampleModel {
    @observable
    public id: string;
    @computed
    public get name(): string {
        return this.id + '_example';
    }
}

При использовании React, можно сделать компоненты реактивными, обернув компонент в observer из пакета mobx-react-light:

interface ExampleComponentProps {
  model: ExampleModel;
}

const ExampleComponent: React.FC<ExampleComponentProps> = observer(props => {
    const { model } = props;
    return (
      <div>
        {model.id}
      </div>
    );
});

observer говорит React-компоненту реагировать на изменение данных. MobX гарантирует, что компоненты будут перерисовываться, когда это необходимо, но так же не больше, чем нужно. Для правильного реагирования компонента-наблюдателя, ему нужно передавать не внутренние свойства наблюдаемых объектов, а весь объект целиком, т.к. в первом случае будет передано лишь значение, изменение которого ни на что не повлияет.

Подробнее о работе MobX.js в документации.