Article/Micro Technology – Zhuang Xiaoduo, Hu Xiaogen, Ali Tao F(X) Team – Su Chuan

I believe science and technology is a industry custom software development company, have office collaboration involving industry, chain blocks, data visualization, retail electricity, water environmental protection, wisdom, wisdom, sanitation, JianWu wisdom, wisdom, government affairs, logistics, education wisdom, wisdom manufacturing, Internet of things, data analysis, network and security, O2O, P2P, B2B, B2C, etc.

Mobile and Web pages have been developed. The main front-end technology stacks include VUE, React, Flutter, UniApp, Taro, HTML, etc. Imgcook Sketch plug-in export, custom DSL, CLI command line, plugin plugin and other capabilities to improve front-end code development speed.

From 2020-02-03 to 2021-05-25, the number of modules created in IMGCook reached 2000+, covering 60+ front-end projects, helping r&d improve efficiency by 40%+.

usage

• Time: from 2020-02-03 to 2021-05-25, with 165 days generating code using IMGCook
• Usage: ImgCook created 2000+ modules covering 60+ front-end projects.
• Audience: front end, designer
• Number of users: about 26
• Improvement: 40% improvement, a normal mobile page without imgCook might take a day to develop, but with imgCook it takes half a day to complete.

Why imgcook?

​

• 1. Mainly improve the speed of front-end code development
• 2. Sample page -PC – Vue page:

Research and development steps

Step 1: Export to the editor from the imgCook Sketch plug-in

Step 2: Editor setup

1. Set the generated size

Mobile page generation

​

By default, uniApp and Taro generate code for mobile devices. When generating code on the mobile end, follow the following rules:

1. In the same project, all elements to be generated have the same width. If an Artboard is 375px or 750px on a mobile phone, all design elements uploaded to imgCook should be 375px or 750px wide.

2. The generated code is mobile screen adaptive. Uniapp and Taro have different adaptive mechanisms.

• Uniapp: RPX unit is officially recommended for mobile terminal adaptation. The code of uniAPP on the mobile terminal generated by the millimeter is self-adaptive in RPX.
• Taro: The official recommendation is to use PX or %. Taro will convert the size of PX to REM when compiling to H5 and RPX when compiling the applet. The Taro compiler cannot automatically convert px pixels because the style code generated by the Taro is a JS file. To solve this problem, Millipede uses Taro’s recommended taro.pxTransform () function to control the adaption.

Pad and Web page generation

​

Sometimes you need to generate pad or even desktop applications, and there are cases where you need to generate partial visual code (you can’t force the width of all elements to be generated to be the same as in mobile apps). If no configuration items are added, the generated code is not adaptive (layout chaos).

To solve this problem, in imgCook’s Web management side, two attributes have been added to the Page element to enable local code screen adaptation for pad or desktop applications.

export default {
  designWidth: 1920.// Width of design draft
  responsive: "vw"      // When configured responsive, CSS adaptively adopts VW unit. When responsive is not configured (only designWidth is configured), UniApp adopts RPX control adaptive control by default (experience better on pad), and Taro adopts tar.pxTransform () function by default to control adaptive control.
}
Copy the code

The configuration screenshot is as follows:

2. Set components

Since all the elements generated by imgCook are Div/Text/Image, there is no good support for form elements and complex components.

Imgcook’s component replacement is implemented internally with xmind2code configured components. Imgcook’s component replacement replaces the component in the xmind2code-> UI config file. Non-container components (input/button, etc.) are currently supported. Container component (such as Tab) replacement is not currently supported.

When the code is exported, the plug-in @imgcook/hm-replace-component is used to replace the component.

Imgcook install @ imgcook/[email protected]Copy the code

​

Imgcook’s schema has three main UI elements:

• Div
• Text
• Image

​

In principle, the above three elements in IMGCook can be replaced with any component in a tiny configuration. The suggested substitution is as follows:

• Text: imgcook Automatic replacement. No need to replace.
• Image: imgCook Automatic replacement. No need to replace.
• Div: Can be configured to be replaced with another component

​

Replacement steps:

• 1. On imgCook’s Web interface, configure the additional Div property hm-Component =\

export default {
  'hm-component': 'van-button'
}
Copy the code

The configuration screenshot is as follows:

​

• 2. Configure xmind2code components in the project. Reference for the configuration process: Xmind2Code Development Guide

​

Step 3: Export the code using the CLI command line

Install and configure the imgCook CLI

Official introduction:

Imgcook – The CLI uses the power of the Plugin to place code artifacts generated by the IMGCook platform into your local projects, seamlessly integrating them into your development process. Imgcook – CLI is the way to go if you need to customize your imgCook generated code (like using Plugin to automatically upload images to your map bed, or converting files to directories).

NPM install -g @imgcook/cli imgcook config edit #Copy the code

​

Configure the Plugin for the CLI, which is officially configured by default

• Image conversion plug-in:@imgcook/plugin-images
  • The image is converted to a local relative path when the code is exported, and the image is downloaded locally
• Module export generation:@imgcook/plugin-generate
  • Download the code locally

Then add a custom plugin:

• Component replacement plug-in @imgcook/ hm-replace-Component

​

The final configuration is as follows:

