Vuex? No, it’s X(state)Vue for UI

Rate this content
Bookmark

UI components are built on user flows or state graphs. To manage these states, we usually resolved to boolean variables system like isLoading. But this proves to be buggy and hard to maintain as the codebase grows. There is a better solution. In my talk, we will explore how we can fully control our app's states and develop a more adaptive UI system to users' behavior while keeping the codebase scalable with state machines, in real time.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Maya Charvin specializes in JavaScript, frontend development, and state management for UI. She has written extensively about these topics and shares her knowledge on her website and social platforms.

Maya's presentation focuses on state management for UI in Vue, specifically using X state instead of Vuex or Redux. She explains the benefits of using X state for managing state in modern web applications.

The Composition API is a feature in Vue 3 that allows developers to better control and organize their code. It enables more flexible and dynamic component writing, moving away from the limited options provided by the default template structure.

X state provides a systematic approach to managing state in UI components using state machines and state charts. It offers clear, maintainable, and scalable code structure that can be visually represented, making it easier to debug and test.

Yes, X state can be used with Vue 2 as well as Vue 3. This compatibility allows developers to implement state machine logic in applications using older versions of Vue without requiring an upgrade.

State machines help in making the UI component interactions predictable and manageable by defining clear states and transitions. This structure facilitates easier debugging, testing, and maintenance, and improves scalability and performance of the applications.

Developers can start using X state with Vue by installing the X state library and optionally the X state Vue package for additional hooks and API support tailored to Vue. This setup enables the integration of state machine logic into Vue components.

Maya Shavin
Maya Shavin
33 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk introduces state management in Vue, focusing on the Xstate library for managing state machines in UI components. The bottom-up approach in component development can lead to complexity and challenges over time. Xstate is a JavaScript and TypeScript library designed specifically for managing state machines and state charts for UI components. The Talk provides examples of creating a toggle component using Xstate and emphasizes the advantages of using Xstate, such as code reuse, precise testing, and easy maintenance. The speaker encourages developers to plan ahead and consider state, component, and feature design to write better code.
Available in Español: Vuex? No, es X(state)Vue para UI

1. Introduction to State Management in Vue

Short description:

Hi everyone! In this part, I will talk about state management for UI in Vue, specifically focusing on X state for Vue and UI. Vue 3, released last year, has brought significant improvements, including the Composition API, which allows for more flexibility and control in component development. With Vue 3 and composition, we can easily create dynamic components, such as rendering an image on button click. However, we need to handle scenarios like disabling the button during image loading, showing a loading state, and handling image load errors.

Hi everyone! It's very nice to be here, back to Vue.js London for the second time. How are you doing today? Well, I'm glad, I'm very happy, and I'm even more happy if this conference is going to be in person in London.

Anyway, today I'm going to talk about state management for UI in Vue. And that's not about Vuex or Redux or anything similar. Well, instead, we're going to talk about X state for Vue and for UI.

But right before that, just a little bit about myself, my name is Maya, as you also saw that. And you can find me on Maya Charvin on Twitter or on GitHub, and also on my website, mayacharvin.com. I wrote articles about JavaScript and about frontend development in general, so feel free to check it out.

Okay, so as we all know, Vue 3 was released last year, and it's become a very, very promising update ever since Vue 2, and we all really like how it works. I hope that by now you already have a chance to try it out or even migrate your application from Vue 2 to Vue 3, but either way, if not, then definitely you should check it out.

Anyway, so what's the main thing about Vue 2? Vue 2 has a lot of new features and breaking changes, of course, as always, and one of the nice things about Vue 3 is the Composition API, right? Composition API is a significant improvement. It allows us to actually have more options and more control in how we want to view the component rather than the default option template that very limited in allowing us to write a component in Vue.

Now we can write more and, sorry, now we can write more flexible and more dynamic components, such as functional component easier. And, for example, let's say we have a component that what it does is just render an image when you click a button. This is how you're going to write it in Vue 3 with composition. So, first of all, we have a setup method in the template, and now we can set a local state by using REF. So, we can get a kitty with the REF with the default value is empty, and then we can assign a function to trigger when the user clicks on a button to update this local state to the image that we want once we fetch the image successfully. And then, we return a render function, which will be written in JSX if you want to. So, it's very similar to React in a way, so React developer will be more easier to adapt to the new view, and the render components will render the image component we want according to the local state and attach the event handler. Simple, right? Very straightforward. The output will be click. Get the key thing. That's it. Okay. Nothing very complex here.

But let's say if the product managers now decide to come and tell you, hey, when we click on the image, the image is still loading, but the button is still there. The user can click it multiple times. What are we going to do? We need to handle it by disabling the button while the image is loading. Or if the image is not loading, it's in loading, we need to show the loading state because, let's say, a big image will take a long time to load, right? Or what happens if the image couldn't load for some reason, someone removed the image from the server, we need to display the proper error state for the image. And more and more.

2. Challenges with the Bottom-Up Approach

Short description:

At some point, we end up with a component that becomes difficult to understand, maintain, and test. The bottom-up approach, although common and initially convenient, leads to complexity and challenges over time. As we add more functionality and bug fixes, the component grows and becomes harder to comprehend. This can result in difficulties in testing and understanding the use cases. Ultimately, this can lead to frustration for clients on the receiving end.

So, at that time, we will probably end up with from a simple code like that, with 20 lines of code, to a component with more, extra more, like 10 more, 12 more, a lot of code, like this. Just to handle two use cases. Loading and error message. The very basic one.

And then, you also, what happens if you want to add more, let's say, inloading, 20%. Inloading, 40%, display a different animation effect, transition effect, display a different error state when error message, when the user, let's say, the server return 500, 4, something for the user, more and more use cases, adding more and more problems will start to happen. And unfortunately, this is very, very common. We start with something super small, and we've added and added and added more and more on top of this. That is called, let's say, we build a component in the set of basic actions, and whenever we want something, we want to add some new feature. Okay, cool, it works. We just need to develop something that works simple. It's nothing critical here. But then when we want to add some new features, we need to add more, another layer on top of batch, on top of it with new actions.

And because there's no code that is perfect, we still have bug fixes, we fix it on top of the current component. And then new actions will also cause some bugs, we still need to fix some bugs. And another feature come up, another bug fixes need to be handled, and so on and so forth. This approach is called a bottom-up approach. Unfortunately, this approach is very common, let me say. And it's not that bad, it works most of the time because it allows us to develop something fast, quick, and maybe dirty or maybe clean. But along the time, it's proved to be very, very complicated.

For example, it's hard to maintain. If you have a core component that become growing and growing with more functionality adding, more functionality adding, different more core adding, it's become hard to understand, hard to maintain. And then because it's hard to maintain, it's hard to test how we go to make sure that what we test, what we wrote, we'll not break something somewhere that we don't know, we don't understand. They say sometimes we have a component that really long, then we have to read. But then if it's too long, we may not be able to understand on the use case is for handling. And because of that, if something happens, we will not be able to understand whether we cover the test or whether the step happen. That's hard to understand. And at some point we will get to this one. And this is not on our side. It's actually happened on the client side and make the clients very, very upset.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Building Pinia From Scratch
Vue.js Live 2024Vue.js Live 2024
70 min
Building Pinia From Scratch
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.