Electron 是什么

定义

Electron是一个能让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的程序。

历史

2013年的时候,Atom编辑器问世,作为实现它的底层框架Electron也逐渐被熟知,到2014年时被开源,那时它还是叫Atom Shell

接下来的几年,Electron在不断的更新迭代,几乎每年都有一个重大的里程碑

  • 2013年4月11日,Electron以Atom Shell为名起步。
  • 2014年5月6日,Atom以及Atom Shell以MIT许可证开源。
  • 2015年4月17日,Atom Shell改名为Electron。
  • 2016年5月11日,1.0版本发布。
  • 2016年5月20日,允许向Mac应用商店提交软件包。
  • 2016年8月2日,支持Windows商店。

在最新的稳定版本V3.x中,Electorn集成了Nodejs v10.2.0和内核为v66.0.3359.181的Chromium

基于Electron实现的软件

Electron现已被多个开源应用软件所使用,其中被广大程序员所熟知和使用的Atom和VsCode编辑器就是基于Electron实现的。尝试打开VsCode,点击帮助菜单中的切换开发人员工具,可以在界面上看到我们熟悉的Chrome devtool,如下图

底层实现

由于应用场景是在系统平台上开发应用,所以我们开发时需要有能调用原生系统api的能力。为了能让前端语言能跟底层可以交互,Electron集成了Nodejs+Chromium。Nodejs主要负责应用程序主线程逻辑控制、底层交互等功能,Chromium主要负责渲染线程窗口的业务逻辑。主要的架构如下图:

这样的架构让单独升级Chromium版本成为可能。假设你的程序当前使用的是Electron v3.x的版本,这个版本的Electron所带的Chromium是66版本。这时如果你用的某些特性必须要使用Chromium 69版本,除了整体升级Electron到指定最新版本外,你还可以单独的对Chromium版本进行升级,官方文档上提供了升级的方法。升级 Chromium

但是一般情况我们不建议这么做,因为成功的升级需要你具备C和C++相关的知识,并且对Chromium的底层实现具有一定的了解。即使你成功升级了Chromium的版本,但是对于软件整体的稳定性是无法保证的。

为什么要用

以Windows平台为例,大部分人会首先想到使用QT(C++),WPF(C#) 等语言去开发应用。不可否认的是,这些已经是非常成熟的开发方案了。但是,我们来看下如下两种场景:

  • 公司要做个全新的APP,但是技术人员构成大部分都是前端开发
  • 公司原本就有在线的web应用,但是想包个壳能在桌面直接打开,同时增加一些与系统交互的功能

对于第一种场景,团队中开发人员对于C++和C#并不熟悉,虽然可以现学,但是整个项目的技术管理和项目管理就会变得不可控。

对于第二种场景,对于应用的业务逻辑要求并不多,只是套一个具有浏览器的运行环境,单独为此配置一个C++、C#开发人员划不来。

对于这两种情况,如果现有的前端开发人员能直接搞定,那就非常完美了。

Electron的诞生提供了这种可能性。它可以帮助前端开发者在不需要学习其他语言和技能的前提下,快速开发跨平台的桌面应用。

什么是electron的更多相关文章

  1. Electron使用与学习--(页面间的通信)

    目录结构: index.js是主进程js. const electron = require('electron') const app = electron.app const BrowserWin ...

  2. Electron使用与学习--(基本使用与菜单操作)

    对于electron是个新手,下面纯属个人理解.如有错误,欢迎指出.   一.安装 如果你本地按照github上的 # Install the `electron` command globally ...

  3. Electron 不完全快速手册

    Electron能干嘛 Vscode 基于Electron开发的,他是用来开发桌面软件的,可以轻易的跨平台 他的前身是atomshell,图标很丑,不用在意,一点也不像vscode也不用在意.   L ...

  4. Electron中Jquery的引入方式

    原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...

  5. Electron的环境配置

    原文地址http://huisky.com/blog/161218121551123 本文介绍了Electron的环境配置,包括Electron下载.nodejs下载安装.NPM+Bower安装配置. ...

  6. Electron安装

    1.安装nodejs和npm 官网下载地址:https://nodejs.org/en/download/ 安装包:下载.msi 安装完成后: nodejs.npm都会安装好,path环境变量也自动设 ...

  7. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  8. electron 入门小白贴

    electron 入门小白贴 electron demo 跑起来! 毕设准备是做个 跨平台的做题的客户端,打算用 electron 来弄. 然而今天折腾了半天才终于吧demo给跑起来了.经历了许多的问 ...

  9. Linux下Electron的Helloworld

    什么是Electron Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromi ...

  10. Electron Angular 开发小记

    一介绍 electron分为主进程和渲染进程,主进程负责和原生交互,控制窗口等. 渲染进程就是普通网页.主进程和渲染进程可以通过ipcMain(主进程使用)及ipcRenderer(渲染进程用)通信 ...

随机推荐

  1. 由软件构造引申的OOP与POP的心得体会

    在大一初学C语言的时候,所解决的问题都是一些轻量级的简单问题,当时写过一个教学管理系统.这个教学管理系统的功能很简单,思想就是“流水线”:按部就班的实现所有流程.要完成整个教学管理系统,实际上就是完成 ...

  2. css布局相关:涉及到常见页面样式难点

    一.display:table用法 Table:display:tableBody:table-row-group;Tr: table-row;Td: table-cell https://www.c ...

  3. kernel list 实践

    list.h /******* 链表实现,来自内核 **************************************************/ /** * container_of - c ...

  4. getline使用问题

    1.输入string string s1; getline(cin,s1); cin>>s1; //注意cin遇到空格会终止,而getline不会 2.关于吞回车问题 输入n后要记得吞回车 ...

  5. office2016专业增强版激活密匙 (shell激活版)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_42642945/article/d ...

  6. TensorFlow从0到1之常量、变量和占位符详解(6)

    最基本的 TensorFlow 提供了一个库来定义和执行对张量的各种数学运算.张量,可理解为一个 n 维矩阵,所有类型的数据,包括标量.矢量和矩阵等都是特殊类型的张量.   TensorFlow 支持 ...

  7. elasticsearch unassigned shards 导致RED解决

    先通过命令查看节点的shard分配整体情况 curl -X GET "ip:9200/_cat/allocation?v" 说明:有16个索引未分片 2.查看未分片的索引 curl ...

  8. Elasticsearch原理入门

    这是一篇拼接贴,我是缝合怪 项目中用到了es,使用方法是挺简单的,封装了基本api以后,把查询条件封装一下传给client执行就可,但是光使用比较肤浅,研究一下原理和本质,更利于以后开发使用 扫盲贴 ...

  9. 面向对象存储框架:Obase快速入门

    在项目中完成对象建模后,可以使用Obase来进行对象的管理(例如对象持久化),本篇教程将创建一个.NET Core控制台应用,来展示Obase的配置和对象的增删改查操作.本篇教程旨在指引简单入门. 本 ...

  10. Jmeter Response Data 乱码问题解决方法

    1. 进入jmeter\apache-jmeter-4.0\bin,打开jmeter.properties 2. 搜索“sampleresult.default.encoding” 设置sampler ...