Community

Blog Events Webinars Tutorials Forum
  1. Blog
  2. Events
  3. Webinars
  4. Tutorials
  5. Forum
Create Account
×
Community Blog Youku's Frontend Team Builds an Intelligent Material Generation Platform with imgcook

Youku's Frontend Team Builds an Intelligent Material Generation Platform with imgcook

This article mainly discusses Minion, an intelligent material generation platform exclusively developed by Youku's frontend team, and how it works with imgcook.

By Qingtian (from Youku) and Suchuan (from F(x) Team)

Minion is an intelligent material generation platform exclusively developed by Youku's frontend team. It integrates imgcook, low-code, and other technologies to build a new material development process. Combined with Youku's business, this platform adapts to Youku's R&D ecosystem. It provides R&D and non-R&D perspectives and generates materials that can be built and iterated.

1

Minion is connected to the layer parsing capability of the Sketch plug-in and layout-based Open API generation provided by imgcook, a platform converting various design drafts into code. It automatically produces low-code schema fragments for UI according to the design draft for subsequent development and release on the low-code platform. It also provides R&D and non-R&D perspectives for designers and frontend developers.

Minion enables designers to independently develop and launch business components with the intelligent identification feature of imgcook and the low-code capability of Youku. Therefore, enterprises can achieve zero cost in frontend development. In the meantime, through the integration with other modules of the marketing construction platform, independent templates for general use can be generated to endow businesses with out-of-the-box features. The whole solution has covered scenarios, such as Spring Festival, Double 11, hit serials, and hot variety shows. In terms of the production of templates for OTT dashboard, the efficiency of generating client templates is improved by introducing intelligent capabilities. In the premise of ensuring the experience of low-end device users, the cycle of some businesses that originally relied on client distribution is shortened to several days or hours. At the same time, the business transformation process of the original marketing scenarios is shortened, and the transformation efficiency of the business is improved by introducing the activity capability on the dashboard desktop.

Detailed Information

  • Time: May 2020-Now
  • Users: Designers, frontend developers, and TV-end and client developers
  • Scenarios: Mostly code generation for templates of small-screen UI cards and dashboard clients. Code generation for a few small-screen complex business components
  • Efficiency Improvement: Zero frontend investment in design mode and efficiency improvement by 40% in R&D mode

Scenarios

Minion, the intelligent material generation platform, provides design and development modes to adapt to different scenarios and user identities. It also integrates with the delivery system for traffic refinement and user recall in key scenarios.

  • Design Mode: In the scenarios within and outside Youku, designers can produce, release, and launch multi-end and multi-state components based on design drafts using the capabilities provided by imgcook. The whole process does not involve frontend development and covers common scenarios of content operation. In OTT dashboard scenarios, it provides the capability to produce general templates and integrates with the client CloudView SDK. This can improve the iteration efficiency of dashboard applications and modules.
  • R&D Mode: With UI refinement, it reduces traffic loss brought by the transition of the marketing field and improves target conversion. It also uses UIBuilder to combine low-code with pro-code, providing the capability to integrate with R&D processes.

There are two types of products on the Minion platform. One type is the component materials used to build the marketing field. They are more suitable for the scenario to customers than for outputting pages and can be upgraded and iterated like the materials developed by procode. As such, they are imperceptible to the business side. The other type is the unified and standardized data. Refined delivery to different groups can be achieved through integration with the delivery system.

The following part shows some product examples: UI card templates (small screen), client templates (OTT), and complex business components (less common).

  • UI card templates (small screen):

2
Examples of Small-Screen UI Card Components by Minion

  • Small-screen complex business components

3
Examples of Complex Components by Minion

  • Dashboard client templates (OTT)

4


5


6
Examples of Dashboard Templates by Minion

Practical Effects

  • In Youku's small-screen R&D scenarios, designers can use the Minion platform to develop and release components independently. They also can build general templates of marketing for the platform through practices, endowing the business with out-of-the-box features. The online modules produced based on this solution have covered important promotion activities during Double 11, winter break, and Spring Festival.
  • In Youku's scenarios of OTT client template generation, business iteration can be completed with the intelligent generation, manual calibration, and one-click release of the template. There is no need to wait for a long period of client release, so the original iteration cycle of some businesses is shortened from several weeks to several days.

Technical Solutions

Overall Process of Small-Screen Marketing Scenarios

The Minion platform uses Sketch and Photoshop plug-ins provided by imgcook to obtain the module metadata and performs visual restoration. Combining with the low-code mode, the module metadata is transformed into a component hierarchy tree, and visual real-time adjustment and preview capabilities are provided. In addition to the attribute adjustment and variable binding capabilities, the Minion platform provides the capability of basic atomic logic injection, such as jump, favorite, and reservation. After visual and logical adjustment, complete module data can be obtained. As for the output form of the module, two modes are currently provided: code output mode and data mode.

