Dewu Technology Discuss the Evolution of Several Schemes of Automatic Code Generation

Today we talk about the issue of automated code generation. Just imagine, if one day a machine replaces you to write code, should you be happy or sad?

plan

The current code generation technology mainly includes the following categories:

1) Generate code based on template layout

First of all, let's talk about the method of generating code based on templates. This is the most primitive, simplest and most widely used method of code generation. It can be said that almost all code generation methods are based on templates and multiply.

The most famous front-end is vue-cli and create-react-app two scaffolding code generation, they are based on the vue and react framework for one-click initialization project generation code, including the scaffolding generated by projects within each company, in fact The essence is the same, except that many public components and methods integrated within the company are added.

In fact, the earliest code generation was not the front-end, because at that time there was no concept of front-end. In the era of WWW, pages were basically developed by the back-end. Therefore, in the field of template code generation, we just walked through the back-end. road.

Remember that the first contact with template code generation was when the back-end project was first developed. At that time, the MVC architecture was still used. When a new functional module is to be developed, it is often necessary to inject new codes into the controller, service, and dbService respectively. , A bit similar to the structure in egg (if you are not familiar with back-end development), so in this mechanized relatively fixed structured organization, it is often generated by one-click command, and then write unique in service/dbService Logic is fine.

This development model can save a lot of development time and is easy to get started. Developers often only need to pay attention to logic development, but often there will be a lot of repetitive code, which is also the drawback of automatic code generation.

2) Generate code based on visual UI

Code generation based on visualization is also the most popular product on the market. It is also a kind of hat that many visualization construction articles forcibly put on it, but to be precise, it is not completely automated production code, but just one of them. It's just a link. Because it requires too much human intervention to finally get the running program we want, it feels that it is not automated at all. How can it be worthy of the word "automation"?

However, visual construction can indeed bring some productivity-saving functions, and it also empowers other roles. It is not necessary to build applications for development. They do not even need to understand any procedures, but can be design, product, and operation.

One of the most mature is the generation of code in the automotive industry. Yes, you read that right, it is the automobile industry. In our impression, the automobile industry is a more traditional industry, and it seems that it is incomparable with the code programming of the emerging industry Internet. However, before 2010, most of the car control software, such as engine controls, gearbox software, body control software, etc., were completed by handwriting C code. The development process is as follows:

The designer does not understand the code. From the delivery of the design drawing to the completion of the final controller, there will be two problems in this process. The communication cost between the designer and the coder and the quality of the coder's delivery, the larger the project The two major issues are more prominent, directly affecting the delivery date, cost and quality. Normally, delivery time is inversely proportional to cost and directly proportional to quality. Today, when time is money, it is better to ensure cost and quality at the same time. It is trying to standardize the code while reducing communication costs.

Therefore, visualizing the UI to generate code seems to be the most appropriate way. From the designer's point of view, it binds the view UI and the command line one by one, and the designer drags a view to generate a corresponding C code. Eventually, the farmers were laid off.

The visual logic control handled by the mature Simulink software above can only handle simple logic, which is the same as the design concept of modern logic orchestration. Of course, it also has its own shortcomings that it is not suitable for complex projects. In this scenario, it is actually less efficient than writing code directly.

Another well-known example of visual UI generation code is the eclipse web building in the .NET era. You should know this tool if you have used the eclipse editor to develop a web interface, as shown in the figure\

It’s just that it’s inferior to the Three Musketeers on the web in terms of the developer’s user experience, and it was eventually eliminated. After all, it is only an IDE developed by JAVA. The development of Web visualization is just one of the extensions. Here also tells us a truth, a product. Fine and beautiful, it is easier to succeed than big and strong. Focused and top-notch is the secret of success for many products.

Of course, there are too many visually built systems at present. At present, they are mainly divided into two methods, run-time building and generating source code building, and I will not introduce them one by one here.

3) Generate code based on code corpus

The premise of producing code based on code corpus is to have enough corpus, that is, code snippets. In this way, applications are usually developed based on IDE plug-ins. Because its ultimate purpose is to improve development efficiency, the target user group is developers, and development intervention must be involved to generate a semi-finished code fragment or module.

If you have the patience to read this, it means that you are a colleague who is interested in the field of code generation. In order to express gratitude, I will have a wave of welfare next. The benefits here are only for front-end development, mainly for the introduction of the vscode plugin.

In fact, it needs to be divided into two scenarios, simple and complex:

• Fixed corpus
• Intelligent corpus

Fixed corpus

The code snippets set by the user in advance, by monitoring the user's input shortcut key value, search for the corresponding snippet, and prompt the user. \
Prompt plugin for vue Vue 3 Snippets\
Prompt plugin for react ES7 React/Redux/GraphQL/React-Native snippets\
The downloads of the above two plug-ins are more than one million, so the popularity is absolutely leveraged. Of course, if you think they are not easy to use, or are not suitable for the company's internal code snippets, you can also customize them yourself.

This method of generating code is simple and fast, but it also has its drawbacks. Immobilization is not easy to expand, and the most unpleasant thing is that users need a certain learning cost, and they need to know the key value and the corresponding code fragment in advance.

In order to solve this shortcoming, smart programmers joined intelligence, using training and learning methods to find out the corresponding code fragments, so there is the next intelligent corpus.

