提高前端业务开发的效率,这个页面定义了一些

XCel 项目计算:Electron 与 Vue 的性质优化

2017/03/01 · 基础本领 · Javascript, 算法

本文小编: 伯乐在线 - 刘健超-J.c 。未经小编许可,禁止转发!
招待插手伯乐在线 专辑我。

XCEL 是由京东客户体验设计部凹凸实验室推出的叁个 Excel 数据洗濯工具,其经过可视化的法子让顾客轻便地对 Excel 数据进行筛选。

XCEL 基于 Electron 和 Vue 2.x,它不只跨平台(windows 7+、Mac 和 Linux),并且丰裕利用 Electron 多进程职责处理等成效,使其性质卓越。

落地页: ✨✨✨
品类地址: ✨✨✨

敏捷入门

Electron 能够令你使用纯 JavaScript 调用丰盛的原生 APIs 来制造桌面应用。你能够把它当作三个小心于桌面应用的 Node.js 的变体,实际不是 Web 服务器。

那不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反,Electron 使用 web 页面作为它的 GUI,所以你能把它作为成一个被 JavaScript 调控的,精简版的 Chromium 浏览器。

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

Vue.js、React.js 及 Angular.js 等等前端开荒框架引进了 UI = framework(State) 的前端编制程序逻辑,大面积收缩了前面二个业务开支的难度,尤其是面向复杂前端接纳。而那一个优质开源框架的推广、多端业务合併、前后端分离的要求让愈来愈多的架构划虚构计将比比较多业务逻辑写在了前面三个。

Vue.js、React.js 及 Angular.js 等等前端开采框架引进了 UI = framework(State) 的前端编制程序逻辑,大面积减少了前面一个业务开支的难度,极度是面向复杂前端选取。而那几个优质开源框架的推广、多端业务合併、前后端分离的须要让越来越多的框架结构划设想计将多数事务逻辑写在了前边多个。

连串背景

客户商量的定量研究和轻量级数据管理中,均需对数据开展保洁管理,以剔除分外数据,保障数据结果的信度和效度。近期因应用钻探数据和轻量级数据的多变性,对轻量级数据清洗往往选用人工洗刷,缺少统一、标准的洗刷流程,但对此应用讨论和轻量级的数据往往是索要保险数据稳定性的,因而,在对数据开展保洁时最佳有标准的涤荡方法。

主进程

在 Electron 里,运行 package.jsonmain 脚本的经过被叫做主进程。在主进程运转的剧本能够以创制 web 页面包车型客车样式呈现 GUI。

这一个页面定义了一部分在Electron中时时应用的专著名词。

 

唯独,纯前端产品也颇具它的难点。上述的多少个前端框架都支持了后端渲染的效率,进而融入了左右端的难题。如何有效地整合现存前端逻辑达成后端渲染、怎么样优化后端渲染品质、怎么着完成服务器流式吐内容越来越快地渲染页面包车型大巴经验,会化为新一代 Web 开拓的侧向,提升前端业务支付的作用。在由七牛云主办的 ECUG 十周年盛会上,阴明为大家带来了他的实行分享。

特点一览

  • 依照 Electron 研究开发并封装成为原生应用,客户体验特出;
  • 可视化操作 Excel 数据,扶助文件的导入导出;
  • 装有单列运算逻辑、多列运算逻辑和双列范围逻辑二种筛选方式,而且可经过“且”、“或”和“编组”的方法自由组合。

渲染进度

由于 Electron 使用 Chromium 来突显页面,所以 Chromium 的多进程组织也被充足利用。各样 Electron 的页面都在运行着协调的进度,那样的进度大家誉为渲染进度

在相似浏览器中,网页平常会在沙盒境况下运作,并且分化意访谈原生产资料源。但是,Electron 顾客具有在网页中调用 Node.js 的 APIs 的力量,能够与底层操作系统直接互动。

ASAR

ASAR是Atom Shell Archive Format的简称。一个asar文书档案是两个把文件都位居三个独门的文书中的轻巧的tar-like类型文件。Electron可以从中读取全体的文本而不用解压整个文件。

创办ASA昂科威类型首借使为了在Windows下增进质量... TODO

