2019，精彩的一年

生活

回顾2019

先大概回顾下我在2018年总结中对2019的期望

2019，我的技术成长

electron

今年主要开发了Hyrule，算是体验了一次electron开发, 同时也方便了自己用写博客。具体内容还请看Hyrule - electron+react app开发实践

小程序

使用taro开发了Koopa(基于github的图片管理小程序)。

用react开发小程序的体验还是不错的。开发过程中也给taro提过issues和pr, 算是参加了一个大型开源项目。

react

上半年还在老老东家时候依旧老老实实的写着react和typescript, 至于小程序则用了taro开发了koopa, 基于github的图片管理小程序。主要还是想体验一下taro, 而taro团队也是挺给力的, 提的issues和pr都会很快有人处理, 希望taro能越做越好。

在网易期间由于业务需求，也接触了react ssr以及css module, 用的是razzle，也算是浅尝即止吧。

angularjs

对, 是angularjs而不是angular。也是在网易期间由于业务需求，不得不学习早已脱离时代的angularjs。而且还要研究如何在react上运行angular, 以及如何在angular上运行react，并由此搭建一个管理中台。

不管vue, react, angular谁运行谁, 总归逃不出几个方法

  • 互相转码编译, 将一种语言转成另一种语言, 但这技术上有点难度
  • 提供一个dom节点, 让它们在dom上自己玩自己
  • 提供一个iframe, 让它们在iframe上自己玩自己

最终使用第二种来实现。

以react运行angular为例

  • angularjs写的app会通过gulp打包成一个umd包, 对外暴露一个render方法
    export function render(angular, dom) {
  angular.bootstrap(dom) // 具体api忘记了,反正就是启动angular
}
  • 在react中引入angularjs, 并挂载到window下, 因为angularjs时期很多第三方依赖都是umd形式打包, 可以从window下直接获取angularjs对象, 这样angular app挂载时就能从window下拿到angular对象
  • 通过script标签以及link标签加载angular app的相关资源, 通过window或者requirejs获取暴露的render方法, 传入相关参数并且调用
  • 完成angular app挂载

TIPS

angularjs时代很多依赖都会污染全局window

这里可以说单纯的完成了app的挂载, 其实对于路由上不一定同步。而在处理路由上面花了很大时间去阅读ui-router源码。

而ui-router并不提供baseurl类似的选项, 只能通过其提供的方法重写路由装饰器来完成baseurl功能, 而对于路由同步, 直接通过了重写history.pushState等方法实现。

对于angular运行react则简单一点

  • react app同样暴露出一个render方法, 接受一个dom参数, 并将app挂载上
  • 通过自定义html-webpack-plugin的template选项, 使得react app打包后输出manifest.json文件包含了所有资源的实际路径(cdn)
  • angular app加载上面manifest.json文件并解析出js和css资源, 通过script和link分别加载
  • 通过umd形式引入并且调用render方法
  • 完成app渲染

TIPS

由于用了webpack打包, 对window对象不会造成太大的污染

通过上述方法, 也算是成功的在两边分别运行两者的app了。

npm && unpkg

同样是在网易时期, 需要接手内部npm以及unpkg的维护, 借此机会也学习了两者的搭建方式

  • npm用了verdaccio
  • unpkg直接用官方提供的完成搭建

搭建npm主要要解决的地方有几点, 官方也提供了相应的plugins

  • auth问题: 一种是通过官方提供的配置完成ldap等内置的其他认证方式, 另一种则是自行编写Middleware完成认证
  • 存储问题: 官方提供了memory, s3-storage等方式存储

vue

时隔一年半, 又重新写起了Vue。由于目前vue对typescript的支持还不算好, 突然摆脱了ts却有点不习惯, 再次感叹ts真是个好东西。

虽然没有ts的支持，但是jsdoc也能去起到类型提示作用, 只要在文件头部添加@ts-check即可

// @ts-check
/**
 *
 * @param {String} arg1
 * @returns {string}
 */
function test(arg1) {}

svg-symbol

参考ant-design-icons构建方法, 完成业务上的icon抽离。

主要流程：

  • 用过gulp读取并解析svg源文件
  • 将svg的xml转成ts对象, 最终编译成一个个的js文件
  • 构建一个IconSymbol类, 用于管理svg
    import Icon1 from '@path/to/svg/es/asn/IconName' // 加载icon对应的文件
IconSymbol.register(Icon1) // 注册icon
  • 调用IconSymbol.getIcon(name)将icon挂载到svg-symbol
    getIcon(name: string) {
    const icon = this._map[name] // 拿到icon的数据结构
    if (!icon) {
        console.error(`[MkSvgIcon] ${name} is unregister`)
        return
    }
    if (icon.isRendered) return
     // 将icon插入到dom中
    this.renderSymbol({ name, icon: icon.define, group: icon.group })
    icon.isRendered = true
    if (!this._isRender) {
        // 将svg symbol插入到dom中
        this.render()
    }
}
  • 通过svg-use使用icon

