高扩展性、可二开的前端开发框架—sifo

最近，阿里巴巴 github 仓库里开源了一个新的项目：schema-plugin-flow（简称 Sifo [sɪfɔ]）[☆欢迎加星☆]，这是一个前端开发框架，主要特色是高扩展性与可二次开发。

这里的高扩展包含但不限于页面结构的修改、渲染组件的替换、组件属性的变动、组件事件的监听与阻断等。

可二次开发（简称可二开）主要体如今：对一个用 Sifo 开发的页面，二次开发者能够在不接触源业务代码的状况下，实现对页面的高扩展。

Sifo 是开发框架，自己是与UI框架解耦的，React 框架下可使用 sifo-react ，Vue 框架下可使用 sifo-vue . 

Sifo 的另外一个特色是插件式开发，这使得不管是在 React 下仍是 Vue 下，开发者写的逻辑代码几乎是同样的 ，二次开发者一样如此。

1、初探

schema-plugin-flow 仓库里带了 react/vue 下的体验示例，你们能够按照 README 的说明本身尝试。

一、演示图

在这个演示中，有7个扩展插件，写在7个独立的js文件中，复选框决定应该注册哪些插件，每一个插件控制不一样的逻辑，全部的插件共同组成展现页面。

这个图是演示的Sifo的多层扩展能力，从图中能够看到，不一样的插件是能够任意组合的，逻辑独立而又能共同协做。有的插件控制页面结构，有的进行事件响应，第 7 个插件注册了新组件并替换了原页面的组件。

二、hello world

这个例子演示了如何监听一个按钮组件的点击事件，并在点击事件中修改其它组件的属性，也演示了多个插件的情形，同时也有一个二开的插件控制了在按钮点击时改变文本颜色。

源码在：sifo-react 、sifo-vue，能够看到在 React 下和 Vue 下，除了组件的用法不一样，其它部分是同样的，下一章节会深刻地看看。

三、替换渲染组件

sifo-vue 的体验示例里有一个二次开发怎样替换渲染组件的例子：在按钮点击3次时，将原日期组件替换为自定义的组件。

二开完整写法也在下一章节讲，这里只列代码主要部分：

a. 注册自定义组件： test-ext-button

const components = {
  'test-ext-button': {
    data: function () {
      return {
        count: 0
      }
    },
    template: `
  <button v-bind:style="{ margin: '0 8px' }" v-on:click="count++">
  You clicked me {{ count }} times.
  </button>`
  }
};

b. 替换为用自定义组件渲染

