澳门新葡亰平台官网下载-平台游戏app > 澳门新葡亰平台官网下载 >
1. 术语表

XCel 项目总结:Electron 与 Vue 的性能优化

2017/03/01 · 基础技术 · Javascript, 算法

本文作者: 伯乐在线 - 刘健超-J.c 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

XCEL 是由京东用户体验设计部凹凸实验室推出的一个 Excel 数据清洗工具,其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。

XCEL 基于 Electron 和 Vue 2.x,它不仅跨平台(windows 7+、Mac 和 Linux),而且充分利用 Electron 多进程任务处理等功能,使其性能优异。

落地页: ✨✨✨
项目地址: ✨✨✨

原文:https://github.com/electron/electron/blob/master/docs/glossary.md
译者:Lin

项目背景

用户研究的定量研究和轻量级数据处理中,均需对数据进行清洗处理,以剔除异常数据,保证数据结果的信度和效度。目前因调研数据和轻量级数据的多变性,对轻量级数据清洗往往采取人工清洗,缺少统一、标准的清洗流程,但对于调研和轻量级的数据往往是需要保证数据稳定性的,因此,在对数据进行清洗时最好有标准化的清洗方式。

这个页面定义了一些在Electron中经常使用的专有名词。

特性一览

  • 基于 Electron 研发并打包成为原生应用,用户体验良好;
  • 可视化操作 Excel 数据,支持文件的导入导出;
  • 拥有单列运算逻辑、多列运算逻辑和双列范围逻辑三种筛选方式,并且可通过“且”、“或”和“编组”的方式任意组合。

ASAR

ASAR是Atom Shell Archive Format的简称。一个asar文档是一个把文件都放在一个单独的文件中的简单的tar-like类型文件。Electron可以从中读取全部的文件而不用解压整个文件。

创造ASAR类型主要是为了在Windows下提高性能... TODO

思路与实现

基于用研组的需求,利用 Electron 和 Vue 的特性对该工具进行开发。

Brightray

Brightray是一个使libchromiumcontent更容易使用应用的静态库。它是专门为了Electron而创造的,但是也可以允许没有基于Electron的原生应用使用Chromium的渲染引擎。

Brightray是Electron的一个底层的依赖,大多数Electron的使用者并不用担心它。

技术选型

  • Electron:桌面端跨平台框架,为 Web 提供了原生接口的权限。打包后的程序兼容 Windows 7 及以上、Mac、Linux 的 32 / 64 位系统。详情>>
  • Vue 全家桶:Vue 拥有数据驱动视图的特性,适合重数据交互的应用。详情>>
  • js-xlsx:兼容各种电子表格格式的解析器和生成器。纯 JavaScript 实现,适用于 Node.js 和 Web 前端。详情>>

DMG

Apple Disk Image是一个在MacOS上使用的打包类型。DMG文件通常用来分发应用的“安装文件”。electron-builder支持dmg作为一个打包目标。

实现思路

  1. 通过 js-xlsx 将 Excel 文件解析为 JSON 数据
  2. 根据筛选条件对 JSON 数据进行筛选过滤
  3. 将过滤后的 JSON 数据转换成 js-xlsx 指定的数据结构
  4. 利用 js-xlsx 对转换后的数据生成 Excel 文件

纸上得来终觉浅,绝知此事要躬行

IPC

IPC是Inter-Process Communication的简称。Electron使用IPC在主进程和渲染进程之间发送序列化的JSON消息。

相关技术

如果对某项技术比较熟悉,则可略读/跳过。

libchromiumcontent

一个包含了Chromium内容模块和所有依赖(例如,Blink,V8等)的简单的共享库。

Electron

main process

主进程,通常是一个叫做main.js的文件,是指向每一个Electron应用的入口。它控制着应用从打开到关闭的生命周期。它也管理着原生控件,比如MenuMenu BarDockTray等。主进程在应用中承担着创建每一个新的渲染进程的责任。全部的Node接口都在它里面。

每一个应用的主线程文件是在package.json文件中的main属性中被指定的。这是electron .如何知道启动时要执行哪个文件的原因。

参见:process,renderer process

Electron 是什么?

Electron 是一个可以用 JavaScript、HTML 和 CSS 构建桌面应用程序的。这些应用程序能打包到 Mac、Windows 和 Linux 系统上运行,也能上架到 Mac 和 Windows 的 App Store。

  • JavaScript、HTML 和 CSS 都是 Web 语言,它们是组成网站的一部分,浏览器(如 Chrome)懂得如何将这些代码转为可视化图像。
  • Electron 是一个库:Electron 对底层代码进行抽象和封装,让开发者能在此之上构建项目。

MAS

Apple's Mac App Store的缩写。关于提交你的应用程序到MAS的详细信息,请看Mac App Store Submission Guide。

为什么它如此重要?

