falcor扫盲篇

简介: 本文目的是介绍falcor的基本概念和工作原理,并演示如何在egg应用中引入falcor,使得读者能快速掌握falcor的基本用法。 # falcor是什么 falcor是介于客户端和服务端的数据中间件. 它把整个应用的域模型通过一个虚拟JSON对象表示,并抽象出get, set和call三种操作,使得应用程序可以用一种一致的方式读写域模型的数据,同时不用关注数据的来源。此外,falc

本文目的是介绍falcor的基本概念和工作原理,并演示如何在egg应用中引入falcor,使得读者能快速掌握falcor的基本用法。

falcor是什么

falcor是介于客户端和服务端的数据中间件. 它把整个应用的域模型通过一个虚拟JSON对象表示,并抽象出get, set和call三种操作,使得应用程序可以用一种一致的方式读写域模型的数据,同时不用关注数据的来源。此外,falcor还提供了缓存、批量打包和去重的功能,从而减少了网络请求和往返的次数以及冗余数据的存储和传输.

三大特征

单一域模型(One model everywhere)

falcor把整个应用的域模型通过一个虚拟的Json Graph来表示(你可以暂且把这个Json Graph理解成一个大JSON对象). 这么做的好处是 业务方无需关心数据的来源, 即数据可能存储在客户端内存,数据库或某个网络节点,可以更专注业务逻辑的实现.

数据即API(The data is the api)

falcor在JSON Graph之上抽象了三种操作:get, set和call,分别对应着读取,写入和调用。由于所有对域模型的CRUD最终都通过这3种操作来表达,因此只要域模型的数据结构(即Json Graph)的结构被确定下来,那么就可以随心所欲的对域模型进行CRUD,无需额外定义一套API。

云端绑定(Bind to the cloud)

直接翻译过来不好理解。

实际上想表达的意思是,由于引入了Json Graph的概念,使得同一个实体(entity)可以通过唯一的路径来指定,并通过引用(Reference)间接表示. Falcor会自动遍历Json Graph中的引用并在需要的时候发出请求, 然后将其引用替换为真实的实体对象。同时,falcor会透明地处理所有的网络通信,并实现批处理和去重。

基本概念

为了能更好的理解和使用falcor, 需要了解一些基本概念

Json Graph

Json Graph是以Json对象来表达图信息(Graph Infomation)的一种规约。falcor使用Json Graph来表示域模型. 这么说有点抽象,看一个Json Graph例子。

{
    todosById: {
        "44": {
            name: "get milk from corner store",
            done: false,
            author: {  
                    $type: 'atom’,
                    value: { firstName: 'Liu', lastName: 'Archer' }
            },
            prerequisites: [{ $type: "ref", value: ["todosById", 54] }]
        },
        "54": {
            name: "withdraw money from ATM",
            done: false,
            prerequisites: []
        }
    },
    todos: [
        { $type: "ref", value: ["todosById", 44] },
        { $type: "ref", value: ["todosById", 54] }
    ]
}

JSON Graph本质上也是JSON对象,因此可以使用任何json解析器进行解析。 只不过,falcor为JSON
Graph引入了3种新的原生类型:引用(ref), 原子(atom)和错误(error). 并提供了一组工具用于转换、存储和获取这些数据, 在上面的例子,todos数组包含两个元素,这两个元素都通过引用来表达,其中todoById[44].author被定义atom类型,因此它将会被falcor当做一个整体看待。

Paths

一组键(key)的有序序列,用于定位Json Graph中某个属性。比如有如下的Json Graph

{
    todos: [
      {
        name: 'get milk from corner store',
        done: false
      }
    ]
  }

要获取todos数组的第一个元素中的name属性,则需要提供这样的Path: todos[0].name,或者用数组的形式表示: [‘todos', 0, 'name’]

Path总是从json Graph的根开始解析的

PathSets

PathSets就是若干Path的集合。Falcor允许同时从json graph中获取多个属性

DataSource

数据源是实现了JSON Graph三种抽象操作的接口。每个数据源有且仅关联一个JSON Graph

Model

Model可以理解为JSON Graph的高级接口。实际上,Model在Data Source之上,提供了缓存和格式转换等一系列的功能。这张图比较清晰的表达了 Model 和 DataSource的关系

image.png

Router

Model是工作在客户端的,如果Model需要从服务端获取数据,必须经过Router进行代理。

falcor的工作原理

image.png

falcor由客户端和服务端两部分构成。前端应用通过提供一组Paths(或PathSets), 调用Model的相关操作(get , set或call)完成数据的读写或其他处理。Model会自行解析Path,并将操作派发给DataSource执行,而部分操作可能需要交由服务端的Router ,最后Model汇总所有结果并返回。期间,model会做一些优化,比如缓存优化,请求合并等.

如何引入falcor

服务端

falcor 为express 和 koa应用提供了路由适配,见[falcor-kao-router]和[falcor]。 下面说一下如何在egg应用中引入falcor。

首先安装falcor-routefalcor-koa-routerfalcor-json-graph

npm i -S falcor-router falcor-koa falcor-json-graph

falcor-json-graph不是必须的,它是一个用于生成json graph片段的辅助库。但一般会使用它减少编码复杂度

接着定义falcor路由。为了和egg controller区别开来,建议把falcor路由文件放到app/falcor目录下

