3 ms·
>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
by 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?