基于Electron vue的桌应用实战

1. 基于Electron Vue的桌面应用开发实践
2. 赵帅 前端工程师 @美团点评-到店事业群 负责-度假业务系统⼯工程化 瓦匠桌⾯面应⽤用开发者
3. 01 瓦匠应用的介绍 02 桌面应用的技术选型 03 Electron Vue项目实践 04 桌面应用开发总结
4. 应⽤用介绍 瓦匠 瓦匠⼯工作台 ⼀一体化解决⽅方案 提⾼高开发效率
5. 应⽤用介绍 背景概述 需求类型 CRUD⻚页⾯面 场景化⻚页⾯面 新项⽬目 登录SDK,数据上报,权限系统,发 布系统等…… 效率低,同质化,重复成本
6. 应⽤用介绍 核⼼心功能 瓦匠 ⼯工程搭建 项⽬目配置 模板注⼊入 构建部署 多⼯工程模板 ⼀一键集成SDK 快速⽣生成⻚页⾯面 接⼊入发布系统 H5、PC 登录,监控、埋点 查询、表单、图表 DevOps
7. 应⽤用介绍 技术挑战 ⼯工程搭建 Web开发能⼒力力不不⾜足 ⽂文件的IO 模板注⼊入 可视化编辑 命令⾏行行⽆无法可视化 (GUI界⾯面) 模板的编译 项⽬目配置 构建部署 命令的调⽤用 …… 桌⾯面应⽤用
8. 01 瓦匠应用的介绍 02 桌面应用的技术选型 03 Electron Vue项目实践 04 桌面应用开发总结
9. 技术选型 桌⾯面应⽤用开发选型 C++/C#/C+……(Windows) 纯Native开发 Objective-C/Swift(Mac) Qt: (Windows/Mac) 开发框架 NW.js/Electron(Windows/Mac) 优点:性能好,安装包⼩小 缺点:开发周期⻓长,⽆无法跨平台 优点:接近Native性能,功能丰富,跨平台 缺点:库太⼤大,编译慢,开发周期⻓长 优点:开发速度快,跨平台,更更新迭代快 缺点:集成Chromium,安装包⼤大
10. 技术选型 Electron应⽤用 ✔ VS Code, POSTMAN
11. 技术选型 前端选型 体积⼩小、轻量量化 健全的⽣生态 优秀的组件化机制 ✔
12. 01 瓦匠应用的介绍 02 桌面应用的技术选型 03 Electron Vue项目实践 04 桌面应用开发总结
13. 项⽬目实践 Electron原理理 两个核心 Main-process Render-process
14. 项⽬目实践 应⽤用架构选型 多窗⼝口 BrowserWindow 业务1 单窗⼝口 业务2 IPC Render Process 业务1 Render Process IPC 、RPC Main Process 适⽤用场景 BrowserWindow BrowserWindow IDE, IM等 特点:项⽬目协同开发,多任务处理理 Vuex 业务2 Render Process IPC、RPC Main Process 适⽤用场景 ⼯工具,流程 特点:交互简单,通信⽅方便便 ✔
15. 项⽬目实践 应⽤用架构 客户端 ⽤用户功能 ⼯工程搭建 项⽬目配置 服务端 模板注⼊入 构建部署 代理理层 视图层 中间层 Vue Vue-Router Vuex Iview Bridge Node API 应⽤用层 Native API 底层 Cat SSO Stash ⽤用户信息 版本统计 权限管理理 Eggjs Egg-cors 底层 构建层 Electron Render Process Electron-builder webpack Main Process Gulp etc…… UAC Egg-Script
16. 项⽬目实践 ⼯工程⽬目录结构 构建打包 构建配置 主进程 渲染进程 Electron SWA 应⽤用 ├── bin │ ├── jenkins.sh │ ├── upload.sh ├── tasks │ ├── gulp.dev.js │ ├── gulp.prod.js │ └── release.js ├── conf │ ├── webpack.renderer.conf.js │ ├── webpack.main.conf.js │ └── release.conf.js ├── src │ ├── main │ │ ├── index.js │ │ └── utils.js │ ├── renderer │ │ ├── components │ │ ├── pages │ │ ├── store │ │ ├── router │ │ ├── App.vue │ │ └── index.js └── package.json Web SPA 应⽤用 ├── bin │ ├── jenkins.sh │ ├── run-test.sh ├── tasks │ ├── gulp.dev.js │ └── gulp.prod.js ├── conf │ ├── gulpfile.babel.js │ ├── webpack.dev.conf.js │ ├── webpack.prod.conf.js │ └── postcss.config.js ├── src │ ├── components │ ├── pages │ ├── store │ ├── router │ ├── styles │ ├── App.vue │ └── index.js └── package.json
17. Electron应⽤用的开发调试 、构建发布
18. 项⽬目实践 开发和调试 1 2 webApp (Vue) 1 webpack DevServer 2 Electron htttp:// localhost 3 Main Process webpack hotReload 3 4 Render Process watch-run Restart file://static file
19. 项⽬目实践 开发和调试 远程调试 渲染进程、主进程 该如何调试? 渲染进程:vue-devtools 主进程:Electron —inspect chrome://inspect/#devices Node Electron v8 Inspector App STDIO 主进程Debug WS Chrome DevTools Protocol Chrome DevTools
20. 项⽬目实践 构建和发布 webApp本地构建 Electron本地构建 Electron-Main Electron-Renderer Vue webpack Static File CDN Web Target ✔ ✔ ✔ ✔ Static file Mac Electron-Build building main process building renderer process code signing building target=electron-demo-X.X.X.dmg Native Linux Window
21. 项⽬目实践 构建和发布 ⼿手动构建、发布 ⾃自动化构建、发布 Jenkins Job Electron Build Web-Hook Unit Testing Git 修复问题 Electron Build Code signing Upload CDN Code signing 修复问题 通讯 ⼯工具 测试 版本管理理平台 ✔
22. Electron应⽤用中遇到的问题和解决⽅方案
23. 项⽬目实践 #1如何解耦业务逻辑 ⻚页⾯面代码与业务逻辑混写,功能重复 升级Electron框架,修改成本⼤大 Vue Component 业务逻辑 NodeAPI NativeAPI bad case Node Path file Stream …… Native dialog Shell TouchBar …… bridge Vue Component NodeAPI NativeAPI 业务逻辑 good case ✔
24. 项⽬目实践 #2如何实现登录认证 Electron跨域如何解决? File协议与HTTP如何交互? ⾃自定义协议是什什么? RFC3986 未登录 Index Page 当前域 种Cookie后重 定义 Tiler协议 跳转登录页 http协议 http协议 Login page SSO Center 携认证信息 重定向 认证信息 callback Page 客户端 App ->registerStandardSchemes 服务端 tiler://index.html http:// SSO proxy
25. 项⽬目实践 #3如何完成签名、⾃自动更更新 APP IPCRender ⽤用户每次都要重新下载 下载的应⽤用不不被信任 On ⽹网络请求被询问…… Send IPCMain 更更新⽣生命周期 setFeedURL() checkForUpdates update-downloaded 应⽤用签名 AutoUpdater quitAndInstall() electron-osx-sign electron-builder Squirrel.Server Squirrel.Mac
26. 项⽬目实践 #3如何完成签名、⾃自动更更新 版本管理理平台 每次新版本上线,⼀一旦线上出现严重bug 影响所有⽤用户使⽤用 使⽤用⼈人员 添加灰度版本和配置信息 配置⻚页⾯面 版本1.3 客户端 版本1.2 版本1.0 配置信息 更更新SDK 命中使⽤用的版本 后端服务
27. 项⽬目实践 #3如何完成签名、⾃自动更更新 灰度发布 指定⼈人员发布 指定版本发布
28. 项⽬目实践 #4如何定位和收集问题 客户端版本多,⽤用户崩溃信 息收集困难 崩溃⽐比率和出错版本,咨询 ⽤用户,提供信息较少 IM打通报警 Main Process Crash监控上报 Server Clinet Crash SDK Render Process CrashReporter Crashed Crash Log
29. 项⽬目实践 #4如何定位和收集问题 错误信息
30. 01 瓦匠应用的介绍 02 桌面应用的技术选型 03 Electron Vue项目实践 04 桌面应用开发总结
31. 开发总结 Electron开发和Web开发差异 设计 开发 Electron应⽤用 Web应⽤用 单窗⼝口、多窗⼝口 单⻚页⾯面、多⻚页⾯面 html CSS JS Node.js OS API html CSS JS 调试 主进程,渲染进程 渲染进程 构建 资源⽂文件,安装包 资源⽂文件 发布 Mac / Window / Linux 关注点 进程通信,内存管理理,版本管理理, 性能及Crash监控…… Nginx / CDN 兼容,DOM,组件、性能,……
32. 开发总结 Electron应⽤用技术体系推荐 应⽤用架构 前端框架 Vue 能⼒力力SDK 更更新 SDK 基础框架 开发调试 ⼯工程化 打包构建 检查\测试 基础设施 监控平台 UI 组件库 Vuex Vue-Router 性能 SDK Electron 监控 SDK 登录 SDK Native API Node RunTime Vue-devtools Electron —inspect webpack ESLint 版本管理理平台 devtron Electron-build babel Spectron + Mocha 数据统计平台 DevOps平台
33. 开发总结 Electron应⽤用开发流程推荐 PR 发布 release-dev web-hook 测试包 Jenkins release-branch 产品介绍 CDN 版本管理理平台 正式包 release-prod PR 获取版本API 灰度 更更新 客户端 联调 开发 dev-branch master PR RD2 负责⼈人 RD1 修复 master 检出 ⽼老老⽤用户 release-branch 本期功能测试 release-branch dev-branch bugfix-branch PR 合并测试 run dev run prod 本地打包 run release:prod run release:dev release-branch 新⽤用户
34. Thanks 邮箱:zhaoshuai05@meituan.com 微信:z416043658