通常来说,每个操作系统的桌面应用都由各自的原生语言进行编写,这意味着需要 3 个团队分别为该应用编写相应版本。而 Electron 则允许你用 Web 语言编写一次即可。

  • 原生(操作系统)语言:用于开发主流操作系统应用的原生语言的对应关系(大多数情况下):Mac 对应 Objective C、Linux 对应 C、Windows 对应 C++。

native modules

Native modules(在Node.js中也叫插件)是C或C++写的模块,使用require()函数可以被加载到Node.js或Electron中,然后就可以像一个普通Node.js模块一样使用了。它们主要用来提供一个把js运行在Node.js和C/C++库上的接口。

Electron支持Native Node modules,但是由于Electron非常有可能使用安装在你电脑上的Node二进制文件中的不同版本的V8,你在编译native modules的时候需要手动指定Electron的头部位置。

参考Using Native Node Modules。

它由什么组成?

Electron 结合了 ChromiumNode.js 和用于调用操作系统本地功能的 API(如打开文件窗口、通知、图标等)。

  • Chromium:Google 创造的一个开源库,并用于 Google 的浏览器 Chrome。
  • Node.js(Node):一个在服务器运行 JavaScript 的运行时(runtime),它拥有访问文件系统和网络权限(你的电脑也可以是一台服务器!)。

图片 1

NSIS

Nullsoft Scriptable Install System是一个Microsoft Windows下的脚本驱动的安装制作工具。它发布在免费软件许可证下,是一个类似于InstallShield的广泛的被用来替代商业专有产品的工具。electron-builder支持NSIS作为一个编译目标。

开发体验如何?

基于 Electron 的开发就像在开发网页,而且能够无缝地 使用 Node。或者说:在构建一个 Node 应用的同时,通过 HTML 和 CSS 构建界面。另外,你只需为一个浏览器(最新的 Chrome)进行设计(即无需考虑兼容性等)。

  • 使用 Node:这还不是全部!除了完整的 Node API,你还可以使用托管在 npm 上超过 350,000 个的模块。
  • 一个浏览器:并非所有浏览器都提供一致的样式,Web 设计师和开发者经常因此而不得不花费更多的精力,让网站在不同浏览器上表现一致。
  • 最新的 Chrome:可使用超过 90% 的 ES2015 特性和其它很酷的特性(如 CSS 变量)。

process

一个进程是一个正在运行的计算机程序的实例。Electron应用实际上是利用主进程和一个或几个渲染进程同时运行几个程序。

Node.js和Electron中,每一个运行着的进程都是一个process对象。这个对象是一个全局的并提供关于当前进程的信息和控制。作为一个全局的,它在应用中不使用require()也是有效的。

参见:main process, renderer process

两个进程(重点)

Electron 有两种进程:『主进程』和『渲染进程』。部分模块只能在两者之一上运行,而有些则无限制。主进程更多地充当幕后角色,而渲染进程则是应用程序的各个窗口。

注:可通过任务管理器(PC)/活动监视器(Mac)查看进程的相关信息。

  • 模块:Electron 的 API 是根据它们的用途进行分组。例如:dialog 模块拥有所有原生 dialog 的 API,如打开文件、保存文件和警告等弹窗。

renderer process

在你的应用中,渲染进程就是一个浏览器窗口。不同于主进程,可以有多个渲染进程并且每一个渲染进程都作为一个分隔的进程来运行。它们也可以被隐藏。

一般的浏览器中,网页通常运行在一个沙盒环境中,并且不允许调用本地资源。Electron的使用者有权利使用Node.js接口来与底层的操作系统哦交互。

参考:process,main process

主进程

主进程,通常是一个命名为 main.js 的文件,该文件是每个 Electron 应用的入口。它控制了应用的生命周期(从打开到关闭)。它既能调用原生元素,也能创建新的(多个)渲染进程。另外,Node API 是内置其中的。

  • 调用原生元素:打开 diglog 和其它操作系统的交互均是资源密集型操作(注:出于安全考虑,渲染进程是不能直接访问本地资源的),因此都需要在主进程完成。

图片 2

Squirrel

Squirrel是一个开源的框架,可以允许Electron应用自动升级到已经发布的最新版本。查看autoUpdater接口的使用Squirrel启动的信息。

渲染进程

渲染进程是应用的一个浏览器窗口。与主进程不同,它能存在多个(注:一个 Electron 应用只能存在一个主进程)并且相互独立(它也能是隐藏的)。主窗口通常被命名为 index.html。它们就像典型的 HTML 文件,但 Electron 赋予了它们完整的 Node API。因此,这也是它与浏览器的区别。

  • 相互独立:每个渲染进程都是独立的,这意味着某个渲染进程的崩溃,也不会影响其余渲染进程。
  • 隐藏:可隐藏窗口,然后让其在背后运行代码(