纯前端大数据处理技术：葡萄城纯前端开发工具应用实践
SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件，满足多平台、跨平台的表格数据处理和类 Excel 的表格应用开发。
WijmoJS 前端开发工具包由多款纯前端控件组成，全面支持 Angular、React、Vue、TypeScript、Knockout 和 Ionic 框架，用于快速搭建企业级桌面/移动 Web 应用程序。
本场 Chat 核心内容：
- 葡萄城纯前端开发工具——SpreadJS 、WijmoJS 简介；
- 核心功能；
- 适用场景；
- 典型案例。
近年来，随着互联网产业的飞速发展，企业业务层面的大数据、云计算、智慧 + 等新兴领域的需求呈现爆发式增长。在最小化内存消耗的前提下，通过浏览器端直接实现复杂的计算，支配并处理海量数据的用户场景已经屡见不鲜。如何高效优雅地完成复杂场景的数据处理，已经不单单是对前端开发者算法功力的考验，学会评估并使用合适的前端框架和前端开发工具已成为当今企业高级开发工程师必不可少的技能。
葡萄城，作为深耕前端/.NET 控件及组件技术 30 年的一流软件产品和服务提供商，希望通过本次 Chat，向您展示葡萄城创新性的前端开发工具和深厚的技术积淀。无论你是个人开发者，拥有对 HTML5 、Angular 7 等新一代前端开发技术的敏锐嗅觉，希望从这些技术中汲取灵感、改进工作效率；还是企业的技术决策者，需要针对公司项目做技术选型，预测未来技术发展趋势，得到项目的最优投入产出比，本文都可作为一份很好的参考。此外，在 “纯前端大数据处理技术——葡萄城纯前端开发工具应用实践”的公开课直播中，葡萄城技术团队也会结合本期主题，与大家交流关于未来前端开发领域的发展趋势，以及华为、招商银行、微软Dynamics 等企业和项目的前端开发工具应用实践。
文章由以下三个部分构成：
- 第一部分：葡萄城前端开发工具核心功能及适用场景。
- 第二部分：葡萄城前端开发工具新特性介绍。
- 第三部分：葡萄城前端开发工具典型案例分析。
第一部分 葡萄城前端开发工具核心功能及适用场景
葡萄城前端开发工具主要包括两款：纯前端表格控件 SpreadJS 和 前端开发工具包 WijmoJS。二者的相同点都是基于 HTML5 规范，即无需引用 JQuery 的外部库和框架、提供轻量的纯前端控件、具备数量众多统一且易读的 API、符合 UMD 规范的模板化设计理念、易于扩展并支持在 VSCode 中使用、全面支持 Angular、React、Vue、Knockout 和 Ionic 框架。
除了具备前端技术零依赖、体量轻的特性外，SpreadJS 和 WijmoJS 在海量数据处理能力上更为优秀。下面笔者会以这两个产品为例，分别详细介绍 SpreadJS 和 WijmoJS 的核心功能以及适用场景。
SpreadJS：可嵌入您系统的在线 Excel
SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件，以“高速低耗、纯前端、零依赖”为产品特色，可嵌入任何操作系统，同时满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类 Excel 的表格应用开发，为用户提供更快捷、更安全、更熟悉的表格数据处理方式和更友好的类 Excel 操作体验。
SpreadJS 核心功能
1. 实现无代码开发的类 Excel 的表格应用程序
SpreadJS 内置桌面端和 Web 端的在线表格编辑器，支持用户填报模块，可即时创建类似 Excel 的电子表格应用。通过 SpreadJS 提供的类似 Excel模板设计器，用户还可轻松设计模板，节约应用程序开发所需的时间和精力。无代码开发式平台，各行业人员均可通过 Excel 软件制作表格，然后轻松导入 SpreadJS 中，提升模板复用性。
2. 具备高效的计算引擎，百万行数据毫秒级处理
相比其他电子表格，SpreadJS 提供更全面的内置公式和自定义函数，可针对大数据和复杂计算进行优化，即可为复杂的公式增加计算能力，又不会过多地占用系统资源。
3. 纯 JavaScript 架构，支持 TypeScript、Angular、React 和 Vue
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）以及自定义形状支持
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：灵活高效的前端开发工具包
WijmoJS 前端开发工具包由多款高效、灵活的纯前端控件组成，全面支持 Angular、React、Vue、TypeScript、Knockout 和 Ionic 框架，可快速搭建企业级桌面/移动 Web 应用程序。秉承触控优先的设计理念，借助葡萄城深厚的技术底蕴，WijmoJS 为各领域用户提供更稳定、更高效的前端开发工具，目前已经在招商银行、微软 Dynamics、思科、特斯拉、富士通等多家企业和项目中得到成功应用。
WijmoJS 核心功能
1. 具备高效的数据引擎，加载百万行数据仅需 0.6S
WijmoJS 前端开发工具包具备高效的数据引擎，在大数据加载和图表数据绑定的性能上具备行业领先优势。如图所示，WijmoJS 在加载一百万行数据时，仅用时 0.6S。查看这个示例，请点击此处。
2. 提供灵活、统一且易读的 API
通过 WijmoJS 提供的统一且易读的 API，开发人员可以迅速掌握前端控件核心技术，并根据业务需要，扩展定制功能模块和主题样式。
3. 一流的前端框架支持
4. 提供创新的前端可视化设计器
5. 触控优先、满足符合 ARIA 标准的 UI
WijmoJS 的图表、网格、OLAP 等控件均以触控、可定制为设计原则，遵循 ARIA 标准，提供用户熟悉的功能和 UI，就像使用 Excel 和 VS 一样。
6. 纯前端控件，基于 TypeScript 脚本实现
WijmoJS 提供如 C＃ 一般的使用感受，内置错误检查、Visual Studio 中的完整 IntelliSense 和完全符合 ES 6 规范的 Web 组件和 ES 模块。
WijmoJS 主要由以下前端控件集构成：
WijmoJS Core：基于 HTML5 的开发工具包，由核心控件、数据网格、输入控件和数据可视化控件构成。通过这款开发工具包，您可以快速创建浏览器模式访问的 Web 应用程序，在降低企业开发成本的同时，还能提升系统便捷性，满足最终用户高标准的体验需求。
FlexGrid：轻量级前端表格控件，允许您可视化和编辑表格数据。它提供了关于如何呈现和执行数据操作的各种选项，包括选择、排序、过滤、分组、分页、编辑、格式化等。主要功能涵盖：基本数据交互、单元格编辑、IO 操作、自定义扩展和数据绑定。
FlexChart：轻量级前端图表控件，允许您将表格数据可视化为业务图表。它提供了关于如何呈现和与数据交互的各种选项，包括选择、缩放、向下钻取、格式化等。主要功能涵盖基础图表类型、扩展图表类型、导出模块和其他增强功能。
金融图表（FinancialChart）：金融图表通过趋势线、过滤器、范围选择器，注解进行分析，并且只需少量代码就能轻松实现。它优化了金融行业，是一个提供了全方位服务的控件，几乎满足了用户从开始使用股市应用程序的所有需求，最重要的一点是立即可用。其图表类型涵盖：平均柱形图（Heikin-Ashi），砖形图（Renko）、卡吉图（Kaji）、断线图（Line Break）、成交量柱状图（Column Volume）、等量图（Equi Volume）、量能 K 线（Candle Volume）、点数图（Point And Data）、Arms 量能 K 线图（Arms Candle Volume）。
OLAP 数据透视分析：使用 WijmoJS 的 OLAP 模块可以用 JavaScript 创建类似 Excel 的基于 Web 的数据透视表。在没有服务端依赖的情况下只需毫秒级即可处理、聚合成千上万行数据。此外，智能的 Pivot Panel 还可以解析数据类型，自动摆放字段。
WijmoJS 适用场景
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 近期发布的新版本中包含了诸多重量级的功能和来自客户的新需求，如对形状和富文本的支持，也有新增的图表类型，还有更多细节处的更新，下面我们会针对所有新功能做简单的介绍。
SpreadJS V12 新功能：形状
1. SpreadJS 支持 182 种内置形状
2. 包含三种基本类型：基本形状、Connector、Group
3. 支持以下自定义属性：大小、位置；背景色、透明；填充色，边框（颜色及线宽）；文字（颜色，字形，字号以及文字排列位置）；属性均可绑定公式
4. 支持自定义形状（Path Canvas）
SpreadJS V12 新功能：全新图表类型
1. 雷达图（Radar）：显示具有任意数量变量的多变量观测值，雷达图通常用于表现强弱力度、影响力等指标。
2. 旭日图（Sunbrust）：展示了从根节点（中心）向外到较低层次结构的分层数据。内圆的一段是外圆分段的父代，它位于父代的角度扫描范围内。旭日图非常适合展示如何将一个类别或级别（环）分解为其所占的大致比例。
3. 树图（Treemap）：适合展现具有层级关系的数据，能够直观体现同级之间的比较。一个 Tree 状结构转化为平面空间矩形的状态，就像一张地图，指引我们发现探索数据背后的故事。矩形树图能更有效地利用空间，并且拥有展示占比的功能。缺点在于，当分类占比太小的时候文本会变得很难排布。
SpreadJS V12 新功能：条形码
条形码（Barcode）：客户可以使用条形码来显示具有指定条形码类型的纸张数据，广泛应用于商品流通应用，图书管理应用等众多领域。SpreadJS 的条形码支持 QRCode, EAN-13, EAN-8, Codabar, Code39, Code93, Code128, GS1_128, Code49, PDF417, DataMatrix。
SpreadJS V12 新功能：富文本编辑
用户现在可以为单个单元格中的文字添加粗体、斜体等字体和所有基本格式！SpreadJS 提供的富文本编辑可用于多种公式类的显示。
以上就是 SpreadJS 的新功能介绍，需要了解更多，请访问葡萄城 SpreadJS 官网。
WijmoJS 2018V3 新功能一览
近期发布的 WijmoJS 全面支持 Angular 7 ，提供更高效的纯前端 PDF 导出功能、智能的分组表头属性、轻松创建 Ribbon 主题示例和 OLAP 数据切片器及其功能增强。下面我们会针对这些新功能做简单的介绍。
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 集合已启用分组，则会添加组标题项。
WijmoJS 2018V3 新功能：基于 TabPanel 的 Ribbon 主题
WijmoJS 添加了一个全新的功能区主题示例，显示了如何使用 TabPanel 控件和 WijmoJS 输入模块中的控件轻松创建 Ribbons。示例功能区元素基于TabPanel。选项卡页面包含按行和列组合的控件组。组中的控件使用“Material icons”，并根据分配给每个控件的 aria-label 属性自动创建工具提示。
WijmoJS 2018V3 新功能：OLAP 功能增强
数据切片器：OLAP 的 Slicer 控件
为 OLAP 增加“详细信息对话框” API
WijmoJS 2018V3 新功能：日历选择器、Menu 菜单扩展
WijmoJS 在 Calendar 和 InputDate 控件中添加了年份标题打开日历选择器，这样您就可以更轻松地跳转到不同的年份。这个小小的改进可以在选择日期时为最终用户节省一些时间。
Menu 控件添加向下扩展子菜单的功能，这样可以帮助最终用户创建更复杂的菜单和上下文菜单，并且还添加了一个在悬停时打开菜单的选项。
以上就是 WijmoJS 的新功能介绍，需要了解更多，请访问葡萄城 WijmoJS 官网。
第三部分 葡萄城前端开发工具典型案例分析
本文中提到的典型案例，均会在葡萄城“纯前端大数据处理技术——葡萄城纯前端开发工具应用实践”的公开课直播中进行讲解，欢迎扫码预约收听。
华为 – 勘探设计部“eSurvey”
案例特点：之前重度依赖 Excel 作为前期调研、资料收集、交换、方案设计 + 审定的核心工具，积攒大量的 Excel 文件需要进行导入导出并现场打印，使用 SpreadJS 后，上述问题得到了很好的解决。
微软 – Dynamics CRM
案例特点：强调智能化的用户体验，期望能提供更好的移动端使用操作，需要触控支持和跨平台交互能力。
班牛 – OA SaaS
案例特点：系统需要包含所有 Excel 的功能，而且流畅度要和本地的 Excel 几乎相同。
华闽通达 – R 平台应用
案例特点：需要支持浏览器展现 Excel 格式；支持客户端打印；在线进行报表模板编辑；与 Excel 一致的风格。
北京三维天地 – 实验室管理系统
案例特点：系统中有设计展示数据模板；需要支持自定义公式以及前端 PDF 导出。
中国能建 – 企业数据填报
案例特点：无编码模板设计器；高性能。
星云 – 审计系统
案例特点：需要高度兼容 Excel 的纯前端控件，不仅样式、公式兼容 Excel，操作习惯也和 Excel 保持一致，在系统使用中完全可以抛弃掉 Excel 程序，使所有工作在系统中完成。
Leyer – 教育管理系统
民航飞行学院 – 薪资管理系统
以上便是从本次话题——“纯前端大数据处理技术：葡萄城纯前端开发工具应用实践”中截取的部分内容。更多关于前端数据处理技术和产品典型案例，我们将在直播中深入讨论，期待与您不见不散。
错过直播，没关系，所有直播内容我们会存放在葡萄城公开课页面，您可免费观看。与此同时，葡萄城还提供更多优秀的开发工具，欢迎大家深入了解。
本文首发于 GitChat，未经授权不得转载，转载需与 GitChat 联系。
阅读全文: http://gitbook.cn/gitchat/activity/5bf3bcdf751c255ec59a55e1
您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ，阅读更多 GitChat 专享技术内容哦。
