current position:Home>How is the front-end intelligent D2c? Let me show you

How is the front-end intelligent D2c? Let me show you

2021-08-27 03:07:07 Blue autumn wind


The front end has been trying to improve the efficiency of developers in recent years , From the initial scaffolding tools 、 Component library 、 Continuous integration system 、 automated testing 、 Multi terminal adaptation to today's comprehensive low code platform 、 Front end intelligence 、 On-line IDE, Everyone is working for a new and efficient way in the future .

The front-end industry is about to enter the next stage , Because for how to build a component library 、 Scaffolding has a lot of articles / course , It's almost time for everyone to tear up a component library by hand , And with the general improvement of the technology of front-end developers , Write code boring and mechanically ( style / Layout ) It has been unable to meet the growing desire of developers to pursue technology , Therefore, intelligent layout is needed to liberate these boring jobs .

To be behind is to be beaten , I'm going to take advantage of the weekend to explore the front-end intelligence .( I am also a novice , Pure interest ~, So don't worry about not understanding )

development history

In fact, from the design draft to html Project , It can be traced back to PS(Photoshop) Export of html function ,PS(Photoshop) It can be said to be an old brand design product , from 1988 The new version was first released in , It's still being updated .

Let's experience this function .

Start by opening PS, Import a picture downloaded from the Internet , take picture Drag in PS. Then follow the steps below .

1. Press command/ctrl + R Open the ruler

2. Pull out the auxiliary line , Drag out the partition block

3. Choose slicing tools ( Right click the icon of the clipping tool )

4. Select the reference line based slice at the top

5. file - export - Stored as web Format used

