FortuneSheet：支持协作的开源表单组件

原文地址：xiemala.com/s/Tdnkri
距离协码啦的开源项目FortuneSheet 正式发布已过数周，经过又一轮的高速迭代，FortuneSheet 从0.1.0版本升级到了0.5.0版本，star数也从起初的不到30，增长到了近700 ，功能越发强大、完善，热度、关注度也爆发式增长，先后上了GitHub的TypeScript trending和总trending，可以说有了突破性的进展。下面，就一起来看看这一阶段的进展吧。

简单介绍

FortuneSheet是一款开箱即用的类似Excel和Google Sheets的javascript表格组件。本项目源于Luckysheet，我们为将其转换为typescript做了很多努力，并且解决了一些原项目设计层面的问题。本项目的前身--Luckysheet是一个非常好的中国的开源项目，曾经在Trending上强势登顶，只是开源项目往往会有一个共同的问题，就是会在经历了一段时间的高曝光期之后，项目越来越臃肿，逐渐难以维护，最后甚至无法维护，失去了原有的活跃度，luckysheet就面临了这样的问题。

本项目的开发者均为协码啦的开发成员，FortuneSheet则是从 协码啦 中孕育出的独立的开源项目。在开发协码啦的协同表格功能时，起初我们也选了Luckysheet作为组件引入。但在产品中使用了一段时间之后，遇到了一些难以解决的问题，不光是要改项目内的代码，还要去动luckysheet的源码，这就相当于要对其二次开发，如此体量的jQuery项目，靠我们几个使用者来二开、维护非常困难。于是，我们便心一横，直接开始用我们最常用的TypeScript+React重新实现整个项目。

快速上手使用

官方地址:

ruilisi/fortune-sheet: A drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets (github.com)

Demo: Features - Basic ⋅ Storybook (ruilisi.github.io)

协同Demo：协同表格

官方文档：FortuneSheet Document (ruilisi.github.io)

首先，开始先建一个空的React项目create-react-app

(如果你已经有了一个React项目，可以跳过这一步）

npx create-react-app my-spreadsheet

如果你用yarn 的话

yarn create react-app my-spreadsheet

之后，进入my-spreadsheet 目录中，安装表格库

 # using npm
npm install @fortune-sheet/react
 # or using yarn
yarn add @fortune-sheet/react

将src/App.js 替换为以下内容

import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css"




function App() {
  return <Workbook data={[{ name: "Sheet1" }]} />
}


export default Ap

并且，在src/index.css 中增加一下代码

html, body, #root {
  height: 100%;
} 

至此，所有准备工作做完了，可以直接启动项目了！使用以下命令

 # using npm
npm start
 # or using yarn
yarn start

可以尽情玩转并尝试各种功能了～

FortuneSheet的特点

解决的核心痛点

鉴于我们团队使用React的根基，本项目首先使用React实现，当然，Vue也在我们的计划中，欢迎持续关注后续进展~

FortuneSheet解决了Luckysheet在项目层面的很多问题，其中最突出的四点：

1. 使用 Typescript 编写
2. 项目库可以使用 import / require 导入了
3. 同页面支持多个实例
4. 去掉了 jQuery 的依赖, 用原生 React / Vue + immer 来管理Dom和状态

功能革新

1. 更为先进的协同编辑
2. 用一个修改过的 handsontable/formula-parser 来处理公式计算。
3. 优化dom结构。
4. 用SVG代替iconfont的图标，因为iconfont的图标对其他开发者而言很不方便改动。
5. 容器外面不创建可见的页面元素。
6. 避免在window对象上存储数据。

FortuneSheet目前实现了表格编辑的基础功能，包括单元格编辑，格式设置，多选区，合并单元格，插入/删除行列，复制、粘贴、剪切，快捷键，和400多个公式支持，此外还更新支持了协同编辑并给出了后端样例代码。

程序员友好

在项目开始时，为了保证开源项目开发的可持续性和易于维护，FortuneSheet在整体的架构和功能的具体实现上都做了精心设计，便于开源社区进行二次开发。

特色功能介绍

从0.1.0到0.5.0，整个项目迅速迭代，增加了很多新的功能，具体完整的可以看这张Changelog。

GitHub地址：changelog

协同编辑

“协同”是在线表格最为核心的功能。传统表格软件和网页组件相比，最大的区别就是对协同编辑的支持和协同编辑的体验。因此，我们在开发FortuneSheet时，非常重视这一功能，在项目开始之初的架构阶段就思考好了具体的方案，并在版本更新迭代中优先加入。同时，提供了一个简单的后端demo来实现数据交互、存储。

assets.ruilisi.com/378edcce-a9…

支持多实例

API的Demo展示

一个优秀的开源项目，详细的文档是必不可少的。我们在每一次版本更新时，都会相应地去更新Readme和API文档。为了方便其他Developer更舒适地使用组件和贡献代码，我们在给出详细的API文档之外，还在Online Demo 中暴露出了API，并做了简单的演示，极大程度地方便开发者定制和接入功能。

通过测试保证质量

由于新上线的功能复杂度越来越高，参与开发的成员越来越多，在这样庞大体量的项目中，Quality Assurance（质量控制）就成了必不可少的一环。本项目的质量控制流程包括严格的PULL REQUEST代码评审、CICD和针对功能的Jest覆盖。

截至撰写时，已经有了17个test suites和83个test，并且还在持续增加、补充当中。越复杂的功能，越需要严格的测试覆盖。例如我们的核心功能—协同编辑，开发者就写了多达十六个测试（jest）来保障其正确性。

秉承着有bug必QA、功能对应测试的原则，刚加入团队的小伙伴纷纷快速上手，参与到Jest的过程中来，并且很快就如鱼得水，得心应手，有的一天能输出3-4个不同功能的jest。 从测试入手，能够更快更好地了解开源项目，并且在快速上手的过程中，加深对开源项目的理解，也为进一步参与新功能的开发夯实了基础。

CICD：

CircleCI