The introduction

When talking about the “fly” ice materials recently, an expert design for fly ice dispute the concept of “block”, think the word block in her view is not easy to understand, is community did not block this concept, only heard of chain not heard of the block, suggested that we should change “block” to “scene”, because the meeting we had, Not much time was spent discussing the matter. So, here’s the question: when developers or designers talk about flying ice, what exactly are they talking about, what blocks are they talking about, what flying ice is, and what scenarios are they talking about.

On the homepage of Feibing’s official website, you can see a slogan with a size of 46px: “Make front-end development simple and friendly”. At the same time, there is a text description: “massive reusable materials, supporting desktop tools to quickly build front-end applications, efficiency increased by 100%.”

At this point, if you’ve used the Flyice development project, you probably already know what flyice is, but if you’re new to flyice, you’re probably at a loss. Then this is the significance of this article. Through this article, we can understand flying ice materials with the following three questions:

  • What is the material
  • What problem was solved
  • What are the plans for the future

What is the material

Component Era: Before 2018, from scratch, with component abstraction, the use of components as the development stage

Fly, such as the introduction, the concept of ice is to make the front to develop simple and friendly, in taobao, there are a large number of systems need to be developed in the background, and each business line each team have different requirements, however, the development of these systems developers are not professional front-end development, they are mostly the back-end developers, test engineers, etc.; How to enable these non-professional front-end teams to quickly build the middle and background system in a simple and friendly way? In the early stage of Flyice, around 2016, the team of Flyice launched a set of React-based Flyice basic component library inside Taobao for different teams in Taobao. At the same time, The React-based UI component libraries, Material UI and Ant Design, also began to appear and open source. The emergence of the basic component libraries to a certain extent improved the Design and development efficiency of products and the UI quality of the middle and background systems.

Image credit: Fusion.design

UI Building era: 2018 ~ XXXX, marked by a small number of direct use of components, a large number of direct use of blocks and templates

After providing the basic component library, based on the continuous in-depth use and feedback of each line of business team, in addition to the common basic UI components, the team continued to precipitation based on the components, successively launched blocks, templates, and visual engineering management and other supporting facilities. It can be summarized as follows:

  • material
    • Component: The smallest element of the page
    • Block: reusable snippets of code
    • Template: different fields of engineering scaffolding template
  • engineering
    • Iceworks: Visual engineering management
    • Ice-scripts: Engineering builds

Block: With the wide use of components, which can meet the most basic business development, but in the actual business development, it is difficult for us to by the underlying UI components compose a complete page, often between different functional modules are favourable, by comparing the background in taobao, a large number of internal system, we found that most of the business scenarios show is pretty much the same, A page can be seen as a mix of different blocks, stacked up like building blocks, in development, we will also be carried out in accordance with the corresponding organization code module partition, along the way of thinking, is it possible in the development of the page, can also generate the same as the building blocks a page, the answer is yes, this is the concept of ice block, The same functional modules of different systems in the daily business are removed, but this block of code is limited to the UI presentation. We call this a block.

Template: In most of the backend system is not standardized measure rule, the scene is the same, often without the participation of designers, abstract and convergence in large space, fly ice template is from this perspective, from the different business of tao is abstract, based on the precipitation, with template materials in industries and collates the fly ice white paper template specification, unified visual and interaction, Through one-click project generation with GUI tool, improve the r&d efficiency of the middle and background system and guarantee the UI quality.

Engineering: For non-professional front-end development, there is more to it than just providing the materials to complete the development of a middle and back end system. With the development of the front-end community, ES6, Babel, Webpack, and various state management libraries around React, before the project has even started, You may be confused by all kinds of complex configurations and concepts. It is not easy for a non-professional front-end developer to build a React project. How to unify the development methods of Taobao middle-background projects and provide a set of universal solutions and the best development experience has become a problem for the team to think about.

Based on the idea of UI building, we launched the GUI visual building tool Iceworks, which carries the functions of page building and CLI, replacing the process of using the command line and writing the page, and turning it into a visual operation interface.

What problem was solved

What we need to do is to smooth the problems of engineering construction and environment as much as possible. Through the idea of code block reuse, based on the way of visual tool construction, we can reduce the repeated development, reduce the development cost of middle and background applications, and make the front-end development simple and friendly.

  • By providing basic components, rich materials, templates from different industries, and the Iceworks GUI tool, you do not need to install and configure any front-end development environment (such as node installation), and do not need to write build scripts, so you can have front-end development best practices, and the development process is easy to operate.
  • Back-end developers have logic programming ability, but their front-end development ability is relatively weak. In the development of background system, through the official website materials provided by Flyice team, there is no need to carry out heavy front-end page structure and style development, and can focus on logic and data processing.
  • In addition to the official website materials provided by the flying ice team, also provides the material developer tools, can be based on the business of precipitation, build private materials, currently taobao business background, heart selection, flying pig business background and other different business teams to access and private material development.

What is the future plan for the material system

  • Materials Developer Tools 2.0 is nearing the end of private beta, enabling businesses to customize private materials.
  • Provide the function of visually building blocks, visually combining blocks to output a basic front end page; And provide input points for writing business logic on the page building tool, or export the basic front-end page source code to IDE for background developers to develop business logic.
  • We will continue to focus on the ease of use and construction of materials in the future. Combined with Iceworks GUI tools to do some exploration, reduce the cost of background system development.“Make front-end development simple and user-friendly”Will be the direction of our efforts.

Photo credit: @Yuanyan

A link to the

  • Official website: Flyice – Makes front-end development simple and friendly
  • Block preview: alibaba. Making. IO/ice/block
  • The template preview: alibaba. Making. IO/ice/scaffol…
  • Download Iceworks: alibaba. Making. IO/ice/icework…
  • Github：github.com/alibaba/ice
  • Juejin. Im /post/684490…
  • Flying ice nails q&A group