V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ne6rd
V2EX  ›  Node.js

Web developer 初学 Electron 的一些疑惑

  •  
  •   ne6rd · 2018-04-05 13:37:06 +08:00 · 9100 次点击
    这是一个创建于 2184 天前的主题,其中的信息可能已经有所发展或是发生改变。

    各位 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. 官方文档感觉有点凌乱,没有一步步由浅入深地学习的感觉。有没有比较好的教程推荐? 谢谢!
    第 1 条附言  ·  2018-04-06 12:53:15 +08:00
    PS 1
    感谢大家的回复,这两天自己又翻了一些资料。总结一下目前的进展

    1. main 进程和 render 进程之间就类似前后端的关系?但是似乎也可以把 main 架空,在 render 端用 remote (?)来调用
    4. 数据持久化似乎可以选择 sqllite,leveldb,pouchdb (后端也是 leveldb ?)。
    5. github 上 star 比较多的一个种子项目 https://github.com/maximegris/angular-electron,打算用这个慢慢上手做
    15 条回复    2018-04-13 23:31:03 +08:00
    whypool
        1
    whypool  
       2018-04-05 13:42:05 +08:00
    和原生交互是用 node 调用的
    huiyifyj
        2
    huiyifyj  
       2018-04-05 14:02:29 +08:00
    做 electron 开发应该要先学 js 和 node (以及他的 API )的吧。
    还有 electron 开发的桌面端并没有那么轻量。
    flowfire
        3
    flowfire  
       2018-04-05 14:40:52 +08:00
    Hanggi
        4
    Hanggi  
       2018-04-05 15:13:24 +08:00
    electron 生成应用的时候特别烧,而且只是做了一个很简单的测试应用,编译出来的文件很大很大。不知道是不是用 Mac 的原因。楼主如果也遇到类似问题,得到解决希望分享一下。谢谢!
    loginv2
        5
    loginv2  
       2018-04-05 15:36:14 +08:00
    @Hanggi 不是 通病
    hronro
        6
    hronro  
       2018-04-05 15:52:47 +08:00   ❤️ 1
    1. 看情况。本身 Electron 就分 main 和 renderer,具体要不要分成两部分要看你具体的项目。
    2. 自定义的菜单栏可以做的很好看,可以满足更多变态的需求,不过 accessibility 的细节需要你完全自己去实现,这个会非常非常麻烦。而如果系统的菜单栏的话,操作系统已经帮你处理好这些东西了。
    4. sqllite 了解一下
    Hanggi
        7
    Hanggi  
       2018-04-05 15:54:38 +08:00
    @loginv2 没有什么解决方案吗?是不是 nw 会好点?
    loading
        8
    loading  
       2018-04-05 16:05:02 +08:00 via iPhone
    要同时打包 node 和 webkit(图形界面),要体积小是很难了。
    就算把 node 和 webkit 重新并起来,体积也不小。
    gnaggnoyil
        9
    gnaggnoyil  
       2018-04-05 17:03:52 +08:00
    @Hanggi node 和 webkit 本身体积就不小,换 nw.js 也不会缓解多少.上了 electron 的贼船还想不付出相应的代价,哪里有这种好事.想减小体积就上正统的 GUI 开发工具.
    Akarin
        10
    Akarin  
       2018-04-05 17:11:10 +08:00   ❤️ 1
    web 模拟桌面端 UI 的话,可以看一下这个 [demo]( http://reactdesktop.js.org/demo/)
    另外, 觉得 Electron 体积大的话,Electron 的作者有另外一个[项目]( https://github.com/yue/muban),还在 V 站发了[帖子]( https://www.v2ex.com/t/432968)
    duan602728596
        11
    duan602728596  
       2018-04-05 19:50:11 +08:00 via iPhone   ❤️ 1
    1、Electron 可以运行 js 和 node,所以可以前后端代码混写,刚开始可能会不习惯
    2、区别就是你的应用使用起来给人觉得更像是原生应用了,而不是浏览网站的感觉
    3、ui 控件基本上都是适合 web 的,适合桌面端的还真见过,不过你可以魔改下样式
    4、不知道你要存什么,如果是存一些简单的数据的话,IndexedDB 了解一下
    5、没有...
    6、我没用过 Electron ……,我只用过 nwjs,上面的都是我编的
    Rocka
        12
    Rocka  
       2018-04-05 22:35:40 +08:00   ❤️ 1
    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
        13
    plqws  
       2018-04-06 12:26:36 +08:00   ❤️ 1
    项目目录结构啊、构建工具啊,可以试试: https://github.com/maximegris/angular-electron

    不管是 react 还是 vue 也都有对应的一键项目模板
    Tompes
        14
    Tompes  
       2018-04-06 13:01:57 +08:00
    可以这么理解 main 是 node 也就是后台.
    其他的是都是前端和浏览器里一样 通过 IPC 传递数据.
    当然想 http 也行,不过比较麻烦,参见: https://github.com/frankhale/electron-with-express
    hoyixi
        15
    hoyixi  
       2018-04-13 23:31:03 +08:00
    @Hanggi #4

    本质是里面裹了个浏览器 Chromium 内核,你说体积大不大,哈哈
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3249 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 87ms · UTC 12:02 · PVG 20:02 · LAX 05:02 · JFK 08:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.