用React实现支持在线协同的Excel表格

原文地址

表格是最重要的存储和计算数据的格式之一,也是在线协同办公中一个关键组成部分。
本文介绍如何在10行代码内,使用React创建一个功能丰富的Excel表格。

快速上手

首先,开始先建一个空的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 
}

export default App

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

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

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

# using npm
npm start
 # or using yarn
yarn start

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

本地运行效果演示

关于表格库

本文中的表格库FortuneSheet是一个用原生React实现的表格组件,将来还会支持Vue,它是完全开源的,没有任何使用限制。
Github地址: https://github.com/ruilisi/fortune-sheet
在线体验Demo:https://ruilisi.github.io/fortune-sheet-demo/
协同版Demo:https://xiemala.com/s/mkAyPu
官方文档:FortuneSheet Document (ruilisi.github.io)

优化点

本组件源于另一个开源项目Luckysheet,它使用jQuery实现,但在团队的使用过程中,发现其在设计层面的诸多问题,同时项目臃肿,难以维护,导致修改Bug和二次开发非常困难。团队思考再三,毅然决定扎入这数十万行代码的项目中,从中创建出一个全新的,设计合理,易于维护的表格组件,并同样完全开源。

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时,非常重视这一功能,在项目开始之初的架构阶段就思考好了具体的方案,并在版本更新迭代中优先加入。同时,提供了一个简单的后端demo来实现数据交互、存储。


协同编辑效果演示

支持多实例

多实例支持

API的Demo展示

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

API Demo

通过测试保证质量

由于新上线的功能复杂度越来越高,参与开发的成员越来越多,在这样庞大体量的项目中,Quality Assurance(质量控制)就成了必不可少的一环。本项目的质量控制流程包括严格的Pull Request代码评审、CICD和针对功能的Jest覆盖。
截至撰写时,已经有了22个test suites和99个test,并且还在持续增加、补充当中。越复杂的功能,越需要严格的测试覆盖。例如我们的核心功能—协同编辑,开发者就写了多达十六个测试(jest)来保障其正确性。

你可能感兴趣的:(用React实现支持在线协同的Excel表格)