澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站看掘金社区是如何实践的

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可以从中读取全部的文件而不用解压整个文件。

创造ASAR类型主要是为了在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的使用者并不用担心它。

 

阴明(掘金联合创始人、CEO)

技术选型

  • 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上使用的打包类型。DMG文件通常用来分发应用的“安装文件”。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消息。

阴明(掘金联合创始人、CEO)

前端框架的繁荣及成熟

相关技术

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

electron-prebuilt

electron 是一个 npm 模块,包含所使用的 Electron 预编译版本。
如果你已经用 npm 全局安装了它,你只需要按照如下方式直接运行你的应用:

electron .

如果你是局部安装,那运行:

libchromiumcontent

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

 

从百家争鸣到三足鼎立

澳门新浦京娱乐场网站 3

图 1

这是从网上找到的前端的状态(图 1 ),每一个颜色均是某一个前端库的分类。前端的世界就是如此,需要在一群的选项中选择一个,并且要跟其他的选项 PK 。

如图 1 所示,方框的部分写具体的业务代码,例如早期的 jQuery。Prototype 曾经完成了 2000 年内有复杂业务代码的前端,写了大量的页面,传统的后台 admin 等都是这样。再往上 Ember 比较适合业务稳定的系统使用,因为它一直坚持着向前兼容,它不像新的库,如果出了一个新版本基本上需要推倒重写;而 Backbone 是写比较复杂页面的一个库, Angular 、React 等等。

在这么繁杂的前端中,单纯写前端业务有很多选择。曾看到一个评论:“ 2016 年,你完成一个巨简单的业务,就需要 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

2016 年,从繁杂的生态、无尽的争吵和选择当中, Web 开发中的 Vue.js 、Angular.js 、React.js 这三个框架初露端倪,各占据一片江山。所说的三足鼎立有一个前提,并不是它们在社区里有多么火或者人们都爱用,而是这些库是否被当下最新的应用直接用在自己的业务代码当中。

Angular.js 在 Google 已经被推了很多年,支持了 Google 本身及很多公司的大型业务代码。React.js 是 Facebook 支持的项目,它已经被用在很多线上的业务代码中,而且这些业务代码每天在承接着几亿的访问量。Vue.js 本身最开始是 Evan You 独立开发者开源的项目,之后 Alibaba、饿了么等公司都开始充分使用,现在阿里的 Weex 也借鉴了 Vue 的架构逻辑。

为什么它如此重要?

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

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

手工下载 Electron 二进制文件

如果你手工下载了 Electron 的二进制文件,你也可以直接使用其中的二进制文件直接运行你的应用。

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。

前端框架的繁荣及成熟

每个框架甚至都有了自己的技术生态

三个库三足鼎立的原因是它们本身都有一套自己的生态。例如 React.js ,最早底下的 Server Side APIs 、GraphQL 、Flux 层怎么样把静态数据状态管理系统管好,再到 React 层本身页面样式,再到 Virtual Dom 和 Native Code ,它的技术量不多,如果深入其中,学习周期也不长,但是它本身蔓延出了一条生态。如果有朝一日它把中间层做到足够好,上下层对接很多东西,React 会成为一个比较大的技术生态。

它由什么组成?

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

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

澳门新浦京娱乐场网站 4

Windows

$ .electronelectron.exe your-app

NSIS

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

从百家争鸣到三足鼎立

澳门新浦京娱乐场网站 5

图 1 

 

这是从网上找到的前端的状态(图 1 ),每一个颜色均是某一个前端库的分类。前端的世界就是如此,需要在一群的选项中选择一个,并且要跟其他的选项 PK 。

 

如图 1 所示,方框的部分写具体的业务代码,例如早期的 jQuery。Prototype 曾经完成了 2000 年内有复杂业务代码的前端,写了大量的页面,传统的后台 admin 等都是这样。再往上 Ember 比较适合业务稳定的系统使用,因为它一直坚持着向前兼容,它不像新的库,如果出了一个新版本基本上需要推倒重写;而 Backbone 是写比较复杂页面的一个库, Angular 、React 等等。

 

