作者|张旋

来源 | 慕课网

01

第一次接触Electron

我第一次接触 Electron 是大约一年前。 当时想做一个原生的桌面应用，供别人下班后使用。 我想做的是一个简单的网易云音乐下载器。 作为前端开发工程师，我们一般与原生桌面应用是绝缘的，但 Electron 的出现打破了这个障碍。 正如他们的官方网站所说，使用 Javascript、HTML 和 CSS 构建跨平台桌面应用程序。

许多团队已经使用它开发了许多优秀的桌面应用程序，其中包括一些非常著名的公司的产品。 Skype是很多人都使用过的即时通讯产品。 迅雷是国内很多人都用的下载软件，大家都在用的编辑器Visual Studio Code，还有微信客户端我就不详细说了。 通讯软件Slack也是海外办事处的标配。 最后，还有Electron的老牌和出身，github开发的Atom编辑器。 这说明Electron已经被证明能够做出优秀的应用。

在使用这个工具完成了自己的小应用之后，我逐渐爱上了Electron。 可以带来以前点击原生应用无法获得的成就感。

02

为什么要学习 Electron 并避免听从别人的说法

当然，我觉得在学习某种新技术或者框架的时候，最忌讳的就是跟着别人说的走，甚至不明白这个东西是什么就上了海盗船。 最终，得不偿失。

我们学习 Electron 仅仅是为了它开发原生应用程序的能力吗？ 脑子里记很多新的API会不会提高我们的技术实力和编程思维？ 其实我最看重的是Electron本身就像一个魔盒。 它基于开源浏览器 Chromium 和 Node.js。 我们最常用的Google Chrome浏览器也是基于这个开源软件的。 基本上整个平台就是一个加强版的chromium浏览器，它还为我们提供了很多封装好的API模块，可以和系统的一些原生API进行互操作，做很多其他浏览器做不到的事情。

这时候我就在想Electron作为一个神奇的盒子，可以用来开发桌面应用程序，把前端开发的各个方面都放到这个盒子里，让它成为一个完整的盒子。

03

使用 Electron 开发桌面应用程序 Markdown

那么应用是什么？ 从我自己的生活需求出发，我在写技术文档的时候，大部分都是Markdown格式的。 没有一款我特别喜欢的 Markdown 编辑和管理软件。

所以我想为什么不做一个这样的原生应用程序呢？ 就这样，我做出来的是一个Markdown管理和编辑软件，并且在这个过程中我获得了很多经验和乐趣。 同时如果它还能够完成云端同步功能那就最好了，这样我就可以在不同的环境下无缝地使用它了。 连接并工作。

那么我的实践课程就是在这样的环境下诞生的，那么我在Electron的魔盒里给大家放了哪些内容呢？

1 React，既然Electron为我们提供了浏览器环境，那么React就是第一个提到DOM的。 因为很多人说它是基于View层的，所以它也是我近年来最常用、最喜欢的框架。 那么这次使用Electron作为视图层，自然就顺利了。 还请大家关注React Hook背后特别引人注目的Hook。 Hook 是 React 16.8 的新特性。 Hook 是 React 团队多年来酝酿的最大改变。 旨在打破功能组件的缺点和障碍，整合所有组件。 它们都像函数过渡一样，最终达到一个统一的局面好玩的桌面软件，让React拥抱函数。 因此，这个特性可以说是每个React工程师必须学习的东西，也是未来的发展方向。 因此，本课程中所有React代码均采用Hook编写方式。

2 Electron，Electron可以帮助我们为桌面应用程序提供很多必备的方法和接口。 如果您学习了它们，您将点亮新的技能树并为您的朋友开发很酷的桌面应用程序。

3 Node.js Electron天然能够支持Nodejs开发环境，所以我们正好借此机会夯实nodejs的基础好玩的桌面软件，学习如何使用nodejs的一些原生模块。

4 七牛云对象存储SDK 文件云同步自然需要使用第三方提供商。 这里我们使用七牛云对象存储。 在掌握其SDK使用方法的同时，我们还可以进一步了解HTTP协议的基础知识。

整个应用的架构如下图所示：

这些内容应该涵盖了前端开发工程师需要掌握的各个方面。 我认为每个人的兴趣和主观能动性在学习过程中都是非常重要的，所以一个有趣的项目在一定程度上也能在这两方面取得加成。 Markdown 云编辑器肯定比待办事项列表更有趣。 因此，我得出了本文标题的结论：Electron是一个很好玩的玩具。 它是一个可以为你学习各种前端知识架起一座桥梁的媒介。

好了，话不多说，如果你也想和我一起开发你职业生涯的第一个桌面原生应用，不妨学习《Electron+React+七牛云实用跨平台桌面应用》这门实践课程，探索其中的魔力电子魔术盒。