NB: You can play with the example & inspect its code HERE
ADAX greatly facilitates sharing state/logic between different frontend technologies/libraries/framework. Our small test combines Vanilla Javascrit/Typescript, React and Vue to make them all access, manipulate and share the exact same state!
Our small example uses Vanilla Javascrit/Typescript for the result panel then Vue and React for the "FANS" areas. One can vote for the Red vs Blue team within the "FANS" areas and see the detailed results in the result panel.
Note that both "FANS" areas show their respective mood with an emoji. If it's a tie both moods are neutral 😐. Otherwise, the winning team displays 😃 and the losing one 🤬. Click/Vote to see the results pannel update immediately. On the other hand, the "FANS" areas only updates if there is a "change of mood".
Implementation Overview(Code in: "./src/")
State & logic (Code in: "./src/state.ts"): Define the app's state & the functions query or change that state! It also holds the rules of the app. Both this state and the functions to query and mutate it are used by all UI components described below.
Vanilla code (Code in: "./src/main.tsx"): Contains the Vanilla code for the result panel and sets both React and Vue.
Vue (Code in: "./src/Vue"): Contains the Vue code for the Red FANS area.
React (Code in: "./src/React"): Contains the React code for the Blue FANS area.
NB: You can play with the example & inspect its code HERE