End of the article benefit: Developer library

NO.1

What is Iceworks?

  • Iceworks was launched in 2018 as a “materials-based GUI tool”. Iceworks’ original intention is to shield the difference of front-end engineering environment and reduce the complexity of engineering technology through desktop client, and develop back-end front-end through material efficiency. About the history of Iceworks, can from the Iceworks: from GUI development tool to research and development of integrated workbench “(zhuanlan.zhihu.com/p/94102675)…

  • What is a “r&d suite”? In recent years, developers’ toolchains and business development models have changed a lot. Iceworks, as a development tool, has been keeping up with the trend of The Times, and the business scenarios close to the reality of Taobao are evolving. In the new era of cloud + end integration, Iceworks is upgraded to IDE(VS Code(code.visualstudio.com/)/DEF IDE(ide.def.alibaba-inc.com/))) In order to suite (Pack) (code.visualstudio.com/api/referen… Part of the IDE to provide developers with more easy-to-use features.

  • What is “multi-tasking”? Multi-terminal includes two levels of meaning. One is cloud + client, that is, it can run on both Web and desktop client. The second is to support the development of multi-terminal applications, that is, we are familiar with the Rax(RAx.js.org/) (wireless cross-terminal) and ICE(ICE.work /) (PC Web) applications have provided support.

  • For more information about Iceworks, visit ice.work/ Iceworks.

Tip: this is an introductory article, do not implement the content derived from the principle and thinking, if you want to use function directly, please visit the Iceworks Pack (marketplace.visualstudio.com/items?itemN… Perform the installation experience.

NO.2

What features does Iceworks include?

Use visualization to lower the barriers to front-end development

In recent years, the front-end technology system has been increasingly improved, and the depth of drilling continues, but the demands of the high-speed development of the Internet industry are also increasing.

According to our developers questionnaire (zhuanlan.zhihu.com/p/96827091)…

For b-end middle and background business scenarios, ICE abstracts materials (Ice. Work/docs/materi…Serverless front and back end integration solution provides various capabilities for business end application development and standardizes the production process of end application:In combination with the framework, Iceworks further lowers the barriers to use front-end technology through visualization:

Generate material

The traditional material development is mainly realized by coding, and the material production is moved down to the professional front end. Iceworks makes it easy for the non-professional front end to produce high-quality materials through visualization and process configuration.

For example, Iceworks provides a template creation plug-in. You can configure a template and use the template to create an application (Note 1) :

And create the plug-in components (marketplace.visualstudio.com/items?itemN… 1) :

Use the material

Once the material is produced, it can be put into the application development process. Iceworks also uses materials in a visual and interactive way.

For example, Iceworks provides application creation plug-ins (Marketplace.visualstudio.com/items?itemN… And materials add-on plug-ins that provide previews, documentation, and examples of materials and add components or blocks to code with one click (Note 1) :

There are also page generation plug-ins (Marketplace.visualstudio.com/items?itemN…

Use intellisense technology to improve experience and efficiency

IntelliSense (IntelliSense (code.visualstudio.com/docs/editor… VS Code, including automatic input completion, function parameter information prompt, variable information overview, etc.

Iceworks combines frameworks to achieve better and more comprehensive intelligent awareness.

For example, Iceworks provides a material usage assistance plug-in (Marketplace.visualstudio.com/items?itemN…

And style development auxiliary plug-in (marketplace.visualstudio.com/items?itemN… Input autocomplete is provided for className or style values:

Style development AIDS also provide features such as an overview of information and code navigation for className or style parameter values to help style development faster:

NO.3

How to get started quickly?

The installation

  • Click the “Plugin Store Icon” on the VS Code activity bar;

  • Enter “iceworks” in the input box to search;

  • Click on the first “IceWorks” option;

  • On the Iceworks Pack page that opens, click Install.

Operation demonstration:

use

Step 1: Click the Iceworks icon on the activity bar to open the sidebar:

Step 2: Click the “Create Application” button on the Iceworks sidebar to evoke the multi-application creation process:

Step 3: After the application is created, execute the NPM script, create a page, and create components in the Iceworks sidebar.

Step 4: More capabilities can be obtained by searching the “Iceworks” keyword in the naming panel:

NO.4

The next step

  • Source visualization: similar OutSystems (www.outsystems.com/) and Mendix (www.mendix.com/) in the commercial success promoted the enterprise low code application platform (www.gartner.com/reviews/mar… Microsoft Expression Web (en.wikipedia.org/wiki/Micros… And Dreamweaver (www.adobe.com/products/dr… It’s so popular that people can easily build websites without any programming skills, just by putting in boxes and typing text into them. Today our understanding of the Web and side technology abstraction is much deeper (Note 2), we will use visual choreography to make front-end development simpler and easier.

  • Intelligent code (IntelliCode) : intellisense let developers coding convenience and happiness has a lot of improvement, its advanced version, the auxiliary code (intelligent code) (visualstudio.microsoft.com/zh-hans/ser AI…

  • Quality improvement: the most important work product of engineers is code. As an important asset of the company, the quality assessment and improvement of code are always lack of tools and processes. We are developing the front-end code quality assessment model, and will unite the front-end engineering team, landing Amoy outsourcing front-end projects, and improve the quality of outsourcing projects to a higher level.

If you are interested in any of the directions above 👆, welcome to join us, tao system hundreds of front-end developers, tens of millions of front-end applications will be the best landing scene and touchstone of these technologies.

NO.5

note

  1. Part of the function is still under development, the demonstration is only under the development test state of the example, the final effect is subject to the online product.

  2. Iceworks team is the earliest explorer in the field of low-code application development in Ali Group. It has been working in the direction of low-code engine for many years and is also one of the leading teams in the low-code engine project of Ali Group.

Recommended reading

1. Channel business black rubik’s cube technology – industry | 618 tao front-end technology sharing

2. P2C – demand intelligent code thinking | 618 tao front-end technology sharing

3. Loss prevention and control, code scanning technique reveal | 618 tao front-end technology sharing

At the end of the article’s welfare