What's going on with the front-end intelligent D2C? Let me take a look at it

Preface

The front-end has been trying to improve the efficiency of developers in recent years. From the initial scaffolding tools, component libraries, continuous integration system, automated testing, and multi-end adaptation to the current comprehensive low-code platform, front-end intelligence, and online IDE, everyone We are working hard for a new and efficient way in the future.

The front-end industry is about to enter the next stage, because there are already a large number of articles/tutorials on how to build component libraries and scaffolding. It is almost at the stage where everyone can tear a component library by hand. General improvement, boring mechanical code (style/layout) can no longer satisfy the developers' growing desire to chase technology, so intelligent layout is needed to liberate these boring tasks.

I will be beaten if I fall behind, and I plan to explore front-end intelligence during the weekend. (I am also a novice, purely interested~, so don’t worry about not understanding)

development path

In fact, the project that converts design drafts into html can be traced back to PS (Photoshop) 's export html function. PS (Photoshop) can be described as an old design product. Since the first new version was released in 1988, it is still Updating.

Let's experience this feature.

First open the PS, import a picture downloaded casually on the Internet, and drag the picture into the PS. Then follow the steps below.

1. Press command/ctrl + R to open the ruler

2. Drag out the auxiliary line, drag out the dividing block

3. Select the slice tool (right click on the icon of the crop tool)

4. Select the top slice based on the reference line

5. File-Export-save as web format

You can see that the following files have been exported. (I cut it rough here. If I slice a picture finely, it should fit the format of the web very well. After all, a long time ago, the designer sliced it for us like this)

Then we open the html to view the elements inside.

It is found that it is mainly laid out in the form of tables, but this form is unusable on an increasing number of devices (maybe there are still good application scenarios on the PC at the time.)

The front-end was in its infancy at the time. The concept of front-end intelligence has not yet been proposed. There is no Vue, React, no engineering, and no low-code. Everything is just getting started, and front-end intelligence has not been mentioned.

Until 2017, a paper of pix2code: Generating Code from a Graphical User Interface Screenshot attracted the attention of the industry. The paper realized the recognition and generation of the UI structure from a UI screenshot, and the UI structure description was transformed into HTML Code.

Screenshot2Code project developed based on pix2code entered the Github ranking first in speed. This tool can convert UI screenshots into HTML code. The author of the project claims that artificial intelligence will completely change front-end development in 3 years.

In 2018, Microsoft AI Lab open sourced the sketch-to-code tool Sketch2Code . Some people think that the code generation effect is not ideal and not suitable for the production environment, but some people think that automatic code generation is still in its infancy and future development is worthy of imagination.

Workflow:

The effect is achieved:

Until 2019, D2 Frontend Forum (Designer & Developer Frontend Technology Forum, referred to as D2) released imgcook, and the word frontend intelligence was formally established.

Subsequently, 58 Group, CodeFun, etc. have successively released intelligent products, but the industry is young and challenging. These products are still in the early stages. Although they cannot be favored by developers in all aspects, they have already There are some good landing scenes.

Project experience

Design draft: demo.sketch

code and sketch download address:

This time, I will experience the "sketch design draft transcoding" of 58 Picasso, imgcook, and CodeFun.

We will analyze these three software with several parts that are more important in ordinary code writing:

1. Is it possible to restore the design draft
2. Accuracy of layout recognition
3. Code (css) maintainability (code amount, fixed width and fixed height, flex)
4. List automatic recognition, grouping
5. List cycle recognition

The first point is the most basic, because if a D2C (Design To Code) tool, apart from some layouts, even the basic design draft cannot be restored 1:1, it is too huge for our development workload. Now, it's like a colleague has already written a semi-finished project. At this time, he suddenly has something to ask for leave and needs us to help the end. At this time, we need to look at other people's code and then modify it. Every time this time, I will talk in my heart, it is better to rewrite a project by myself.