let count = 0;
    mApi.addEventListener(event.key, 'click', () => {
    count++;
    if (count >= 3) { 
      mApi.replaceComponent('date', 'test-ext-button');
    }

React 下也是同样的，有兴趣的同窗能够本身试试。

2、深刻

Sifo 的核心是 sifo-model，主要有这几部分：

• namespace 是二次扩展的惟一标识；
• plugins 是插件列表，插件有三类：模型插件、页面插件与组件插件；
• schema 是页面结构定义。

mApi 是整个 Sifo 的核心接口。更多详细内容可见：sifo-model

一、hello world 代码

这里用 Vue 的 hello world 例子代码来看。

首先，写根组件模板，

<template>
  <sifo-app
    :namespace="namespace"
    class="quick-start-demo"
    :plugins="plugins"
    :components="components"
    :schema="schema"
    :openLogger="openLogger"
  />
</template>

而后，定义组件（这是 Vue 局部组件，全局组件不用写），这里定义了三个组件：Container、Slogan 和 Button。

<script>
import SifoApp from "@schema-plugin-flow/sifo-vue";
// register local components
const components = {
  Container: {
    template: "<div><slot></slot></div>",
  },
  Slogan: {
    template: "<h2>{{content}}</h2>",
    props: ["content"],
  },
  Button: {
    template: `<button @click="$emit('click')">click to change</button>`,
  },
};

再而，是定义页面结构，用一个叫 schema 的结构描述了页面上组件的组合方式。

// schema 定义了初始的页面结构
const schema = {
  component: "Container",
  id: "mainId",
  attributes: {},
  children: [
    {
      component: "Slogan",
      id: "slogan_id",
      attributes: {
        content: "hello world",
      },
    },
    {
      component: "Button",
      id: "test_btn_id",
      attributes: {},
    },
  ],
};

接下来，是写插件，监听按钮 click 事件（按惯例，react 下是监听 onClick）。这是一个“组件插件”，是以 schema 的节点 id 为维度的。

const componentPlugin1 = {
  test_btn_id: {
    onComponentInitial: (params) => {
      const { event, mApi } = params;
      mApi.addEventListener(event.key, "click", () => {
        mApi.setAttributes("slogan_id", {
          content: "hello sifo",
        });
      });
    },
  },
};

同时，能够加第二个插件。咱们能够给一个节点上加多个插件，来实现不一样的逻辑，二次开发也是这样。

const componentPlugin2 = {
  test_btn_id: {
    onComponentInitial: (params) => {
      const { event, mApi } = params;
      mApi.addEventListener(event.key, "click", () => {
        console.log("test_btn_id clicked!");
      });
    },
  },
};

最后，是参数使用

const plugins = [
  { componentPlugin: componentPlugin1 },
  { componentPlugin: componentPlugin2 },
];
export default {
  name: "quick-start",
  components: { SifoApp },
  beforeCreate: function () {
    const sifoAppProps = {
      namespace: "quick-start",
      plugins: plugins,
      components,
      schema,
      openLogger: true,
    };
    Object.keys(sifoAppProps).forEach((key) => {
      this[key] = sifoAppProps[key];
    });
  },
};
</script>

React 下是这样：

const components = { Container, Slogan, Button };
const plugins = [
  { componentPlugin: componentPlugin1 },
  { componentPlugin: componentPlugin2 }
];
class App extends React.Component {
  render() {
    return (
      <SifoApp
        className='quick-start'
        namespace='quick-start'
        components={components}
        schema={schema}
        plugins={plugins}
        openLogger={false}
      />
    );
  }
}

讨论：
看完 hello world ，可能会有人想怎么这么多代码，直接写大概几行代码的事儿。不过看看咱们对这个 hello world 还能作的事情：修改页面结构、替换渲染组件、变动组件属性、给组件添加事件的监听等，在有扩展需求的场景下仍是能够接受的。同时，schema 做为一份配置通常会写在单独的地方来维护，plugins 也能够按功能区分放到不一样的文件里。

二、二次开发扩展

对 hello world 例子，那个在按钮点击时改变 Slogan 颜色的扩展插件，是写在其它地方的（真实业务时多是从其它地方加载的js资源），使用了 sifo-singleton，插件写法相同。

import SifoSingleton from '@schema-plugin-flow/sifo-singleton';
const singleton = new SifoSingleton('quick-start'); // namespace: quick-start
const componentPlugin = {
  test_btn_id: {
    onComponentInitial: params => {
      const { event, mApi } = params;
      mApi.addEventListener(event.key, 'onClick', () => {
        mApi.setAttributes('slogan_id', {
          style: { color: 'red' }
        });
      })
    }
  }
};
singleton.registerItem('ext-quick-start', () => {
  return {
    plugins:[
      { componentPlugin }
    ],
    components: {},
    openLogger: true
  }
});

二开能够注册自定义组件、自定义插件（组件插件和页面插件）和打开控制台sifo log等。

三、渲染优化

模型插件能够实现更底层的能力，好比能够利用中间件对 mApi 进行扩展（如 sifo log），好比包装 ant design form，又好比能够实现一个表单校验模型插件用来实现表单场景。

这里讲一下_渲染优化模型插件_，sifo-react/sifo-vue 都是 top-down （自顶自下）的渲染模式，在复杂的页面上，可使用这个模型插件来优化渲染。

sifo-react 能够引入 sifo-mplg-react-optimize，sifo-vue 内置了渲染优化模型插件，使用 optimize: true 属性来开启。

3、发散

在咱们进行业务开发过程当中，特别是作企业 SaaS 应用业务时，常常会遇到的一个问题是：某客户想在咱们提供的应用中增长个性化功能，而这个功能是不具有通用性的，咱们该怎么办？显然，咱们不会将这类功能放到咱们的标准业务中，但如何知足客户的需求以使客户能从咱们的应用中受益呢？

Sifo 的高扩展性、可二次开发能力就提供了一种解决上述问题的方案。那么，Sifo 还有哪些可能的使用场景呢？

元数据驱动/页面配置化

能够经过配置、服务端模型生成等方式，产出一份 schema，配合合适的 render，将页面渲染出来。

视图与逻辑解耦

组件的组合造成了视图，插件处理业务逻辑，组件是能够直接替换的，这在一些组件库变动场景时也许会更容易。

逻辑复用/功能组合

插件与 UI 是松耦合的，一些经常使用的逻辑能够独立出来，在各个须要的地方使用。

经过不一样的插件组合，来提供不一样的能力，实现不一样的业务需求。除了在业务中组合不一样的页面插件和组件插件外，更显著的例子是组合模型插件的能力。

功能扩展

插件机制造成了扩展能力，同时，这种扩展能力是可被控制的，也就是插件的可插拔。利用  sifo-singleton 这类全局扩展容器，能够作到不接触原始页面代码的状况下，对页面进行扩展。

逻辑归一

将一些可集中处理、成批处理、单独处理的逻辑放到单独的插件中。

好比界面有不少下拉字段的下拉项是从接口返回的，能够在 schema 上（或其它合适的方式）描述接口信息，使用一个模型插件将全部取数赋值动做作完；又好比在界面上配置了联动规则，可使用一个模型插件来处理规则的解析与执行，而不是侵入到每一个页面代码内部；

后端数据驱动

利用统一的api，能够实现一个模型插件，用来与服务端通讯，将界面变化通知服务端，并执行服务端返回的指令，改变界面状态，实现后端数据驱动。

其它

能够发挥想象力来实现不一样的模型插件

4、结尾

欢迎 ☆加星☆，测试反馈与贡献代码~~

阿里巴巴CBU技术部工业品采销团队招前端，万亿规模工业电商，十万亿规模产业互联网等你加入， 欢迎投递简历至：fanchong.xs@alibaba-inc.com