1

I'm working on Vue project. I really confused about what a proper code-splitting and spaghetti code looks like in javascript.

Some of my team said, my code is confusing and tell me to learn more about code-splitting to prevent spaghetti code. I have done it by this, taken from a Vuex store I've refactored:

import VueCookies from 'vue-cookies'

export default {
  state: {
    destinations: [],
    excluded: [],
    isBroadcasting: false,
    sent: 0,
    fails: 0,
  },
  mutations: {
    /**
     * Notify the user that the broadcasting event is started.
     * 
     * @author Donny Pratama <donnypratama1024@gmail.com>
     * @param {Object} state Vuex state
     * @returns void
     */
    START_BROADCASTING(state) {
      state.isBroadcasting = true
    },

    /**
     * Set broadcast destinations.
     * 
     * @author Donny Pratama <donnypratama1024@gmail.com>
     * @param {Object} state Vuex state
     * @param {Array} destinations Collection of destinations
     * @returns void
     */
    SET_BROADCAST_DESTINATIONS(state, destinations) {
      state.destinations = destinations
    },

    /**
     * Set the excluded destinations.
     * 
     * @param {Object} state Vuex state
     * @param {Array} excluded Collection of the excluded destinations
     */
    SET_BROADCAST_EXCLUSION(state, excluded) {
      state.excluded = excluded
    },

    /**
     * Count how many message has been sent.
     * 
     * @author Donny Pratama <donnypratama1024@gmail.com>
     * @param {Object} state Vuex state
     * @returns void
     */
    ON_BROADCAST_SUCCESS(state) {
      state.sent++
    },

    /**
     * Count how many messages has been failed to send.
     * 
     * @author Donny Pratama <donnypratama1024@gmail.com>
     * @param {Object} state Vuex state
     * @returns void
     */
    ON_BROADCAST_FAILED(state) {
      state.fails++
    },

    /**
     * Notify the user that the broadcast process has been done.
     * 
     * @author Donny Pratama <donnypratama1024@gmail.com>
     * @param {Object} state Vuex state
     * @returns void
     */
    END_BROADCASTING(state) {
      state.isBroadcasting = false
    }
  },
  actions: {
    /**
     * Start broadcasting.
     * 
     * @param {Object} context Vuex context
     * @param {String} message Message to be broadcasted
     */
    startBroadcast(context, message) {
      let destinations = context.dispatch('mapWithout', context.state.excluded)

      context.commit('START_BROADCASTING')
      context.dispatch('send', { message, destinations })
    },

    /**
     * Make a post data.
     * 
     * @author Donny Pratama <donnypratama1024@gmai.com>
     * @param {Object} destination Contact destination
     * @returns {Object} { from, to, message, type }
     */
    make(payload) {
      return {
        from: VueCookies.get('active_project').projectPhoneNumber,
        message: payload.message,
        type: 'text',
        to: payload.destination.id._serialized,
      }
    },

    /**
     * Map destination without the excluded.
     * 
     * @author Donny Pratama <donnypratama1024@gmail.com>
     * @param {Object} context Vuex context
     * @param {Array} excluded Array of destination to be excluded
     * @returns {Array} destinations
     */
    mapWithout(context, excluded) {
      return _.without(context.state.destinations, excluded)
    },

    /**
     * Notify when the broadcast process is done via [state.isBroadcasting].
     * @param {Object} payload Current index and destinations array
     */
    notifyWhenDone(payload) {
      if (payload.index === payload.destinations.length) {
        context.commit('END_BROADCASTING')
      }
    },

    /**
     * Send message to destinations.
     * 
     * @author Donny Pratama <donnypratama1024@gmail.com>
     * @param {Object} payload Message and destinations
     * @returns void
     */
    send(payload) {
      payload.destinations.forEach((destination, index) => {
        let data = context.dispatch('make', {
          message: payload.message,
          destination: destination
        })

        axios.post(`sendMessage`, data)
          .then((_) => context.commit('ON_BROADCAST_SUCCESS'))
          .catch((_) => context.commit('ON_BROADCAST_FAILED'))

        context.dispatch('notifyWhenDone', {
          index: index,
          destinations: payload.destinations
        })
      })
    },
  }
}

I need your opinion, am I doing it the right way?

Yura
  • 1,937
  • 2
  • 19
  • 47
  • 2
    https://webpack.js.org/guides/code-splitting/ is a specific term in JS, I'm not sure you meant it. If the code works fine then it's likely not a question for SO. Try https://codereview.stackexchange.com/ or https://softwareengineering.stackexchange.com/ . I see no problems with code organization but FWIW what you're doing in `send` is a bad practice, you'll be unable to chain it, never leave promises hanging and don't use them with forEach. It may happen that the whole thing is an antipattern because of that - startBroadcast, etc. – Estus Flask Apr 11 '20 at 11:28
  • Oh I'm sorry for that, I think I'll move this question to that link, thank you for your information. – Yura Apr 11 '20 at 11:43
  • I do that in foreach because they not providing me an API to send the array to the broadcaster by the way. – Yura Apr 11 '20 at 11:44
  • The thing I meant is https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop . In case you need these requests to be performed in parallel, it should be `await Promise.all(destinations.map(/* map destination to axios promise */))`. If I understood your case correctly, you could just chain a promise that `send` returns and wait for it instead of handling start/done events. – Estus Flask Apr 11 '20 at 12:09

0 Answers0