dwyl / learn-elm-architecture-in-javascript

:unicorn: Learn how to build web apps using the Elm Architecture in "vanilla" JavaScript (step-by-step TDD tutorial)!
https://todomvc-app.herokuapp.com
GNU General Public License v2.0
213 stars 19 forks source link

Do we need to clarify "Uni-directional data-flow"? #35

Open ZooeyMiller opened 7 years ago

ZooeyMiller commented 7 years ago

In the Why? section, when explaining the benefits of the Model Update View architecture "Uni-directional data flow" is mentioned.

Uni-directional data-flow means "state" of the app is always predictable; given a specific starting "state" and sequence of update actions the output/end state will always be the same. This makes testing/testability very easy!

I am not sure, if, to somebody who just fills the prerequisites for this tutorial (basic JS knowledge, basic TDD knowledge, a computer, 30 minutes), that it is clear what uni-directional data flow is.

Do we need to clarify what it is further? If we do think that it needs more clarification for someone of this level, is it important to have that information in this repo, or would a link to a separate explanation suffice?

Would love to get feedback from people going through this tutorial for the first time on this question!

YvesMuyaBenda commented 6 years ago

Hello @ZooeyMiller. Indeed! As a beginner to the concept of Single Page Apps, the concept of unidirectional data flow is but one of the many concepts that I had to go and research to have some idea what the heck everyone was talking about! What are you people on about??? What is data flow!

Here is the gist of what I have learned, just to give some vague idea of how I am interpreting the concept: For me the basic idea is that of creating reactive systems by passing messages/data around. (Very very basically: Oh look, the model has changed, so I am going to send a message to the View to change; oh look, the user has pressed the click button, so I am going to send a message to the model to change, which will send a message to the view to change), and the unidirectional data flow is the idea that the passing of messages/data flows in one direction! It is because the data flows in one direction, that the history of the messages can be easily read, and combined with the concepts of immutable data and pure functions, it is simple to recover what the state is at any moment based on the inita state of the model and the history of messages/data that has been passed around.

The diagram on the Elm Architecture well illustrates how data is flowing in one direction through a cycle!

However, I am not sure if the concept of unidrectional data flow would be much meaningful to an absolute beginner, if the beginner has no experience of other architectures. Perhaps it would just be enough, to note, that in the diagram illustrating the Elm architecture, the data is passed in one direction in a cycle, and note, that other ways of doing Front-End development might have different ways of doing it, perhaps with a digram illustrating what a non uni-directional data flow might look like; and then noting that uni-directional data flow is the solution that modern Front End Architectures appear to be converging on.

From the little I have seen on YouTube most discussions on uni-directional data flow are biased relative to specific frameworks, so would probably just muddy the water for the beginner looking to get into the Elm Architecture tutorial, but if I find anything good, I will add some links in this issue for discussion!