Web developer 初学 Electron 的一些疑惑

[ne6rd]

各位 V 友好。一直在做 Web 开发，但是始终想尝试做一点桌面端的应用。Web 端比较熟的是 Spring+Angular。目前了解下来感觉 Electron 最适合自己。 昨天在本地跑了下最简单的那个例子，产生不少疑问，希望占用大家一点时间来解答：

1. 桌面端需要分前后端（类似 Spring REST API+ Angular MVC ）吗，如果分的话也是用 API 交互？如果不分的话，就是一套 MVC 分层来搞定嘛？
2. 似乎很多小的 Electron 应用只有一个窗口标题栏，下面就是网页窗口了，菜单导航啥的都是 HTML 绘制。但是像 Visual Studio Code 有很多系统原生的菜单交互。两种实践主要区别有哪些呢？
3. 想用 Web 端的 angular+material 来开发，但是符合桌面端的 UI 控件好像不太全。大家有什么组合推荐吗？
4. 桌面端轻量级的数据库该如何选择呢？完全不了解。
5. 项目的路径结构有好的实践规范嘛？
6. 官方文档感觉有点凌乱，没有一步步由浅入深地学习的感觉。有没有比较好的教程推荐？ 谢谢!

PS 1
感谢大家的回复，这两天自己又翻了一些资料。总结一下目前的进展

1. main 进程和 render 进程之间就类似前后端的关系？但是似乎也可以把 main 架空，在 render 端用 remote （？）来调用
4. 数据持久化似乎可以选择 sqllite，leveldb，pouchdb （后端也是 leveldb ？）。
5. github 上 star 比较多的一个种子项目 https://github.com/maximegris/angular-electron，打算用这个慢慢上手做

[whypool]

和原生交互是用 node 调用的

[huiyifyj]

做 electron 开发应该要先学 js 和 node （以及他的 API ）的吧。
还有 electron 开发的桌面端并没有那么轻量。

[flowfire]

https://electronjs.org/docs/api/menu
https://electronjs.org/docs/api/menu-item
文档是个好东西

[Hanggi]

electron 生成应用的时候特别烧，而且只是做了一个很简单的测试应用，编译出来的文件很大很大。不知道是不是用 Mac 的原因。楼主如果也遇到类似问题，得到解决希望分享一下。谢谢！

[loginv2]

@Hanggi 不是 通病

[hronro]

1. 看情况。本身 Electron 就分 main 和 renderer，具体要不要分成两部分要看你具体的项目。
2. 自定义的菜单栏可以做的很好看，可以满足更多变态的需求，不过 accessibility 的细节需要你完全自己去实现，这个会非常非常麻烦。而如果系统的菜单栏的话，操作系统已经帮你处理好这些东西了。
4. sqllite 了解一下

[Hanggi]

@loginv2 没有什么解决方案吗？是不是 nw 会好点？

[loading]

要同时打包 node 和 webkit(图形界面)，要体积小是很难了。
就算把 node 和 webkit 重新并起来，体积也不小。

[gnaggnoyil]

@Hanggi node 和 webkit 本身体积就不小,换 nw.js 也不会缓解多少.上了 electron 的贼船还想不付出相应的代价,哪里有这种好事.想减小体积就上正统的 GUI 开发工具.

[Akarin]

web 模拟桌面端 UI 的话，可以看一下这个 [demo]( http://reactdesktop.js.org/demo/)
另外， 觉得 Electron 体积大的话，Electron 的作者有另外一个[项目]( https://github.com/yue/muban)，还在 V 站发了[帖子]( https://www.v2ex.com/t/432968)

[duan602728596]

1、Electron 可以运行 js 和 node，所以可以前后端代码混写，刚开始可能会不习惯
2、区别就是你的应用使用起来给人觉得更像是原生应用了，而不是浏览网站的感觉
3、ui 控件基本上都是适合 web 的，适合桌面端的还真见过，不过你可以魔改下样式
4、不知道你要存什么，如果是存一些简单的数据的话，IndexedDB 了解一下
5、没有...
6、我没用过 Electron ……，我只用过 nwjs，上面的都是我编的

[Rocka]

1. 这个要看个人喜好以及具体项目要求了，可以在 BrowserWindow 里面写 JS 操作一切，也可以用类似传统前后端分离的方式然后 API 交互，这时候就需要一个 Express 或者其他的 Web 框架。也可以用 Electron 里面的 IPC，不需要占用端口，而且效率要比本地 HTTP API 高一些。
2. 自绘控件当然要随心所欲一些，但你的控件只能局限于窗口内部，没法像原生菜单那样可以扩展到窗口外面，而且原生菜单与系统集成好，观感与操作手感比较统一。
3. Ant.Design for Angular https://github.com/NG-ZORRO/ng-zorro-antd 其实我没用过，真的，我连 Angular 都没用过（捂脸）
4. 一般都会选 SQLite 吧，然后在 Electron 的 main 进程进行操作 然后这个我也没用过 ... 都是直接存成 JSON 文件（捂脸）
5. 如果是按照前后端分离的方式，大概

assets/ # 静态资源文件
script/ # Webpack 配置文件，编译打包等脚本
src/ # 代码
main/ # main 进程
renderer/ # renderer 进程
dist/ # 打包出来的东西

6. 上面都是我编的，看看就行 ... 先上手一把梭，不会就查文档 ...

[plqws]

项目目录结构啊、构建工具啊，可以试试： https://github.com/maximegris/angular-electron

不管是 react 还是 vue 也都有对应的一键项目模板

[Tompes]

可以这么理解 main 是 node 也就是后台.
其他的是都是前端和浏览器里一样 通过 IPC 传递数据.
当然想 http 也行，不过比较麻烦，参见: https://github.com/frankhale/electron-with-express

[hoyixi]

@Hanggi #4

本质是里面裹了个浏览器 Chromium 内核，你说体积大不大，哈哈