The HAOMO Technology Frontend Team Developed 2000+ Modules with imgcook

By HAOMO Technology - Zhuang Xiaoduo, Hu Xiaogen, Alibaba F(x) Team - Suchuan

HAOMO Technology is an industry software customization development enterprise that involves industries, including office collaboration, blockchain, data visualization, retail e-commerce, smart environmental protection, smart water, smart environment sanitation, smart inspection, smart government affairs, smart logistics, smart education, smart manufacturing, Internet of Things, data analysis, network and security, O2O, P2P, B2B, and B2C.

Both mobile and web pages are developed. The frontend main technology stacks include Vue, React, Flutter, UniApp, Taro, and HTML. HAOMO Technology uses imgcook sketch plug-in to export, customize DSL, CLI command line, and to improve the front-end code development speed.

From 2020-02-03 to 2021-05-25, the number of modules created in imgcook reached 2000+, covering 60+ frontend projects and helping R&D improve efficiency by more than 40%.

Usage

Time: There were 165 days to generate code using imgcook from 2020-02-03 to 2021-05-25.
Usage: The number of modules created in imgcook reaches 2000+, covering 60+ frontend projects.
Users: Frontend and Designer
Number of Users: Approximately 26 members
Effect Improvement: Effect improvement increased by 40%. It may take one day to develop a common mobile page without imgcook, but it takes half a day to use imgcook.

Why Use imgcook?

Improve the speed of frontend code development
Sample page - PC side - Vue page:

Research and Development Steps

Step 1: Export from the imgcook Sketch Plug-in to the Editor

Step 2: Editor Settings

1. Set the Generated Size

Mobile Page Generation

By default, the codes generated by UniApp and Taro are all used for mobile phones. When generating code on a mobile phone, you need to follow the following rules:

In the same project, all elements to be generated have the same width. Usually, the width of an Artboard is 375px or 750px for the design draft on the mobile phone, so all design elements uploaded to imgcook are kept 375px or 750px in width.
The generated code is adaptive to the mobile screen. The adaptive mechanism of UniApp and Taro is different.

UniApp: The official recommendation is to use rpx units to realize mobile adaptation. UniApp code on a mobile terminal generated by HAOMO is adaptive in rpx.
Taro: The official recommendation is px or percentage. Taro converts the size of px to rem when compiling into H5 and converts the size of px to rpx when compiling applets. The Taro compiler cannot convert px pixels automatically because the style code generated by HAOMO is a js file. HAOMO solves this problem using Taro's recommended Taro.pxTransform() function to control adaptation.

Pad and Web Page Generation

Sometimes it is necessary to generate pad-side or desktop-side applications, and there are situations where local visual codes need to be generated. (The width of all elements to be generated cannot be forced to be consistent like mobile phone-side applications.) If no configuration items are added, the generated code is not adaptive (chaotic layout).

Two attributes solve this problem by adding to the Page element to implement local code screen adaptation for pad or desktop applications in the web management side of imgcook.

export default {
  designWidth: 1920,    // the width of the design draft
  responsive: "vw"      // When you configure responsive, css adaptive uses the vw unit. If responsive is not configured (only designWidth is configured), uniapp uses rpx to control adaptation by default (experience is better under pad side), and Taro uses Taro.pxTransform() function to control adaptation by default.
}

The configuration screenshot is listed below:

2. Set Components

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

The component replacement of imgcook is realized by combining the components configured by xmind2code. The component of the imgcook is replaced by the component in the xmind2code->ui config file. Currently, non-container components (input/button) are supported. The replacement of container-type components (such as Tab) is not supported for the time being.

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

imgcook install @imgcook/hm-replace-component@0.0.9

In the schema of imgcook, there are three main types of UI elements:

Div
Text
Image

In principle, the preceding three types of elements in imgcook can be replaced with any component configured by HAOMO. The proposed replacement is listed below:

Text: imgcook is replaced automatically. No replacement is required.
Image: imgcook is replaced automatically. No replacement is required.
Div: It can be configured to replace with other components.

Replacement Steps:

1. On the web interface of imgcook, configure additional attributes of Div: hm-component=\

export default {
  'hm-component': 'van-button'
}

The configuration screenshot is listed below:

2. Configure the xmind2code component in the project.

Step 3: Export the Code with the CLI Command Line

Install and Configure imgcook CLI

Official Introduction:

The imgcook-cli can combine the ability of the plugin to place the code products generated by the imgcook platform into your local project with one click and seamlessly integrate them into your research and development process. If you have processing requirements for the code products generated by imgcook (such as using the plugin to develop automated uploads of pictures to your map bed or file directory conversion), imgcook-cli will be the only choice for you to apply the plugin.

