01

为什么用 JavaScript 来开发桌面应用?

曾经的 JavaScript 脆弱、简陋、甚至有被边缘化的危险,不过 JavaScript 在经过了两次飞跃后(以 V8 为首的 JavaScript 引擎和 Node.js 的问世),不再受人欺负,早已升级为绿博士(复仇者联盟 4 中班纳博士和绿巨人的合体,强大而充满智慧)。

V8 引擎让 JavaScript 的运行速度飞快,Node.js 让 JavaScript 不仅仅能做 Web 前端页面,还能开发后端应用。

尽管有了 Node.js,JavaScript 可以开发服务端应用,但有一类重要的应用它还是无法胜任——桌面应用。目前 Web 应用和移动应用看似成为主流,但如果没有桌面应用,Web 应用和移动应用甚至都不会存在。

所有的 Web 浏览器(IE、Chrome、Firefox、Safari 等)都是桌面应用,如果没有桌面应用,Web 页面根本没地方运行;用于开发移动应用的开发工具(IDE)也是桌面应用。

而且 Windows 的开始菜单和 Mac OS X 的 Docker 中的每一个图标都对应一个桌面应用,可以说,桌面应用无处不在。

如果将 Web 应用和移动应用比作国王,那么桌面应用就是国王头上的那顶王冠,没有了王冠,国王什么都不是,而赐予 JavaScript 制作王冠之神力的正是 Electron。

这是一个基于 V8 引擎和 Node.js 的开发框架,允许用 JavaScript 开发跨平台(Windows、Mac OS X 和 Linux)桌面应用。

02

有哪些著名应用是使用 Electron 开发的

目前有相当多的桌面应用是使用 Electron 开发的,例如,著名的 Visual Studio Code(微软推出的一个跨平台源代码编辑器)就是用 Electron 开发的、蚂蚁小程序(在支付宝中运行的小程序)也是用 Electron 来开发的;

以小米、华为为主的众多手机厂商推出的快应用(类似于微信小程序)的 IDE 也是用 Electron 开发的。

蚂蚁小程序 IDE:

此外,大家熟悉的 Slack、Atom、XMind ZEN、WebTorrent、Hyper 等都是基于 Electron 的应用。

从 Electron 的主要用户来看,很多都是大厂,如蚂蚁金服、小米、华为、GitHub(Electron 就是 GitHub 推出的)、微软等,由于现在 GitHub 被微软收购了,因而目前 Electron 的后台是微软。因此学习 Electron 不用担心以后没市场,毕竟,各大厂都在用 Electron。

03

Electron 开发的好处

用 Electron 来开发有什么好处呢?Electron 本身是基于 Node.js 的,这样就可以利用 Node.js 的现成资源。

而且 Electron 是跨平台的,可以同时开发 Web 应用和桌面应用,无论是 UI,还是代码(JS),大多数资源都可以共享,这也为开发者大大减少了工作量,甚至企业也无需重复投入人力来开发系统。

此外,Web 应用在网络环境不好的情况下,页面加载缓慢,它不仅仅要传递数据,而且要传递大量与 UI 相关的代码(如 CSS、HTML 等),非常耗时。

但桌面应用就不同了,运行时至少 UI 部分不需要从网络上更新,顶多是与服务端交互数据,就算网络不畅通,也可以暂时使用本地的数据。

就算我们不开发这些“高大上”的产品,只开发相对容易的管理系统,在本地运行仍然会大幅度提升用户体验。

最重要的一点,Electron 不仅仅支持 Web API,完成与 Web 应用相同的工作,而且还允许调用很多操作系统底层 API 来访问计算机的硬件设备,甚至可以自己用 C++、Go 来编写本地模块,可以完成很多 Web 应用无法做到的事情。

可能有很多读者以前开发过桌面应用,认为桌面应用也有缺点。比如,桌面应用很难做到实时更新,维护相对于 Web 应用费时费力,不过这个缺点是针对传统桌面应用的,而基于 Electron 的应用没有这个缺点。

Electron 之所以这么多人用,并不仅仅是因为它基于 Web 技术,而且它还能调用很多本地 API,在实现很多功能时与本地应用非常接近。

04

学习 Electron,成为更优秀的开发者

作为一名开发者,学会开发桌面应用,会非常显著地提升自己的核心竞争力,而且 Electron 开发桌面应用使用的是 Web 技术,可以考虑将 Web 应用与桌面应用作为一个应用来开发,这样会大大提升开发效率。

前面提到,国外许多著名应用使用 Electron 来开发,包括常用的 Visual Studio Code。目前 ,Electron 在国内也不断升温,例如支付宝小程序 IDE、快应用 IDE 等都是使用 Electron 开发的。

此外,尽管微信小程序 IDE 不是使用 Electron 开发的,但却是使用了类似的 NW.js 开发的,而 NW.js 的使用方法与 Electron 很像,举一反三即可。

