Dry goods | intelligent exploration of front end and practice of automatic code generation scheme with low skeleton screen

In the process of entering the page , Users will inevitably see a loading animation . However, loading animation is often more old-fashioned , If loading takes a little longer , Users will lose patience and leave the page . In order to make users have a better browsing experience , Skeleton screen is a better progressive loading scheme .

Implementation of skeleton screen , It is also the implementation scheme of visual Draft direct code MVP (Minimum Viable Product). This paper will discuss the advantages and disadvantages of skeleton screen scheme , And a front-end intelligent skeleton screen code automatic generation scheme practice .

One 、 background

As early as 2013 year ,Luke Wroblewski It introduces Skeleton Screens The concept of . The skeleton screen acts as a blank page carrier , Its function is to convey a message that the page is gradually loading .

A skeleton screen is essentially a blank version of a page into which information is gradually loaded.

Skeleton Screens Simpler than spin A good place , It is to let the user know the information structure of the page to be loaded , Given a certain amount of information , It can alleviate the anxiety of users waiting for the page . Apple also uses the skeleton screen as a loading standard , It is recommended to include the basic outline of text or elements in the application .

1.1 Why do you need a skeleton screen

UX Research consulting company Nielsen Norman Group It is proposed to improve web / app Four important response time nodes in terms of performance ：0.1s、1s、4s as well as 10s.

stay 1s within , No additional loading information is required , Because the user is still in the flow ; stay 1-4 second , need loading Indicator to tell the user that it is loading ; stay 4s above , You need to inform the user of the current loading progress , Failure feedback is required beyond a certain time , Let the user retry .

In addition to some front-end and back-end isomorphic schemes, you can quickly return front-end data , Render the page directly , Most pages need to go through a certain loading time , To get the service return data for display . If the user is presented with a white screen , Or a fixed loading animation , Will make users have an anxiety , Or wonder if the page is loaded .

Skeleton screen is an effective scheme to reduce users' negative experience , The skeleton screen is usually rendered on the first screen of the page or some key nodes . meanwhile , It is also shortened FMP (First Meaning Paint) Important ways .

Lara Swanson stay 《Designing for Performance》 I mentioned , Most users look forward to 2 Load in seconds , exceed 3 There will be... In seconds 40% Of the users leaving the page . The skeleton screen gives the general outline structure of the page , Let users have the illusion that there is already content returned , It is also an effective way to reduce users' anxiety .

If you return to the service fast enough , Or the structure of the page is simple , The demand for skeleton screen is not so strong . It is recommended to use the skeleton screen in the following scenarios ：

• First screen content , Let users quickly locate the modules that need attention
• Graphic structure 、 Card module 、 Pages with more lists
• As a local load 、 Progressive loading loading style

If we can use automatic skeleton screen rendering , It will also greatly reduce our use and maintenance costs , High configuration flexibility , Maintain a high degree of reduction , Do not affect the loading performance of the page itself .

• Enhance user experience , Let users know the general structure of the current page , More common loading Your vision is smoother

• Rendering of skeleton screen content , Shortened FMP (First Meaningful Paint), Improve the site / application performance

• lowcode / nocode Automatic filling scheme of skeleton screen , Reduce maintenance costs

1.2 Scheme investigation and comparison

The first screen shows the skeleton screen , It can give users a certain amount of information in advance , Get users' concerns in a short time , Focus on the module location he cares about .

After loading, replace the skeleton screen structure with a real data module , The transition can be made naturally and smoothly . Progressive rendering allows users to perceive , Provide a better user experience .

But the disadvantage of the scheme is that the labor cost is slightly higher , The first screen content structure given by the designer is required , Write a corresponding skeleton screen code . To reduce development and maintenance costs , We need an automatic skeleton screen generation scheme . At present, the industry has the following two mainstream schemes for the implementation of automatic skeleton screen .

1.2.1 puppeteer Automatically generate skeleton

For the browser environment web page , have access to puppeteer Headless browsing Grab page Face corresponding DOM node , Render the structure of the skeleton screen . Industry implementation , Finally, such a scheme is generalized into platform automatic capture .

Through the... Of the incoming page url Address , Use puppeteer Open the first screen to be rendered , Grab the entire page DOM After the node structure , Fill some of the content on the page with classes loading The gray background of the State .

After getting the skeleton screen , There are two ways to use it ：

• Take a screenshot of the current first screen , Generate compressed base64 picture , Display the skeleton screen picture when loading ;

• Get the general skeleton screen structure , After manual screening, use the integral filter HTML structure .

advantage ：