然则,纯前端产品也存有它的主题素材。上述的多少个前端框架都帮衬了后端渲染的功能,从而融入了前后端的难点。怎样有效地结合现成前端逻辑完毕后端渲染、怎么着优化后端渲染质量、怎样兑现服务器流式吐内容越来越快地渲染页面包车型客车阅历,会化为新一代 Web 开荒的动向,进步前端业务支付的频率。在由七牛云主办的 ECUG 十周年盛会上,阴明为大家带来了他的实践分享。

图片 1

思路与贯彻

依据用研组的需求,利用 Electron 和 Vue 的性状对该工具进行付出。

主进度与渲染进度的区分

主进度使用 BrowserWindow 实例创建页面。各种 BrowserWindow 实例都在融洽的渲染进度里运维页面。当三个 BrowserWindow 实例被销毁后,相应的渲染进度也会被停止。

主进程管理全部页面和与之相应的渲染进度。各种渲染进度都以相互独立的,何况只关怀他们友善的页面。

由于在页面里保管原生 GUI 财富是那些危险並且便于产生财富走漏,所以在页面调用 GUI 相关的 APIs 是不被允许的。借使您想在网页里应用 GUI 操作,其相应的渲染进度必得与主进程实行报纸发表,央求主进度展开连锁的 GUI 操作。

在 Electron,我们提供两种办法用于主进度和渲染进度之间的简报。像 ipcRendereripcMain 模块用于发送音信, remote 模块用于 RPC 方式通讯。这一个内容都得以在二个 FAQ 中查阅 how to share data between web pages。

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 前端。详情>>

制作你首先个 Electron 应用

大约上,三个 Electron 应用的目录结构如下:

your-app/
├── package.json
├── main.js
└── index.html

package.json 的格式和 Node 的完全一致,並且丰裕被 main 字段申明的脚本文件是您的选拔的启航脚本,它运转在主进程上。你使用里的 package.json 看起来应当像:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注意:如果 main 字段未有在 package.json 评释,Electron会优先加载 index.js

main.js 应该用于创设窗口和管理种类事件,多个压倒元白的例子如下:

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// 保持一个对于 window 对象的全局引用,如果你不这样做,
// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭
let win

function createWindow () {
  // 创建浏览器窗口。
  win = new BrowserWindow({width: 800, height: 600})

  // 加载应用的 index.html。
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // 打开开发者工具。
  win.webContents.openDevTools()

  // 当 window 被关闭,这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象,如果你的应用支持多窗口的话,
    // 通常会把多个 window 对象存放在一个数组里面,
    // 与此同时,你应该删除相应的元素。
    win = null
  })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在这文件,你可以续写应用剩下主进程代码。
  // 也可以拆分成几个文件,然后用 require 导入。
  if (win === null) {
    createWindow()
  }
})

// 在这文件,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。

最终,你想突显的 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

DMG

Apple Disk Image是二个在MacOS上使用的打包类型。D名爵文件一般用来散发应用的“安装文件”。electron-builder支撑dmg作为贰个封装目的。

图片 2


贯彻思路

  1. 因而 js-xlsx 将 Excel 文件深入分析为 JSON 数据
  2. 基于筛选规范对 JSON 数据开展筛选过滤
  3. 将过滤后的 JSON 数据转变来 js-xlsx 钦定的数据结构
  4. 选用 js-xlsx 对转移后的数码生成 Excel 文件

纸上得来终觉浅,绝知这一件事要躬行

运行你的使用

设若你创立了早期的 main.jsindex.htmlpackage.json 那多少个文件,你可能会想尝试在地面运营并测量检验,看看是还是不是和愿意的这样符合规律运作。

IPC

IPC是Inter-Process Communication的简称。Electron使用IPC在主进程和渲染进度里面发送类别化的JSON新闻。

阴明(掘金队(Denver Nuggets)联合创办人、总CEO)

前端框架的勃勃及干练

连带技巧

要是对某项技艺相比熟稔,则可略读/跳过。

electron-prebuilt

electron 是一个 npm 模块,包罗所利用的 Electron 预编译版本。
假设您早就用 npm 全局安装了它,你只供给依据如下情势直接运维你的选拔:

electron .

假如您是局地安装,那运转:

libchromiumcontent

四个包括了Chromium内容模块和颇具依赖(例如,Blink,V8等)的简约的分享库。

 

从百花齐放到三足鼎峙