npm install -g @imgcook/cli
imgcook config edit # configure imgcook.

Configure the plugin for CLI. Here, the official configuration of the plugin is configured by default.

Image Conversion Plug-In: @imgcook/plugin-images
- Convert the image to a local relative path when exporting the code and download the image to your local disk
Module Export Generation: @imgcook/plugin-generate
- Download sample code to your local disk

Then, add the custom plugin:

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

The final configuration is listed below:

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

Export Code

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

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

# Example
imgcook pull 17108 --path ./src/mods/mod17108

What imgcook Capabilities Are Used?

Imgcook Sketch Plug-in Export Capabilities

You can download the imgcook sketch plug-in from the imgcook homepage:

Use the imgcook plug-in to export layer data and paste it into imgcook:

imgcook Custom DSL Generation View Code Capability

imgcook provides custom DSL capabilities. You can generate the required code based on the data and capabilities provided by imgcook. Ten imgcook DSLs have been developed by HAOMO Technology to meet the code generation requirements of different applications. (The links below are in Chinese):

Code generation of UniApp components and HAOMO development specifications for UniApp applets
Page code generation of UniApp and HAOMO development specifications for applet page
Code generation of Web Vue components and HAOMO development specifications for Vue
Code generation of Web Vue page and HAOMO development specifications for Vue page
Code generation of React components and HAOMO development specifications for React components
Code generation of React page and HAOMO development specifications for React page
Code generation of RN components and HAOMO development specifications for React Native components
Code generation of RN page and HAOMO development specifications for React Native page
Code generation of Flutter components and HAOMO development specifications for Flutter page
Code generation of Flutter page and HAOMO development specification for Flutter page

imgcook-cli capabilities

imgcook-cli can combine with the capabilities of the plugin to place the code products generated by the imgcook platform into the local project with one click. We download the code to the local project file by using the CLI command line.

imgcook Plugin Capabilities

When using imgcook-cli to download code, you can configure the custom plugin to process the code products generated by the imgcook platform. We have customized the @imgcook/hm-replace-component plugin to replace the component attributes we set in the editor with their components.

Introduce imgcook to Your Team

1. Organize a Meeting

We can organize a team meeting, gather the team members together, and introduce the research and development of imgcook.

Introduction:

imgcook is an intelligent code generation platform for design drafts opened by Alibaba. It can generate maintainable frontend code, such as React, Vue, and applets, from Sketch, PSD, Figma, and pictures. It can also customize the generated code.

We can install Sketch, Photoshop, and Figma plug-ins to export layer data to imgcook by using plug-ins or uploading design files directly to imgcook editor for parsing and viewing the generated code in imgcook editor.

2. A Detailed Introduction to Traffic Flow Usage

Introduction:

Import the design draft and support exporting and generating code from an imgcook plug-in or upload the design draft file to parse and generate code
Provide the design protocol to help users manually mark layers to generate codes. (This method can be used for scenarios where imgcook processing is not good.)
The principle of imgcook intelligent generation is to convert the JSON Schema describing the design document into an imgcook JSON Schema with reasonable Flex layout nested structure and code semantics through the analysis, calculation, and identification of the design agreement, program algorithm, and machine learning algorithm. Then, it converts the Schema into various types of frontend codes with various DSL conversion functions.
The imgcook JSON Schema can be viewed in the imgcook editor. We can modify the view and style in the visual editor. The essence is to modify this JSON Schema.
Looking at the code, the essence is to input the final imgcook JSON Schema to the custom DSL conversion function, and the output of the function is the frontend code.

3. You Can Give Examples of How It Is Used by Which Teams

This document contains some user cases, including the open capabilities of imgcook. Further user cases will be revealed on the imgcook website.

4. Understanding the Flaws of imgcook Helps Users Make Better Use of It

imgcook can generate code with high maintainability automatically, but the design layer is ever-changing, and some scenarios have not been covered. Examples:

Problems Merging Layers Associated with the Design Draft: The atmosphere, background, and icons are composed of multiple layers in the design draft, and the generated code needs to be merged and exported into a picture.
Problems with Layout Rationality: The layout nested structure generated by imgcook is unreasonable or does not meet expectations.
Problems with UI Logic Code Generation: The data in the design draft is static, and the online data is dynamic, which will bring about some UI changes. However, these UI changes cannot be known when the design draft is transferred to code.

imgcook provides a design protocol for these problems that helps users manually intervene in layers to solve them. It can also be visually adjusted in the imgcook editor after generation.

5. Learn More

If your team is connected to the D2C service provided by imgcook or you have experience using imgcook, please leave a message in the comment area of this article.

Community