在这么繁杂的前端中,单纯写前端业务有很多选择。曾看到一个评论:“ 2016 年,你完成一个巨简单的业务,就需要 TypeScript 写代码,用 Fetch 发起异步请求,所有的代码编译程 ES6 ……”用了几十个库完成一个非常简单的问题。那么,在这样的前端生态下,它一定会是繁荣的,如果不繁荣,不会有很多人在这里做事情。

 

Why Vue.js

我们为什么选择 Vue.js,这是一个很幸运、很偶然的选择。掘金用 Vue.js 是在 0.12 版本,现在已经是 2.15 版本。当时选择最早版本的时候,掘金只有 4 个人。Vue.js 发展到现在,可以看到是一个增长非常疯狂的项目,从一开始的个人开源,到现在许多大公司使用,这和那些有大公司支持的开源库有了非常大的区别。到现在,Vue 在 NPM 上每月有超过 22 万次下载,这是很高的量。

开发体验如何?

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

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

Linux

$ ./electron/electron your-app/

process

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

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

参见:main 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 写更多的东西,一步步迈到了各个技术生态。

 

为什么用 Vue.js ?

第一次使用 Vue.js 的时候,公司想做促销活动,写一个问答宣传页面,当时微信还没有禁止这样的传播,我做了一个“算算你值多少钱”的应用,当时脑子里有几个库。考虑到自己比较了解 Vue.js ,就试着用 Vue.js 来开发。后来发现从有这个想法到开发完只用了四个小时,包括 UI 层、页面层、微博分享、微信分享,开发小东西的速度超乎了想象,但那时候还没有准备拿它来写整个网站的业务逻辑。

Vue.js 到了 1.0 ,它是一个前端的 MVVM 的框架,看到一个网页端的界面,它出现这样的样式一定是因为它背后有数据。而 MVVM 框架最大的特点是样式随着数据变化而变化,数据和 UI 层的同步是框架本身自动完成的,这是 Vue.js 在当时帮我们解决的一个问题。Vue 到了 1.0 , MVVM 的框架适合掘金当时的业务开发需求。

澳门新浦京娱乐场网站 6

图 2

发展到 2.0,很多人说 Vue.js 已经很火了,很多人真正愿意用它的原因是这张图(图 2 ),它是一个渐进式前端解决方案。分了五层很重的东西,不是打包型的,而是一个把它拆散了,每一层根据需求会加的东西。最早期人们用 Vue.js 的需求,这是一段前端的业务逻辑,希望用声明式语言 Declarative 把这段业务描述清楚,因此就可以用 Vue.js 最简单的业务逻辑、最简单的库把 Vue.js 这个库加进来,便可以完成前端业务里面的交互。从数据层到 UI 层的变化,特别简单的一个功能。但是前端应用更复杂一点,这个页面有很多组件,可以根据自己的需求去定义 Component ,可以用组建化的逻辑编写业务逻辑,这是第二层。但是发现这个东西很复杂,一个页面已经不能实现,要分好几个页面。可以用另外一个援引的库,就像 Routing 加进来,有了前端路由。

现在发展这个业务越来越复杂,因为这个业务正好代表了公司自己的发展,刚开始掘金只是单纯的 MVVM ,后来有了前端路由,再后来发现,这个页面已经复杂到类似于小应用,小应用一定会带来状态管理。在这个网站上,所有的应用都要同步当下登录的用户,这时必须需要状态管理,掘金便开始进行大规模状态管理。

前端已经复杂到需要完整的一套技术体或者自动化工具,来生产 Build 测试、发布等等,还要前端分包,这个页面是纯前端应用,不断地打开新的页面,其实它都是从后端再拿一个新的 js 出来,每一段页面都是自己的 js ,这样能提高性能,按需拿取页面的逻辑,这个时候分包就一定要用工业化的逻辑来实现。再往后走,可能会有一些测试、单元、代码的东西,它是一套整个的构建工具。

