days
1
8
hours
0
2
minutes
3
9
seconds
0
8
search
Interview with Luca Mezzalira

The main challenge with scaling applications is scaling the team. VueX offers the solution

Ann-Cathrin Klose
javascript VueX

VueX is a state management library for Vue. Why should you be using it in your Vue projects? We talked about that to Luca Mezzalira, System Architect at DAZN and Google Developer Expert on Web Technologies.

JAXenter: What is VueX?

Luca Mezzalira: VueX is a state management pattern for Vue.js applications. It allows you to structure your code in a simple but very effective way by dividing the different domains of a web application in order to have a clear separation of concerns and a single responsibility for each object.

JAXenter: Can you give us a short introduction into the state management pattern of VueX?

Luca Mezzalira: VueX is a plugin for Vue.js which was created for using an opinionated library for handling the application state of Vue.js applications.

VueX leverages several characteristics that reactive architectures are embracing such as unidirectional data flow, strong separation of concerns and automatic update of DOM elements via different algorithms provided by view libraries through the Virtual DOM.

    iJS Cheat Sheet 2018

    Free: The iJS React Cheat Sheet

    You want to get started with React?
    Our Cheat Sheet includes all the most important snippets.
    Get the sheet for free!

We are used to having a great documentation in the Vue.js ecosystem. For VueX, there is a simple but very extensive documentation with many examples explaining the basics of this library.

At the moment, the pattern is composed of:

State

  • State can be modified In strict mode by mutations only
  • It can‘t be modified by other parts of the application
  • A state can be accessible by any part of VueX applications and from Vue.js components as well

Getters

  • Getters expose computed values from the state and cache the value until it is changed inside the state
  • Getters are used inside the components via computed values

Actions

  • Actions are triggered from user interactions or other actions.
  • They handle async operations
  • Actions can call other actions but mainly they are used for triggering state mutations

Mutations

  • Mutations are called by Actions
  • Mutations manipulate the state directly
  • Only Mutations can mutate the state in strict mode

During the last VueConf in Amsterdam, Evan You announced some nice changes to VueX that should be implemented this year to simplify de fact how VueX is working. One of those changes has to do with the Mutations. Mutations are going to be removed from the library, thus enabling the actions to change the state directly like other state management systems are doing, for example in the MobX State Tree.

JAXenter: What kind of application is a typical use case for VueX?

Luca Mezzalira: VueX can be used in any context where Vue.js is used, for now I would say mainly web applications but it could potentially be used in hybrid mobile applications or for SmartTV, console and set-top-boxes development.

JAXenter: What makes VueX a good choice for scaling Vue applications?

Luca Mezzalira: The main challenge when talking about scalability in front-end applications is not how to scale the infrastructure but how to scale the team. VueX provides a consistent and clear way to work with enhancing the elegant Vue.js base and moving it to a proper and solid solution for building web applications at scale.

Any developer can easily pick up the pattern in a few days if not hours and they can immediately become productive. The pattern also allows to spin up multiple teams working on the same code base without having too much communication overhead thanks to the unidirectional flow.

Debugging VueX applications is also very easy because the separation of concerns and the single responsibility principles are well applied.

Thank you!

Author
Ann-Cathrin Klose

Ann-Cathrin Klose

All Posts by Ann-Cathrin Klose

Ann-Cathrin Klose is an editor and has been working for S&S Media since 2015. Before joining the team she studied General Linguistics at Johannes Gutenberg University Mainz.

Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of