State determines view - thinking about front-end development based on state

In today's front-end community, concepts such as MVVM and Model driven view are already very popular. Frameworks such as React/Vue can be considered representatives.

Although I have experience in using React/Vue and understand core concepts such as MVVM and state machine, I have never been able to apply them well.

It was not until a few days ago when I took over the requirement for component development and tried to analyze it carefully before writing that I suddenly figured out the connection.

Emmm... The content is relatively shallow, not some amazing magic weapon. It is more of a personal feeling.

Personal confusion

I was confused about how to write good code some time ago. After learning about "Refactoring" and "Clean Code", I did get better. But writing code always requires refactoring to make it better, which is also very troublesome, so I had the following thoughts.

Frontend and Status

In today's front-end development, state management is of paramount importance.

Using MVVM frameworks such as React/Vue can effectively reduce the complexity of front-end development through componentization and automatic binding.

MVVM

When talking about state, we have to mention the MVVM framework. The core of the MVVM framework is not two-way binding or dependency collection, but: the state determines the view.

The code description is:

View = ViewModel(Model)

Ideally, the ViewModel is a pure function that produces the same View given the same Model.

With the development of front-end, the state management of Web applications has become more and more complicated. However, due to some characteristics of the front-end:

• Open Source Code
• Request transparency
• Do not save user data

It also determines that the front-end is only responsible for the visual and interactive layers of the entire Web application. Anything involving data must be rigorously verified by the back-end, and no requests from the front-end are trusted.

Therefore, the core work of the front end is to provide a friendly human-computer interaction interface. Of course, this also conforms to the broad definition of the front end.

The emergence of MVVM can effectively improve the efficiency and quality of front-end development, and thus has been developed and applied on a large scale.

Complexity

In the book "Code Complete 2", there is a sentence that impressed me:

The essence of software engineering is managing complexity.

If you think about it carefully, it is indeed true.

Front-end development naturally also belongs to software development, and management complexity is precisely the core issue of the front-end at present.

Finite State Machine

So how can we better manage the complexity of front-end software? React's state machine concept gives its own answer.

State machine is a concept I often hear when I am learning computer science. For example, when I am learning React, I will mention that React is a state machine. When I listen to the team's sharing on compilation principles, I will also hear about state machine. So I went to take a special course to learn about this concept.

The description of a finite state machine on Wikipedia is as follows:

A finite state machine (FSM), also known as a finite state automaton or state machine for short, is a mathematical model that represents a finite number of states and the transitions and actions between these states.

Finite state machine is not a complicated concept

Simply put, it has three characteristics:

• The total number of states is finite.
• At any one moment, you are in only one state.
• Under certain conditions, there will be a transition from one state to another.
  What this means for JavaScript is that many objects can be written as finite state machines.

Implications

As I learned and thought about the concepts of state-determined view and state machine, I had a new idea:

The state determines the view, and the Action is responsible for completing the transition between states. Therefore, the key to writing good code is to use the most appropriate state to describe the interface and the most appropriate action to complete the transition between states.

Emmm...it's a very simple concept, but I haven't thought about it clearly before.

Summarize

As I understand this concept more, my ideas during development become clearer.

Before I write code now, I will think about a series of questions and think them through before I start:

• This page has several states (initialization state? success state? failure state? error state?)
• What parameters are needed to describe these states?
• When to change the state, what parts need to be changed

After thinking through these issues, the remaining work is to follow the ideas and complete the data and UI parts.