本课程笔者团队也正在使用 Electron 开发一款跨平台的开发工具 OriUnity,可以使用 JavaScript 同时开发桌面应用、Web 应用、移动 App 和小程序,而且可以将客户端与服务端融为一体。

在开发产品的过程中,我们也积累了很多 Electron 的实践经验。因此正好借着达人课的机会,将 Electron 的一些开发经验总结出来,希望对想入门 Electron  的读者有一定的借鉴作用。

Electron 开发入门

原价:49.00

限时特价:35.00

05

课程结构

Electron 功能众多,但这些功能基本上可分为基础知识(开发环境安装、开发步骤、IDE 的选择等)、窗口、菜单、高级 API(数据库、托盘、摄像头、拖拽、剪贴板等)以及发布应用程序,本课程将会结合这些知识点详细讲解如何用 Electron 开发桌面应用。

课程目的是培养大家解决实际问题的能力,每一课的知识点既相互独立、又有联系,比如,在创建托盘时需要用到上下文菜单的知识。

大多数文章(除了配置开发环境和简介外)都配有完整的实现代码,并且在最后还提供了两个实战案例:基于 Electron 的云笔记和数据库管理系统,把离散的知识点结合起来完成非常复杂的桌面应用项目。

本课程分为七大部分,共 29 篇(含开篇词)

第一部分(第 01 ~ 04 课):Electron 基础知识

这部分主要介绍了用 Electron 开发跨平台桌面应用的原因、桌面应用的优势、Electron 应用的基本开发步骤、如何搭建集成开发环境、用 Git 管理 Electron 应用等内容,这一部分是 Electron 学习的开胃菜,大餐请继续往后看。

第二部分(第 05 ~ 09 课):用 Electron 创建窗口

这部分详细介绍了用 Electron 创建各种类型窗口的方式,主要内容包括只针对 Mac OS X 系统的文件展示窗口、打开对话框窗口、保存对话框窗口、显示消息对话框窗口、使用 HTML 5 API 创建子窗口、用 open 方法打开的子窗口交互、在窗口中嵌入 Web 页面等。

第三部分(第 10 ~ 12 课):创建各种类型菜单

菜单是桌面应用程序的重要部分,这一部分详细介绍了在 Electron 中如何创建各种类型的菜单,主要内容包括使用模板创建窗口菜单、如何设置菜单项的角色、菜单项的类型、为菜单添加图标、创建动态菜单、上下文菜单。

第四部分(第 13 ~ 21 课):常用的核心 API

这一部分是本系列课程的核心内容,讲解了 Electron 中常用的核心 API,主要包括创建托盘应用、拖拽操作、使用摄像头、根据操作系统定制样式、用纯 JavaScript API 操作 SQLite 数据库、用 Node.js 模块操作 SQLite 数据库、访问 MySQL 数据库、使用剪贴板、注册全局键、测试等。

第五部分(第 22 ~ 23 课):发布应用程序

由于基于 Electron 的桌面应用需要依赖 Node.js、Electron 以及众多的模块才能运行,这些东西肯定不能让用户自己一个个安装,最好的解决方案就是把这些东西与开发的桌面应用一起打包,然后将一个安装包发放给用户,用户只需要双击安装包就可以搞定,因而学会发布 Electron 桌面应用非常必要。

因此,这部分内容主要介绍了如何用各种工具发布基于 Electron 的应用,主要包括使用 electron-packager 和 electron-builder 创建安装包及制作安装程序(dmg、exe 等)。

第六部分(第 24 ~ 26 课):项目实战

这一部分是本系列课程的画龙点睛之笔,需要把前面五部分介绍的知识点连接起来完成复杂的桌面应用,这里提供了两个完整的案例,一个是云笔记系统,该系统可以将本地的笔记保存到服务端,只是这里的服务端是以太坊,而不是传统的数据库;

第二个项目是基于 Electron 的 MySQL 数据库管理系统,可以做本地管理 MySQL 数据库,而且还可以将数据上传到以太坊进行备份。

第七部分(第 27 ~ 28 课):模块分析

这一部分主要介绍了 Node.js 和 Electron 模块的相关知识,包括使用 JavaScript 开发 Node.js 和 Electron 模块以及使用 C++ 开发 Node.js 和 Electron 的本地模块。

通过这一部分的内容,可以让 C++ 与 Electron 完美融合在一起,让 Electron 拥有无限扩展性。

课程寄语

Node.js 和 Electron 堪称 JavaScript 的左右护法,前者让 JavaScript 可以轻而易举地跨越不同类型应用的界限,后者让 JavaScript 可以进入服务端和桌面应用领域。

有了这两个护法,JavaScript 可以真正成为唯一的全栈开发语言,从 Web 到移动,再到服务端,再到桌面应用,甚至是终端程序,无所不能。

