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/leads interested in appropriate ways of managing data within the context of Vue.js

Prerequisite knowledge

A very basic understanding of core JavaScript and Front-End principles.

What you'll learn

# What props are and how to use them for parent-child data flow in Vue components. # What Vue 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, explanation of the Flux architecture and the importance of the flux-like pattern for data management.

Description

Vue gives us multiple different ways to manage data between components such as using props, individual custom events, an event bus, a simple store and/or Vuex. This talk will highlight with real-world examples:

  • 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 and why/how at some point, 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:
    – By separating a Vuex store into modules
    – Dividing a module by it’s state, mutations, actions and getters by exporting these in separate files
    – By using constant Mutation Types within a single file
Photo of Hassan Djirdeh

Hassan Djirdeh

Shopify

An engineering graduate and a self-taught web developer, Hassan is currently a Front End Developer for the App Platform team within Shopify. Prior to being at Shopify, Hassan wore different hats as a Technology Consultant within Deloitte Digital, helping different clients build and scale their front-end 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)