前端mvvm与frp的升阶实践rerest可视化编程.pdfVIP

前端 MVVM 与 FRP 的升阶实践：ReRest 可视化编程 by Wayne Chan, 2017 10 月 ReRest (Reactive Resource State Transfer) 是前端开发领域新兴的方法论体 系，它继承了 MVVM 与 FRP 编程理念，在技术上有不少创新。本文从专利稿 修改而来，主要介绍 ReRest 原理与若干实践经验。 1. 前言 前 阵子 React 附加专利条件的开源协议闹得沸沸扬扬，国内外有多家大公司 开始弃用 React，我们也深感困惑，是否该将 shadow-widget 全盘改写，很犹 。让底层脱离 React 。但专利与开源协议是平行的两个世界，改底层也不大 容易解决问题。Facebook 拥有虚拟 DOM 方面的专利，preact、vue 都可能 涉嫌侵权，通过修改底层代码来规避还是挺难的。 后来我们决定自己申请专利，以便今后万一用到，手头有个专利可为 shadow-widget 增加话语权。当权利要求书完稿时，Facebook 宣布 React 回 归真正的 MIT 开源协议了，真是大喜讯！我们不必担心专利的风险了，为自家 申请专利不再必要 我们创建 shadow-widget 技术平台，但无意借此盈 利，源码开放出来让大家都受益。 （PS：不必感谢，如果觉得这项目对您有用， 上 github 为我们加星吧） 本文从专利申请稿改写而来，内容有压缩，要不文章太长了，另外还增加了可视 化编程实践相关的若干内容。公布此文还有一个目的，防止他人偷偷拿我们的技 术申请专利，如果以后真发现有人这么干了，本文是凭证，大家可以提请专利无 效，把别人的保护条款废掉。 说明：本文完稿时，Shadow Widget 最新版本为 v 1.1.2，产品用户手册对技术 实现有更详细介绍。 2. 背景 近些 Web 前端技术发展，可以说是框架横飞的时代，虽然十年前网页还正常 能打开，IE 还是那个顽固的 IE，但前端开发却已经历翻天覆地的变化。近来比 较抢眼的是 React 框架，Facebook 开创性的实践了两种技术：虚拟 DOM 与 Functional Reactive Programming （FRP，函数式响应型编程），这两种技术几 乎已成现代前端框架的标准配置。 Facebook 在虚拟 DOM 上原创较多，钻研很深入，这 技术也可以说很成熟 了。FRP 在 React 的实现就是那个 FLUX 框架，它不是 Facebook 创，在 React 中用起来也有点磕磕碰碰，尤其在调和指令式风格与函数式风格方面， 并不顺畅。 另外，尽管十年来 Web 开发技术发展很快，但在可视化开发方面仍然进展缓慢， 所有主流框架都在界面的形式化描述上做文章，Angular 与 Vue 扩展了标签属 性，增加不少控制指令，React 则全盘引入 JSX 描述方式，他们无一例外的都 要求大家，一行行写脚本去定义界面，而不是 20 年前在 Delphi 与 VB 就已 出现的可视化、所见即所得的开发方式。 本文所提的 ReRest 编程方法，是适应 Web 可视化开发要求，融合虚拟 DOM 与 FRP 技术，并克服它们应用于主流框架的若干不足，而提出的通用型解决方 案。ReRest 方法在 shadow-widget 平台有一些实践，已取得良好效果。 3. ReRest 要点 ReRest 全称为 REactive REsource State Transfer，译为 “响应式资源状态迁 移”，与本概念相关的提法还有： 1. ReRest framework，ReRest 框架 2. ReRest based programming，基于 ReRest 的编程 3. ReRest-ful design，ReRest 风格设计 光从字面上看，“响应式资源状态迁移” 不大好理解，就像缩写为 REST 的 “Representational State Transfer”，表现层状态转移，只看文字，是不大容易搞 清楚讲的是啥。 ReRest 提倡以 资源” 的观点展开设计，将针对资源的操作规格化，统一抽象 成