2021年终总结

前言

12.31刚刚我在9:15到家了,到家真的思绪万千,想到工作这几年从来没有认真写过个人的年终总结，今年也是人生态度变化比较大的一年，故以此总结作为来年的新起点。

关于工作

对于个人来说今年也算自己比较卷的一年吧,虽然每天提醒自己躺平,但回想下还是习惯性的卷起来,经常工作起来就忘记时间,当然也因为只有自己一个前端,后端人多又相当卷还特别高产,所以有时候也不得不卷起来.

工作总体情况

在杭州某公司做外包前端,3年多吧,项目组只有我一个前端,日常个人维护5个前端业务平台,十几个前端项目.(大多数react,但技术实现各不相同,少部分公司内部模板语法框架).因为只有我一个前端,有一些接手过来的老项目,所以用的技术栈很杂,leader和项目组也给我极大自由,想怎么写就怎么写,对于就爱折磨自己的我来说还是比较满意的.

日常工作内容

对主要的7个项目做持续的功能迭代,功能模块的封装,项目组件库的开发,另外今年又新起了3个前端项目(一个内部框架,一个 ice,一个antd pro 5.0).

• 可能有人会问既然很自由为什么不用自己搭的框架更顺手更能增加前端积累,因为要考虑后续迭代维护,后端或者接盘者不一定能接起来,所以用通用框架写,起码遇到问题还能找个人问问.

工作收获

1. 今年团队开始实行OKR工作方式,我也开始用OKR思想来规范自己的工作思维和行动.
2. 今年拾起上家公司觉得很牛逼的东西===rajx,用rajx轻微改造下老项目的复杂异步逻辑,新项目也用 rajx-hooks 写了一部分复杂的异步逻辑,不过很小一部分(主要考虑后端以后上手难度太大,上百API学习量,函数式编程流编程思想并不适合java语系的后端同学学习,不要杠,随便贴一段rajx基础demo,想学可以去rajx社区)

import { Observable } from "rxjs";

const now = new Date().getTime();

const stream$ = new Observable(subscriber => {
  setTimeout(() => {
    subscriber.next([1, 2, 3]);
  }, 500);
  setTimeout(() => {
    subscriber.next({ a: 1000 });
  }, 1000);
  setTimeout(() => {
    subscriber.next("end");
  }, 3000);
  setTimeout(() => {
    subscriber.complete();
  }, 3000);
});

// 启动流
const subscription = stream$.subscribe({
  complete: () => console.log("done"),
  next: v => console.log(v),
  error: () => console.log("error")
});

//关闭流
setTimeout(() => {
  subscription.unsubscribe();
}, 1000);

3. 体验 vite,本来用vite+ts+antd 搭了一套自用项目框架用来写新项目,自测了几天遇到了各种奇奇怪怪的编译打包问题(真的很多包都有问题),虽然都解了,考虑到我工作量巨大,潜在风险巨大,最后用了 ice 因为有vite模式哈哈(说实话对 vite 配置的开放自由度太低),不过有一大帮阿里前端维护还是稍微放心些,他们时间多哈哈
4. wepback 5.0 继续各种编译插件踩坑哈哈,不过是经验嘛
5. 微前端的应用:微前端的应用场景就不废话了,为什么用:我们项目组有一个业务平台经过多年迭代,历史问题(我来之前)有4个前端仓库(废弃一个项目的全部功能,1个单页面应用(主应用),两个服务端路由的单页面应用), 后端同学觉得来回跳转影响用户的体验,就想弄到一个单页面应用里面,采用ice的微前端方案,(3个项目改造涉及到BEM方案改造(主要为样式隔离),切换逻辑(主要是老的主应用路由放到微前端应用里),接入项目改造,应用通信(事件总线方案就是发布订阅模型)版本管理等等还有很多坑,工作量蛮大的,不过主要的都完成了,不过最后没有上线),后端同学又觉得两个应用太老写了前端bug很多,技术栈不统一不方便他们以后维护,年尾启动了把两老项目重构到主应用(累死真的).
6. 数据可视化,今年链路图的需求有几个(都采用antv,前几年链路图采用canvas工具库(库名忘记了G开头)自建布局算法\边定位\路径计算),今年有一个涉及到大量数据节点链路图渲染场景,在antv本省优化的基础上做了很多数据处理和交互实现的优化,其中父级元素完全放大到画布尺寸后画布崩溃卡了我多半天(加班少不了了哈哈),开始一直不法定位哪里造成的性能问题,直到放弃父级元素放大方案,才得以解决(不放大父元素,leader觉得画布内滚动起来不跟手,有时候滚过了滚回去比较麻烦等原因),后来对antv稍微做了一些研究,放学习里

