用js开发桌面软件Electron+Typescript+React

Electron(原名为Atom Shell)是GitHub开发的一个开源框架。它允许使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发,著名项目包括GitHub的Atom和微软的Visual Studio Code

本文介绍使用Electron+Typescript+React的起手式。

传送门:https://github.com/wbjqiqi/electron-react-typescript-boilerplate.git

主要内容

  • 为什么使用Electron
  • 为什么使用Typescript
  • 为什么使用React
  • 关于起手式

为什么使用Electron

随着nodejs的出现,js能干的事情开始大面积增加。而且因为js学习成本低、开发周期快,可以节约大量成本,逐渐成为大家喜爱的一种语言。
在开发桌面端软件依然如此。而用js开发桌面软件最常用的两个框架就是Electron和NW.

关于两者技术原理的比较网上有很多,我就不冗述了。
直接给结果


来源:NW.js vs Electron

截止19.7.30。NW在github上的star是35666,而Electron是75589.(NW产生于2011,Electron产生于2014)
咳咳,群众的眼睛是雪亮的。

为什么使用Typescript

Typescript是javascript的超集(js的语法ts都支持)。js一直以来的诟病就是结构化不够强,弱类型。

很多人要说正是因为弱类型才让js学习成本低,开发迅速。

但是这种快速是没有保障的,没有类型三五百行代码还好,代码数量一旦上去了,让我们对已有代码进行修改简直是一种煎熬,甚至想重新实现。
所以如果不是开发一次性项目,建议还是为自己长远考虑。

学习Typescript确实是需要一些成本的,但是如今的js肩负的责任不仅仅是调一下页面样式。nodejs写服务端,ssr服务端渲染,mongodb写数据库,electron写桌面...我们肩负着更多的责任自然要自己更加的成熟。Typescript必然是一个趋势。

有了Typescript,再运用一定的设计模式(可以参阅我之前写的Typescript+设计模式),我们可以构建出更加强健可维护的系统。

为什么使用React

React也好,Vue也好。Electron的渲染进程使用这样的全家桶实现可以省不少事。

  • 功能健全,开发迅速
  • 生态好,迅速集成一些功能模块
  • 用webpack压缩打包,安全性好

而且全家桶的社区比较活跃,可以很方便的处理我们遇到的任何问题。

具体使用React还是Vue这个就比较随意了,笔者擅长Vue,所以在此用一下React拓展一下技术栈。

关于起手式

本起手式Fork于# iRath96的同名项目,但是兄弟不知道什么原因很长时间不更新了。我拿到手后更新了Electron,Typescript等基础包的版本,修复了一些bug,增加了prettier,electron-updater等常用包。后续使用过程中如遇到什么问题也会持续更新。

之后我会持续分享一些使用Electron构建桌面端应用的常见问题,谢谢关注。

推荐阅读更多精彩内容