Electron，从玩玩具的心态，打造越来越优秀的桌面客户端产品以后我会用系列文章一步步介绍给感兴趣的朋友，我是如何从玩玩具的心态开始接触Electron的玩具开发客户端产品，随着业务和功能复杂度的增加，最终优化客户端。这是本系列的第一篇文章。我也在边做边学边反思。欢迎交流，呵呵，大家别担心我会“阉”这一系列文章，因为我家老大拿着40米长剑盯着我看，我时不时发一下。下一个（最长间隔不得超过3周）。//以下为单口相声。我会从第一个角度说说我是如何接触到Electron，直到我想用它来开发应用的。如果你不喜欢它，你可以跳过Electron。它的昵称是AtomShell，Atom是Github发布的一款“现代”文本编辑器，很多人因为看到“Atom的华丽编辑器截图”而掉坑，而因为“Atom无法hold住一个流畅度”而弃坑三分钟P”，仰天长叹“封面真骗人”，我也是其中之一，这是我第一次接触Electron，但那时我还不认识她。后来听说微软有个编辑器叫“VSCode”，真的很好用，于是又用了一下。它有着同样华丽的“封面”，却极其好用流畅。各大宗派的战争只是个人经历的记录），那是我第二次接触Electron，到现在还不认识她。后来在一些博客和专栏里看到了很多Electron相关的文章。我大致知道这是一个新的允许web前端开发跨平台桌面客户端的技术框架，但我并没有深究，因为字面意思是“利用Web前端技术开发桌面客户端产品””想明白了，脑子里冒出六个字，“大叔，我们不约。”而3个月前，我的老板“NicholasFei”要我开发一个Windows客户端的前端，跟我说技术框架用的是Electron，问我要不要试试。我第一次确定了这个词的读音和意思，意思是“电子”，然后我就去看她的前世今生。它被称为AtomShell“原子壳”，是在Github开发Atom编辑器时开发的。技术架构合理。“atom”不就是由“electron”和“nucleus”组成的吗，说不定哪天Github会出一个“Nucleus”官网发现，体验过很多基于Electron的大牌产品，只是当时不知道电子在它后面。每天和我接触最频繁的就是《VSCode》，也是基于Electron的。我在公司windows电脑上使用的GitGUI“GitKraken”，我在Mac上使用的邮件客户端Nylas等都是基于Electron开发的。于是，我和老板说，“我想尝试用Electron开发客户端产品。”当时真的觉得这东西很好玩很漂亮（可以用web前端写界面，一般比较漂亮）。此外，Electron项目本身也是怀着玩心打造的。本着把Electron当玩具的态度浏览了它的文档，看了一些Electron的应用demo，然后结合我们客户端应用的需求，看看这些demo中能学到什么思路。慢慢地，我将Electron的拼写……熟练地学会了。//单口相声结束那么，在本篇以及后续的一系列文章中，我将记录下我在Electron中的学习和应用心得，而在这第一篇文章中，我将“粗俗”地讲述如何“快速入门Electron”，但不是HelloWorld。我的“快速入门”将依次介绍以下内容：Electron为何如此迷人（尤其是前端）Electron入门的阶段以及相应要做的事情如何阅读和学习Electron的文档如何选择一些ElectronDemo源码学习实践，本系列文章会涉及到哪些功能或话题（吊胃口）本文就不具体说如何启动一个Demo来“快速入门”了，可以上官网找网站，也有很多文章写过，我只是根据自己的经验给出一些有限的建议，给感兴趣的朋友一个合理的入门参考。很多时候，我们在练习完“Helloworld”后，却不知如何是好，于是热情只能冻结在“Helloworld”阶段，下面的玩笑并不是想要的结果。1.是什么让Electron如此迷人？可能主要是因为猿的亚种——前端开发——有了新的出路。还没有找到工作的前端开发人员有了新的岗位可以选择，已经在职的前端开发人员也有了新的一年的KPI/OKR，创业公司可以开发多个跨平台桌面只有一个前端的客户......（开玩笑）。1.您可以使用Web前端技术开发跨平台的桌面客户端。这是Electron最迷人的部分。根本原因在于它是建立在“Chromium”和“Node”之上的。一个负责界面，一个负责背后的逻辑，就是典型的“你负责颜值，我负责赚钱养家”。Electron可以开发跨平台桌面应用程序的原因是可以理解的。对于前端开发，“别和我说C++、Java，我就是走江湖就用JS，遇到需求就干。”前端开发可以用自己熟悉的方式编写应用界面，逻辑部分还是JS。如果你精通Node后端，那么后端也可以涉足。有种一夜春风来的感觉。”不过，不同的系统还是有很大的区别的。“同一套代码可以编译多个跨平台客户端”，可以这么说，但是你得做一些额外的处理，因为系统的差异化，让不同系统下的打包应用能够正常工作。这可能是一些“if-else”的成本，但是相对于80%的代码可以完全复用来说，这些成本已经很小的。总而言之，Web前端开发人员可以以极低的成本开始使用Electron。与以往开发多平台客户端的成本相比，使用Electron开发多平台客户端的成本极低。2.Node生态给你很大的帮助。因为Electron是基于Node的，这意味着Node生态中的所有模块也可以在Electron中使用，这样就减少了很多造轮子的时间。你要写一些逻辑，首先会考虑有没有成熟的模块可以引入，而不是自己闭门造车，会耗费大量的时间和精力，还可能在路上翻车。Electron在两个方面受益于Node。一是像现代web项目一样，在开发建设过程中可以引入很多成熟的包来打造适合自己项目的开发工作流程。另外就是它的应用本身也可以依赖所需要的包来完成自己的功能，我们会在以后的文章中详细展开。3.为什么网站需要客户来做这件事？由于Electron是用web技术来写客户端的，似乎Electron要做的事情都可以搬到网站上来。为什么要移到客户端？下面从3个角度进行解答：用户角度：客户端是一个独立的软件，综合体验普遍高于网站，尤其是涉及“工具”的应用。此外，特定的用户群体会有相似的使用习惯。从发布者的角度来看：client是另一种产品形态，是产品的一种分发方式和入口。客户端可以实现很多本地应用触及用户的独特需求，也可以提供更可靠的服务开发视角：最后...不需要考虑浏览器兼容性，Chromium也足够开发使用一些高级的CSS或者JS特性。我们现在没有引入webpack和babel的打算，因为现在好像已经够用了。克制就是爱。除了写的爽，对于开发来说，终于跳出了浏览器沙箱，可以在Electron中自己控制“浏览器”，莫名的开心本节的这些问题的答案是，使用Electron开发客户端，用户体验好，开发麻烦小，功能更强大，老板掉头发少。4.在Electron和NW.js之间，为什么选择前者？NW.js我用的不多，但当时没时间深入体验，所以选择了生态的。Electron相关的社区生态非常好，后续的发展过程也证明了这一点。遇到的问题基本上都可以通过Stackoverflow找到。如果你找不到他们，你可以打开一个新的问题或者去Github提出一个问题。你可以得到一个快速的解决方案，除非是一些已知的问题或者一些可以通过阅读文档解决的问题，这样的问题可能会被忽略。所以，生态更好，我选择了Electron。2。Electron入门有哪些阶段？本节给出了以笔者目前有限的能力学习和使用Electron可能需要经历的几个阶段。您可以搜索其中提到的基本内容。有很多文章解释它，比如什么是主进程，它是什么？就是渲染过程，后面会慢慢写一些重要的实践，比如开发、打包、构建和发布的工作流程，自动更新升级的实现等等。三、如何阅读和学习Electron的文档。阅读文档，这个事情其实见仁见智，如果你阅读文档有自己的三招，可以忽略这部分，否则建议阅读一些阅读和检查Electron文档的建议。我曾经像“行尸走肉”一样阅读Electron的文档，然后发现这是极其低效的，所以算是一个教训。1.看文档需要结合一些博文或者别人写的代码，看看文档中有哪些不懂的地方。很多开发者可能已经在自己的博客中进行了说明，所以如果在阅读文档后遇到不明白的地方，可以搜索一些文章一起阅读，这样就可以理解了，尤其是那些必须要了解的基本概念被理解，这是非常重要的。甚至，你可能需要组合一些代码才能看到它。2.第一次浏览是了解基本概念，看Electron文档的组织结构。第一次浏览，快一下午，慢2天，自己查的结果是解决以下3个问题，你能表达清楚就够了：不懂Electron前端开发的人能清楚的解释什么是“主进程”，什么是“渲染进程”，各自负责什么，如何沟通Electron文档的组织结构能清晰的浮现在脑海（特别是API文档部分，分为main/rendering流程和模块化的API组织）3.第二遍主要看每个API模块大致负责什么在第一遍的基础上，阅读API文档第二次了，心里基本有了一定的框架（不要小看第一遍，这会大大提高你第二遍的效率，也会提高，以后会检查文档的效率)，此时阅读文档的目的是让每个模块在脑海中都有一个印象。这个印象包括，这个模块在什么类型的进程中可用，这个模块负责什么功能。只是有印象。由于每个应用程序不同，模块的重要性顺序也可能不同。我只给出我的建议。您可能需要仔细查看一些模块。“好好看看”意味着这些模块可能很重要是的，你要仔细看：只能在主进程中使用：app：控制你整个Electron应用的生命周期BrowserWindow：创建并控制应用程序的窗口ipcMain：在主进程中用于与渲染进程通信webContents：在您的窗口中渲染和控制网页内容（因为在Electron中，您使用的是网页界面）可以在渲染进程中使用：ipcRenderer:在渲染进程中使用，远程与主进程通信:方便在渲染进程中可以直接调用主进程的方法
