Ali focuses on Fusion, the middle and background UI solution of open source

Some students in the industry may have heard about Ali’s Fusion Design from some channels

• For example, this article “Ali’s latest artifact — Fusion Design” has been very popular since 2016;

• For example, the heated topic “How does Alibaba’s Fusion Design Operate?” has been discussed on Zhihu for 17 years. ;

• It may also come from zhou Yuan’s sharing on d2 forum in 2016.

It has been two years since our last announcement, and we have made some breakthroughs in the field of technology. Let’s focus on our breakthrough this time. But before introducing, I would like to mention what Fusion does. After all, many of you have heard it for the first time.

Generally, the on-line process of a project has to go through the following stages: review, design, development and test.

And each stage can be further into the split, roughly as follows:

• Review: business interaction (product functional interaction), business logic review;

• Design: design specification (designer’s definition of the whole product in the visual specification), visual design (drawing visual draft), annotation draft (output annotation to the front end);

• Development: The front end typically has a component library; However, the component library may not correspond to the brand of its own business line (for example, Ali Orange, Sky Blue, basically no business line will have its own brand), so the first step needs to do UI customization at the component level, and then the development of business logic;

• Testing: The most common scenario is that the designer sits down with the front end for two days to do a UI reduction review; Business logic testing is much less said than process testing.

Here we highlight two problems in the process.

The sections highlighted in yellow indicate possible duplication of work between lines of business:

• For example, the interaction between the middle and background UI is determined;

• For example, design specifications can be extended on top of an integrated specification;

• For example, annotation can be solved uniformly through plug-ins, while visual restoration and reducibility review can be entrusted to designers.

Synergetic problems, the above zhihu link inside Zhou Yuan’s answer has been very clear, I will summarize the next.

• The perception of the concept is different because of the tools used

• The difference between the designer’s ideal and the reality of the front end

• Every once in a while the brand will be upgraded, the basic UI renovation, there will be a large workload

• The norms agreed between designers are not well implemented, and the design drafts already designed are shared by everyone

• Components that have been developed do not result in good reuse

• Designers are more convenient to do design

• The front end only cares about the business logic

From the abstract skeleton DPL -> Components and templates customized to the UI through platform customization output -> drag and drop into the designer’s tools -> Use the customized components directly in the front end (no need to focus on the component UI)

• Designers use the same set of specifications of components, the output of the design draft is the same set of specifications. (The name of the sketch plugin is FusionCool.)

• The front end does not need to focus on component UI reducibility. (Restore degree problem = design configuration problem)

• On the design side, using The FusionCool plug-in, you can design pages and precipitate templates that have been designed.

• The development side uses the development tool (Iceworks) in the project can use the ready-made modules, and can precipitate the completed modules.

In the future, when Fusion module templates are extremely rich, it will be convenient to find module templates in various fields to use, and there is no need to build from 0.

One platform, two ends

One platform: Fusion.design

Two tools:

• Developer tool Iceworks

• Designer tool FusionCool

https://fusion.design can customize your own Design System (hereinafter referred to as DS)

Create your own Design System:

Everyone can through https://fusion.design/sites/new or team can create your own site.

The site offers three capabilities: document editing, topic management, and material hosting.

Store designer documents and development documents.

Integrates the ability to manage, customize, and publish topics for components (hereafter referred to as the configuration platform).

Developed blocks and templates can be used.

Designer tools – FusionCool

After the theme is published, the Plugin FusionCool of Sketch is available. Designers can search all iconFONT materials, use the configured components, and use the module templates of the site in FusionCool.

Developer tools – Iceworks

Iceworks is a GUI tool developed by Taobao Feibing team for front-end developers. Developers do not need to pay attention to environmental problems and have a large number of materials available. At present, it has been connected with the material system of Fusion and can easily use the materials of Fusion site.

Fusion Next is a PC component library implemented based on React, which has been in alibaba’s internal service for three years.

Making address: https://github.com/alibaba-fusion/next

This open source version has been reorganized and optimized in the last year based on the experience and feedback of the previous two years. Has the following features.

Compared with the previous version of 80 + features, 300+ optimization, the overall code volume of the component is reduced by 30%

• next.min.js 910KB -> 702KB

• next.min.css 428KB -> 337KB

There are 50+ components in total, but only more than 700 K when packaged, which is relatively few components in the industry have the ability to do this. Clear dependencies between components and high reuse are also reasons for the small size.

The single-test coverage rate of the components is nearly 90%, and there has been no online accident since the service was provided.

Full support for internationalization, RTL and accessibility. In addition, a lot of performance optimization has been made for the scene of large data volume of middle and background forms. For example, the render of common table will be slower and slower with the continuous increase of data, which is roughly as follows:

Next introduced virtual-list, currently used in table and SELECT, two of the most frequently used components. Due to the large amount of data (1W nodes tested), only the nodes that need to be displayed are rendered (say 20 nodes), so the rendering time can always be controlled within 0.3s.

Break through the drawback of HTML2SVG and achieve lossless reduction

A year ago we were able to convert components from the theme configuration platform directly to SVG files using HTML2SVG technology, allowing designers to use them directly in Sketch. However, the drawback of this scheme is that the reduction degree is not enough (about 95% reduction degree).

The main reason is that there is no one-to-one correspondence between the HTML box model and the SVG transformation, so there are always bugs to fix. While 95% is good, it’s totally intolerable on the design side.

Therefore, the Fusion project team finally broke through the reduction degree problem after nearly half a year’s efforts. The flow chart is as follows:

Instead of exporting HTML from the configuration platform, FusionCool exports DesignToken. The underlying component of FusionCool uses The React-Sketch capability provided by Airbnb to write a Next component, overwriting the default variables directly through DesignToken. Finally render in Sketch in real time.

Any click on the Sketch side can be generated in the FusionCool configuration panel via an Event.

We will make the material warehouse of Fusion extremely rich in the next six months, which can cover various fields. So designers and developers don’t have to do 0-1 anymore.

We hope to break through the technical difficulties of converting visual artwork to code and make it possible to convert visual artwork to usable code.

• Fusion site: https://fusion.design/

• The next lot warehouse: https://github.com/alibaba-fusion/next

QCon will meet you at Beijing International Convention Center on April 25-27, 2019 to get inspired and focus on industry trends and engineering practices. If you have any questions, please feel free to contact Ring: 010-53935761, wechat QCON-0410