Building a Better Web
June 11–12, 2018: Training
June 12–14, 2018: Tutorials & Conference
San Jose, CA

How to stay sane while managing complex state in Vue.js

Hassan Djirdeh (Shopify)
9:00am–9:40am Thursday, June 14, 2018
Frameworks and Libraries
Location: 210 D/H Level: Beginner
Secondary topics:  Best practice, Developer Experience Track: Tools, Platforms, and Techniques, Technical
Average rating: ****.
(4.43, 7 ratings)

Who is this presentation for?

  • Developers, engineers, and leads interested in appropriate ways of managing data within the context of Vue.js

Prerequisite knowledge

  • A very basic understanding of core JavaScript and frontend principles

What you'll learn

  • Understand what props are and how to use them for parent-child data flow in Vue.js components, what Vue.js custom events are and their purpose, and the importance of the Flux-like pattern for data management
  • Learn how to use custom events to create a global event bus for application-wide communication and how to build a small global store for simple state management
  • Explore Vuex and the Flux architecture

Description

The ability to create Vue.js components as small decoupled units of functionality is necessary for the organization of Vue.js applications, and parent-child and sibling-sibling components must be able to interact and manage information. Vue.js gives us multiple different ways to manage data between components, such as using props, individual custom events, an event bus, a simple store, and Vuex.

Hassan Djirdeh explains why it’s important to have appropriate state management for the predictability and maintainability of an entire Vue.js application.

Topics include:

  • What props are and how to use them
  • What custom events are and when to use them
  • How to set up a global event bus for application-wide event listening and the cons associated with this approach
  • How a global event system can be refactored to a simple global store that is shared between components
  • The limitations of having a simple store
  • Why Vuex is the most appropriate method for managing state for medium to large applications
  • Ways to organize and architect the structure of an ever-growing Vuex store
Photo of Hassan Djirdeh

Hassan Djirdeh

Shopify

Hassan Djirdeh is a frontend developer for the app platform team within Shopify. An engineering graduate and a self-taught web developer, Hassan has worn a number of different hats over his career, including technology consultant within Deloitte Digital, where he helped clients build and scale their frontend applications.