• For any front-end framework implementation web Pages can be DOM Node grab , It has a wide range of applications ;

• The final implementation is the platform , Just enter the URL to get the skeleton screen structure of the corresponding website ;

• After grabbing DOM Nodes can be used as page code .

shortcoming ：

• DOM When there are many nodes , Manual screening is required ;

• Based on executable web page , Both advantages , It's also a limitation ;

• The label needs to be pretreated , The corresponding type of color block, how to render, etc , Manual configuration is required ;

• Rendered skeleton screen nodes , Page filled based on real data , It may not be the effect expected by the visual designer .

1.2.2 The existing RN Implementation scheme

Mentioned in the previous section puppeteer automation , On the defects of scheme design , In addition to label pretreatment 、 Configure intervention , Most importantly, the scheme can only be applied to web End .

If this plan is to be adopted , You need to use it first React Native Web Generate corresponding web End code . The biggest drawback is DOM Nodes nested too deep , The generated code content is too redundant . And our source code is still React Native Of , To be based on web The skeleton screen code can't be used .

Industry for React Native Skeleton screen in , It is to provide a set of standardized framework screen component scheme , Let developers write the code of the corresponding skeleton screen directly .

In this , More popular npm The component library is  react-native-skeleton-placeholder as well as  react-native-skeleton-content. The former has more downloads , The volume is 17kb, More popular , Although it looks much smaller , In fact, it depends on another npm library .

stay React Native The implementation scheme of aspect is more inclined to the display of detail animation , That is, for the most popular loading The realization of animation effect , Respiratory dynamic scintillation effect from all directions . For the structure code of the whole skeleton screen , Still rely on development for manual writing .

advantage ：

• Encapsulates the animation effect , Color block coding 、 Component encapsulation and so on ;
• The animation implementation is more detailed , It mainly encapsulates complex animation effects ;
• The common elements of the skeleton screen are encapsulated , Unified some standards .

shortcoming ：

• There is no automated implementation , The preparation of skeleton screen still depends on Development .

Two 、 Implementation scheme design

After the investigation of the above two schemes , The implementation in the browser environment focuses on automatic crawling DOM node ,React Native The implementation in focuses on the encapsulation of complex animation effects , It doesn't meet the effect we want to achieve .

The repetition rate of skeleton screen code is very high , If you let the developer restore the skeleton screen according to the visual draft , Each time, a set of corresponding code is rewritten according to the structure of the skeleton screen , It's also very inefficient . And the skeleton screen is actually not associated with any business logic , In fact, it is just a complex structure spin Interface .

Our expectation is to reduce the workload of developers , So that developers can use the skeleton screen directly , Instead of writing the corresponding code .

The skeleton screen scheme we implemented is mainly based on React Native, But from DSL On the other hand , Such a scheme can be transplanted to any front-end framework scheme for implementation .

The final scheme not only meets the expectation , It also has the following characteristics ：

• For a variety of front-end solutions , Output the corresponding skeleton screen code ;

• Combined with the visual annotation platform , By a visual designer UI The design draft can directly show the available code content ;

• Liberate and develop the students' hands , Copy and paste to use , No node marking is required 、 Sift out ;

• Package skeleton screen loading Animation , Open the box ;

• Mark the platform from the visual manuscript , You can directly preview the generated code effect , Convenient and quick .

Here, the visual annotation platform , It uses Ctrip's internal kirby store platform , It supports local cooperation by designers kirby plug-in unit , Sync sketch Mark to web platform （ namely kirby store）, For development students to use directly . If you are interested, you can read 《 Ctrip ticket Sketch Plug in development practices 》.

Our implementation perspective is given by the visual designer sketch Design annotation draft , according to sketch The data structure of the file , Into the front-end frame skeleton screen code we need .

3、 ... and 、 The design draft is straight out of the skeleton screen code

How to from a normal skeleton screen sketch File generates available code snippets ？ The following from sketch data structure 、 General algorithms 、 Intermediate code 、 Several dimensions of platform specific code are described .

3.1 sketch data structure

You can put sketch Data imagine a large amount of data JSON file , It contains a lot of information we need ：