Intelligent corpus

1) Kite Autocomplete plug-in \
First introduce the first intelligent code prompt vscode plug-in Kite Autocomplete, an ML model trained on more than 25 million files. Kite adds AI-driven code completion to your code editor, giving developers superpowers. \

It predicts what the user will input based on the context of the user's input and the current input.

In terms of security, kite runs locally, your code is private and will not leave your machine.

This kind of intelligent input relies on the n-gram model (children’s shoes who don’t know the n-gram model can search for it by themselves), but it is one step ahead of the n-gram model, and it reads the context of the entire file in advance. Combine the current input and then infer the user's behavior.

In general, the Kite Autocomplete plug-in is quite grass for you here, it is super easy to use, whoever uses it will know 161695f424d3b5.

2) GitHub Copilot plugin \
Next, I will introduce another smart code prompt vscode plug-in GitHub Copilot, which is an AI code generation tool jointly launched by OpenAI and Microsoft. It can be said that it is the official son of vscode, but it requires registration to use it. Let us see you its official introduction

GitHub Copilot is supported by Codex, a new AI system created by OpenAI. GitHub Copilot understands much more context than most code assistants. Therefore, whether in docstrings, comments, function names, or the code itself, GitHub Copilot will use the context you provide and synthesize the code to match. We are working with OpenAI to design GitHub Copilot to generate safe and effective code more intelligently when developers use it

Its biggest core competence is that it can automatically generate code based on comments, that is to say, you tell the editor the function description, it can automatically help you generate the code you want, doesn't it sound cool? Its realization principle is as follows:

Of course, it can also automatically fill in repetitive code. GitHub Copilot is very suitable for quickly generating templates and repetitive code patterns. This function is completely included in the fixed corpus introduced above. It can be said that it is very popular for programmers who need to write a lot of template code. An operation.

Another more important function is the test code, the official said that no hard testing is required. Testing is the backbone of any powerful software engineering project. Import the unit test package and let GitHub Copilot suggest tests that match your implementation code. \

According to the official website, it is a tool that is based on a training set but can generate new codes that have never appeared before. Doesn't it sound awesome? It can actually "create" code.

The last and most important point is that the GitHub Copilot plugin only provides a trial experience for limited users for the time being, and currently only has a preview version. In short, temporarily not available for .

4) Based on intelligent code generation

1）sketch2code\
After introducing GitHub Copilot, let us understand another intelligent generation tool from 161695f424d5f1

Its main function is to convert hand-drawn drawings into HTML code.

The process of its realization is as follows:
1. First, users upload pictures through the website.
2. The custom vision model predicts which HTML elements exist in the image and their positions.
3. The handwritten text recognition service reads the text in the predicted element.
4. The layout algorithm uses spatial information from all bounding boxes of predicted elements to generate a grid structure that accommodates all elements.
5. The HTML generation engine uses all this information to generate HTML markup code that reflects the results.

So I hurriedly tried a wave, the effect is as follows:

The left, middle and right are the original draft, the identification and analysis diagram, and the result is html
Since it’s a horizontal screen, um, I forgive you, let’s have another normal

The recognition is still not ideal.

At the same time, it also supports camera recognition, which means that as long as the hardware device is added, the product can be bibi on it... Oh no, it is planning and generating code at the same time. It is just native html code. I quickly tried it. Wave, result:

The above is a snapshot taken by the camera, after uploading...

What? Can't recognize it, okay. It is estimated that I drew more scribbled, and maybe the background of the picture is not completely white, so I used the official sample picture provided by it.

The effect is better, but it is still not fully recognized.

So it still has some flaws

• The generated result can only be native HTML
• The recognition rate is low, and the restoration of draft images needs to be improved

2）teleporthq
Another AI intelligent code generation tool is teleporthq , which is similar to the above sketch2code principle, but it goes further, as shown in the figure

The product manager draws pictures on the small blackboard while the machine behind scans, recognizes and generates codes, and gives a real-time preview of the effect. while drawing a draft, realizing the function of automatic code generation. For the original text, please go to ( https://teleporthq.io/blog/we-believe-in-ai-powered-code-generation).

Teleporthq's official website seems to be no different from ordinary visualization builders. However, if you look closely, you will find that it actually has more things than ordinary visualization builders, such as support for sketch to code, visual API, and these things It is what is necessary to realize real-time code output in combination with hardware devices. Of course, it can recognize the draft image as ememem~. In addition to the draft image, it also supports the recognition of Sketch material.

Currently it supports generated target codes such as React/Vue/Angular, etc., and more can go to its official website https://teleporthq.io/

Teleporthq is similar in principle to Ali’s imgcook in China, except that imgcook recognizes various designer materials (Sketch/PS/Figma) and generates multiple target codes. imgcook will not introduce them one by one, and readers can appreciate it by themselves. .

in conclusion

Today we introduced several ways of automatically generating code from the development history of the Internet:

• Generate code based on template layout
• Generate code based on visual UI
• Generate code based on code corpus
• Generate code based on intelligence

No matter how it develops, its essence has never changed. It is all based on the model itself, and only the conversion rules have changed.

Text/Alan
Pay attention to the material technology, be the most fashionable technical person!