Vuex patterns

why actions matter

FILIPA LACERDA

Senior Frontend Engineer, Release and Verify,

GitLab

@filipalacerda

gitlab.com/filipa

Vuex patterns

why actions matter

ALL THINGS DATA

@filipalacerda

 Vuejs Amsterdam 2019

MULTIPLE SOURCES OF DATA

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

  • Vuex won't magically save you
  • Flux
  • Vuex pattern

@filipalacerda

 Vuejs Amsterdam 2019

Although Vuex helps us deal with shared state management, it also comes with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity.

@filipalacerda

 Vuejs Amsterdam 2019

It's a trade-off between short term and long term productivity

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

The Merge request widget

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

API

Title Text

@filipalacerda

 Vuejs Amsterdam 2019

FLUX LIKE

@filipalacerda

 Vuejs Amsterdam 2019

https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue​

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

State management

@filipalacerda

 Vuejs Amsterdam 2019

your entire team will write code the same way

@filipalacerda

 Vuejs Amsterdam 2019

WHY FLUX?

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

BOILERPLATE

@filipalacerda

 Vuejs Amsterdam 2019

    WHAT is happening
    WHEN is happening
    WHY is happening

@filipalacerda

 Vuejs Amsterdam 2019

what is flux?

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

unidirectional dataflow

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

none

@filipalacerda

 Vuejs Amsterdam 2019

Dispatcher

Store

@filipalacerda

 Vuejs Amsterdam 2019

"action creators"

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

@filipalacerda

 Vuejs Amsterdam 2019

one pattern, making it easier for anyone to maintain the code

@filipalacerda

 Vuejs Amsterdam 2019

All data in the application follows the same lifecycle pattern

@filipalacerda

 Vuejs Amsterdam 2019

Actions are contained and human-friendly

@filipalacerda

 Vuejs Amsterdam 2019

Unit tests are easier

@filipalacerda

 Vuejs Amsterdam 2019

Thank you!

@filipalacerda

gitlab.com/filipa

@filipalacerda

 Vuejs Amsterdam 2019

Made with Slides.com