跨越平台桌面应用开发框架electron使用的心路历程

---

前言

    首先声明一下这篇文章不谈代码，只谈心。
    从接触Electron到真正去做出一个桌面应用，再到今天写下这边文章，大概花了三个月时间吧，到不是因为有多难，主要是这纯碎是个人兴趣，自己是在业余时间干的，公司里面目前还没有推行,这段时间开发任务又比较重，所以断断续续用了三月吧。今天写下这篇文章只是记录一下这个过程，也是和初学者分享一下。相信大多数人都是知道Electron最初是起源于Atom,然后从Atom剥离开来最终形成了现在的Electron，目前使用Electron來开发的桌面用非常多，我们最熟悉的比如Atom,VScode…,这类IDE，除此之外还有一些开发的辅助工具也借助于electron，比如iview的官方脚手架用来创建vue项目，腾讯的weFlow工具，等等。这些辅助工具将平时的一些命令行操作集成到了图像化界面操作中来,使用起来更加方便简洁。总的来说，electron对于我们前端来说用到的知识没什么特别的，但是做出来的东西感觉挺新鲜的，毕竟一下从做web页面，升华到做桌面应用了，内心还是有点小激动的。

目录：

1. 我是什么时候开始接触electron的
2. 为什么作为一个前端要花时间在Electron这种桌面应用开发框架上去
3. 为什么越来越对她越来越有感觉了
4. 为什么一定要做成桌面应用，web网页不是也能干他的活吗
5. 使用eletron需要储备哪些知识
6. 学习electron的过程中需要注意什么
7. electron的弊端

我是什么时候开始接触electron的

    最先接触的是Weex这一类的垮终端移动APP开发框架，后来开始使用VScode编辑器，才听说Electron有多么的强大，然后跑去Electron的官网一看，首页那句醒目的标题“使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用”瞬间吸引到了我，然后就开始干，从最开始的官方demo到electron-vue再到自己开始做了一个前端开发的辅助工具应用，一步步趟过来，有点喜悦，也有点头疼，虽然已经有类似Atom,VScode这样的产品了，但是发现在开发过程中遇到的问题，度娘上还是找不到几篇真正能解决问题的帖子，最后还是自己去踩，但是比起weex来还是好多了，不是黑weex，主要是他的生态建设太差了，新入门的需要花费大量的时间去学习，并且需要在实际应用中不断去发现问题，然后解决问题，关键是解决问题的过程中很少能获得社区的帮助。言归正传，我们还是回到electron的话题上来。

为什么作为一个前端要花时间在Electron这种桌面应用开发框架上去

    作为一个web前端开发人员，去弄桌面应用是不是有点不误正业。这个其实不然，首先electron的精华就是”使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用”，这就是赤裸裸的在勾引我们前端开发人员，臣妾就是为你服务的。其次在node出来之后，前端的定位其实开始变得模糊起来了，前端开发人员不再仅仅局限于UI和页面,UE和业务逻辑的实现了，开始越来越多的接触后端的知识，‘大前端’这个名词也开始经常在各种公开场合见到，就连ES也开始和java这对兄弟也开始相认了（越来越像了），所以多接触一点也算是与时俱进吧。
    像Electron这种结合了Node，Chromium,html,css,js的框架，对于有志成为‘大前端’的同学来说，是比较有吸引力的，它是基于node的，对于熟悉node生态圈的人来说，开发起来就更加如鱼得水了。这里可能唯一比较陌生的可能就是Chromium了，我们可以拿面向对象的思想来看待它，electron已经帮我们封装了对于Chromium的操作，so.我们只需要了解electron的API就行了，刚开始接触没有必要去纠结自己对于它有多了解，当到了用electorn开发桌面应用如鱼得水的时候，我们有时间可以去了解一下他。所以这些所谓的陌生并不会成为我们学习和使用electorn 阻碍作为一个程序员，就是要勇于去接触新的东西，这样平时枯燥的编码生活才会多一点点色彩。
    所以，作为前端完全可以大胆去尝试使用electron来开发桌面应用，技多不压身，在将来的某些时候或许可以为你提供一种全新的解决方案。

为什么越来越对她越来越有感觉了

1. 他让我摆脱了不同浏览器之间的差异和版本的限制，由于electron是基于Chromium的（Chromium是chrome的开发者版本），他完全遵循W3C的标准，对ES,CSS,BOM，DOM的最新规范都有很好的支持，所以我们在写代码的时候，什么ES6,7,8,DOM0,2,3都大胆的用起来，爽歪歪。
2. 基于Node,生态成熟，有足够丰富的第三方包来支持我们的开发。没必要自己再绞尽脑汁的去想某个功能的实现，别人写的npm包早已帮我们实现，这就是”拿来主义”的好处。
3. 可以开发跨平台的桌面应用，就像weex宣传的那样“write once,run everyWhere”,只需要写一份代码，打包出来的应用可以在windows,linux，mac OS上面运行。当然这是最理想的情况，无论是RN，weex还是electron,要做到多端共用，还是需要在代码中做一定的适配的，大概有百分之八十是共用的吧，剩下的百分之二十还是需要兼容一下。

