Netflix Falcor 框架版本迁移指南：从0.x到2.x的重要变更解析

Netflix Falcor 框架版本迁移指南：从0.x到2.x的重要变更解析

falcor A JavaScript library for efficient data fetching 项目地址: https://gitcode.com/gh_mirrors/fa/falcor

前言

Netflix Falcor是一个用于构建高效数据应用的JavaScript库，它通过统一的虚拟JSON模型简化了前后端数据交互。随着框架的演进，从0.x到2.x版本引入了一些重要的行为变更。本文将深入解析这些变更的技术细节，帮助开发者顺利完成版本迁移。

1.x到2.x版本的变更

模型onNext行为的标准化

在1.x版本中，Falcor模型对于缓存中的中间分支处理存在不一致性。只有当找到原子类型($type: "atom")时才会触发onNext事件。这种设计可能导致部分数据无法及时更新视图。

变更前行为示例：

// 请求路径
const json = await model.get(["lists", 2343, {to: 1}, "name"]);

// 返回结果
{
  json: {
    lists: {
      2343: {
        0: {}  // 只有0节点被返回
      }
    }
  }
}

2.x版本改进： 现在任何在缓存中找到的分支或引用都会在json输出中触发onNext事件，这带来了更一致的行为模式：

// 同样的请求在2.x中
{
  json: {
    lists: {
      2343: {
        0: {},  // 所有匹配节点都被返回
        1: {}
      }
    }
  }
}

技术影响：

1. 空请求现在会返回空对象而非undefined
2. 只有数据源返回纯错误时才会不触发onNext
3. 提高了数据一致性，但可能增加网络流量

0.x到1.x版本的重大变更

引用(Ref)处理方式的改变

在0.x版本中，引用类型($type: "ref")会直接作为叶子节点值返回。这种设计虽然直观，但可能导致数据解析逻辑复杂化。

变更前行为：

// 请求路径
const json = await model.get(["lists", 2343, "0"]);

// 返回结果
{
  lists: {
    2343: {
      0: ["videos", 123]  // 直接返回引用路径
    }
  }
}

1.x版本改进： 引用节点现在统一返回undefined，开发者需要通过其他方式获取引用目标：

{
  lists: {
    2343: {
      0: undefined  // 更简洁的表示方式
    }
  }
}

最佳实践：

1. 使用deref方法显式处理引用
2. 结合get和deref实现链式数据获取
3. 在视图层统一处理undefined情况

RxJS支持的移除

0.x版本深度集成了RxJS，ModelResponse继承自Rx.Observable。这种强耦合设计虽然功能强大，但也带来了不必要的复杂度。

迁移方案对比：

方案一：修改原型链（全局方案）

// 保留原始方法
var noRx = {
    get: Model.prototype.get,
    set: Model.prototype.set,
    call: Model.prototype.call
};

// 包装为Rx Observable
Model.prototype.get = function getWithRx() {
    return Rx.Observable.create(observer => {
        return noRx.get.apply(this, arguments).subscribe(observer);
    });
};

适用场景：

• 已有大量RxJS操作符调用的项目
• 愿意接受全局修改的团队

方案二：按需转换（局部方案）

function toObservable(response) {
    return Rx.Observable.create(observer => {
        return response.subscribe(observer);
    });
}

// 使用示例
toObservable(model.get(['path']))
  .filter(...)
  .subscribe(...);

适用场景：

• 渐进式迁移的项目
• 只需要基本Rx功能的场景

deref方法的优化

1.x版本重构了deref方法，使其工作方式更加直观和高效。

新旧对比：

旧版问题：

model.deref(['genreLists', 0, 0], ['title', 'imageUrl'])

1. 需要预先知道叶子节点
2. 可能触发不必要的数据源请求
3. 强制异步操作

新版改进：

model.get(['genreLists', 0, 0, 'title'])
    .subscribe(x => {
        const boundModel = model.deref(x.json.genreLists[0][0]);
    });

1. 基于实际数据而非路径
2. 纯同步操作
3. 按需获取数据

Promise垫片的优化

1.x版本改进了Promise的引入方式，允许更灵活的构建配置。

构建配置示例：

Browserify配置：

browserify(filename, {
    insertGlobalVars: {
        Promise: function () {
            return 'global.Promise || require("promise")';
        }
    }
});

Webpack配置：

plugins: [
    new webpack.ProvidePlugin({
        Promise: path.join(__dirname, "promise-implementation.js")
    })
]

优化建议：

1. 现代浏览器可移除promise垫片节省体积
2. 需要兼容旧浏览器时保留垫片
3. 可替换为其他Promise实现如bluebird

总结

Netflix Falcor从0.x到2.x的演进体现了框架设计的成熟过程。这些变更虽然带来了迁移成本，但最终带来了：

1. 更一致的数据处理行为
2. 更简洁的API设计
3. 更好的性能表现
4. 更灵活的构建选项

开发者应根据自身项目特点选择合适的迁移策略，重点关注数据获取逻辑和响应处理部分的适配工作。对于新项目，建议直接使用2.x版本以获得最佳开发体验。

falcor A JavaScript library for efficient data fetching 项目地址: https://gitcode.com/gh_mirrors/fa/falcor