search

mip-project / mip

MIT License
11 stars 1 forks source link

MIP2 兼容 MIP1 的方案 #21

Open PengXing opened 6 years ago

PengXing commented 6 years ago

MIP2 兼容 MIP1 的方案，分为两期

  1. MIP2 兼容 MIP1 的内置标签和语法，如 mip-* on:tap="" 这种语法
  2. 完全兼容 MIP1 组件的运行机制，包括兼容开发者提交的第三方组件的运行

其中第一期，在 5.18 会完成，第二期预期在 6.18 完成

MIP2 和 MIP1 的区别

要明白 MIP2 兼容 MIP1 的方案，首先需要了解 MIP2 和 MIP1 的区别，主要的区别有以下几个

  1. MIP2 不支持直接操作 DOM，需要通过操作数据来影响模板来完成 DOM 操作，而 MIP1 完全是 DOM 操作
  2. MIP2 组件开发方式是编写 Vue 文件，通过编译转换为 customElement v1 的组件，而 MIP1 基于 customElement v0
  3. MIP2 完全采用的是 es module，而 MIP1 完全采用 AMD

MIP2 兼容 MIP1 的方案

第一阶段

第一阶段比较好说，MIP2 支持 MIP1 的这些内置组件和 attribute 的写法即可，所以这里就不在多说

第二阶段

原则上，MIP2 和 MIP1 都是 customElement，各自完成自己的内置逻辑，互不干扰，应该能很融洽的一期工作，愿望是美好的，现实是骨感的，MIP2 和 MIP1 没法直接做到兼容，主要的原因是

  1. MIP2 和 MIP1 的 customElement 标准不一样
  2. MIP1 采用 AMD，MIP2 采用 es module

第一个问题比较好解决，把 MIP1 的 customElement 方式也引入进来。

第二个问题要稍微复杂一些，不过幸运的是 MIP2 的代码里也包含了 MIP1 define 的大部分模块，因此在 MIP2 里再重新 define 一个同名的 AMD 模块即可，这样第三方组件也可以直接 require 到相应的模块

// mip1-polyfill.js
import util from './util';

define('util', function () {
    return util;
});
define('viewer', function (){
    return util.viewer;
});
// TODO 还有很多其他的模块

通过这两个阶段的工作，可以让 MIP1 的组件在 MIP2 的环境下也同样能够运行，应该。。

huanghuiquan commented 6 years ago

理论上是可以实现的，但是几乎需要把mip1的依赖全部引入了，如此兼容，包可能会很大。

第一个问题比较好解决，把 MIP1 的 customElement 方式也引入进来。

可通过兼容接口的方式实现，不需要引入 v0 的custom element 的 polyfill

PengXing commented 6 years ago

我暂时先引入 MIP1 的 customElement 进来当做 polyfill

harttle commented 6 years ago

不了解兼容 MIP1 是硬性要求，还是说有部分不兼容就算了。如果要求是前者，那另起一套一定是没法满足的（至少不能保证，不能保证实践上就是不能），有没有办法渐进地改，基于MIP1逐步重构。我了解到MIP1工程化的框架还是相对不错的，也是为了考虑后续的架构演进。

harttle commented 6 years ago

比如 MIP1 的 customElement Polyfill 提供的 API 已经是过时标准，本来也要考虑升级的。

PengXing commented 6 years ago

兼容 MIP1 是硬性要求，你可以看一下 https://github.com/mip-project/mip/blob/master/examples/mip1/index.html 这个文件，目前已经初步完成兼容 MIP1 的运行的，在这个例子中，我把引入的 mip.js 换成我们编译的 mip.js 了

  1. 把项目 clone 下来
  2. npm install
  3. npm run dev
  4. 访问 http://localhost:8080/examples/mip1/index.html

目前来说，MIP2 的代码和 MIP1 大体结构是一样的，因为需要兼容 MIP1，所以你可以看成是 MIP2 是基于MIP1 来改的，这个也没办法，本来我想重新梳理一下 MIP1 提供给组件的 API

但是在此之上，做了几个额外的事情

  1. 扩展了 MIP 组件的写法，customElement v1 和 Vue
  2. 支持同域 MIP 页面同页渲染
  3. 支持同域多 MIP 页面共享 state，并双向绑定
  4. ...

关于 MIP1 组件的升级，提供的公共组件都会随着这次升级一期成 customElement v1 或者 Vue 的方式，站长自己的组件还保留 MIP1 的方式，但是不允许升级，升级需要迁移。

目前是这样计划的，如果有什么好的建议请指教