为什么一定要做成桌面应用，web网页不是也能干他的活吗

    在最开始的时候我也有这样的疑问,用web网页来实现不是更好吗，只要有浏览器就可以访问，而且只要终端上面有浏览器就能访问，这样还省去了应用的安装步骤多好啊。在接触久了之后发现，网页能干的他能干，而且干的更好，web不能干的，他也能干。比如：
1.他可以摆脱浏览器的沙盒机制，可以访问操作系统层面的东西。我们在网页上面只能借助于后台服务去干这种事，然后通过http告诉前端页面，如果要处理本地文件，还得将文件传到服务器上去，让服务器处理。
2.更好的用户体验，不管我们是做成B/S的web还是做成客户端的形式，最终的目的其实是在实现功能需求的同时还是最求更好的用户体验，在用户体验上桌面应用无疑更上一层。就像你webApp和原生APP比较，原生无疑还是体验更好。

既然electron就可以做桌面应用，那是不是就没有C#和C++什么事了

    在electron之前，桌面应用基本上是靠C#和QT来做。那为什么不用他们来做，非得整个electron呢。

1. 效率，就我个人的使用经验来看，用electron来开发相同需求的桌面应用，使用electron来开发效率明显比其他的要提高很多，而且做出来的桌面效果更佳。
2. C#的开发者现在基本上在各个公司都是稀有物种了，现在都跑去开发移动端应用去了，PC端的桌面应用感觉没什么油水了，能用web开发的就用web了，这样自然开发的人就少了，开发人员少了如果还用他去开发，这样后期维护起来会比较困难。
3. 除了C#不是还有QT吗，这个我没有写过，但是我们组老大就是用QT框架来桌面应用的，但是当他看见electron的时候，感慨还是这个写起来方便。
4. 当然java也有类似Swing之类的桌面UI组件，但是效果比较一般，也能做比较酷的效果但是比较耗时。
   当然这并不是说electron 就可以替代C#和QT，每总技术都有适合他的应用场景，在做之前我们在技术选型的时候，需要充分的考虑他们的利与弊，后面我会说说我在使用electron使用中遇见的弊端。

使用eletron需要储备哪些知识

1. 首先需要熟练掌握前端的基础知识html,css，js，为什么要强调熟练，因为作为前端，你连这都没掌握，那我还是建议好好学习一下前端基础知识吧，等基础打牢了再出来浪。
2. 有一定的node基础，也就是对nodejs有一定了解，知道他是什么，用来干什么的，怎么环境搭建，npm包的使用，我是建议系统的学一下nodejs,看看官方文档，然后Express或者Koa这种web服务框架看看，自己搭建一个web服务玩玩，现在流行大前端，走出去不知道nodejs，所实话有点不好意思。
3. 在具备了上面两门绝技之后，就可以跟着官方demo,把electron的demo拉下来根据步骤，将代码跑起来，看看electron做的桌面应用到底长什么样子，感受一下。
4. 在demo跑起来后然后再根据demo的结构看看里面使到的API，这里我不建议一开始就去撸官方的API文档，这样你可能很快就放弃了，一看，呀这么多API那记得住啊，然后就在心里开始打退堂鼓了。一步一步来，用到什么，然后去看什么，这里我后面会将我从搭建环境到最后制作打包出APP的心路历程分享出来，有兴趣的可以留意一下，下个月吧。

学习electron的过程中需要注意什么

1. 首先不要急功冒进，一来就要干点什么大事，先按照文档，将demo跑起来，看看怎么搭建开发环境，怎么打包成一个可执行程序，这里打包出来的执行程序可能有点难看，但是不要在意，先将就用着，我会在后面的笔记整理中提到如何打包成我们平时看到那样的安装程序。
2. 建议现在网上找一些鼻尖简单的demo看看，然要一上来就撸官方API文档，这样太枯燥了，而且好多API你一开始也用不上，看看简单的demo，将基本的API掌握，再去完善其他。
3. 需要分清楚主进程和渲染进程，分清楚他们的职能，这样我们在写代码的时候才不会混淆，代码的层次结构才能分的领清。
4. 有node经验的小伙伴不要先入为主将主进程当着nodejs中的服务端了，我开始就这么干的，一看到node就激动了，这样你会遇见很多坑的，而且可能还爬不出来。

electron的弊端

    前面都是说electron是多么多么方便快捷，现在提一下，我在使用中遇到的弊端

1. 窗口创建背景的问题，在html没有被加载完成前，窗口只用用背景色去填充，不能使用个性化的背景图案，这会造成首次加载的体验不好。
2. 打包出来的APP太大，就是最简单的应用打包出来都有40多MB。

总结
    就一句话，前端现在真是牛逼大了，老本行web就不说了，用nodejs可以搭建后台服务，用RN,weex可以做移动端APP，现在electron连PC桌面端应用也不放过了，现在谁还敢说我们前端就是写写页面，写写样式的。吼！吼！