DEV Community: Felix Guerin

Replacing Vuex with XState

Felix Guerin — Mon, 27 Jan 2020 23:21:47 +0000

I have been learning XState and state machines these past few months and I absolutely love it. I decided to build an app using Vue and XState. I wanted to share this with you all, as I have seen a lot of posts, videos, tutorials, etc. on how to integrate XState with React, but not a lot for Vue.

At first, I used Vuex in conjonction with XState. I was inspired a lot by this article from Phillip Parker, as well as this Github repo by the same author. I highly suggest you read the article and check out the code if you haven't already, I learned a lot from it.

Basically, for every feature of the app, I had a Vuex module and a corresponding XState state machine. It was working well but I knew I wasn't using XState to its full potential.

After more research, I found a way of completely getting rid of Vuex and still have a global reactive state that leverages Vue's capabilities, along with sturdy Finite State Machines that make all the features that XState provides available. It more closely resembles the Vue recipe shown in XState's docs.

Instead of Vuex, I use an event bus pattern to manage global state. This means creating a new Vue instance and passing it whatever I want to share between my components. It could be only one instance for a simple app, but most apps will probably benefit from breaking it down into multiple modules (like with Vuex).

Then you can simply pass in this Vue instance what you need from your XState machine. I wrote a function that returns a Vue instance that exposes the machine's state, context and send() method and reacts to changes in the machine.

import Vue from "vue";
import { interpret } from "xstate";

export const generateVueMachine = machine => {
    return new Vue({
        created() {
            this.service
                .onTransition(state => {
                    this.current = state;
                    this.context = state.context;
                    if (process.env.NODE_ENV === "development") {
                        console.log(`[ ${machine.id.toUpperCase()} STATE ]`, this.current.value);
                    }
                })
                .start();
        },
        data() {
            return {
                current: machine.initialState,
                context: machine.context,
                service: interpret(machine)
            };
        },
        methods: {
            send(event) {
                this.service.send(event);
            }
        }
    });
};

You can then write a new file, for exemple fetchMachine.js, where you create an XState machine. You use the generateVueMachine() function and pass it your state machine as an argument, which returns a Vue instance that you can export.

import { Machine, assign } from "xstate";
import { generateVueMachine } from "./generateVueMachine";

const machine = Machine({ /*...machine config */ });

export const fetchMachine = generateVueMachine(machine);

Now I can reference this machine wherever I want in my app and react to its changes by using Vue's computed properties.

<template>
    <button @click="onFetch" v-if="!fetchState.matches('fetching')">Fetch<button>
    <p>{{ fetchContext.fetchResult }}</p>
</template>

<script>
// fsm
import { fetchMachine } from "./fsm/fetchMachine";

export default {
    computed: {
        fetchState() {
            return fetchMachine.current;
        },
        fetchContext() {
            return fetchMachine.context;
        }
    },
    methods: {
        onFetch() {
            fetchMachine.send({type: 'FETCH'});
        }
    }
};
</script>

And that's it.

Here is a link to my app's repo so you can see how I applied this in a real context (the state machine files are in client/fsm).

I would really appreciate any feedback on what can be done better here.

EDIT:
I created a Vue plugin on npm to facilitate this setup an remove some of the boiler plate. You can find it at https://github.com/f-elix/vue-xstate-plugin.

Floating input placeholders with HTML/CSS

Felix Guerin — Wed, 20 Nov 2019 20:13:31 +0000

Here is a cool way to make the placeholders "become" labels as the input receives focus.

Here is a pen with the final result.

First, you have to put the label AFTER the input in the HTML.

<form action="">
  <input type="text" id="fullName" name="fullName">
  <label for="fullName">Full Name</label>
</form>

This will ensure that we can target the label with our CSS.

Then, instead of giving the input a placeholder directly in the HTML, we will use our label as the placeholder. In order for the label to be inside the input, we can use transform: translate(). We can also use a lighter color to really make it look like a native placeholder.

Here is the relevant CSS for the initial state (the values used for the translation can vary depending on font size, positioning, etc.).

    label {
      color: #999;
      transform: translate(0.25rem, -1.5rem);
      transition: all 0.2s ease-out;
    }

Now, to position it on top of the text when the input is in focus, use the following.

    input:focus + label {
      color: #111;
      transform: translate(0, -2.75rem);
    }

It works!

But we still have a problem. The styles are are only applied to the label when the input is in focus. This means that if you type something in the input then focus elsewhere, the label will come back to it's original position.

To fix this, we will have to use the :placeholder-shown selector. This selector allows to style an element whenever an input's placeholder is, well, shown. In our case, we actually want to style the label when the placeholder is NOT shown, so we will also have to use the :not() selector. Finally, for this to work, your input has to have a placeholder. Since we want to use our label as the placeholder text, we can simply write an empty space as the placeholder value (an empty string "" will not work).

<form action="">
  <input type="text" id="fullName" name="fullName" placeholder=" ">
  <label for="fullName">Full Name</label>
</form>

    input:focus + label,
    input:not(:placeholder-shown) + label  {
      color: #111;
      transform: translate(0, -2.75rem);
    }

Now everything works like we want it to.