这就是一套流程,对于刚开始的开发者可能用特别简单的 Vue.js 代码写一个特别帅的主页,能动一动,弹一弹,后来可以根据自己的需求修改,页面可以更复杂,可以写成组件化的、写客户端路由等等。这一套渐进式的系统,使得几乎每一个业务在用 Vue.js 的时候都有一个对标点,一个网站的对标点可能是在客户端流这一层,可能一个网站的对标点是在扩展工具。因此,一个人基于自己要做的业务,可以按照不同的深度去使用,而且在不同的深度之下不会有性能或者学习路径陡峭的问题,这就是人们喜欢用 Vue.js 的真实原因。

两个进程(重点)

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

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

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

macOS

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app 里面是 Electron 发布包,你可以在 这里 下载到。

renderer process

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

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

参考:process,main process

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

2016 年,从繁杂的生态、无尽的争吵和选择当中, Web 开发中的 Vue.js 、Angular.js 、React.js 这三个框架初露端倪,各占据一片江山。所说的三足鼎立有一个前提,并不是它们在社区里有多么火或者人们都爱用,而是这些库是否被当下最新的应用直接用在自己的业务代码当中。

 

Angular.js 在 Google 已经被推了很多年,支持了 Google 本身及很多公司的大型业务代码。React.js 是 Facebook 支持的项目,它已经被用在很多线上的业务代码中,而且这些业务代码每天在承接着几亿的访问量。Vue.js 本身最开始是 Evan You 独立开发者开源的项目,之后 Alibaba、饿了么等公司都开始充分使用,现在阿里的 Weex 也借鉴了 Vue 的架构逻辑。

 

Vue.js 原理

Vue.js 不支持 IE8 及其以下,它只支持 IE9 以上,因为 IE9 支持了 ES2015 。比如说 A 是一个 Object ,每次输出 A 到 B 的时候,一定会先调用一次 getter ,相当于获取了任何一个数据被改变的时候的那个事件,并且对于这个事件可以进行相关的处理。

澳门新浦京娱乐场网站 7

图 3

这是一段业务(图 3 ),这个业务可能基于相关的 Object 的数据,因为有 setter 函数在这里控制,因此可以生成一个 watcher 。面对每一段业务代码,这个 watcher 都会关注所有相关的数据,以至于这些相关的数据发生任何的变动,它都会调动 setter 。setter 会告诉 watcher ,watcher 知道跟这段道路相关的数据发生变化了,发生变化之后就会去 Component Render Function,把新的数据的样式给前端样式,这样完成了从数据层变化,到告诉 watcher ,watcher 再告诉 Render Fenction,最后把前端 UI 变了这样的逻辑。它并没有用高级的数据结构或者高级的算法,它其实是用了 JavaScript 原生的一个属性。

主进程

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

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

澳门新浦京娱乐场网站 8

以发行版本运行

在你完成了你的应用后,你可以按照 应用部署 指导发布一个版本,并且以已经打包好的形式运行应用。

Squirrel

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

每个框架甚至都有了自己的技术生态

三个库三足鼎立的原因是它们本身都有一套自己的生态。例如 React.js ,最早底下的 Server  Side  APIs 、GraphQL 、Flux 层怎么样把静态数据状态管理系统管好,再到 React 层本身页面样式,再到 Virtual  Dom 和 Native  Code ,它的技术量不多,如果深入其中,学习周期也不长,但是它本身蔓延出了一条生态。如果有朝一日它把中间层做到足够好,上下层对接很多东西,React 会成为一个比较大的技术生态。

 

选择 Vue.js 框架

选择一个前端框架一定有很重要的原因:

  • 开发效率:Declarative Rendering ,前端开发写这个业务逻辑会非常漂亮;

  • 代码维护:组件化 vue-loader ,可以在一个文件中关于某个组件或者某个页面写出逻辑层、样式层,可以写在一个组建中,这是一个比较好的解决方案。

  • 速度性能:要能满足需求,Vue.js 是远快于 1.0 的。页面渲染的时候可能不在意性能,但是到页面复杂度的时候便会很在意性能,性能慢的时候会影响每一个页面跳转。

渲染进程

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