// app/falcor/index.js

const router = require('falcor-koa-router');

module.exports = router.routes([
    {
       route: 'greeting',
       * get() {
           // this 指向 egg application
           const ctx = this.ctx;
           return dataMock.greeting(ctx);
        }
    },
    // more falcor routes
]);

最后在app/router.js加入falcor路由

// app/router.js

const falcorRouter = require('./falcor/index');

module.exports = app => {
  router.all('/model.json', falcorRouter);
  // more egg routes
};

客户端

  1. UMD方式。

在页面上通过<script>标签引入falcor.browser.js

  <script src="https://netflix.github.io/falcor/build/falcor.browser.js"></script>

然后通过window.falcor引用

var model = new window.falcor.Model({
      source: new falcor.HttpDataSource('/model.json', {
        timeout: 60000,
      })
    });
model.getValue(‘/greeting’).then(e => console.log(e));
  1. CMD方式,,

安装falcor依赖

npm i -D falcor

通过requireimport方式导入falcor

var falcor = require('falcor');

最后通过构建工具(如webpack等)打包到jsbundle

完整的egg-falcor例子见 这里

其他资源

常用的库

目录
相关文章
|
缓存 网络协议 算法
计算机网络常见面试题目总结,含答案
计算机网络常见面试题目总结,含答案
|
机器学习/深度学习 传感器 算法
数字图像处理实验(五)|图像复原{逆滤波和伪逆滤波、维纳滤波deconvwnr、大气湍流扰动模型、运动模糊处理fspecial}(附matlab实验代码和截图)
数字图像处理实验(五)|图像复原{逆滤波和伪逆滤波、维纳滤波deconvwnr、大气湍流扰动模型、运动模糊处理fspecial}(附matlab实验代码和截图)
1491 0
数字图像处理实验(五)|图像复原{逆滤波和伪逆滤波、维纳滤波deconvwnr、大气湍流扰动模型、运动模糊处理fspecial}(附matlab实验代码和截图)
|
4月前
|
API 开发者 Python
ISBN 数据查询 API :掌管书海信息的钥匙 如何调用?
探数平台的ISBN数据查询_专业版API致力于解决高校教辅书籍管理与交易中的痛点。通过输入13位ISBN编码,用户可快速获取图书名称、出版社、作者等20+维度信息,确保正版与版本准确性。该API包含图书基础信息查询和版本对比功能,适用于二手书交易、图书馆管理及电商场景。文档详细解析了ISBN编码规则、接口调用流程及Python示例代码,助力开发者高效集成,推动图书管理数字化升级。
328 0
|
10月前
|
存储 缓存 物联网
MNN推理框架将大模型放进移动端设备,并达到SOTA推理性能!
随着移动端(手机/平板等)算力、内存、磁盘空间的不断增长,在移动端部署大模型逐渐成为可能。在端侧运行大模型,可以有一系列好处:去除网络延迟,加快响应速度;降低算力成本,便于大规模应用;不需数据上传,保护用户稳私。
1611 13
MNN推理框架将大模型放进移动端设备,并达到SOTA推理性能!
|
8月前
|
安全 Linux 数据安全/隐私保护
Linux权限揭秘“Root与Sudo”
Root用户是Linux系统中的超级用户,拥有对系统的完全控制权。Root用户几乎可以执行任何命令,修改任何文件,甚至删除系统上的所有内容。因此,Root用户的使用需要非常谨慎,以避免潜在的安全风险。
336 6
|
算法 安全 关系型数据库
深度|庖丁解InnoDB之Buffer Pool
聚焦在Buffer Pool的本职功能上,从其提供的接口、内存组织方式、Page获取、刷脏等方面进行介绍
105319 90
|
机器学习/深度学习 人工智能 自然语言处理
【AI 生成式】如何利用生成式人工智能进行机器学习的数据增强?
【5月更文挑战第4天】【AI 生成式】如何利用生成式人工智能进行机器学习的数据增强?
|
数据采集 机器学习/深度学习 算法
Python实现用PSO粒子群优化算法对KMeans聚类模型进行优化项目实战
Python实现用PSO粒子群优化算法对KMeans聚类模型进行优化项目实战
|
JavaScript 前端开发 安全
JavaScript中跨域资源共享(CORS):原理和解决方案
【4月更文挑战第22天】本文介绍了JavaScript中跨域资源共享(CORS)的原理和解决方案。CORS借助HTTP头部字段允许跨域请求,核心是Access-Control-Allow-Origin响应头。解决方案包括:服务器端设置响应头(如使用Express.js的cors中间件)、使用代理服务器或JSONP。现代Web开发推荐使用CORS,因为它更安全、灵活,而JSONP已逐渐被淘汰。理解并正确实施CORS能提升Web应用性能和安全性。
|
机器学习/深度学习 搜索推荐 算法
智能推荐系统:个性化体验的背后
【7月更文第18天】在互联网的汪洋大海中,智能推荐系统就像一位贴心的向导,总能在浩瀚的信息中找到你最感兴趣的那一部分。它在电商平台上让你轻松发现心仪商品,在视频平台上为你连播下一集你欲罢不能的剧集。这背后的秘密,就是那些神奇的智能推荐算法。今天,咱们就来扒一扒电商、视频平台中的智能推荐系统,看看它是如何为你我打造出个性化的数字体验的。
596 0