For an app like Figma, for example, how do engineers deal with the various states a user can be in?

A user can select an element. This element is now surrounded by a thin blue line to indicate it was selected. The user can then hover over another element. The thin blue line on the original element remains but the element that currently has the mouse's focus is highlighted in purple. On right-click, a context menu will show different options depending on what the user is currently hovering over.

Of course you can use state machines to model these sort of interactions but that also begs the question of when do certain actions occur:

  • If I click an element, does it notify a global state machine of this click (GlobalSM.send('click', { type: 'UI-Rect', id: 'xxx' })) and then that state machine handles notifying other state machines (in this example, notifying the Selected state machine and ContextMenu state machine), or do components get access to the state machines themselves?
  • Where should the data layer come into play? Should the state machines be the only ones with access to any mutations (create, update, or delete)?

I'm not even sure if I'm asking the right questions honestly. I've tried creating a few interaction-heavy apps and keep coming to a sticking point where I am unsure how to deal with the complexity of state. Extending existing features takes a very long time due to poor architecture choices.

  • That's a huge topic. Off the top of my head, you may want to google "functional reactive programming", RXJS, web javascript/typescript frameworks (eg Angular, React) and Electron js, if you want a desktop app. Might be also worth working through example apps in documentation on their websites. – schrödingercöder Jan 23 at 20:38
  • 1
    Different systems will handle this probably differently, with different parts of the problem solved on different layers and levels. This makes the question not really suited for the Q&A format of this site. Moreover, it would be more focussed if you decide what "engineers" you mean in your first sentence - the engineers who build UI frameworks for such application, or the engineers who build applications by using such frameworks. – Doc Brown Jan 24 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.