4 ms·

My problem with current gen frameworks is composition and modularity with components. Making components stateless and having all data come in as props from pare

My problem with current gen frameworks is composition and modularity with components. Making components stateless and having all data come in as props from parents is good for modularity but how do you pass data back to the parent? This is where the modularity becomes awkward. I know of two ways in vue to do this and both ways either completely break or make modularity awkward. The first way is to signal the parent with emit. This ties the parent object to a signal and if you want to pass info even further up past the direct parent you have to have components explicitly pass that signal up. While this doesnt break modularity it absolutely makes it awkward. The second way is to use vuex as a global. This breaks modularity by immediately tying the component to a global. Vuex makes things easy but breaks modularity completely as soon as a component refrences vuex. I understand why things were done this way. Essentially it's done to prevent a certain class of endless looping bugs but there has got to be a better way.

vanderZwan 8y ago
> The second way is to use vuex as a global. This breaks modularity by immediately tying the component to a global. Vuex makes things easy but breaks modularity completely as soon as a component refrences vuex. Can you explain a bit what you mean here? I haven't used vuex yet, but to use my Redux/React experience as stand-in: the channel to emit data changes through is passed as a prop as well, so the component is still "modular" in that it is not hardwired to redux (or, presumably, vuex). Since it has to connect to the outside world somehow, that can't be the criterium for breaking modularity either. So I don't see where the modularity Having the data in a Single Source Of Truth seems a sensible reason to store it globally as well. (aside: elsewhere here I discovered S.js, a reactivity library that looks really interesting. Perhaps using something like that to make the data reactive to UI changes is what you're after?)
- crimsonalucard 8y ago
  >Can you explain a bit what you mean here? Any time you have something reference a global it becomes tied to that global whether it's a function, component or something else. If I want to take that component and move it to another project then I have to take that global and move it along with the component. That is a form of broken modularity. Passing a closure or global channel from parent to child is not modular. It ties the parent to the child. Observe function composition, lets say I want to build a function that adds 3 to a number and then adds 2 to a number. I have a base function called f defined as: f(n) = n + 1 now I create two functions through composition: g(n) = f . f . f h(n) = f . f by composing f 3 times then 2 times I have thus created the equivalent: g(n) = f(f(f(n))) = n + 3 h(n) = f(f(n)) = n + 2 the final function d(n): d(n) = g . h = g(h(n)) = n + 3 + 2 Every aspect of my created function is modular and I have maximized code reuse. Vue or React components do not have this property. If I build a UI from vue components, the majority of those components can never be reused while on the other hand my d(n) function is the reuse of a single function composed 5 times. The main reason is because data from the child must be sent back to the parent this either makes the child tied to the parent or the parent tied to the child. The property of composition is achievable with a single source of truth cascading data down to stateless components that only display the data. Modularity breaks on the feedback loop. Is there a category we can invent that will fit the UI mold?
caseymarquis 8y ago
Creating a bus with a new vue object might be what you're looking for if vuex is truly too much boilerplate. You can also implement v-model, but I don't think that's what you're looking for.
- crimsonalucard 8y ago
  It's not boilerplate that's my problem. It's modularity and composition. Components do not have it. A bus ties a component to a bus rather than a vuex global.

vanderZwan 8y ago

> The second way is to use vuex as a global. This breaks modularity by immediately tying the component to a global. Vuex makes things easy but breaks modularity completely as soon as a component refrences vuex. Can you explain a bit what you mean here? I haven't used vuex yet, but to use my Redux/React experience as stand-in: the channel to emit data changes through is passed as a prop as well, so the component is still "modular" in that it is not hardwired to redux (or, presumably, vuex). Since it has to connect to the outside world somehow, that can't be the criterium for breaking modularity either. So I don't see where the modularity Having the data in a Single Source Of Truth seems a sensible reason to store it globally as well. (aside: elsewhere here I discovered S.js, a reactivity library that looks really interesting. Perhaps using something like that to make the data reactive to UI changes is what you're after?)

crimsonalucard 8y ago
>Can you explain a bit what you mean here? Any time you have something reference a global it becomes tied to that global whether it's a function, component or something else. If I want to take that component and move it to another project then I have to take that global and move it along with the component. That is a form of broken modularity. Passing a closure or global channel from parent to child is not modular. It ties the parent to the child. Observe function composition, lets say I want to build a function that adds 3 to a number and then adds 2 to a number. I have a base function called f defined as: f(n) = n + 1 now I create two functions through composition: g(n) = f . f . f h(n) = f . f by composing f 3 times then 2 times I have thus created the equivalent: g(n) = f(f(f(n))) = n + 3 h(n) = f(f(n)) = n + 2 the final function d(n): d(n) = g . h = g(h(n)) = n + 3 + 2 Every aspect of my created function is modular and I have maximized code reuse. Vue or React components do not have this property. If I build a UI from vue components, the majority of those components can never be reused while on the other hand my d(n) function is the reuse of a single function composed 5 times. The main reason is because data from the child must be sent back to the parent this either makes the child tied to the parent or the parent tied to the child. The property of composition is achievable with a single source of truth cascading data down to stateless components that only display the data. Modularity breaks on the feedback loop. Is there a category we can invent that will fit the UI mold?

caseymarquis 8y ago

Creating a bus with a new vue object might be what you're looking for if vuex is truly too much boilerplate. You can also implement v-model, but I don't think that's what you're looking for.

crimsonalucard 8y ago
It's not boilerplate that's my problem. It's modularity and composition. Components do not have it. A bus ties a component to a bus rather than a vuex global.