Discussion on: Imba - a JavaScript alternative for increased developer productivity

[konung]

:) That's a good problem to have :)

[konung]

@somebee I started going through docs on imba.io website ❤️, and one thing that I found missing/WIP ( for my use cases) is global state-managment Redux-like.

I understand it's possible, but can't find a doc or an exmple or a video-tutorial of one. I noticed you recorded a lot of meetups - is there one per-chance where you discuss & show it?

[Matias]

Documentation on state is right around the corner and is being discussed in the Discord community right now, but here's a quick answer:

How do I manage global state? / Where do I use Vuex/Redux/Mobx?

The answer is mind boggling because of how simple it is; you don't. It kind of feels like something is missing, coming from the big web frameworks where thinking about state is a huge part of the day to day work.

When working with the web directly, instead of through the virtual DOM layer of abstraction, it can be as simple as this:

1) Make a new file for state to live in - for example state.imba
2) Export a regular Javascript object to use as the default state - for example:

export let state = {
    answer: 42,
    question: "The Ultimate Question of Life, the Universe, and Everything"
}

That covers the concept of global state, MUTATIONS and GETTERS. For the concept of ACTIONS we can add this, for example:

export def increment
    state.answer++

export def decrement
    state.answer--

3) Use it wherever you need. Here's a full app that imports the state above and uses it for an important calculation:

import {
    state
    increment
    decrement
} from './state'

tag app
    <self>
        <h2>
            if state.answer !== 42
                "A number"
            else
                state.question
        <button @click=decrement> "-"
        <pre> state.answer
        <button @click=increment> "+"

imba.mount <app>

Here's a little repo of the above example: github.com/codeluggage/imba-basic-...

[konung]

Wow . This is awesome !

One more question:
Can you bind to state ? If state changes from one component can you force an automatic update in another component connected/dependent on the same state variable ?