Project background

The customer service project is a Saas application of network service management for private network customers, which aims to provide convenient and fast network service support and display for customers. The large visual screen serves as an important entrance for intuitive presentation of client data. The product side hopes to provide certain private customization functions for users. Therefore, this article briefly introduces some ideas related to the implementation and some meaningful bug review analysis in the process of code implementation

Project plan

The first response to the product requirements is low/ NO code implementation scheme, but the industry is more common H5 page customization (PS: The open source low code solution for large screen can be seen in The visual large screen production platform of Xiaoxi From zero development), and its data volume has no particularity. Based on the needs of the product, only its schema unified setting scheme is used for reference (PS: This is very important, most of the low code custom schema actually finally is homogeneous before and after the end, so can seamless processing, but considering the different emphasis on technology, the technical team to better handle this agreement), for the other drag and grid editor will plan according to the following product related iteration gradually expanded

Generic Schema Scheme

Common schema schemes in the industry separate user configurations from their own configurations, that is, to distinguish whether they are exposed to users. The schemas exposed to users are defined as follows:

{
   requestParams: {

   },
   figureParams: [

   ]
}
Copy the code

RequresParams here are for sending requests to the back end to get the corresponding data content, while figureParams are for user-defined configuration information that contains graphical presentation information

Reactive functional programming

Visual large screen is often associated with big data analysis and statistics. For the processing of data flow, functional programming can be used to transform the data processing, so as to better carry out responsive programming scheme. Here we refer to some responsive RxJS design ideas and functional programming chain processing, effect, pure Function and other concepts. The subsequent processing of big data can also be better combined with Flink, etc. For students who want to know about RxJS and Flink related extensions, they can refer to Ali’s article from RxJS to Flink: How to deal with Data Flow?

export const handleKpiGroupId = function(staticTypes) {
  const arr = staticTypes.map(staticType => staticType.split('-')[0]);
  return Array.from(new Set(arr));
}

export const handleKpiNameEns = function(staticTypes) {
  const arr = staticTypes.map(staticType => staticType.split('-')[1]);
  return Array.from(new Set(arr));
}
Copy the code

Some map and filter processing will be encapsulated according to business needs, and the subsequent reactive processing of publish and subscribe will be carried out according to data flow

On the pit case

Removes an element from the position array from the array

[Bug Description] The selected graph is unselected in the shuttle box component of the customer indicator chart. Here, the position of the stack structure data corresponding to the left push is obtained through a checked. In the deletion process, “placeholder” is used for splice replacement, resulting in the omission of the graph configuration information to the large screen display page

[Bug analysis] Placeholder filtering was performed after the splice operation was used for placeholder filtering. As a result, the user clicked submit quickly, the child component failed to synchronize the data to the parent component, resulting in the dirty data being omitted to the large screen display page

[Solution] Directly use the filter operation to process the array, avoiding the contamination of splice operations. Note that the filter returns a new array and does not process the original array. Therefore, vUE needs to change the address of the array when listening

Complex data type address reference problem

[Bug Description] In the shuttle component, the data distributed to the parent component is stored in a stack, which stores complex data types such as Echarts options, resulting in data sharing problems

Js load data types, such as objects and arrays, are stored in the heap memory, and only an address reference is stored in the stack memory

[Solution] Use deep clone to back up data and implement data isolation

The parent component passes asynchronous data through props

[Bug Description] When the parent component asynchronously requests data and passes it to the child component, the child component cannot render the data in real time on the page

[bug analysis] The parent component is not listening to the data passing to the child component, and the page needs to be rendered immediately. On the other hand, an interface was called in both parent component and child component, but the requirements were different. I hoped to reduce the number of requests. As a result, the data transmitted by the parent component was not transmitted to the child component synchronously, and the props would be affected by the previous value

[Solution] Vue data listening does not render to DOM simultaneously, there is a tick delay, if the parent component needs to be transmitted to the child component in real time, you can consider listening in the child component, and use $nextTick, etc

Keys returns data sorting problems

[Bug Description] The horizontal axis of the screen display is the time dimension, where the time-granularity data is obtained from the server, but the stored key value is time, so the data needs to be filtered and integrated. The time granularity is out of order when the Object. Keys is used to return the time granularity

[Bug] Js Object. Keys can be used to sort different policies for different situations. JavaScript Object. Keys () sort sort problem [solution] Use sort to sort JavaScript Object. Keys () sort

conclusion

Domestic visual customization looks be like simple, but in the actual development process will appear a lot of problems, especially in data analysis and processing, the core of the whole custom is the determination of schema needs different will lead to changes in the schema, and therefore for large data related to the development and display may be another extension aspects of visual direction, Here’s a good look at the combination of responsive functional programming and big data that might spark some sparks; And different levels of depth profiling for bugs, bugs in every function in the process of development, there is always a few memorable denying the existence of point, like “the wrong topic this”, there is always so one or two bugs is worth us pondering over and over again, thus let us to the basic principle of can have a deeper understanding, Impressed not common problem that really put a few times the pit, to impressive, the so-called “is not” gate, and the pain is pain, every bug flow tears is when the brain into the water, I hope you can continue to practice in the process of denying yourself the lack of technical basis, so as to make their own technology more consummate and perfect, Master always reflect the depth of kung fu in the details, mutual encourage!!

reference

  • Visual large screen production platform from zero development
  • From RxJS to Flink: How to handle data flow?
  • An exploration of JavaScript object.keys () sorting problems
  • The vUE parent gets data asynchronously and passes it to the child