这样做的好处

  • 由于是直接引用对应的js文件, 通过tree-shaking可以做到按需加载
  • 只有icon实际被调用时候才会挂载到dom上
  • 通过svg-symbol可以复用icon, 而ant-design-icon则每次都需要重新render

开源

下半年的确少了很多commit，大概老老东家业务量比较少才让我有时间去写写开源吧。

总结

上半年一个人负责全部前端业务, 下半年开始进入团队协作模式。开始有了周例会，迭代会等团队管理模式，这是我以前没有经历过的。以前都是需求搞完直接上线，现在是严格按照迭代流程来走。

总的来说整个技术环境和氛围变化还是挺大的, 这些变化也是我所期望的。

2019，我的生活变化

书

很奇怪，2019竟然看起书来了，毕业以来就没看过书。

第一本是《倚天屠龙记》，由于今年上映了倚天屠龙记，于是我跑去看了原著 第二本是《CSS世界》，虽然讲的都是旧时代的知识点，但还是有很多收获 第三本是《明朝那些事》，看了1/3吧

职业生涯

今年算是一个转折点, 在找工作上算是经历了两个阶段

第一阶段

大概在年初, 先是面试了酷狗和头条, 头条挂在了第二面, 酷狗也不知为何挂在了最后一面, 不过这是福不是祸(再次吐槽下酷狗是我面试体验最差的一次), 备受打击然后继续做准备.

第二阶段

大概在5 6月份吧. 分别面了微信, yy和网易。yy和网易都拿到了offer，微信如无意外的挂了，后面hr帮我推到了腾讯teg部门。

yy是ued岗位，负责帮公司各个部门解决性能或者体验上的问题，对我来说也是新的尝试。（yy的面试体验很好，ued的leader全程跟进，面试官也很nice）。

网易则是技术工程部，负责运维平台的开发，也相当于内部系统了，算是老本行。

最终选择了网易并在6月底入职。结果入职第一天就收到腾讯的面试，也是有点尴尬。

经过了一个月的面试最终也拿下了腾讯的offer，这就面临着要从广州搬到深圳。

这两个月，yy、网易和腾讯三家公司都让我想了好久好久，因为这都关乎着职业生涯发展，需要慎重考虑。

最终在9月初入职了腾讯，短短2个多月，从创业公司到网易再到腾讯。

今年的多次面试经历都是很宝贵的。其实只要答中面试官的点，然后适当的进行扩展，引着面试官往你熟悉的方向去走，很大概率会成功。如果一个点不了解，直接坦白也是没关系，倘若了解这个点的某个方向，也可以试着引面试官往那个方向去走，一问三不知那是很危险的。

很高兴在腾讯认识了一群很有意思的同事，刚来不久就带我去了酒吧，偶尔也带着我去觅食，在以往可是没这种待遇。

最后一点，大舞台大背景真的很重要。

旅游

今年去了珠海和惠州，也去了趟日本关西（京都、大阪、奈良）。

日本真是个好地方，虽然我不是动漫迷，但还是想说日本真是动漫的天堂。这一趟旅行，也让我入坑了高达模型。如果有机会再去一次的话，我希望能去看富士山以及灌篮高手的电车站。

生活

我记得之前hr第一次给我电话时候我直接拒绝了来深圳发展, 后面还是来了。来到第一感觉就是：贵！堵！

住地地方不仅贵了，还小了，小到容不下我的烤箱。我朋友还跟我说：来了就是深圳人，不对，有房深圳人，没房东莞人。（开玩笑）

来了三个多月，在同事的加持下算是适应了这边的生活环境，也还不错。

对了，今年迷上了高达，正如去年迷上烘焙一样。

它们就是一堆人型人民币。

最后，还上了车。在祖国70周年借了一笔款, 在祖国百年庆还清, 算是做了一笔贡献。

总结

2019，真的可以用‘精彩’两个字形容，也是工作三年最精彩的一年。

展望2020

技术

每年都会有新的技术诞生, 且说2019的已有技术中就有很多暂时没能掌握

  • vue3.0: 按道理今年应该能出了, 而且能完美支持typescript, 那么这是一个很好的选择。如果真的是这样，也许可以考虑考虑把项目重构了。
  • webasmby: 如此高级的东西, 总是要学一下, 尽管工作上不太可能用得上, 但未来一定有用得上的地方。
  • react-config-2019 上面提到的新技术都很让我感兴趣, 特别是新提出的css-in-js方案
  • node/server: 还是希望能在node/server有更好的实践经验, 要成为一名工程师而不是前端工程师
  • 开源：继续保持对开源的热爱，受益于开源同时也要回馈开源。

生活

  • 继续看书
  • 2019没有很好地落实跑步计划, 那么2020继续吧（刚好公司有健身室）
  • 有很多个高达模型想要入手，巴巴托斯，PG完美强袭，能天使OOR，我要逐个逐个搞下来

工作

在大舞台下, 更能大展拳脚。在开源协同的大背景下，要能发挥更大的作用。

结语

感谢2019给我带来的变化，希望2020能稳步发展。