学习

微前端&低代码

从2020年就开始很火的微前端架构方案放到今年也老生常谈了,微前端提升了中台项目的周期性和可维护性,有适合场景就用吧. 微前端方案目前开源的就两大:qiankun和ice都基于single-spa,至于两种方案的应用的组合时机/隔离通信/应用的接入协议/加载/切换实现,这里不做说明,后面单开一贴写一写他们的方案原理实现和区别.

还有火了一年多的低代码,公司有现成的低代码框架,但我没有用,后端同学的需求基本没有符合的场景(数据很复杂),不过微前端下的混合开发应该是之后几年的趋势,业务简单切到低代码开发,页面评估难切回代码模式.

至于自己对低代码的实现有了解,也看了两眼别人写的低代码平台的思路,不管布局问题,最关键的是表单的实现,页面配置的同步(json schema还是啥),接口数据的处理,函数绑定等涉及的问题技术细节是真的多,没亲手写不敢说啥,不过低代码平台搞成公司自己的PRD设计系统还是挺好的,

antv 研究

研究了下antv 的优化方面:高性能计算,高性能渲染,高性能交互

高性能计算

• 布局算法 计算节点位置,例如力导布局 (算法复杂度: o(节点数目边的数目迭代次数)) 迭代次数理解成对位置微调的计算(很多次) ==>这些都放到webWork里,并且 antv用webGl(以后可能用webGPU关注吧)调用gpu进行计算(可并行的矩阵乘算)===>>这里推荐 tensortflow.js 不用关心跑在cpu还是GPU上
• 分析算法:最短路径等

高性能渲染

offScreenCanvas(离屏渲染):思路就是创建离屏canvas==>>>创建worker线程==>>同步到主线程(页面此时可交互)

是否可深入图形开发的思考

对于使用GPU编程模型,前端开发这块我感觉挺难得,线程和线程组,GPU内存模型,共享内存和同步等问题 还有就是对图形/计算 api的学习成本 webGL/WebGPU api 学习 shader语言(写给gpu的). 之前有考虑过找专门做这一块业务的公司(比如开发web图形工具的公司),但感觉webGL图形方向的水很深,会不会让自己更受苦,犹豫犹豫

Vue 3.0

嗯,持续关注,什么性能优化,几个api:响应式&组合,ts 支持,vite等,没怎么动手写不多逼逼,本人尤大粉丝.

React

没啥可说的,hooks 老生常谈,怎么性能优化,怎么更好封装业务逻辑,多写就好.推荐react-use 库,蚂蚁的 ahooks大同小异,状态库适合业务场景就好

next.js egg.js midway.js 2.0

继续保持熟悉程度,靠着上家公司node半年多的开发经验还是好多年前,还是express哈哈,硬起头皮,midway文档翻了很多遍,看了几个项目,服务写了一些,掉头发掉头发,不过真心棒,对node重燃信心(不讨论什么异步io优势还有没有优势啥的),不过我是废物,后端基础薄弱懒得学,工作也占据大量时间,真没时间和机会深入搞midway.不过听说语雀团队放弃node改用java嘛,我是真的有点无语哈哈.

移动端 flutter

工作中用不到,不过继续保持关注,20年发布后,就觉得是自己以后的饭碗, flutter 社区持续关注,今年随便写了两个小应用,兼容桌面也尝试了下,期望下份工作让我可以写个半年左右哈哈

架构方面提升

很多,明天整理

3D框架和3D地图框架的实践

关于生活

总结从最一开始只想写生活部分，洋洋洒洒写了很多很多，最后都删掉了哈哈，还是只写点工作技术吧。

健康

感情

总结

马上12点2022年了,后续再更新