You can see that the following files have been exported .( I cut it rough here. If I slice a picture finely , It should be very consistent with web The format used by , After all, a long time ago , That's how the designer sliced us )

And then we open up html Look at the elements inside .


It was found that it was mainly table The way to layout , But this form , It can't be used on an increasing number of devices ( Maybe at that time PC There are also good application scenarios on .)

The front end was in its infancy , The concept of front-end intelligence has not been proposed yet , No, Vue、React, No Engineering , There is no low code , Everything is just starting , Front end intelligence has not been mentioned .

until 2017 year , A piece of pix2code: Generating Code from a Graphical User Interface Screenshot The paper has attracted the attention of the industry , This paper realizes from a UI Screenshot recognition generates UI structure , And will UI The structure description is transformed into HTML Code .

And then , be based on pix2code Developed Screenshot2Code The project speed has entered Github Top of the list , The tool is able to UI The screenshot turns into HTML Code , The author of the project is known as 3 Artificial intelligence will revolutionize front-end development in years to come .


2018 year , Microsoft AI Lab Open source sketch to code tool Sketch2Code, Some people think that the generated code is not ideal for production environment , But some people think that automatic code generation is still in its infancy , Future development is worth imagining .

workflow :


Effect of implementation :


Until 2019 year , D2 Front end Forum (Designer & Developer Frontend Technology Forum, abbreviation D2) Released imgcook , The term front-end intelligence has been officially established .

And then 58 The group 、CodeFun etc. Have successively released intelligent products , But the industry is young , It is also challenging , These products are still in their infancy , Although we can't get the favor of developers in all aspects , But there are already some good landing scenes .

Project experience

Design draft :demo.sketch

Code and the sketch Download address :

<img src="" alt="image-20210819200136614" style="zoom:50%;" />

This time we will experience 58 Of Picasso、imgcook、CodeFun 3 Of this tool 「sketch Design draft to code 」.

We will analyze these three software with several parts that we pay more attention to in writing code :

  1. Whether the design draft can be restored
  2. Accuracy of layout recognition
  3. Code (css) Maintainability ( The amount of code , Fixed width and fixed height ,flex)
  4. List Automatic identification , grouping
  5. List loop identification

The first point is the most basic , Because if one D2C(Design To Code) Tools , Aside from some layout , Even the basic design can't 1:1 Restore words , It's too much for our development workload , It's like a colleague has written a semi-finished product project , At this time, he suddenly asked for leave , Need our help , At this time, we need to look at other people's code , Go ahead and revise . Often at this time, my heart will say , You might as well write a new project yourself .

For the second point , Accuracy of layout , It's a left-right layout , You identified me as a top-down layout , Basically, the code of that piece has been modified again . Compared with the first point , A little better , At least not to clean up a semi-finished product , Just change the project written by others bug equally , At least it works .


The third point is , I think it's still very important ,CSS Code maintainability , We all know that the size of modules on the design drawing is width and height Marked by , But when we really write code , They will not set the width and height , The internal elements are used to support the module , In this case , The short adaptation of the mobile terminal will be better .

<img src="" alt="image-20210822181228618" style="zoom:33%;" />

For points four and five , It's a reuse expert who writes code , For one list We don't usually go to html Write dead into multiple block , It's comfortable with circulation , Reduce duplicate code , It is also to be able to adapt to the back end .

58 Picasso(

Operation process :

Picasso Of Github Warehouse Download its sketch Plug in Picasso , stay sketch After selecting our Sketchpad, we generate Web Code .

<img src="" alt="image-20210819200538887" style="zoom:50%;" />

Then you export such a file , Let's open it index.html Let's see the effect .

<img src="" alt="image-20210819200724369" style="zoom:50%;" />

1. Whether to restore the design draft :

<img src="" alt="image-20210819201050116" style="zoom: 50%;" />

How to put it? , You can see 58Picasso In fact, the reduction effect is not known how to be squeezed except the paid in price of the order , And the bottom footer In addition to the disordered style, it looks ok , Let's see what the code is like .

2. Accuracy of layout recognition :

<img src="" alt="image-20210819221257782" style="zoom:20%;" />

What we expect is two blocks of left and right structures , But it was recognized like this ...

Although the above uses flex Layout , But there is no equal distribution , And it's also set wide , What we want is :

3. Code maintainability :

index.css Generate 1289 That's ok .


Analyze the reason why it generates so much code .

1. Cumbersome class names

It gives everyone div Element is set with an English word , And it is seriously inconsistent with the semantics of the current module .

<img src="" alt="image-20210819223432335" style="zoom: 33%;" />

2. Fixed width and fixed height

Because it gives everyone div They are fixed width and height , Therefore, a lot of unnecessary code is generated .

3. The same type cannot be merged

Because there is no way to classify the same elements , So the code has become more .

4. List Automatic identification , grouping

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

<img src="" alt="image-20210820001248378" style="zoom: 33%;" />

even list Didn't recognize well , Then there is no fifth step , To sum up, such code , It's like a pot thrown by colleagues , Difficult to maintain , Have time to look at the code and fix the code , I have written a perfect version .

5. summary

therefore Picasso There is still a certain gap from the industrial code , however Picasso Our code is open source , The layout scheme is resolved through layers DSL, Then the code generated by a certain algorithm .


technological process :

imgcook Its official website Download its sketch plug-in unit , stay sketch Open the plug-in panel and select export code to export to our project , Then you can check our project on the official website .

<img src="" alt="image-20210819224426696" style="zoom:50%;" />

1. Whether to restore the design draft :

<img src="" alt="image-20210819224611510" style="zoom:50%;" />

You can see from the picture that ,imgcook It seems that the design draft has not been restored .

The hierarchy of order management seems to be blocked by the top , in addition Button It's all painted , It looks very thick .

2. Accuracy of layout recognition :

<img src="" alt="image-20210819230618209" style="zoom:50%;" />

Take a closer look at the layout , In fact, the recognition is better than the above 58 Picasso It's a lot more accurate , It is more in line with our daily habit of writing code , But the width is still set .

3. Code maintainability :

CSS Generate 1870 That's ok ... There is a lot of redundant code .

In fact, this part is still related to 58 Picasso The same problem . Cumbersome class names , Fixed width and fixed height , And the same type is not merged ( I haven't found how to merge ), Others are through absolute To lay out .

<img src="" alt="image-20210820004007830" style="zoom: 50%;" />

4. List Automatic identification , grouping

Here, too 58 Picasso It's kind of similar , It seems that the effect is still not ideal . It's also not a good way to list For identification .

imgcook It is also a product that has been made for a long time , so D2C It's still very difficult , The requirements for the algorithm are very high .


5. summary

Imgcook Than 58 Picasso Many improvements , Joined the AI To train the model , Accuracy and availability are better than Picasso Much better . And the model training framework pipcook Also open source github above .


technological process :

CodeFun Its official website Download its sketch plug-in unit , stay sketch Open the plug-in panel and select upload this design draft , Then you can check our project on the official website .

<img src="" alt="image-20210816151945487" style="zoom:50%;" />

1. Whether to restore the design draft :

<img src="" alt="image-20210819225417335" style="zoom:50%;" />

It's a surprise ,CodeFun This restoration is better than both of the above , And the design draft looks almost 100%.

2. Accuracy of layout recognition :

<img src="" alt="image-20210819233809695" style="zoom: 15%;" />

Perfectly identify the layout we expect , But what I want to mention here is ,CodeFun Not only identify, but equally flex Layout , And compared to imgcook No fixed width , It USES flex-grow:1

The effect is as shown in the picture :

Look at the code and see , The styles of some public parts have been translated into equal-division-item This class Inside , How many? box All shared , only flex-grow:1 It was made alone group_16 17 18, Caused some redundant css Code , Such a complex recognition has been done , Is this a bug Well ?

3. Code maintainability

css Code generation 597 + 81 = 678 That's ok ( Main code + Public code ), Than Picasso Of 1289 Row sum imgcook Of 1870 Rows are reduced by 47% and 64%.

Although the class name is still somewhat non semantic , But the width and height of dead writing have been removed , The same type is merged and the common code is extracted .

<img src="" alt="image-20210819234847486" style="zoom:50%;" />

4. List Automatic identification , grouping

CodeFun It can automatically identify the following three order modules with similar structure , And group , Put three pieces of bread on one wrapper, In line with our developers' daily habit of writing code .

<img src="" alt="image-20210820002841419" style="zoom:50%;" />

5. List loop identification

Because the following three modules with similar structure have been identified , therefore vue The code will automatically start with v-for List loop The way to show .

If you want to pull away the data , You can customize the field name through the data binding above ( Generally, we will bind the field name passed from the back end ).

The effect after binding is as follows , In fact, at this stage , The generated code is fully available . And the flower ~~

6. summary

evaluating CodeFun When , It's still bright in front of me , Although for the class name , You still need to modify it yourself ( However, for some pages that do not need to be maintained so frequently , You can also leave the class name unchanged ), But for the above I listed 5 The points have been perfectly parsed .CodeFun through AI Model for intelligent training , But the effect of training is better than imgcook More powerful .


CodeFun imgcook 58 Picasso
Support language Vue/React/ Wechat applet /Taro(vue)/uni-app Support 15 More than DSL Html/ Wechat applet /Reactive Native
Whether to restore the design draft yes no no
Accuracy of layout recognition high Higher low
Example sketch After export css The amount of code ( That's ok ) 678 1870 1289
Code maintainability good good commonly
Data binding Support Support I won't support it
Accuracy high commonly low
Comment on stars ️️️️️ ️️️ ️️

Code quantity calculation : Export all the code (html+css+js)- Useless initialization code ( for example reset.css)

Code maintainability : Node changes 、 Change of position 、 Style change 、 Attribute changes (

The future and prospect

Through this evaluation , I also learned some knowledge about front-end intelligence and the support of existing platforms . It is found that front-end intelligence can still help us improve efficiency in the future , At least above the page restore degree , Still very perfect , There is no need to constantly argue with the design , And you don't have to be a cutaway , Ability to focus productivity on writing JS , Write the logic of the page ( It seems to be similar to back-end Engineering , Just focus on logic and data ).

After all 200 Years ago, you told the Chinese that there would be no more emperors , They will tell you when there has been no emperor since Pangu opened the world ? As long as we dare to think, nothing is impossible . Like at this stage , Autopilot 、 Face recognition No matter which technology matures , Have a great impact on our industry .

The front end is no exception , Front end intelligence 、Web AR/VR、 Front end low code 、 Maturity of each item across the front end , Will have a disruptive impact on us .

Future period !

Reference material

Looking back at the author's previous highly praised articles , Maybe more !


️ Focus on + give the thumbs-up + Collection + Comment on + forward ️ , Originality is not easy. , Encourage the author to create better articles

Official account Notes of autumn wind , One focused on front-end interviews 、 engineering 、 The official account of open source front-end public

copyright notice
author[Blue autumn wind],Please bring the original link to reprint, thank you.

Random recommended