本课程并不是单纯讲解 Electron 的知识,而是想要教会大家开发 Electron 桌面应用的思想,提高动手能力,今后无论遇到多复杂的桌面应用需求都能得心应手,轻松应对。

最后,预祝大家学习愉快,Good Luck!

题图:来自电影《无双》

前端开发人员的桌面应用神器 Electron相关推荐

  1. java web打包神器_前端开发人员的桌面应用神器 Electron

    原标题:前端开发人员的桌面应用神器 Electron 01 为什么用 Java 来开发桌面应用? 曾经的 Java 脆弱.简陋.甚至有被边缘化的危险,不过 Java 在经过了两次飞跃后(以 V8 为首 ...

  2. 前端判断是否安装桌面应用_前端开发人员的桌面应用神器 Electron

    01 为什么用 JavaScript 来开发桌面应用? 曾经的 JavaScript 脆弱.简陋.甚至有被边缘化的危险,不过 JavaScript 在经过了两次飞跃后(以 V8 为首的 JavaScr ...

  3. Web前端开发人员和设计师必读文章推荐【系列七】

    这篇文章主要收录了十二月份发布在梦想天空的优秀文章,特别推荐给Web开发人员和设计师阅读.梦天空博客关注前端开发技术,展示最新 HTML5 和 CSS3 技术应用,分享实用的 jQuery 插件,推荐 ...

  4. 前端开发优秀简历_这就是如今成为优秀的前端开发人员所需要的

    前端开发优秀简历 重点(Top highlight) Front-end developers are currently highly in demand and that's for good r ...

  5. 2018 年,WEB前端开发人员应该关注哪些新晋技术?

    随着近年来前端的一波又一波技术浪潮,前端早已经告别了切图的时代,迎来的是规模化,工程化的大路.但是在如此多变的技术浪潮下,我们如何辨识清楚它的发展方向,如何让我们的技术得到一次质的飞跃? 首先我们来回 ...

  6. Web前端开发人员和设计师必读文章【系列十一】

    时光荏苒,转眼已是深秋,<Web 前端开发人员和设计师必读文章推荐[系列十一]>姗姗来迟.梦天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTM ...

  7. 给 Web 前端开发人员推荐20款 CSS 编辑器

    CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...

  8. 最好的20款 CSS 编辑器分享前端开发人员

    CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...

  9. 《初级前端开发人员经常容易忽视几个细节问题汇总》

    <初级前端开发人员经常容易忽视几个细节问题汇总> 1.使用 变量.toString()的时候记得对变量进行判空 2.使用 字符串.indexOf()的时候记得对字符串变量进行判断是否为nu ...

最新文章

  1. 关系数据库非关系数据库_如何与关系数据库最佳配合
  2. 量子计算何时具有真正的商业价值?
  3. fatal error C1021: 无效的预处理器命令“warning”
  4. CentOS查看CPU信息、位数、多核信息
  5. garch预测 python_【2019年度合辑】手把手教你用Python做股票量化分析
  6. 【机器学习】因子分解机(FM) 原理及在召回中的应用(python实现)
  7. ASP——限制表单提交时间期限简单示例
  8. C# 关闭进程的时候总是捕捉到System.Threading.ThreadAbortException: 正在中止线程
  9. 终于可以摆脱 Pipenv 这坑货了
  10. java简单文本编译器_java -简易文本编辑器
  11. linux安装程序过程,linux 应用程序安装过程
  12. 基于极限学习机的自编码器(ELM-AE)
  13. Mysql-mmm配置全自动切换主从关系和读写分离
  14. TCP/IP 原理 -- ICMP:因特网控制报文协议
  15. 关于get方式提交中文乱码问题的解决方式
  16. 8位可控加减法电路设计
  17. rm ,rm -rf , rm -f 以及rm 命令的其他参数命令
  18. Uninstall tool 3.6.0 授权版
  19. 手机模型真机图片的制作——UI出图
  20. 《人类简史》笔记二——一场永远的革命

热门文章

  1. centos 监视文件变动脚本
  2. 【Hexo】如何才能在百度搜索到你的博客?SEO优化了解一下(上)
  3. 谷歌因安卓涉嫌垄断被罚51亿美元,上诉称:没看到我们在和苹果竞争?
  4. 两年经验的阿里、头条面经(已拿offer),大厂面试套路屡试不爽
  5. iOS iphone5屏幕适配 autosizing
  6. 达特茅斯计算机专业师资力量如何,达特茅斯学院(Dartmouth College)计算机科学Computer Science专业排名第126-150位(2021年THE世界大学商科排名)...
  7. 计算机网络自顶向下方法 第三章 3.5 面向连接的运输:TCP
  8. Android手机fc模拟器,安卓fc模拟器
  9. java中的数据结构——树
  10. 大白菜自交衰退与基因组甲基化关系研究