Awesome

Motivation

This repository showcases the use of state machines to modelize user interfaces. The chosen technologies are :

• hyperscript for describing the screens of the interface in a portable way
• ivi for rendering
• state-transducer as state machine library
• web components in order to have a reusable and portable implementation

Portability was important as the underlying idea is to port this application into many different front-end frameworks. So far, implementation exists for :

• inferno
• nerv
• react
• svelte

Installation and execution

The application is built with parcel. To run it :

npm install

npm run start

Alternatively, you can peruse the codesandbox.

State machine

The state machine modelizing the search application is as follows :

Notes

17K minified gzip. Probably can be brought down through better config... and substituting json patch (that is 3KB gzipped) for a mere function