阅读 951

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

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

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

可二次开发(简称可二开)主要体现在:对一个用 Sifo 开发的页面,二次开发者可以在不接触源业务代码的情况下,实现对页面的高扩展。

Sifo 是开发框架,本身是与UI框架解耦的,React 框架下可以使用 sifo-react ,Vue 框架下可以使用 sifo-vue

Sifo 的另一个特点是插件式开发,这使得不论是在 React 下还是 Vue 下,开发者写的逻辑代码几乎是一样的 ,二次开发者同样如此。

一、初探

schema-plugin-flow 仓库里带了 react/vue 下的体验示例,大家可以按照 README 的说明自己尝试。

1、演示图

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

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

2、hello world

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

源码在:sifo-reactsifo-vue,可以看到在 React 下和 Vue 下,除了组件的用法不同,其它部分是一样的,下一章节会深入地看看。

3、替换渲染组件

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 下也是一样的,有兴趣的同学可以自己试试。

二、深入

Sifo 的核心是 sifo-model,主要有这几部分:

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

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

1、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 也可以按功能区分放到不同的文件里。

2、二次开发扩展

对 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等。

3、渲染优化

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

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

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

三、发散

在我们进行业务开发过程中,特别是做企业 SaaS 应用业务时,经常会遇到的一个问题是:某客户想在我们提供的应用中增加个性化功能,而这个功能是不具备通用性的,我们该怎么办?显然,我们不会将这类功能放到我们的标准业务中,但如何满足客户的需求以使客户能从我们的应用中受益呢?

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

元数据驱动/页面配置化

可以通过配置、服务端模型生成等方式,产出一份 schema,配合合适的 render,将页面渲染出来。

视图与逻辑解耦

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

逻辑复用/功能组合

插件与 UI 是松耦合的,一些常用的逻辑可以独立出来,在各个需要的地方使用。

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

功能扩展

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

逻辑归一

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

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

后端数据驱动

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

其它

可以发挥想象力来实现不同的模型插件

四、结尾

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

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