图片 3

图 1

那是从网络找到的前端的动静(图 1 ),每三个颜料均是某一个前端库的归类。前端的社会风气便是那般,须要在一堆的选项中挑选二个,并且要跟别的的选项 PK 。

如图 1 所示,方框的有的写现实的作业代码,比方刚开始阶段的 jQuery。Prototype 曾经成功了 两千 年内有复杂专门的学业代码的前端,写了大气的页面,守旧的后台 admin 等都以如此。再往上 Ember 相比适合业务稳固的种类接纳,因为它一向坚称着前行包容,它不像新的库,假使出了贰个新本子基本上供给推倒重写;而 Backbone 是写相比复杂页面的二个库, Angular 、React 等等。

在这样繁杂的前端中,单纯写前端业务有为数相当多摘取。曾见到四个商议:“ 二〇一五年,你完了一个巨轻巧的政工,就供给 TypeScript 写代码,用 Fetch 发起异步供给,全体的代码编写翻译程 ES6 ……”用了几十一个库完结三个非常轻巧的难点。那么,在如此的前端生态下,它肯定会是清都紫微的,如若不发达,不会有那些人在此处做职业。

Electron

macOS / Linux

$ ./node_modules/.bin/electron .

main process

主进度,经常是二个叫作main.js的公文,是指向每二个Electron应用的入口。它决定着应用从张开到关门的生命周期。它也管理着原生控件,譬如MenuMenu BarDockTray等。主进度在应用中担当着创设各类新的渲染进度的权力和权利。全体的Node接口都在它里面。

每一种行使的主线程文件是在package.json文件中的main性格中被钦定的。这是electron .怎么样理解运行时要实行哪个文件的原由。

参见:process,renderer process


Web 技能和 JavaScript 到达种种领域

  • 后端:Node.js 在业务支付中曾经比较广泛使用,何况 v8 品质较好。

  • 移动:最常用的 Hybrid ,React Native ,NativeScript ,Weex 。

  • 桌面:Electron,nw.js 来达成 Web 端的使用,其实都是网页。

  • VR:WebVR ,A-Frame ,WebGL

  • 硬件:Cylon.js ,Tessel ,Johnny-Five

  • 多少可视化:d3.js ,vis.js ,HighCharts ,Charts

因为 JavaScript 本身的代码,学习陡峭程度好低,入门门槛低,並且网页端须要大,由此JavaScript 非凡繁荣。逐步地,JavaScript 的天性进一步好,有更三人采取,进而写 JavaScript 的人想用 JavaScript 写越多的东西,一步步迈到了逐条本事生态。

Electron 是什么?

Electron 是二个能够用 JavaScript、HTML 和 CSS 营造桌面应用程序的。那些应用程序能打包到 Mac、Windows 和 Linux 系统上运维,也能上架到 Mac 和 Windows 的 App Store。

  • JavaScript、HTML 和 CSS 都以 Web 语言,它们是构成网址的一局地,浏览器(如 Chrome)了然什么将那么些代码转为可视化图像。
  • Electron 是多个库:Electron 对底层代码举行抽象和打包,让开荒者能在此之上创设项目。

Windows

$ .node_modules.binelectron .

MAS

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

 

三足鼎峙:Vue.js 、Angular.js 、React.js

二零一四 年,从混乱的生态、数不尽的斗嘴和挑选中间, Web 开辟中的 Vue.js 、Angular.js 、React.js 那八个框架初露端倪,各吞没一片江山。所说的三足鼎峙有一个前提,而不是它们在社区里有多么火恐怕大家都爱用,而是那几个库是不是被登时流行的应用直接用在和睦的专业代码个中。

Angular.js 在 Google 已经被推了许多年,帮衬了 谷歌(Google)本人及众多厂家的重型业务代码。React.js 是 Instagram(Facebook)辅助的品类,它早就被用在众多线上的事情代码中,何况那么些业务代码天天在承继着几亿的访谈量。Vue.js 本人最开首是 Evan You 独立开辟者开源的项目,之后 Alibaba(Alibaba)、饿了么等商号都开首放量应用,未来Ali的 Weex 也借鉴了 Vue 的架构逻辑。

本文由必威发布于必威-前端,转载请注明出处:提高前端业务开发的效率,这个页面定义了一些

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。