The :placeholder-shown selector is relatively new, but browser support is pretty good. The only browser to not recognize it is Edge. To remedy this, we can use a @supports query hack to check if the code is run in Edge (you can find more hacks like this at http://browserhacks.com/).

Usually, this hack is used write code that is only supported in Edge. Since we want the opposite, we can add not in front of the condition of the query.

We should also apply the final position to the label before anything else. This way, the Edge browser will display the labels on top of the inputs like a normal form, and the other browsers will apply the 'placeholder' styling to it.

label {
  display: block;
  transform: translate(0, -2.75rem);
}

@supports (not (-ms-ime-align:auto)) {
    label {
      color: #999;
      transform: translate(0.25rem, -1.5rem);
      transition: all 0.2s ease-out;
    }

    input:focus + label,
    input:not(:placeholder-shown) + label {
      color: #111;
      transform: translate(0, -2.75rem);
    }
}

Another possibility for this cool form style is to only move the label when a user types something. For this, you can simply remove the input:focus + label selector. Here is the result.

I hope you found this useful! Let me know in the comments.

Understanding sort()

Felix Guerin — Thu, 03 Oct 2019 16:55:39 +0000

The first time I had to use sort() in a project, I had some difficulty wrapping my head around how it works. I hope this post will help you better understand it.

sort() is a Javascript array method used to (you guessed it) sort an array.

Ok, so far so good.

Its use can be pretty straightforward, as in the example below, where we sort an array of strings by alphabetical order.

const myStringsArray = ['George', 'Matt', 'Sandy', 'Laurent', 'Felix', 'Phil'];

myStringsArray.sort(); // [ "Felix", "George", "Laurent", "Matt", "Phil", "Sandy" ]

Easy! Now let's do the same for numbers.

const myNumbersArray = [2, 7, 4, 13, 20, 5, 15, 18, 9];

myNumbersArray.sort(); // [ 13, 15, 18, 2, 20, 4, 5, 7, 9 ]

Hey that's not right! What is going on here?

Well, by default the sort() method sorts any values passed to it as strings. In this case, the numbers are sorted as "13", "15", "18", "2", etc. It now makes sense, because in an alphabetical order, "15" comes after "13", and "2" comes after "18".

The Compare Function

If we want to use sort() with actual numbers, we need to use the built-in compare function. This callback function defines an alternative sorting order. It takes two arguments, two values that are being compared against each other. The function then returns either a positive value, a negative value or zero.

If we take again our numbers array, we can pass the values of the array in our compare function to sort them in ascending order.

const myNumbersArray = [2, 7, 4, 13, 20, 5, 15, 18, 9];

myNumbersArray.sort((value1, value2) => {
    return value1 - value2;
}); // [ 2, 4, 5, 7, 9, 13, 15, 18, 20 ]

So how does that work?

The sort() method iterates over the array, every time passing 2 values next to each other to the compare function. The compare function then evaluates the difference between the first value and the second. This is what will determine whether the function returns a positive, negative or neutral value.

If the return value is positive, it means that the first value is greater than the second. For example, if you compare 7 and 4, you get 3. Therefore, the first value goes after the second one in our ascending order.

If the return value is negative, it means that the first value is less than the second. For example, if you compare 2 and 7, you get -5. Therefore, the first value goes before the second one in our ascending order.

A neutral value, or zero, indicates that the two values are equal, so the order does not need to change.

You can actually do any operation you want inside the compare function, as long as you return a value.

If we want to sort our numbers array in descending order, we can do the following:

const myNumbersArray = [2, 7, 4, 13, 20, 5, 15, 18, 9];

myNumbersArray.sort((value1, value2) => {
    return value1 + value2;
}); // [ 20, 18, 15, 13, 9, 7, 5, 4, 2 ]

Sorting Objects

Sorting an array of objects is not really more complicated. You can sort them by any property you'd like, but you have to be mindful of the type of value associated with that property.

If we want to sort the objects by a number property, we do it exactly like we did before. We just need to access the property with dot notation.

const myObjectsArray= [
    { item: "chair", price: 400 },
    { item: "bed", price: 1200 },
    { item: "table", price: 800 },
    { item: "sofa", price: 1000 },
    { item: "desk", price: 500 }
];

myObjectsArray.sort((value1, value2) => {
    return value1.price - value2.price;
}); // [
        // { item: "chair", price: 400 },
        // { item: "desk", price: 500 },
        // { item: "table", price: 800 },
        // { item: "sofa", price: 1000 },
        // { item: "bed", price: 1200 }
    // ];

Now for a string (or a date value), we have to add some more steps. Since we can't directly sort the strings found in an object (because we are sorting the objects themselves), we have to access the values inside our compare function. Now, since comparing two strings together won't return a positive or negative value, we also need to return it ourselves.

const myObjectsArray= [
    { item: "chair", price: 400 },
    { item: "bed", price: 1200 },
    { item: "table", price: 800 },
    { item: "sofa", price: 1000 },
    { item: "desk", price: 500 }
];

myObjectsArray.sort((value1, value2) => {
    if (value1.item === value2.item) {
        return 0;
    } 
    return value1.item > value2.item ? 1 : -1;
}); // [
        // { item: "bed", price: 1200 }
        // { item: "chair", price: 400 }
        // { item: "desk", price: 500 }
        // { item: "sofa", price: 1000 }
        // { item: "table", price: 800 }
    // ];

Here, if the first string is "greater" (comes after in alphabetical order)
than the second one, we return a positive value so that value1 is put after value2. Just like with numbers, if the first value is greater than the second, it is put after. If it is less, it is put before. We return 0 when both values are equal to preserve the original order. Otherwise, while both values would be next to each other in the sorted array, their order might change on every function call.

So remember, whenever the values of the objects you want to sort aren't numbers, you need to return a positive or negative value yourself.

Conclusion

And there you have it! sort() is a really neat Javascript native function, and you can do much more complex things with it, but this post covered the basics. Happy sorting!