Finite State Machines in Vue 3 - Sarah Dayan
There are many ways to represent state in modern web applications. In Vue, you can use local state, encapsulated within components, or global state, using a state management library like Vuex. It usually works the same way: you represent it with properties that you can change, and you use these properties to determine view logic.
State changes are imperative most of the time: you set up event listeners to update reactive properties, and condition them with if statements. As the application grows, this quickly turns into a tangled mess: new conditions, new events, new corner cases. Before you know it, you end up with contradictory instructions that set your view in an inconsistent state. This is what state machines attempt at solving. Finite state machines let you represent the behavior of a system that can be in only one state at any given time. There’s a finite number of possible states, triggered by a limited number of possible events. Instead of defining imperative UI flows and losing track of their logic, state machines make state changes first-class citizens by letting you model them declaratively.
We’ll see how state machines wonderfully fit into Vue’s reactive model. We’ll live code a non-trivial project that leverages state machines with the Composition API, and see how it results in readable, declarative, reliable code that’s easy to reason with.
Видео Finite State Machines in Vue 3 - Sarah Dayan канала VueConf Toronto
State changes are imperative most of the time: you set up event listeners to update reactive properties, and condition them with if statements. As the application grows, this quickly turns into a tangled mess: new conditions, new events, new corner cases. Before you know it, you end up with contradictory instructions that set your view in an inconsistent state. This is what state machines attempt at solving. Finite state machines let you represent the behavior of a system that can be in only one state at any given time. There’s a finite number of possible states, triggered by a limited number of possible events. Instead of defining imperative UI flows and losing track of their logic, state machines make state changes first-class citizens by letting you model them declaratively.
We’ll see how state machines wonderfully fit into Vue’s reactive model. We’ll live code a non-trivial project that leverages state machines with the Composition API, and see how it results in readable, declarative, reliable code that’s easy to reason with.
Видео Finite State Machines in Vue 3 - Sarah Dayan канала VueConf Toronto
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Vue.js 3 Crash Course 2020 Part 1 | Learn Vue.jsVue 2.6 Slots - Basic, Named, and Scoped Slots - Making better, more flexible ComponentsTest driven development with Vue.js by Sarah DayanUnlocking the Power of Reactivity with Vue 3 - Oscar SpencerxState and state machines in VueJS - visualize and finally understand your UI flowsVue 3 - What's New? What Changed?Vite and VitePress - Evan YouXState - Video Player & Nested States - Finite State Machines in ReactDavid Khourshid - Reactive State Machines and Statecharts - Uphill Conf 2019Crafting Stateful Styles with State Machines by David Khourshid | CSSConf BP 2019End-to-End Testing Vue Apps with Cypress by Amir RustamzadehXState - Global state in ReactVuetify 3.0 Updates - John LeiderVue State Management with Composition API - No need for vuex & vuex-persist?Vue JS 3: Composition API for State Management (Vuex Killer?)XState Pizza Wizard!Next generation frontend tooling with ViteJS - Open Source FridayDesign Principles of Vue 3.0 by Evan YouA modular approach to building large-scale apps with Vue by Kunal Varma - Kunal VarmaMauro Servienti - Talk Session: Welcome to the (State) Machine