2021 年度总结 | 葡萄城软件开发技术回顾（上）

随着冬奥会各项精彩较量的进行，2022 年的尾声逐步被拉开。

这一年，云原生畛域风起云涌，容器大规模利用，k8s 可称为煊赫一时的话题；这一年，大数据技术体系 1.0 根本成型，跨过技术振兴与狂潮期，数据平台的商业价值也在逐步浮现，带来大量投资守业机会；这一年，Vue、React、Angular 三驾马车仍旧在大前端领跑，整体技术逐步趋于稳定，将来可期；这一年，元宇宙风头正旺，.net 6 的上线也为大家津津有味。

而这一年对葡萄城而言，也同样是从未进行开发 ” 赋能开发者 ” 脚步，一直摸索的一年。

2021，咱们仍旧秉持着 ” 赋能开发者 ” 使命，匠心、急躁做技术，真心、恒心来分享。

接下来让葡萄带着你一起来看看——葡萄城的 2021。

你的 ” 前端表格 ” 请留神查收

你可能没听过 SpreadJS，, 然而你肯定听过在线协同办公。

作为纯前端的类 Excel 表格控件，在线协同始终是咱们的强项。在过来一年的分享中，咱们为大家分享了葡萄城在纯前端电子表格中的许多技术底细，包含双缓存画布和油画分层画布绘制、公式引擎的底层逻辑系列、利用稠密矩阵进行时空置换晋升性能问题，以及金融业余数据 IRR/NPV 的计算解决，大家有趣味能够自行查看。

当初咱们有一些新家伙，向大家介绍。

集算表（TableSheet）

为了让前端的表格岂但具备类 Excel 的公式计算能力，同时还领有了传统表格控件的高性能，咱们心愿将传统的高性能结构化表格 (Grid) 与公式计算引擎 (CalcEngine) 联合在一起。

为了实现这样的设计，咱们首次提出了数据管理容器 (DataManager) 的概念，将原有在后端才具备的关系数据引擎，齐全在前端实现，从而实现了在大量数据（百万行）的状况，秒级的加载、排序、筛选，而这所有的操作，都是齐全在前端浏览器中，通过 JavaScript 代码实现。

• 数据管理容器 (DataManager) 不仅承当了数据存储与索引的性能，同时还实现了多数据表关系、视图、CRUD 等性能。
• 集算表（TableSheet）则负责将数据管理容器 (DataManager) 中整顿好的数据、视图、关系通过 SpreadJS 自身的 ”Canvas 画布 ” 出现在网页中。

通过上述性能的联合，在面对大数据量的剖析、合并、解决场景上，能够为用户提供更持重的反对，缩小传统表格系统对后盾的适度依赖，能够将更多的数据操作在前端实现，从而开释贵重的后端和带宽资源。

其余亮点

在前端计算引擎性能与兼容问题上，咱们也进行了一些优化：

• 兼容性方面：反对了微软最新的 XLOOKUP/XMATCH 系列函数，同时在新版本中退出了对刚刚公布的 LAMBDA 函数的兼容
• 在性能方面：内置 450 种以上的规范 Excel 函数反对，同时反对自定义函数、异步函数扩大能力
• 在性能方面：秒级实现上万公式的解析及计算

同时，随着风行前端框架的不断更新，当初也实现了对 Vue3、Angular 13 的反对。

除了前端性能的优化，后端的 GcExcel 现能够反对.NET 6 平台；为了让打印更加不便，集成了打印驱动，直连物理打印机，实现内容间接输入打印。

学道须当剧烈，始终确守初心，对于表格畛域的技术摸索，咱们从未进行，是匠心，更是翻新。

让简单报表不再简单的报表

简单报表的简单，做过报表的同学都理解。2021 年，报表畛域的深耕咱们同样未曾进行。

.Net 平台

首先必须要提的就是 Blazor Viewer。

Blazor 是基于.NET 平台及 ASP.NET Core 技术构建交互式客户端 Web UI 的框架。开发者能够应用 C# 而不是 JavaScript 构建交互式 Web UI。如此能够不便开发者应用 C# 编写客户端和服务器代码。

为了更加不便进行报表查看，当初推出了新的报表查看器组件——Blazor Viewer。它为应用程序提供了报表渲染，展现，交互，打印导出的全功能，不便咱们更加高效的地构建 Web 利用。

次要性能包含：

• 用.NET 代码在服务器端渲染用户界面
• 在服务器端用.NET 代码解决用户交互
• 为开发人员提供 C# API，用于关上报表、处理事件和定制报表展现界面

同时随着 2021 年.Net 6 的降级和 VS2022 的推出，也一并降级兼容。

JavaScript 平台

在过来的版本中，ARJS 采纳的 npm 包应用的是 CommonJS，AMD 等模块标准。然而这些标准在应用过程中，会呈现一些问题。如 CommonsJS 比拟适宜服务端，在服务器读取模块都是在本地磁盘，加载速度很快；然而如果在客户端，加载模块的时候有可能呈现 ” 假死 ” 情况。

为了解决这个问题，咱们将报表控件的 npm 包全包采纳 ES6 自身反对的模块化语法。

npm 包公开了原生 ES 模块，利用 ES 模块能够为咱们应用程序的开发和构建提供卓越的性能。

当初只有浏览器反对 ES6 的模块化，我的项目工程就不必再费时间和精力去进行编译和打包，我的项目工程体积更小，编译的性能会更快。

同时框架反对更为丰盛，Vite.js，Vue 3, Angular 13 等前端框架当初都齐全反对。

除了以上两点，为了保障报表性能适应更大体量的数据报表生成，咱们始终致力于优化报表引擎以晋升报表性能，基于平台和开发语言的限度，精细化的优化各个报表生成的要害节点，此次采纳变量式数据结构存储，使得整个报表的性能晋升十分显著。

对于性能晋升，很难将 JavaScript 中的 “1+1″ 运算优化，但能够优化内存调配，并将比拟操作的数量缩小到 2 个，因而咱们采纳形如以下的变量存储办法：

{Type: ‘float’ | ‘string’ | ‘boolean’ | ‘int16’ | ‘int32’ … Value: object}

变量用于后果展现时候，在进行数据引擎交互计算，因而执行如 ”1+1″ 表达式时只须要执行三次内存调配和 4 次转换，而不计算条件运算符的数量如 switch 和 if，从而缩小工夫和内存的耗费。

在理论测试中，咱们也发现这种办法能够无效晋升报表性能，真正实现了增量式大数据量缓存加载机制。

同时，为了进一步冲破报表性能限度，为报表控件实现了静默打印。有趣味同学能够查看之前的文章：https://www.cnblogs.com/power…

简单报标报表诚然简单，但咱们仍旧在一直致力，让简单报标报表不再那么简单，成为人人手中皆可用好的实用开发工具。

总结

技术的倒退与交融比咱们设想的更为迅速，在元宇宙、AI、前端、云、数据、运维等有数关键词的裹挟下，计算机网络技术正在一直成长和演进。

而咱们也从未停下后退的脚步，从前端电子表格技术、BI 数据分析，到简单报表的解决解决与风头正盛的低代码，立足当下，展望未来。

本次咱们从葡萄城历史最悠久的控件登程，为大家介绍了往年的技术亮点与冲破，在下篇内容中，咱们将持续带大家回顾葡萄城过来一年在新兴畛域中，有哪些可圈可点的技术升级。