This week’s intensive reading article: Exploring data flow solutions for single-page applications
1 the introduction
After intensive reading on front-end modularization and syntax-related articles in previous installments, this time we discuss another important topic: data flow. Data flow is as important as engineering, visualization and componentization in the front end. Without the guidance of good data flow framework and ideas, business code tends to be in an unmaintainable state for a long time. When the project continues to add functions, managing data becomes more important.
There was no concept of data flow in the early days of the front end, because the front end was so thin that each page only displayed the requested data and no data flow management was required.
As the front end becomes more and more complex, the framework becomes more and more cohesive, and the data flow scheme is divided and combined, and then divided again. Now, the data flow is gradually unbound from the framework, forming a set of general system for each framework to use.
Although there are many data flow frameworks, they can be basically divided into bidirectional data flow party, one-way data flow party and responsive data flow party, represented by Mobx, Redux and Rxjs respectively. By the way, for CSS, there are also CSS in JS and pure CSS party. The front end is a real pain in the ass. This time we will take a look at the topic shared by Uncle Xu Fei in QConf: Data flow scheme exploration of single page application.
2 Content Summary
This paper mainly introduces the concept of responsive programming, and the viewpoints mentioned are as follows:
- Reactive Data Encapsulation
- Data source, the normalization of data changes
- The normalization of local and global states
- Fractal thought
- Action distributed execution
- App-level data processing, front-end Orm recommended
Overall, the core idea is to recommend that the data flow be handled internally by components, regardless of whether Redux Mobx or Rxjs is used, or whether these libraries have global management ambitions. If global management is used, it will be mounted globally, but the components will still be managed locally.
Finally, it talks about the advantages of Rxjs and XStream responsive data flow, but does not release the framework, only points out the idea, let some readers itch. But too many “tech gurus” now use “industry conferences” as advertising opportunities or job presentations. It’s better to teach people how to fish than to teach them how to fish, and this article stands out.
3 intensive reading
All technologies depend on business scenarios. The single-page application data flow solution of uncle Uncle solves complex business scenarios that focus on the front end. Although the front end is almost single-page now, single-page application does not represent that business data flow is complex, for example, the single-page application of partial data display is not suitable for this solution.
This article discusses pure data flow solutions, and can refer to CycleJS for its combination with Dom, but this library mainly builds Bridges to Reactive -> Dom.
3.1 Is responsive data flow the best solution?
I think front-end data flow scheme iteration so far, there is no such thing as object-oriented -> functional -> responsive, such an evolutionary link, different business scenarios have their own advantages.
object-oriented
Represented by Mobx, the light front-end is used more, because the complexity is concentrated in the back end, the front-end can do a good job of data display, then directly embrace js based on the object language, combined with the native Map Proxy Reflect to complete the side effects, the development speed is flying.
Data storage way, according to the view form because view almost no correlation between, and data products, in particular, after the end of the great amount of data, it is impossible to move the data processing to the front of the (in order to derive a view configuration data, need to hold a few GB raw data computation, storage and performance are not suitable for in the front).
functional
Represented by Haskell, it is widely used in the financial industry. The possible reason is that finance is very sensitive to the correctness of data. Not only is the function suitable for distributed computing, but more importantly, it makes data computing safer and more reliable without side effects.
In my opinion, the most important reason is that there are few side effects in the financial industry, such as the front-end dealing with Dom every day.
responsive
Represented by Rxjs, heavy front-end is more suitable for use. For app-level development such as React Native, in consideration of data consistency (for example, the author’s modified nickname needs to be synchronized after changing the nickname to the details of the article), raw type storage is preferred, and front-end Orm is more suitable to be abstracted as the data source.
In fact, Orm as a data source, object-oriented is also suitable, but the high-level abstraction of responsive programming makes its dependence on data sources and data changes pluggable, large objects are used as data sources for medium scale, AND Orm is used as data sources for App level, according to local conditions.
3.2 Fractal thought
The fractal idea is an upgraded version of the congestive component, which also supports the ability of the anaemic component to be controlled externally.
Advantages of fractals
Fractals guarantee two things:
- Components and data flows are integrated, isolated from external data flows, and even data processing is integrated into data pipes for easy debugging.
- Component reuse is facilitated because the data flow is part of the component.
A third benefit occurs when local data is placed globally, in conjunction with the local state concept described in this article:
- Creating local data is equal to creating global data, so that code debugging can be local, can be whole, more flexible.
The local state can refer to the design of the DVA framework. If there is no global Redux, create one; otherwise, mount it to the global Redux.
Disadvantages of fractals
For chat rooms or online ides, where there is a lot of global data and a lot of cross-binding, fractal thinking is not a good fit, but pure Redux thinking is more appropriate.
3.3 Data form, is it raw data or view data?
I think this is also a sub-business scenario, and the article makes sense when it says that you should not favor view-structured data too much, meaning that you should not favor view-structured data when it is appropriate for raw structured data. However, it is necessary to add that in the mid-stage scenario where the back-end does a lot of work, the front-end data layer is very thin and the data obtained is also the offline data after the back-end service cluster calculation. Obviously, the original data structure cannot be placed in the front-end, so the original data storage should not be used at this time.
3.4 Where is the processing process from raw data to view data
We recommend putting it in View because we don’t want to add additional stores, but we don’t know if this Store contains a component-specific Store. Business components are recommended to operate with internal data streams, but ultimately view data is stored in the global Store, locally for the component, globally for the project, and this can be supported for specific situations, such as listening for changes in data reused by other components.
conclusion
We didn’t end up with a perfect solution, but we did provide a complete idea of how to choose the most appropriate data flow solution in different scenarios.
Finally, don’t blindly select, as mentioned above, this solution is great for complex scenarios, but may not be suitable for your business at all. Instead of obsessing over why there is no Coding library for systematic solutions, we need to understand the advantages of responsive data flow, and at the same time, we need to see our own business scenarios to create an appropriate data flow solution.
Finally, if you have a good data flow solution that solves the pain point of a particular scenario, please leave a comment.