• The layer type ( written words 、 picture 、 rectangular 、 marshalling 、 Outside the chain and so on )
• Layout information ( Layer's x、y coordinate , Width and height, etc )
• Style information ( Frame 、 Round corners 、 Background, etc )
• Layer level
• ...

Now that you can get sketch The original information of all the data contained in , Then it is possible to generate a reliable intermediate code to represent information through some algorithm . among , Based on the particularity of skeleton graph ( Almost no need to think about text layers ), We can properly tune or prune the current algorithm .

3.2 General algorithms —— Sort out messy layers

To get high availability intermediate code from a pile of original layer data , Existing layers must be processed —— Delete cluttered layers 、 Merger and integration , In order to optimize the subsequent algorithm .

3.2.1 Delete invisible layers

The common practice of skeleton diagram is to place a new layer on the original layer ( Usually rectangular ) To cover up , So it looks like , The original layer covered below is invisible , The last generated code should not contain them , So you need to delete these invisible layers .

Fortunately, ,sketch Provides the concept of hierarchy , When we find that a layer is contained in a larger layer , Just compare the levels of these two layers , If this element level is small , So it's invisible . Pictured ：

The text here is contained in a rectangular box , Visually, I can't perceive the existence of words , So it should not exist in the final code .  Based on this processing, our generated code will be more neat , There is not much interference from invisible layers .

3.2.2 Merge layers of the same size

In a scene with a background color , Designers often place a layer of background color , Then group these layers with other layers that need this background color , In this way, there will be two layers of the same size in our layer , If you don't do it , Redundant elements will appear in the generated code , And this is unnecessary .

Here the designer will have a gray background Mask And other skeleton diagram components are grouped into Card_ The theme , If we don't merge layers , Then the layer of this group is redundant .

Based on this scenario , Merging layers of the same size can improve the layer , Make the generated code elements less （ Layers need to consider color 、 transparency 、 Level and other information , The specific logic may be cumbersome ）.

3.2.3 Delete group information

Because the grouping information in the design draft is usually added by the designer according to his own wishes , Do not have certain specifications , The reference value of these contents is not very high , So we need to delete these useless layers in this step, and then generate the corresponding layers according to the general logic of the algorithm .

Note: The above steps of merging layers also include the process of deleting group layers , The main group layers deleted here are those that have not been merged .

3.2.4 Delete the status bar component

Because the design draft has a status bar layer, and the status bar is inherent in the mobile phone , So delete these layers .

The current practice is to find the layer named according to the layer name Carrier、Wi-Fi、Battery Then delete the parent layer ( There may be risks , But for the skeleton screen, the risk is very low ).

3.3 General algorithms —— Layer regrouping

Organize layers based on the previous step , Our current layer is in a flat data structure , This step is to reorganize these flat data structures into tree data structures .

3.3.1 Find the included layer

Judging the inclusion relationship between two layers is very simple , According to the coordinates and width and height of the layer . Inside this , Three gray skeleton diagrams Block The component is wrapped in a white layer .

It should be noted that , If we judge that one layer is contained in another layer , There should be no rush to put this layer in . This is because if this layer can be placed in other layers , And the level of this layer is higher than that just now , Then this layer is likely to be placed in the current layer .

Because after we delete the invisible layer, all the layers are theoretically visible , If you put it in the previous layer , Not visible in the generated code （ Obscured ）. The text here should be contained in a red rectangle , If we mistakenly include it in a gray rectangle , Then the generated text will not be visible .

3.3.2 Cut horizontally and vertically

The processed layer has a certain tree structure , But it's far from the tree structure that can generate code . The purpose of horizontal and vertical cutting is to subdivide the current tree structure , Judge what is OK 、 Which are the columns 、 What is indivisible （ Elements intersect or have only a single element ）.

Specifically, we use projection cutting to cut horizontally and vertically . As shown in the following design draft, we cut horizontally and vertically as follows ：

Then the optimal solution is selected according to the number of nodes in the generated structure and the disturbance layout index .

Disturbing the layout index ： finger flex The minimum number of elements in the layout that deviate significantly from the direction of the primary and secondary axes .

3.4 General algorithms —— Layer style processing

This step mainly needs to do some style processing .

3.4.1 Basic style information processing

This part mainly deals with the basic style information of the layer , For example, the border 、 Round corners 、 Background, etc , Generate reusable platform independent intermediate code representation .

3.4.2 Layer plus layout information

The result of the vertical and horizontal cutting above allows us to determine which rows are 、 Which are the columns 、 What is indivisible , This step is to add these generated elements to platform independent style code, such as margin、padding、top and flex etc. .

• For the line , add to flex Layout
• For the column , add to margin Information
• For indivisible elements , add to position location

Through the above processing steps , We can start from a cluttered design layer , Finally, a complete 、 Highly reusable and platform independent specific code .

3.5 Intermediate code

We choose UIDL As a form of intermediate code . Mainly used UIDL Medium ComponentUIDL and UIDLElementNode. About UIDL Of playground, You can click on the This link . Of course ,UIDL Provide platform independent code generation Generator API, We can also generate... In the form of code .

3.6 Generate platform specific code

With the representation of intermediate code , We can convert it into any corresponding code expression . In the practical scheme of this paper , The content of the visual manuscript marked with the skeleton screen . Implement the minimum feasible product , In addition to verifying the accuracy of the scheme , More importantly, practicality .

RN Implementation of skeleton screen component , In front-end intelligence , To achieve a simplified code structure 、 Highly reusable object code generation content .

3.6.1 RN Frame screen assembly

The elements of the skeleton screen itself are relatively fixed , There are block level elements for the text part , There are also block level elements with rounded corners for the image part . Here, according to the content of visual design , It mainly extracts several categories ： card 、 Blocks and split lines . The main goal of extracting large classes , To simplify the implementation , Separate containers from elements , Inject common styles for each category .

In the process , We also need to follow the general front-end component design principles . The final goal code , It can be used separately for development , It can also be used as the purpose code of visual manuscript .

In addition to simplifying the implementation structure , about react-native The component also needs to implement a common loading Animation effect . Final destination code content , As follows ：

<Skeleton style={{ flex: 1 }} commonStyle={{ block: { backgroundColor: '#EEF1F6', borderRadius: 4 }, divider: { height: 1, backgroundColor: '#EEF1F6' }, card: { backgroundColor: '#FFF' }}}> <View style={{ backgroundColor: '#CCD6E5', padding: 16, paddingTop: 76 }}> <Skeleton.Block height={28} width={92} /> <Skeleton.Block height={16} width={92} marginTop={8} /> <Skeleton.Block height={44} width={720} marginTop={10} /> </View> <Skeleton.Card marginTop={-8} borderTopLeftRadius={8} borderTopRightRadius={8}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end' }}> <Skeleton.Block height={45} width={132} /> <Skeleton.Block height={20} width={132} /> </View> <Skeleton.Divider /> </Skeleton.Card></Skeleton>

According to the structure of the object code , The corresponding layer needs to be identified as Divider、Card、Block、LinearGradient and Container.

• The height is 1 The empty layer of pixels is recognized as Divider
• contain Block or Divider The layer is Card
• Empty layers are identified as Block
• Those with gradients are LinearGradient
• Others are Container

According to the above identification , You can generate an available react-native Code .

3.6.2 Component identification and service processing

The display part is mainly through Sketch Symbol Mark , Use UIKit Placeholder for the standard skeleton screen in the component library Symbol, This will be used in data processing Symbol Mark the design draft . By identifying the marked design draft , The design platform will design the draft JSON Data sent to DSL Processing interface , The interface returns the corresponding code after processing .

Four 、 effect

Designers use generic skeleton screen placeholders Symbol Make design draft , The design draft passed Sketch Upload the plug-in to the design platform . The platform identification design draft data contains the placeholder of the general skeleton screen Symbol, Mark the design type as skeleton screen . In dimension mode , The right information bar of the design draft with skeleton screen type will display the corresponding code display entry .

Click to enter the skeleton screen code display status , The right information bar will display the corresponding skeleton screen code and react-native-web Preview the rendered real-time effect , Developers can choose the corresponding code to use according to their own needs .

5、 ... and 、 Conclusion

Skeleton screen may be an implementation that can bring a better user experience , We hope that while constantly pursuing the user experience , Improve development efficiency , Reduce repetitive labor .

The scheme of this paper still has some shortcomings , For example, it does not support the development of code generated by independently selecting some regions . However, the automatic generation of skeleton screen is just an exploration in the direction of front-end intelligence , It is hoped that the front-end intelligence can be applied to more scenarios in the future .

Team recruitment information

We are the R & D team of Ctrip , In charge of Ctrip APP/PC Development and innovation of terminal air ticket business . Air ticket research and development in search engine 、 database 、 Deep learning 、 High concurrency and so on , Continuously optimize the user experience , Increase of efficiency .

In the research and development of air tickets , You can work with a lot of top technology bulls , Truly let millions of users enjoy your products and code , Enhance the travel experience and happiness index of global travelers .

If you love technology , And eager to grow , Ctrip ticket R & D team is looking forward to flying with you . At the moment, we are / backstage / data / There are open positions in test development and other fields .

Email address for resume delivery ：[email protected], Email title ：【 full name 】-【 Ctrip ticket 】-【 Delivery position 】.

【 Recommended reading 】

• React Server Components On

• Taro Virtual list best practices

• Ctrip tickets H5 Turn to small program practice

• Ctrip Web CI/CD practice

 “ Ctrip technology ” official account

  Share , communication , grow up