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

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, how to use custom events to create a global event bus for application-wide communication, how to build a small global store for simple state management, what Vuex is, the Flux architecture, and the importance of the flux-like pattern for data management

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 should they best be used
  • 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.

Leave a Comment or Question

Help us make this conference the best it can be for you. Have questions you'd like this speaker to address? Suggestions for issues that deserve extra attention? Feedback that you'd like to share with the speaker and other attendees?

Join the conversation here (requires login)