Alifeibing official website alibaba.github. IO /ice

Every time you start a new project, no matter how big or small, do these things:

  • Selection of the framework
  • Initialize scaffolding (e.g. using create-react-app or vue-CLI)
  • Or maybe you chose open source scaffolding, clone warehouses
  • Looking around for the wheel
  • Installing various dependencies
  • Create a new page and write logic
  • Design a menu
  • Design the routing
  • Copy the old page changes when creating a new page
  • Register the new page route, register the menu
  • After this page, do the next, create a file, copy the code, register the route…

Tired not tired? Elegant!

Today we introduce ali’s open source product: Flying ice

What is flying ice

“Massive reusable materials, through GUI tools to speed up the construction of background applications”.

This slogan is very accurate:

Flying ice is a comprehensive solution for the rapid construction of background applications (in fact, you can also do non-background applications).

Speed is achieved through “mass reusable materials” and “GUI development tools”.

The development workflow for using flying ice looks like this:

Download GUI tools and install them => Visually select the initial template creation project provided by us => Visually create the page and select 100+ high-quality reusable blocks provided by us => Generate code for secondary development => Click Package to compile HTML, JS and CSS files after the development is completed => Deploy using

In the whole process, you can click the operation completely through GUI tools, there is no need to install and configure front-end development tools such as Node environment, there is no need to configure webpack and other build scripts, we have all built in accordance with the best practices of Taobao front-end. In addition, most of the business requirements, we have developed corresponding materials, can be visualized through the GUI assembly, as far as possible to avoid you to write additional business logic.

The material source

Here’s a long image, which is fuzzy for size, but to get a sense of the number of ICE blocks:

Original pages link to alibaba. Making. IO/ice/block

So far, ICE has supported materials for the react Vue Angular framework

For example, my current project requires a rich text editor, and you can see that there are three editors to choose from in the block

All of these can be added to the project using a GUI, and the following shows how to go from installing the IceWorks client to creating new pages in the project.

How to use

The installation

For a real demonstration, I have deleted the app I installed before

The demo system is macOS, and IceWorks supports Windows.

Iceworks download address alibaba. Making. IO/ice/icework…

After a little waiting, the download is complete. After installation, you get an App like this:

Get started

After installation, open it to see a very simple interface:

Switch to the template TAB to see a list of scaffolding that Flyice currently offers:

Block labels see a list of blocks

The plug-in

Set up the

That’s all it looks like, so let’s build a project to try it out

Create a VUE project

Fly-ice started with React. Vue and Angular supplies are still scarce, so we switched to the VUE card.

Is there something weird going on here?!

Yes, D2Admin has an ICE version!

(At this point you may think: I go, read a long time actually is a soft article! Actually no, when I was working on D2 but not open source, one of my friends recommended me to use ICE, and I felt very good at that time. Later, I was invited by the ICE development team and was very happy to develop the ICE version. It is really a good tool, please see the usage introduction below.

After a month of communication with ali developers, D2Admin ICE was born. As the first unofficial VUE scaffold on the flyice platform, D2Admin ICE has great hope to undertake! Here is a demo using this scaffolding to show how to create a page without writing code and create a chart without writing code!

Selecting D2Admin ICE as the start template will cause us to fill in the project save address:

After filling in the template, I will start to download the template. After downloading, I will be prompted whether to install dependencies immediately:

I did not record the installation process in order to avoid the animation being too large:

I rely on the installation to complete (very humanly there is no) :

ennn… No problem.

Start the project

NPM start is the default for the vue project:

Open the link that displays and you can see that the project is firmly up and running:

D2Admin ICE is essentially a special version of d2-admin-start-kit. Some of the code has been modified to fit the ICE logic. As you can see, the template is very clean and there is no full version of the sample demo:

After closing the integrated terminal in ICE, you can see the project panel, which pages appear, which dependencies are installed, and so on:

A new page

Click New page to open the new page interface:

Randomly select a block and create a new page (the waiting time is when IceWorks downloads block code from NPM)

Select block:

Effect:

Let’s try selecting multiple blocks:

The menu is automatically generated:

Page effect:

Check out the auto-generated code directory:

Automatically generated page components:

Automatically generated style files:

There are all the things you should have, all the things you shouldn’t have, even the lifecycle hooks for you!

conclusion

After the demo, I generated two pages without writing a single line of code, and the rest of the operation is to tinker with the components of multiple pages are needed to extract and make changes.

D2Admin team will also try their best to cooperate with ICE team to develop vUE public block in the future, so as to accelerate the vUE ecological construction of ICE. We also hope that a large number of VUers can participate in it. With the platform, the prosperity of the community is beneficial to everyone.

D2Admin ICE will be updated in the same way as D2Admin Start Kit. If you see the full version of D2Admin and really like it, you can subtract it from the full version

D2 Projects

address describe
The team home page Home page of the team to which D2Admin belongs
Chinese document Chinese document
D2Admin Full version preview address Full version preview address
D2Admin Full version of Github The full Github repository
D2Admin Full version code cloud Complete version of the code cloud mirror warehouse
D2Admin simplified version preview address Simplified version preview address
D2Admin simplified github Github repository lite
D2Admin Simplified version code cloud Simplified version of the cloud image warehouse

Open source project team official official account

This article is included in the project documentation

In the end, if you have finished reading it and think it is good, I hope you can click a STAR on the project home page as your recognition and support for this project, thank you.