Heavy Update: Ice is now supported for wireless development

preface

From the time we officially released the ICE project to the present, in the past period, Taobao alone has about 2000 plus projects to use it for development, in addition to the internal but also continued to receive the attention of the industry, and by many individuals and companies in the community in which the back-end project, Flying Ice is committed to providing a simple and friendly front-end research and development system.

However, in practice, in addition to the back-office business scenarios, some users are often asked whether they can use flying ice to develop wireless applications, when to support wireless development and other issues, which means that the previous product positioning and architecture design can not meet the needs of the business scenario.

After continuous high-speed iteration, ice .js has finally ushered in a major upgrade (fully down-compatible), officially supporting the development of wireless web apps and mini-programs, currently supported by small program platforms including Ali small programs and WeChat mini-programs. T his means that if you want to develop multi-ended small programs, Web apps, and mid-back-office management systems, you only need to use ice .js, which can greatly improve development efficiency to some extent. What's more, you don't have to learn the little program syntax for each platform, as long as you can develop it with React.

A multi-ended, consistent development experience

There is no doubt that the development experience of the native syntax of small programs is a problem, from WeChat to the later many followers such as Alipay, Baidu, headlines, etc., have chosen similar architecture design with WeChat, but there are certain differences, resulting in developers need to adapt to the small program platform more and more, and each end of the development of a set of code is not realistic, further leading to rising research and development costs, code maintenance difficulties.

Community hyper-development frameworks based on small programs are also emerging, with the main differences and focuses on DSL and 多端适配 T he core solution is the ecology of being able to reuse existing Web and providing a consistent development experience across platforms. If you can use class React or class Vue to develop a small program, you can reuse tens of thousands of toolkits on NPM and so on.

This is an important but very basic capability, but it's different in the ice system, and in addition to supporting consistency in development at different ends of Ali and Alipay, we're committed to providing ICE developers with simpler and smoother solutions for developing gadgetas, which means that if you've developed mid-range apps with ice.js you can develop small programs at virtually no cost. Standardized React application development patterns and best practices precipitated in the back-and-center realm are also fully applied to small program development, including, but not limited to, state management, data requests, lifecycles, styles, Hooks, and more.

Providing experience consistency from the back office to small program development is critical, including:

• Developing the Mind: Provides complete React support at no additional learning costs;
• Development Experience: Provides VS Code-based secondary plug-ins that support TypeScript by default;
• Multi-ended adaptation: one-time coding multi-ended delivery, has supported Ali small program, Alipay small program, web;
• Community Ecology: Fully compatible with existing community ecology.

Unlimited use of all React features

The small program mechanism of ice .js is based on the runtime scheme of the Rax program and adapts in a simulated DOM/BOM API, so that DSL-independent. A t present, this program has landed in Ali's internal 100 plus small program projects, after a large number of online projects verified, trustworthy. Allows you to use all react features without restrictions.

• There are almost no syntax constraints
• Hooks is supported
• Support for operational DOM (not recommended)
• Rich React community ecology

What the logical layer does is actually more complicated. T he first thing to do is to deal with the relationships between nodes and simulate various behaviors such as appendChild / removeChild / updateNode to manipulate the VDOM tree. The second is to simulate events, where each node class in the logical layer inherits from EventTarget base class, which is the same as W3C, and then collects the events that need to be monitored through nodeId as an identity, and then, after the view layer triggers an event for a node through action, then gets the id of the target node through event.currentTarget.dataset.nodeId in the native applet event, eventually triggering the target callback.

Complete application development practices

ice.js small programs are designed to inherit best practices for Web app development, and if you've developed an app ice.js it's almost cost-effective to use to develop a small program, following the same set of development specifications and best practices.

App Portal : Run the app from the default generated code without any configuration, just call runApp to start the applet.

import { runApp } from 'ice';


runApp();

life cycle

A life cycle is a function that applies itself and is automatically triggered at a particular point in time or when some special framework event occurs. The framework provides complete application lifecycle capabilities.

import { runApp } from 'ice';


const appConfig = {
  app: {
    // 应用启动的时候触发
    onLaunch() {},


    // 应用唤起时触发
    // 应用从后台切到前台的时候触发
    onShow() {},


    // 应用从前台切到后台的时候触发
    onHide() {},


    // 监听全局错误
    onError(error) {}
  }
};


runApp(appConfig);

Global configuration

Used for global static configuration of your app, such as setting routes, window performance, and so on.

• routes are used to specify the page of the app, each representing the path and file information for the corresponding page.

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    }
  ]
}

• window is used to configure the window performance of your app, and it also supports setting window performance for each page. The parameters currently supported are:

{
  "window": {
    "titleBarColor": "",
    "pullRefresh": true,
    "title": "Home"
  }
}

Style scheme

The CSS Modules scheme is recommended by default, which is a good solution to the two pain points of global contamination and naming confusion in style development. But it also supports writing styles such as Sass Less and so on.

Data request

In most cases, communication with the back-end server is required through the HTTP protocol, and when we developed the program we provided universal-request for network requests, which already supports multi-ended requests.

Hooks scenario

In addition to using the basic Hooks when developing small programs, we also offer a complete library of custom Hooks tools, covering the vast majority of Hooks scenarios, to help you develop your application.

More details such as state management, engineering configuration, events, etc. are detailed in the official website documentation.

Get on with it in three minutes

Initialize the project

Select the initialization template for download based on the npm init ice command:

$ npm init ice <projectName>


# 或者使用 yarn
$ yarn create ice <projectName>

Select the template

You can choose from a small program TypeScript or a JavaScript template:

? Please select a template (Use arrow keys)
❯ Lightweight JavaScript template with Mini Program
  Lightweight TypeScript template with Mini Program

Start the project

Open the project using the small program developer tool and you'll see the following interface by following these commands:

$ cd <projectName>
$ npm install
$ npm start

• Alipay Small Program Effect Map:

• WeChat small program effect map:

At last

With the complexity and needs of the business scenario, ICE has moved from a focused back-office area to a multi-terminal research and development framework, but the initial intent remains the same: we are committed to providing a simple and friendly front-end research and development system that enhances development efficiency and well-being.

Source: Public Number - Frontman

That's what W3Cschool编程狮 has to say about The Heavy Update Flying Ice (ICE), which now supports wireless development, and I hope it will help you.