- 最近看到很多 electronjs 的文章, 而且想做点小工具. 所以就有 Pt
- 很久没看 angular 了(之前看的时候是 2, 现在 8 都 RC 了), 所以放弃了日常使用的 Vue, 复习下 angular
- s 性能相关的自己所学不多, 所以想依靠 chrome, 所以看上了 Puppeteer
先看个动图吧:
好了理由说完了, 说下基本的过程吧. 当然重要的是这个学习的过程.
脚手架: https://github.com/maximegris/angular-electron
然后做了几个步骤:
- 整合 pupeteer, 我这里使用了 pupeteer-core, 所以需要机器上自带 chrome
- 整合下 material (angular 生态里 UI 库确实还不太行, material 还是那么拖后腿)
- 看了 2 天 angular 官网走了一遍 hero
- electronjs 部分基本都是官网和参考例子(https://github.com/hokein/electron-sample-apps)
##基本想法:
需要一些现成的数据:
资源使用率 - 这个貌似很多人都不太重视.
lighthouse 报告- 这个比较全面
其实,我们组里的很多前端都没用过上面两个东西.
##获取数据:
puppeteer 整合完了, 参考例子 https://github.com/GoogleChromeLabs/puppeteer-examples
使用率方面我是改了例子的代码, 生成一个数组出来, 例子里是输出到终端了.
lighthouse 基本就是直接拿来用的, 改的地方不多.
##展示:
Material 的 Table 来做列表,这里也自己写了个 pipe. 而且觉得 angular 的组件真的不太强大…
search button 加个缩放小动画
lighthouse button 来个透明度小动画
使用率进度条来个 width 的动画
别看就一个页面, animation 还用上了.
lighthouse 报告展示的问题,因为拿到的是一个整页面. 所以开始考虑的方向就是 iframe 这种. 官方不推荐 webview. 最终选择了新开一个子 window. 这个报告相对独立. 自带亮暗两种主题, 默认是亮的, 为了配合我列表页的颜色, 我用代码改成了暗主题.
打包:
我打包搜了好久, 最后的方法是 Travis 上打 linux 的包, 本地 MBP 打 mac 的 dmg. windows 还没弄, 看其他人文章是需要另一个 CI.
Logo:
我们的设计师同学不爱帮忙, 所以我找了对面可爱的前端小伙伴设计了. 鄙视下不会 PS 的自己. 设计方面自己还真的挺想学下的.
一些问题:
有些网站经常会报错, 超时什么的. 这个还得继续看看是什么情况, 难道 SPA 的 都不行?
有经验的大佬请留言, 给小弟点思路.
仓库地址: