纯前端大数据处理技术：葡萄城纯前端开发工具应用实践

SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件，满足多平台、跨平台的表格数据处理和类 Excel 的表格应用开发。

WijmoJS 前端开发工具包由多款纯前端控件组成，全面支持 Angular、React、Vue、TypeScript、Knockout 和 Ionic 框架，用于快速搭建企业级桌面/移动 Web 应用程序。

本场 Chat 核心内容：

葡萄城纯前端开发工具——SpreadJS 、WijmoJS 简介；
- 核心功能；
- 适用场景；
- 典型案例。

近年来，随着互联网产业的飞速发展，企业业务层面的大数据、云计算、智慧 + 等新兴领域的需求呈现爆发式增长。在最小化内存消耗的前提下，通过浏览器端直接实现复杂的计算，支配并处理海量数据的用户场景已经屡见不鲜。如何高效优雅地完成复杂场景的数据处理，已经不单单是对前端开发者算法功力的考验，学会评估并使用合适的前端框架和前端开发工具已成为当今企业高级开发工程师必不可少的技能。

葡萄城，作为深耕前端/.NET 控件及组件技术 30 年的一流软件产品和服务提供商，希望通过本次 Chat，向您展示葡萄城创新性的前端开发工具和深厚的技术积淀。无论你是个人开发者，拥有对 HTML5 、Angular 7 等新一代前端开发技术的敏锐嗅觉，希望从这些技术中汲取灵感、改进工作效率；还是企业的技术决策者，需要针对公司项目做技术选型，预测未来技术发展趋势，得到项目的最优投入产出比，本文都可作为一份很好的参考。此外，在 “纯前端大数据处理技术——葡萄城纯前端开发工具应用实践”的公开课直播中，葡萄城技术团队也会结合本期主题，与大家交流关于未来前端开发领域的发展趋势，以及华为、招商银行、微软Dynamics 等企业和项目的前端开发工具应用实践。

enter image description here

文章由以下三个部分构成：

第一部分：葡萄城前端开发工具核心功能及适用场景。
第二部分：葡萄城前端开发工具新特性介绍。
第三部分：葡萄城前端开发工具典型案例分析。

第一部分葡萄城前端开发工具核心功能及适用场景

葡萄城前端开发工具主要包括两款：纯前端表格控件 SpreadJS 和前端开发工具包 WijmoJS。二者的相同点都是基于 HTML5 规范，即无需引用 JQuery 的外部库和框架、提供轻量的纯前端控件、具备数量众多统一且易读的 API、符合 UMD 规范的模板化设计理念、易于扩展并支持在 VSCode 中使用、全面支持 Angular、React、Vue、Knockout 和 Ionic 框架。

除了具备前端技术零依赖、体量轻的特性外，SpreadJS 和 WijmoJS 在海量数据处理能力上更为优秀。下面笔者会以这两个产品为例，分别详细介绍 SpreadJS 和 WijmoJS 的核心功能以及适用场景。

SpreadJS：可嵌入您系统的在线 Excel

enter image description here

SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件，以“高速低耗、纯前端、零依赖”为产品特色，可嵌入任何操作系统，同时满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类 Excel 的表格应用开发，为用户提供更快捷、更安全、更熟悉的表格数据处理方式和更友好的类 Excel 操作体验。

SpreadJS 核心功能

enter image description here

1. 实现无代码开发的类 Excel 的表格应用程序

enter image description here

SpreadJS 内置桌面端和 Web 端的在线表格编辑器，支持用户填报模块，可即时创建类似 Excel 的电子表格应用。通过 SpreadJS 提供的类似 Excel模板设计器，用户还可轻松设计模板，节约应用程序开发所需的时间和精力。无代码开发式平台，各行业人员均可通过 Excel 软件制作表格，然后轻松导入 SpreadJS 中，提升模板复用性。

2. 具备高效的计算引擎，百万行数据毫秒级处理

enter image description here

相比其他电子表格，SpreadJS 提供更全面的内置公式和自定义函数，可针对大数据和复杂计算进行优化，即可为复杂的公式增加计算能力，又不会过多地占用系统资源。

3. 纯 JavaScript 架构，支持 TypeScript、Angular、React 和 Vue

enter image description here

SpreadJS 基于 HTML5 规范，无需引用 jQuery 库和其他框架，即可实现轻量级纯前端表格控件。无平台限制，.NET 平台可以使用，Java 平台也可以使用；无服务器要求，Windows 服务器能用，Linux 服务器同样可以使用。

