基于Electron vue的桌应用实战

2020-03-01 1040浏览

  • 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 Electronhtttp://localhost 3 Main Process webpack hotReload 3 4 Render Process watch-run Restartfile://staticfile
  • 19.项⽬目实践 开发和调试 远程调试 渲染进程、主进程 该如何调试？ 渲染进程：vue-devtools 主进程：Electron —inspectchrome://inspect/#devicesNode 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.htmlhttp://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 本地打包 runrelease:prodrunrelease:devrelease-branch 新⽤用户
  • 34.Thanks 邮箱：zhaoshuai05@meituan.com 微信：z416043658