基于Electron-vue的桌应用实战2

Size: px

Start display at page:

Download "基于Electron-vue的桌应用实战2"

奖沚温
5 years ago
Views:

1 Electron Vue

2 负责 - 度假业务系统工程化瓦匠桌面应用开发者

3 Electron Vue 04

4 应用介绍瓦匠瓦匠工作台一体化解决方案提高开发效率

5 应用介绍背景概述需求类型 CRUD 页面场景化页面新项目登录 SDK, 数据上报, 权限系统, 发布系统等效率低, 同质化, 重复成本

6 应用介绍核心功能瓦匠工程搭建模板注入构建部署项目配置多工程模板一键集成 SDK 快速生成页面接入发布系统 H5 PC 登录, 监控埋点查询表单图表 DevOps

7 应用介绍技术挑战工程搭建模板注入项目配置文件的 IO 可视化编辑模板的编译命令的调用 Web 开发能力力不不足命令行行无法可视化 (GUI 界面 ) 桌面应用构建部署

8 Electron Vue 04

9 技术选型桌面应用开发选型纯 Native 开发 C++/C#/C+ (Windows) Objective-C/Swift(Mac) 优点 : 性能好, 安装包小缺点 : 开发周期长, 无法跨平台开发框架 Qt: (Windows/Mac) NW.js/Electron(Windows/Mac) 优点 : 接近 Native 性能, 功能丰富, 跨平台缺点 : 库太大, 编译慢, 开发周期长优点 : 开发速度快, 跨平台, 更更新迭代快缺点 : 集成 Chromium, 安装包大

10 技术选型 Electron 应用 VS Code, POSTMAN

11 技术选型前端选型体积小轻量量化健全的生态优秀的组件化机制

12 Electron Vue 04

13 项目实践 Electron 原理理两个核心 Main-process Render-process

14 项目实践应用架构选型 BrowserWindow 多窗口 BrowserWindow 单窗口 BrowserWindow 业务 1 业务 2 IPC 业务 1 Vuex 业务 2 Render Process Render Process Render Process IPC RPC IPC RPC Main Process Main Process 适用场景 IDE, IM 等适用场景工具, 流程特点 : 项目协同开发, 多任务处理理特点 : 交互简单, 通信方便便

Node API Native API 底层 Eggjs Egg-cors Egg-Script 底层 Electron

15 项目实践应用架构客户端服务端用户功能工程搭建项目配置模板注入构建部署代理理层 Cat SSO Stash UAC 视图层 Vue Vue-Router Vuex Iview 应用层用户信息版本统计权限管理理中间层 Bridge Node API Native API 底层 Eggjs Egg-cors Egg-Script 底层 Electron Render Process Main Process 构建层 Electron-builder webpack Gulp etc

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 webapp 2 webpack hotreload 3 htttp:// (Vue) DevServer localhost Electron Main Process Render Process file://static file webpack watch-run Restart

19 项目实践开发和调试远程调试渲染进程主进程该如何调试? 渲染进程 :vue-devtools 主进程 :Electron inspect chrome://inspect/#devices 主进程 Debug Node Electron v8 Inspector STDIO App WS Chrome DevTools Chrome DevTools Protocol

20 项目实践构建和发布 webapp 本地构建 Electron 本地构建 Vue Electron-Main Electron-Renderer Mac webpack Target Static file Electron-Build Linux Static File CDN Web building main process building renderer process code signing building target=electron-demo-x.x.x.dmg Native Window

21 项目实践构建和发布手动构建发布自动化构建发布 Jenkins Job Electron Build Web-Hook Unit Testing Electron Build Code signing Upload CDN 修复问题 Code signing 通讯工具 Git 修复问题测试版本管理理平台

22 Electron 应用中遇到的问题和解决方案

23 项目实践 #1 如何解耦业务逻辑页面代码与业务逻辑混写, 功能重复升级 Electron 框架, 修改成本大 Node Path file Vue Component Stream bridge Vue Component 业务逻辑 NodeAPI NativeAPI Native dialog Shell NodeAPI NativeAPI 业务逻辑 TouchBar bad case good case

24 项目实践 #2 如何实现登录认证 Electron 跨域如何解决? File 协议与 HTTP 如何交互? Index Page 自定义协议是什什么? RFC3986 http 协议 Login page http 协议 SSO Center Tiler 协议 callback Page App ->registerstandardschemes tiler://index.html SSO proxy

25 项目实践 #3 如何完成签名自动更更新用户每次都要重新下载下载的应用不不被信任 APP IPCRender On Send 更更新生命周期 setfeedurl() 网络请求被询问应用签名 IPCMain AutoUpdater checkforupdates update-downloaded quitandinstall() electron-osx-sign electron-builder Squirrel.Server Squirrel.Mac

26 项目实践 #3 如何完成签名自动更更新版本管理理平台每次新版本上线, 一旦线上出现严重 bug 影响所有用户使用使用人员添加灰度版本和配置信息客户端版本 1.3 版本 1.2 版本 1.0 更更新 SDK 命中使用的版本配置页面配置信息后端服务

27 项目实践 #3 如何完成签名自动更更新灰度发布指定人员发布指定版本发布

28 项目实践 #4 如何定位和收集问题客户端版本多, 用户崩溃信息收集困难崩溃比率和出错版本, 咨询用户, 提供信息较少 Clinet IM 打通报警 Server Crash 监控上报 Main Process Render Process Crash SDK Crash Log CrashReporter Crashed

29 项目实践 #4 如何定位和收集问题错误信息

30 Electron Vue 04

31 开发总结 Electron 开发和 Web 开发差异 Electron 应用 Web 应用设计单窗口多窗口单页面多页面开发 html CSS JS Node.js OS API html CSS JS 调试主进程, 渲染进程渲染进程构建资源文件, 安装包资源文件发布 Mac / Window / Linux Nginx / CDN 关注点进程通信, 内存管理理, 版本管理理, 性能及 Crash 监控兼容,DOM, 组件性能,

32 开发总结 Electron 应用技术体系推荐前端框架 Vue Vuex Vue-Router UI 组件库应用架构能力力 SDK 更更新 SDK 性能 SDK 监控 SDK 登录 SDK 基础框架 Electron Node RunTime Native API 开发调试 Vue-devtools Electron inspect devtron 工程化打包构建 webpack Electron-build babel 检查 \ 测试 ESLint Spectron + Mocha 基础设施监控平台版本管理理平台数据统计平台 DevOps 平台

33 开发总结 Electron 应用开发流程推荐发布 release-branch PR PR release-dev release-prod web-hook Jenkins 测试包正式包获取版本 API CDN 产品介绍版本管理理平台灰度更更新新用户客户端联调 dev-branch PR RD2 release-branch 本期功能测试老老用户开发 master 负责人 release-branch 合并测试 run dev run prod RD1 dev-branch 本地打包 run release:prod run release:dev 修复 master 检出 bugfix-branch PR release-branch

34 Thanks 邮箱微信 :z

Hippy-VueConf

Hippy-VueConf 前终端统一方案 Hippy-Vue 设计和实现腾讯 / QQ 浏览器器 SuperTeam / xqkuang 背景介绍传统移动端开发模式, 无法满足业务精细化运营需求, 急需寻找一种高性能跨平台动态发布的开发解决方案 Web 开发效率高 Native 开发效率低前终端一体化开发效率高支持多平台无法跨平台支持双平台可动态发布发布复杂可动态发布体验差体验好