4. 模块化设计，符合 UMD 规范

SpreadJS 基于模块化设计，符合 UMD 规范（即通用模块规范），用户只需将所使用的功能模块引入项目中即可。

关于 UMD 规范，这里是个小彩蛋：

Javascript 的组件生态在最近几年的发展愈发给力，我们的可选性更加广泛了。这本是一件好事，但是当多个第三方 JavaScript 在一起混合使用时，我们可能会遇到一个问题，那就是并非所有组件都能在一起很愉快地玩耍。为了解决这个问题，人们通过一种统一的模式来构造 JavaScript 代码，UMD 规范由此而生。应用 UMD 规范的 JS 文件好比一个立即执行函数，这个函数有两个参数，第一个参数是当前运行时环境，第二个参数是模块的定义体。在执行 UMD 规范时，会优先判断当前环境是否支持 AMD 环境，然后再检验是否支持 CommonJS 环境，否则认为当前环境为浏览器环境（window）。当然具体的判断顺序可以调换。

    (function (root, factory) {    if (typeof define === 'function' && define.amd) {        // AMD        define(['jquery'], factory);    } else if (typeof exports === 'object') {        // Node, CommonJS-like        module.exports = factory(require('jquery'));    } else {        // Browser globals (root is window)        root.returnExports = factory(root.jQuery);    }    }(this, function ($) {        //    methods        function myFunc(){};        //    exposed public method        return myFunc;    }));

5. 内置形状（Shape）以及自定义形状支持

enter image description here

SpreadJS 已经实现了诸多类 Excel 的内置形状，如线条、矩形、箭头、流程图，可以为您的前端界面添加更多细节展现和可视化效果，并且这些内置的形状都可以无缝地进行导入和导出。

SpreadJS 适用场景

SpreadJS 可满足所有前端表格数据处理的需要以及类 Excel 的表格应用程序开发。产品自面世以来，已经在能源、金融、物流、大数据、信息技术等行业引起广泛关注，备受华为、腾讯、泛微、滴滴出行、海信、立信、中国平安、中国能建、中通快递、金麒麟和北京神软等客户青睐。

下面，笔者会从 Excel 应用、表格数据处理、表单填报、数据可视化和在线文档五个部分，深入阐述 SpreadJS 具体适用场景：

1. Excel 应用场景

最终用户具备大量的 Excel 软件使用技能和习惯，大多数用户以 Excel 作为主要工作工具的场景，SpreadJS 能提供与 Excel 几乎一致的交互体验和前端功能；
最终用户存在大量的 Excel 文件，需要导入、编辑（保持原样）操作，通过 SpreadJS 可以在前端完成导入导出、并保持文件最大的兼容性；
最终用户使用中的系统，需要将 Excel 文件作为数据导出，比如OA、账务、生产系统等，通过 SpreadJS 即可轻松地将数据导出为指定模板的 Excel 文件，进行复用。

2. Grid 表格数据处理场景

当用户希望以表格的形式展示数据时，比如自动排序、筛选、行表头、列表头、汇总、边框和单元格样式；需要给最终用户提供基本数据展示，如分组、查找、聚合、公式等操作时，SpreadJS 均可满足。

3. Form 表单填报场景

用户希望以表单的形式进行数据填报，如申请表时，文档类的报告生成及打印导出；如检测报告时，通过 SpreadJS 内置的多种单元格类型，如按钮、单复选、下拉列表、单元格内的公式引用、数据验证等均能有效地完成表单相关功能。

4. 数据可视化场景

SpreadJS 可满足将数据以图表、迷你图（Sparkline）、形状（Shape）、条件格式图形化显示，成为数据分析、Dashboard、OLAP、BI 等典型场景。

5. 在线文档需求场景

SpreadJS 已将类 Excel 的界面嵌入应用中，使最终用户有能力直接通过浏览器完成文档操作，例如 SpreadJS 在线表格编辑器。

WijmoJS：灵活高效的前端开发工具包

enter image description here

WijmoJS 前端开发工具包由多款高效、灵活的纯前端控件组成，全面支持 Angular、React、Vue、TypeScript、Knockout 和 Ionic 框架，可快速搭建企业级桌面/移动 Web 应用程序。秉承触控优先的设计理念，借助葡萄城深厚的技术底蕴，WijmoJS 为各领域用户提供更稳定、更高效的前端开发工具，目前已经在招商银行、微软 Dynamics、思科、特斯拉、富士通等多家企业和项目中得到成功应用。

WijmoJS 核心功能

enter image description here

1. 具备高效的数据引擎，加载百万行数据仅需 0.6S

enter image description here

WijmoJS 前端开发工具包具备高效的数据引擎，在大数据加载和图表数据绑定的性能上具备行业领先优势。如图所示，WijmoJS 在加载一百万行数据时，仅用时 0.6S。查看这个示例，请点击此处。

2. 提供灵活、统一且易读的 API

通过 WijmoJS 提供的统一且易读的 API，开发人员可以迅速掌握前端控件核心技术，并根据业务需要，扩展定制功能模块和主题样式。

3. 一流的前端框架支持

enter image description here

4. 提供创新的前端可视化设计器

enter image description here

5. 触控优先、满足符合 ARIA 标准的 UI

WijmoJS 的图表、网格、OLAP 等控件均以触控、可定制为设计原则，遵循 ARIA 标准，提供用户熟悉的功能和 UI，就像使用 Excel 和 VS 一样。

6. 纯前端控件，基于 TypeScript 脚本实现

WijmoJS 提供如 C＃一般的使用感受，内置错误检查、Visual Studio 中的完整 IntelliSense 和完全符合 ES 6 规范的 Web 组件和 ES 模块。

WijmoJS 主要由以下前端控件集构成：

enter image description here

WijmoJS Core：基于 HTML5 的开发工具包，由核心控件、数据网格、输入控件和数据可视化控件构成。通过这款开发工具包，您可以快速创建浏览器模式访问的 Web 应用程序，在降低企业开发成本的同时，还能提升系统便捷性，满足最终用户高标准的体验需求。

enter image description here

FlexGrid：轻量级前端表格控件，允许您可视化和编辑表格数据。它提供了关于如何呈现和执行数据操作的各种选项，包括选择、排序、过滤、分组、分页、编辑、格式化等。主要功能涵盖：基本数据交互、单元格编辑、IO 操作、自定义扩展和数据绑定。

enter image description here

FlexChart：轻量级前端图表控件，允许您将表格数据可视化为业务图表。它提供了关于如何呈现和与数据交互的各种选项，包括选择、缩放、向下钻取、格式化等。主要功能涵盖基础图表类型、扩展图表类型、导出模块和其他增强功能。

enter image description here

金融图表（FinancialChart）：金融图表通过趋势线、过滤器、范围选择器，注解进行分析，并且只需少量代码就能轻松实现。它优化了金融行业，是一个提供了全方位服务的控件，几乎满足了用户从开始使用股市应用程序的所有需求，最重要的一点是立即可用。其图表类型涵盖：平均柱形图（Heikin-Ashi），砖形图（Renko）、卡吉图（Kaji）、断线图（Line Break）、成交量柱状图（Column Volume）、等量图（Equi Volume）、量能 K 线（Candle Volume）、点数图（Point And Data）、Arms 量能 K 线图（Arms Candle Volume）。 enter image description here

OLAP 数据透视分析：使用 WijmoJS 的 OLAP 模块可以用 JavaScript 创建类似 Excel 的基于 Web 的数据透视表。在没有服务端依赖的情况下只需毫秒级即可处理、聚合成千上万行数据。此外，智能的 Pivot Panel 还可以解析数据类型，自动摆放字段。

enter image description here

WijmoJS 适用场景

enter image description here

WijmoJS 已经在招商银行、微软 Dynamics、思科、特斯拉、富士通等知名企业得到成功应用，主要帮助这些企业解决了以下四个问题：

升级原有系统，如 C/S 端向 B/S 端迁移，jQuery 框架向 HTML5 迁移。同时，使用 WijmoJS 也可将此前使用 Wijmo3 的用户顺利迁移到最新的 HTML5 框架上。
从零开始搭建系统，对于此类问题，WijmoJS 可提供包含 Web 应用系统所需的全部组件，用最新的前端技术，创建现代化移动 Web 应用。
快速评估可互操作的前端框架，WijmoJS 支持所有前端主流框架，如 Angular、React、Vue 等。
需要拿来即用的专业前端控件，WijmoJS 中包含了众多专业的前端控件，如表格控件 FlexGrid、FlexSheet、MultiRow，图表控件 FlexChart 以及数据分析控件 Olap 等。

第二部分葡萄城前端开发工具新特性介绍

SpreadJS V12 新功能一览

SpreadJS 近期发布的新版本中包含了诸多重量级的功能和来自客户的新需求，如对形状和富文本的支持，也有新增的图表类型，还有更多细节处的更新，下面我们会针对所有新功能做简单的介绍。

enter image description here

SpreadJS V12 新功能：形状

enter image description here

1. SpreadJS 支持 182 种内置形状

enter image description here

2. 包含三种基本类型：基本形状、Connector、Group

enter image description here

3. 支持以下自定义属性：大小、位置；背景色、透明；填充色，边框（颜色及线宽）；文字（颜色，字形，字号以及文字排列位置）；属性均可绑定公式

enter image description here

4. 支持自定义形状（Path Canvas）

enter image description here

SpreadJS V12 新功能：全新图表类型

1. 雷达图（Radar）：显示具有任意数量变量的多变量观测值，雷达图通常用于表现强弱力度、影响力等指标。

enter image description here

2. 旭日图（Sunbrust）：展示了从根节点（中心）向外到较低层次结构的分层数据。内圆的一段是外圆分段的父代，它位于父代的角度扫描范围内。旭日图非常适合展示如何将一个类别或级别（环）分解为其所占的大致比例。

enter image description here

3. 树图（Treemap）：适合展现具有层级关系的数据，能够直观体现同级之间的比较。一个 Tree 状结构转化为平面空间矩形的状态，就像一张地图，指引我们发现探索数据背后的故事。矩形树图能更有效地利用空间，并且拥有展示占比的功能。缺点在于，当分类占比太小的时候文本会变得很难排布。

enter image description here

SpreadJS V12 新功能：条形码

条形码（Barcode）：客户可以使用条形码来显示具有指定条形码类型的纸张数据，广泛应用于商品流通应用，图书管理应用等众多领域。SpreadJS 的条形码支持 QRCode, EAN-13, EAN-8, Codabar, Code39, Code93, Code128, GS1_128, Code49, PDF417, DataMatrix。

enter image description here

SpreadJS V12 新功能：富文本编辑

用户现在可以为单个单元格中的文字添加粗体、斜体等字体和所有基本格式！SpreadJS 提供的富文本编辑可用于多种公式类的显示。

enter image description here

以上就是 SpreadJS 的新功能介绍，需要了解更多，请访问葡萄城 SpreadJS 官网。

WijmoJS 2018V3 新功能一览

近期发布的 WijmoJS 全面支持 Angular 7 ，提供更高效的纯前端 PDF 导出功能、智能的分组表头属性、轻松创建 Ribbon 主题示例和 OLAP 数据切片器及其功能增强。下面我们会针对这些新功能做简单的介绍。

enter image description here

WijmoJS 2018V3 新功能：全面支持Angular 7

您可以使用最新版本的 WijmoJS 来构建 Angular 7 应用程序
将源代码迁移到 TypeScript 3.1
将示例 Demo 迁移到 Angular 7 中
Angular 7 还完美支持了 WijmoJS 中两个特有功能：虚拟滚动和拖放模块

WijmoJS 2018V3 新功能：Web Workers 技术，让前端 PDF 导出更高效

面临问题：PDF 导出通常会降低 Web 应用程序的速度，这是由于导出发生在浏览器的 UI 线程中，导致应用程序的其余部分无法使用。
解决方案：WijmoJS 的 Web Workers 则完美地解决了 PDF 导出缓慢的问题。 WijmoJS 使用 Web Workers 在单独的线程上导出PDF文件，最大程度保证应用程序的正常运行，并支持“后台”导出操作。

WijmoJS 2018V3 新功能：ComboBox/ListBox 中增加分组表头属性

WijmoJS 添加了一个 showGroups 属性，通过使用该属性将分组组头添加到 ListBox 和 ComboBox 控件。如果 showGroups 属性设置为 true 且 itemsSource 集合已启用分组，则会添加组标题项。

enter image description here

WijmoJS 2018V3 新功能：基于 TabPanel 的 Ribbon 主题

WijmoJS 添加了一个全新的功能区主题示例，显示了如何使用 TabPanel 控件和 WijmoJS 输入模块中的控件轻松创建 Ribbons。示例功能区元素基于TabPanel。选项卡页面包含按行和列组合的控件组。组中的控件使用“Material icons”，并根据分配给每个控件的 aria-label 属性自动创建工具提示。

enter image description here