{
  "accessId": "RolT******V3d1",
  "dslId": "259",
  "generator": [],
  "plugin": [
    "@imgcook/hm-replace-component",
    "@imgcook/plugin-images",
    "@imgcook/plugin-generate"
  ],
  "uploadUrl": ""
}
Copy the code

Export code

Pull the module code and write it to a path in the file directory

#Pull a module code to a local path
imgcook pull <moduleId> --path <path>

#example
imgcook pull 17108 --path ./src/mods/mod17108
Copy the code

What imgCook abilities are used?

Imgcook Sketch plug-in export capability

Imgcook Sketch is a plugin for imgCook sketch.

Export the layer data using the imgCook plugin and paste it into imgCook.

​

Imgcook custom DSL generation view code ability

Imgcook offers custom DSL capabilities, so you can generate your own code based on the data and capabilities imgCook provides. Imgcook DSLS 10 imgCook DSLS have been developed to meet the code generation needs of different applications:

• Uniapp component code generation miniprogram uniAPP component development specification
• Uniapp page code generation miniprogram uniAPP page development specification

​

• Web VUE component code generation minuscule VUE component development specification
• Web VUE page code generation minuscule VUE page development specification

​

• React component code generates the React component development specification
• React page code is generated from the React page development specification

​

• RN component code generates a tiny bit of React Native component development specification
• RN page code generation minim React Native page development specification

​

• The Flutter component code generates a minimal Flutter page development specification
• The Flutter page code generates the minimal Flutter page development specification

Imgcook cli ability

Imgcook – THE CLI can combine the capabilities of the Plugin to put the code generated by the imgCook platform into the local project project with one click. We can download the code to the local project file through the CLI command line.

Imgcook Plugin capability

Imgcook (@imgcook/ hm-replace-Component) {imgCook (@imgCook /hm-replace-component) { Use to replace the component properties we set in the editor with our own component.

A link to the

• The official website of Minitech
• Micro technology code automation

Introduce imgCook to the team

Imgcook D2C is one of the best ways to introduce imgCook to your team. If you want to use imgCook D2C, but don’t know how to introduce imgCook, we have prepared the introduction and PPT for you

• Introduce imgCook.key to the team
• Introduce imgCook.ppsx to the team

1. Organize a sharing session

We could get the team together and organize an internal sharing session to introduce imgCook.

2. Show imgCook’s product introduction video

Imgcook’s product introduction video will give you an overview of what imgCook can do. Video link:

• Imgcook Quick To read (if you have no permission to open, refresh the page)​
• Imgcook Quick Demo (Refresh the page if you have no permission)

​

Or you can just do a live demo at imgCook.

Introduction:

Imgcook is an intelligent code generation platform for design drafts opened by Alibaba. It can generate maintainable front-end codes from Sketch, PSD, Figma and images with one click, such as React, Vue and mini programs, as well as custom generated codes.

Imgcook can export the layer data using the Sketch, Photoshop, and Figma plugins, or upload the design file parsing directly to the imgCook editor and view the generated code in the imgCook editor.

Imgcook use live wire

Introduction:

• 1. Import the design draft. Export the generated code from the IMGCook plug-in or upload the design draft file to parse the generated code.
• 2. The protocol for providing design draft allows users to manually mark layers to generate code (for scenarios where imgCook doesn’t handle well)
• Imgcook Intelligent generation principle is to transform the JSON Schema describing the design document file into a reasonable Flex layout nested structure and code semantics through the analysis, calculation and recognition of the design protocol, program algorithm and machine learning algorithm. This Schema is then converted into different types of front-end code using various DSL conversion functions.
• Imgcook JSON Schema is viewable in the imgCook Editor. You can modify views, styles, and so on in the visual editor, essentially modifying the JSON Schema.
• 5. View the code, essentially feeding the final IMGCook JSON Schema to the custom DSL conversion function, and the output of the function is the front-end code.

4. Can you give an example of how the teams used it

This document has some user use cases that you can take a look at, including imgCook’s open capabilities. Further user stories will be posted on imgCook’s website.

5. Learn about imgCook’s flaws to help you get better at it

Imgcook generates maintainable code automatically, but the draft layer is so varied that there are some scenarios that haven’t been covered yet. Such as:

• Related layer merge problem: atmosphere, background, ICONS etc. are composed of multiple layers in the design draft, and the generated code needs to merge and export into one image
• The layout rationality issue: ImgCook generated a nested layout structure that did not make sense or did not meet expectations
• UI logic code generation problem: The data in the design draft is static, but the actual online data is dynamic, resulting in some UI changes, but these UI changes are not known when the design draft is transferred to the code

Imgcook provides a draft protocol that allows users to manually intervene with layers, or visually adjust them in the IMGCook editor after generation.

Learn more

Imgcook has a peggie user group where you can ask questions about your usage. You can follow the progress at imgCook and the Nuggets account.

Collection of User Cases

If your team has access to imgCook’s D2C service or you have experience with imgCook, feel free to leave a comment in the comments section of this article or post a link to the article (ATA, Nuggets, Zhihu, etc.).

There will be a chance to get custom gifts from IMGCook.

​

If you have any questions, please join the group. Imgcook Internal God Group ali Internal users join imgCook Internal God Group Community users join imgCook Community God Group.

---