7
Overall Process of Marketing Scenarios

In the code output mode, module data is converted into source code through transcoding plug-ins. Then, subsequent steps will be completed, such as automatic warehouse building, code pushing, release, and injection into the building system. After all these steps, the module can be used in the building system to build pages and complete online delivery. In the data mode, differentiated delivery at terminals and scenarios can be achieved by unifying the data format across multiple ends, integrating it with the delivery system, and providing multi-end parsers (such as small screen/OTT). As such, traffic refinement in key scenarios can be also realized.

8
Examples of Differentiated Views in Data Mode

Development Process of OTT Client Modules

In addition to applications in frontend scenarios, the Minion platform is gradually extending to OTT client scenarios. The client application process produces templates mainly through imgcook.

In terms of state mapping, the multi-artboard capability of Minion is associated with the client's focus state and non-focus state. The attribute adjustment of a single artboard corresponds to the attribute adjustment of the specified view of the client.

In terms of the layout, it uses the client layout mode of low-code semantic (this mode applies to scenarios with a few OTT levels) to ensure the self-adaptive capability of views when the template size changes.

In terms of template preview and delivery, combined with the dashboard Alita real machine platform of Youku, OTT dashboard real-time preview capability can be achieved. Connected with the downstream delivery system, the construction of an overall process from template production to template delivery is realized.

9
Development Process of OTT Client Modules

Currently, the development process of OTT client templates is being gradually improved. On the basis of further improving the accuracy of D2C in dashboard recognition, it integrates the downstream system and improves the production process of dashboard templates. This way, the efficiency of template generation and user experience can be improved, and the dashboard client templates can cover more scenarios.

R&D Steps

The procedure of component production on the Minion platform:

Step 1: Create a New Component

Create a new component on the Minion platform. You can use the development or design mode based on your needs.

10
A Demonstration of Creating Components on the Minion Platform

Step 2: Use the Sketch Plug-In of imgcook to Export the JSON Schema after Layer Parsing

Import data from the Sketch plug-in of imgcook and select the design draft size before you parsing it. If the component needs multiple states, add multiple artboards.

11
A Demonstration of Importing imgcook Data on the Minion Platform

Step 3: Configure, Preview, and Publish

After parsing, you can set the building configuration variables, preview, and release. Then, you can start the post process of the building system.

12
An Example of Configuration, Preview, and Release on the Minion Platform

Integrated imgcook Capabilities

1. Parsing Capability of the Sketch Plug-In

Download and install the Sketch plug-in from the imgcook homepage. Use the Sketch plug-in to export the JSON Schema after layer parsing.

13

2. Layout Generation Capability

Minion is an intelligent material generation platform. With the capability of converting the layout into interfaces provided by imgcook, the data exported by Sketch can be converted into Schema fragments of low-code specification. Then, the designer processes these fragments further.

3. Multi-End Code Generation Based on Custom DSL

We have to deliver the materials to different ends, such as phones, PCs, Pads, OTT, and MiniApp. In addition to using the DSL provided by imgcook, we have customized several DSLs according to the Development Guide of imgcook DSL to support multi-end code generation.

  • Rax development specification of Youku OTT
  • Rax Hollywood's new protocol specification

Highlights for Reference

  • Design Rules: Cooperate with designers, follow the design draft specifications of imgcook, and provide some common private marking specifications and platform parsing capabilities.
  • Data Memory Capability: After the design draft is changed and re-recognized, some adjustments on the platform side can provide memory capability to avoid data loss.
  • Built-In Common Behaviors: Common user behaviors in content operation scenarios are provided, such as favorites, reservation, and jumping.
  • Design/Development Mode Provided: The two modes correspond to the two production methods: production without code and production with source code. It masks redundant configuration interference in the design perspective, providing a simple and friendly operating environment for non-R&D personnel.
  • Artboard Capability Provided: This corresponds to UI views in a variety of states, enabling restoration of all states based on one module.
  • Data and Code Output Modes: The generation of phone (H5/Rax), PC, Pad, OTT, and MiniApp components are supported.

Team

Youku Team

  • Frontend Developers: Yanyu, Qingtian, Fule, Hongwei, and Kangkang
  • Designers: Jiani, Zhang Rui, and Muyan

References

Programming Developers Youku R&D Frontend Development imgcook Code Generation Low Code UI Design Intelligent Platform
0 0 0
Share on

Read previous post:

Node.js Assists imgcook in Automatic Dependency Generation

Read next post:

Studying Intelligence: An Introduction to Deep Learning

Alibaba F(x) Team

66 posts | 3 followers

You may also like

Comments

Alibaba F(x) Team

66 posts | 3 followers

Related Products

More Posts by Alibaba F(x) Team

See All