Regarding the second point, the accuracy of the layout is obviously a left-right layout. You identified it as a top-bottom layout. Basically, the code in that piece has been re-modified. Compared with the first point, it is slightly better, at least not to clean up a semi-finished product, but to fix a bug in a project written by others, at least it can still be used.

The third point, I think it is still very important, the maintainability of CSS code, we all know that the size of the module on the design drawing is marked by width and height, but when we really write the code, they are not The width and height are fixed, and the internal elements are used to expand the height of the module. In this case, the short adaptability of the mobile terminal will be better.

For the fourth and fifth points, it can be regarded as a small code reuse expert. For a list, we generally do not write multiple blocks in html, but use loops to be comfortable and reduce repetitive code, but also to be able to reconcile The back end is adapted.

58 Picasso(https://github.com/wuba/Picasso)

Operating procedures:

Picasso's Github repository download its sketch plug-in Picasso, select our sketchpad in the sketch to generate the web code.

Then exported such a file, let us open index.html to see the effect.

1. Whether to restore the design draft:

How to say it, you can see that the reduction effect of 58Picasso is actually ok except for the actual price of the order, and the style of the footer at the bottom is messed up. Then let's see how the code is.

2. Accuracy of layout recognition:

What we were expecting was two blocks with a left and right structure, but they were recognized as such...

Although the flex layout is adopted above, the layout is not divided equally, and the width is fixed. What we hope is:

3. Code maintainability:

index.css generates 1289 lines.

Analyze the reason why it generates so much code.

1. Cumbersome class names

It sets an English word for each div element, and it is seriously inconsistent with the semantics of the current module.

2. Fixed width and height

Because it sets the width and height of each div, it also generates a lot of unnecessary code.

3. The same type cannot be combined

Since there is no way to categorize the same elements, the code has become more.

4. List automatic identification, grouping

Analyzing this design draft, we can see that the blocks of the following three orders are actually very similar structures. We hope that the generated code can identify similar structures and group them in the same group instead of tiling.

Even if the list is not recognized well, there is no step five. To sum up, such code is like a pot thrown by a colleague. It is difficult to maintain. I have time to look at the code and fix the code, and I have written a perfect version.

5. Summary

Therefore, there is still a certain gap between Picasso and industrialized code, but Picasso's code is open source, and the layout scheme inside is to parse out the DSL through layers, and then generate the code through a certain algorithm.

imgcook(https://www.imgcook.com/)

Process:

Download its sketch plug-in on imgcook's official website , open the plug-in panel in Sketch and select the export code to export to our project, and then you can go to the official website of our project to view it.

1. Whether to restore the design draft:

As you can see from the picture, imgcook doesn't seem to restore the design draft.

The level of order management seems to be blocked by the top, and the buttons are all stroked, which is very thick.

2. Accuracy of layout recognition:

Looking carefully at its layout, the recognition is actually much more accurate than the above 58 Picasso, which is more in line with our daily code writing habits, but the width is still fixed.

3. Code maintainability:

CSS generated 1870 lines...a lot of redundant code.

In fact, this part still has the same problem as 58 Picasso. The cumbersome class name is fixed in width and height, and the same type is not merged (how to merge is not found for the time being), and some are laid out through absolute.

4. List automatic identification, grouping

This is also a bit similar to 58 Picasso, it seems that the effect is still not ideal. Also, the list is not well recognized.

imgcook can be regarded as a product that has been made for a long time. It can be seen that the difficulty of D2C is still very large, and the requirements for the algorithm are very high.

5. Summary

Imgcook is much better than 58 Picasso. AI is added to train the model. The accuracy and usability are much better than Picasso. And the model training framework pipcook is also open source on github.

CodeFun(https://code.fun/)

Process:

Download its sketch plug-in on CodeFun's official website , open the plug-in panel in Sketch and choose to upload this design draft, and then you can go to the official website to view our project.

1. Whether to restore the design draft:

Very pleasantly surprised, the restoration of CodeFun is better than the above two, and the design draft looks almost 100%.

2. Accuracy of layout recognition:

Perfectly identified the layout we were expecting, But what I want to mention here is that CodeFun not only recognizes the flex , but also does not have a fixed width compared to imgcook. Instead, it uses flex-grow:1

The effect is as follows:

Looking at the code, you can see that some of the common parts of the style have been translated into the equal-division-item , and several boxes are shared, but flex-grow:1 is made into group_16 17 18 separately, resulting in some redundant css code, which is so complicated The recognition has been achieved, is it a bug here?

3. Code maintainability

css code generator 597 + 81 = 678 lines (in the main common code +), than Picasso the 1289 rows and imgcook of 1870 line were reduced by 47% and 64% .

Although the class name is still somewhat unsemantic, the hard-coded width and height have been removed, and the same type has been merged to extract the common code.

4. List automatic identification, grouping

CodeFun can automatically identify the following three order modules with similar structures, and group them into a wrapper, which is in line with our developers' daily code writing habits.

5. List cycle recognition

Because the following three modules with similar structures have been identified, the vue code will automatically be in the form of 16125c0555beb2 v-for list loop .

If you want to extract the data, you can customize the field name through the data binding above (usually we will bind to the field name passed by the backend).

The effect after binding is as follows. In fact, at this step, the generated code is completely usable. Sprinkle flowers 🎉~~

6. Summary

When evaluating CodeFun, it still shines. Although it is said that for the class name, you still need to modify it yourself (but for some pages that do not need to be maintained so frequently, you can also not modify the class name), but for the above I listed The 5 points of the have been perfectly resolved. CodeFun also uses AI models for intelligent training, but the training effect is more powerful than imgcook.

in conclusion

	CodeFun	imgcook	58 Picasso
Support language	Vue/React/WeChat Mini Program/Taro(vue)/uni-app	Support more than 15 kinds of DSL	Html/WeChat applet/Reactive Native
Whether to restore the design draft	Yes	no	no
Accuracy of layout recognition	high	Higher	Low
The amount of css code after the sample sketch is exported (line)	678	1870	1289
Code maintainability	good	better	generally
Data binding	support	support	not support
Accuracy	high	generally	Low
Star rating	⭐️⭐️⭐️⭐️⭐️	⭐️⭐️⭐️	⭐️⭐️

Code calculation: export all codes (html+css+js)-useless initialization code (eg reset.css)

Code maintainability: node changes, location changes, style changes, attribute changes ( https://juejin.cn/post/6911879030559997966#heading-21)

Future and outlook

Through this evaluation, I also learned some knowledge of front-end intelligence and the degree of support of the existing platform. I found that front-end intelligence can still help us improve efficiency on the road in the future, at least in terms of page reduction, it is still very perfect, there is no need to constantly wrestle with the design, and there is no need to be a cut figure. Focus on productivity in writing JS and the logic of writing pages (as if it is almost the same as back-end engineering, only need to focus on logic and data).

After all, 200 years ago, you told the Chinese that there would be no emperors in the future. They would tell you when there was no emperor since Pangu opened the world? As long as we dare to think, nothing is impossible. At this stage, the mature technology of autonomous driving and face recognition will have a huge impact on our industry.

The front-end is no exception. The maturity of front-end intelligence, Web AR/VR, front-end low-code, and front-end cross-end will have a disruptive impact on us.

The future can be expected!

Reference

https://stackoverflow.com/questions/10979836/export-html-and-css-from-photoshop-or-indesign

https://zhuanlan.zhihu.com/p/44315661

https://github.com/ashnkumar/sketch-code

https://fusion.design/pc/component/box?themeid=2

back at the author's previous highly praised articles, you may be able to gain more!

• 2021 front-end learning path book list-the road to self-growth
• Talk about the front-end watermark from cracking a design website (detailed tutorial)
• takes you to unlock the mystery of "File Download"
• 10 kinds of cross-domain solutions (with ultimate big move)

Concluding remarks

+ Like + Favorite + Comment +

Pay attention to the notes of the Qiufeng, a front-end public account that focuses on front-end interviews, engineering, and open source