突破前端职业的瓶颈期,开启前端智能化的旅程

avatar
阿里巴巴 前端委员会智能化小组 @阿里巴巴

文/ 阿里淘系 F(x) Team - 狼叔

大家好,我是狼叔,来自阿里巴巴-淘系技术部-频道与D2C智能团队 F(x) Team。2017 年10月24日加入,一路成长于大文娱的前端团队,用Node.js重写了C端所有PHP页面,孵化了egg-react-ssr开源项目和Serverless端渲染方案ssr,2020年到淘宝技术部,开启前端智能化的旅程。

十年间
从外行(信管专业)转做Java程序员
从Java后端转到BI、移动端、前端
从程序员转做技术网红、作家、演讲者、出品人、活动策划者
从程序员转做管理者
从小公司到阿里
从文娱到淘宝

不太会有很多人有这样的经历,每一步都走的很艰难,并拿到成长结果。我非常庆幸,在工作的前十年,折腾了十年,将自己的履历刷到极致,将自己很多瓶颈都打破了。我深知自己的不足,但这种复合型的人也是职场需要的。

2018年,和 @苏千 聊,我和 @死月絲卡蕾特 相继入职阿里,还有CNode社区著名程序员也即将入职阿里,当时大家开玩笑说: “前端的终极归宿是阿里,不是在阿里,就是在去阿里的路上”。这一年,我主要负责C端,使用Node.js重写了之前的PHP代码,使用Bigpipe + jQuery兼容低版本浏览器。在保证老版本浏览器兼容问题后,进一步使用React SSR重构了新版,在性能和稳定性方面还是取得了很大成绩的。但无论如何,都有一种吃老本的感觉,这让我既满足又慌张。



2019年,我需要有更大的成长空间,走出BU,向集团进一步融合。于是,我参加集团前端委员会,了解了前端委员会的运作模式和技术方向,并在Serverless专项中承担了Serverless端渲染小组组长一职,这让我的眼界一下就打开了。了解技术细节的同时,还认识很多优秀的人,这是我最大的收获。能够明白大家在做什么,能够想清楚自己该作什么,站在集团技术沉淀的角度上去思考未来,真的是受益匪浅。

这一年,从egg-react-ssr开源,到衍生出Serverless-side render概念,并于2020年4月实现新的基于Faas的SSR。Umi和Ice都采用了这套方案,我们在SSR上有突破性创新,一套写法同时兼任csr和ssr,在容灾上无出其右。这一路走来,定位对了,把一个不火的概念带的有声有色,整个开源项目做得克制,用过的人都说好。对我而言,把握住了定位,我的判断和技术选型是有很大成长的。带小弟方面也能够放权,但不疏于管教,关注思维成长,偶尔也会敲打收拾,我相信他们也能够有很好的成长。

这一年,我的上半年主要做C端优化,稳定性连续2年0故障,开发速度也还是很ok的,可惜业务做不出更好的结果。我的下半年作为寒假战役前端一号位,比2018年双十一要从容得多。在剧综活动上,做了大明风华的技术一号位,促使前端在产研中的位置改变,以前只能听命干活,现在是组织大家一起做,可以有选择的做。手里有了腾挪空间,才能有更好的心态应对变化。

2020财年,我转岗到淘宝技术部,主要负责前端智能化中的Service to code(S2C)部分,同时兼顾Node.js生态小组。团队主要产品是imgcook和pipcook,虽然在行业内已经做到了顶尖,但在提效和创新方面还有很大空间。另外,使用Node FaaS来构建S2C平台还是有相当大的挑战和前景的。我想,在集团前端委员会里做出的这些成绩和成长也是我转岗的敲门砖。一方面,自己思考的维度是有提高的,见到更高级的做事方式和思考方式,自然就有成长。另一方面,自己也是在做事中积累口碑,能够被更多人认识,并在组织中能够起到更大作用。

今天的很多成长都是离不开平台的帮助,再次感谢大家的帮助和指导。受艺璇大美女邀请分享,2019年我其实还做了一些”不值一提“的小事儿,列出来,各位权当看乐呵。

出书:狼书出了2卷,卖的还可以


本书从2015年10月开始写作。

在那之前,我还在天津创业,顶着CTO的头衔干着各种最基础的编码工作。由于公司在天津的位置很偏僻,所以公司招人成了一个大问题。更要命的是,创始人没有工资可拿,现在想想只能说是情怀在支撑我吧。

公司招人不便,那就只能想办法把人才从北上广拉到天津,于是就动了扩大技术影响力的心思——开始在CNode社区上发帖,后面我慢慢尝试做Node.js全栈公众号,效果还不错,我还记得在一篇文章后面, CNode社区管理员alsotang说我是Node.js布道者,当时我臭美了很久,之后便自然而然地走上了布道的路。

2015年,我结婚了,财权上交,到后面发觉生活窘迫,又不好意思找老婆要,于是便开始在网上教授VSCode,在提升自己技术影响力的同时养活自己。之后我又和极客邦下面的StuQ合作课程,获得收入的同时又可以进一步扩大影响力。而影响力扩大的体现就是,我被出版社的编辑发现了。由于有布道的心思,自然希望能够出一本书,于是写书之旅便开启了。

可是写书从来都不是一件容易的事。阅历浅,写不来,无恒心,写不来。从2015年10月到2019年2月,历时3年多,很多朋友催书,以至于我经常在演讲中“自黑”:“我的书从Node.js v4写到Node.js v8,然而还没有写完。”与出版社约稿的时候,Node.js才刚刚发布4.0版本,而今Node.js已经发布了11.10版本。本书几经修改,以Node.js的8.0版本为核心版本,虽然后面Node.js更新的版本里又有新功能,但整体来看Node.js的API设计得非常好,几乎都是向后兼容的,所以即使是11.10版本,和8.0版本的差别也不大,而且在本书审阅过程中我又做了一定的更新,因此绝不会影响读者阅读合学习。在这3年多的时间里,Node.js 稳定高效的发布了多个版本,而国内外不同的团队对 Node.js 的使用率也渐渐达到了一个前所未有的高度,感谢前端爆发式增长,极大的扩展了Node.js的应用场景,而且新语法、新特性的使用也开始成为大前端开发团队中的标配。

人生之美好就是在苦难之后能够获得结果。写书的过程是痛苦的,但也让我对于“成全别人,才能成就自己”这句话有了更深刻的认识。最开始写书是为了布道,希望更多人能从中受益,没想到最先受益的是自己,通过长时间的积累,我完善了自己的知识体系,受益匪浅。通过与CNode社区、出版社的编辑以及Node.js爱好者们之间的交流,我有了更好的学习机会。通过写书、演讲、组织社区活动,我有了更丰富的人生经历。



2019年终于出了2卷,卷二应该是年底才开始卖。



图为好基友,杨晓峰(OpenJDK Committer,Oracle 首席工程师,Java 核心类库北京团队leader,前端京东担任大数据中心架构师,现腾讯JVM团队负责人)



图为金炳(2019年底也加入阿里了)和winter。

我其实没空推广的,今年真的很忙,只有出版社的推广,销量还算不错。预计2020年8月会出版卷三。

出书不赚钱,8%到12%之间的稿酬,一般技术书能够买到1万本就不错了。但出书的好处在于它的影响力,甚至出书也是很好的社交手段,相信上面几张图大家也能够看明白。

GMTC卷首语:2019,如何放大大前端的业务价值?


GMTC大会每年都会出会刊,会放到资料袋里,给到每一位参会者。一般这种资料里的文章都会精挑细选的,这些文章里,卷首语尤其难写。



卷首语难点:1)论点有有新奇特之一,2)大局观足够,覆盖面足够广。下面是我写的《GMTC卷首语:2019,如何放大大前端的业务价值?》

作者:狼叔

一年又一年,2019年GMTC深圳站又要开始了,依照惯例,每年GMTC我们都会出一本迷你书,今年也不例外。今年,我们精心挑选了5个不同方向的文章,希望能为开发者指点迷津。

今天的大前端增速变缓,没有出现很多颠覆性的技术,反而在细分领域开始厮杀的非常厉害,我想这是好事,意味着前端正在走向成熟。这点从框架,语言,甚至是前后端分工等都有提效,比如flutter,跨端能力进一步增强,通过2d引擎上画组件,可以带来更好的灵活性。比如小程序领域,不断的涌现出各种转译实现,wepy、taro等,ReactReconciler出现之后,出现了 Remax 框架。通过 Remax 把生成的「虚拟 DOM」渲染到视图层,从而做到了使用真正的 React 去构建小程序。比如React,能讲的新特性并不多,在create-react-app火爆之后,类似的支付宝的 Umi 框架也正在悄然兴起。Umi 是更具有阿里特色的解决方案,它集成了Antd、dva等成熟模块,也支持js和ts,在今年年中还增加服务器端渲染SSR相关特性。尤其值得一提的是Umi UI,在可视化辅助编程领域可谓一个新的突破。但无论怎么看,这些都不是颠覆性的变革,而是在深度上做的更精进一步。

在Node.js领域,今年新东西也不多,最新已经发布到13,lts是12,Egg.js的生态持续完善,进度也不如前2年,成熟之后创新就少了。在很多框架上加入ts似乎已经政治正确了。比如自身是基于ts的nest框架,比如阿里也开源了基于Egg生态的midway框架,整体加入ts,类型系统和oop,对大规模编程来说是非常好的。另外GraphQL也有很强的应用落地场景,尤其是Apollo项目带来的改变最大,极大的降低了落地成本。已经用rust重写的deno稳步进展中,没有火起来,但也有很高的关注度,它不会替代Node.js,而是基于Node之上更好的尝试。

你可能会感觉Node.js热度不够,但事实很多做Node.js的人已经投身到研发模式升级上了。对于今天的Node.js来说,会用很容易,但用好很难,比如高可用,性能调优,还是非常有挑战的。我们可以假想一下,流量打网关,网关根据流量来实例化容器,加载faas运行时环境,然后执行对应函数提供服务。在整个过程中,不许关心服务器和运维工作,不用担心高可用问题,是不是前端可以更加轻松的接入Node.js。这其实就是当前大厂前端在做的前端基于Serverless的实践,比如基于FaaS如何做服务编排、页面渲染、网关等。接入Serverless不是目的,目的是让前端能够借助Serverless创造更多业务价值。

前端技术趋于成熟,不可否认,这依然是个大前端最好的时代,但对前端来说更重要的是证明自己,不是资源,而是可以创造更多的业务价值。在垂直领域深耕可以让大家有更多生存空间,但我更愿意认为Serverless可以带来前端研发模式上的颠覆,只有简化前后端开发难度,才能更好的放大前端的业务价值。最后,引用狼叔常说的一句话送给大家:”少抱怨,多思考,未来更美好。“


带团队:做开源项目egg-react-ssr


这一年,我带领团队做开源项目egg-react-ssr,开源地址是github.com/ykfe/egg-re…。大家都知道在业务团队里,想做点技术项目是非常难的,作为tl我要照顾产品需求,又要能够去砍需求,为大家争取时间。但为了大家能够有更好的成长,作为一个好的tl必须要做这个担当的。

egg-react-ssr的大部分源码都是我97年的小弟十忆写的,基本上每个Commit我都Review过,整体代码质量还不错的。所有核心特性,都是我们一起讨论实现的。讨论设计过程是收获最大的,其次是编码解决难题。在我离开之前团队和小伙伴一起聊天,大家反馈最大的成长是”一起成长“。我们一起讨论的过程今日已不能再现,大家用框架的时候也感知不到。一起能把ssr一个相对冷门的概念做成行业里最好用的框架,我想,无论是谁,无论何时都可以拿出来吹牛的。

今天1.3k+个star。10多家公司在用,17个贡献者。从功能特性上讲,比nextjs要强,完美支持csr和ssr。



成果如下。


造概念:将ssr升级为serverless side render


从前端的角度看,它是一个相对小的领域。PC已经非主流,H5想争王者,却不想被 React-native、Weex 中间截胡。无论怎么看,SSR能做的似乎都有限。但是,用户体验提升是永远的追求,另外Web标准化是正统,在用户体验和Web标准之间,又要和 Node.js 做结合,除了SSR,想不到更好的解法。

贴着C端业务,从后端手里接过来PC、H5,通过 Node.js 构建自己的生存之地是必然的选择。活下来之后,就开始有演进、沉淀,通过C端业务和 egg-react-ssr 开源项目的沉淀,我们成功的打通2点。

  • 写法上的统一:CSR和SSR可以共存,继而实现二种模式的无缝切换
  • 容灾降级方案:从Node SSR无缝切换到Node的CSR,做到第一层降级,从Node CSR还可以继续降到CDN的CSR


2019年,另外一个风口是 Serverless,前端把 Serverless 看成是生死之地,下一代研发模式的前端价值证明。那么,在这个背景下,SSR能做什么呢?基于FaaS的SSR如何做呢?继续推演,支持SSR,也可以支持CSR,也就是说基于FaaS的渲染都可以支持的。于是和风驰商量,做了Serverless端侧渲染方向的规划。

本来SSR是Server-side render,演进为Serverless-side render。元彦给了一个非常好概念命名,Caaf,即Component as a fuction。渲染层围绕在以组件为核心,最终统统简化到函数层面。

在今天看,SSR是成功的,一个曾经比较偏冷的点已经慢慢变得主流。



集团中,基于React/Rax的一体化开发,可以满足前端所有开发场景。优酷侧的活动搭建已经升级到Rax 1.0,对外提供SSR服务。在UC里,已经开始要将 egg-react-ssr 迁移到FaaS上,代码已经完成迁移。

  • PC/中后台,使用基于React的CSR和SSR可以满足所有场景。
  • 移动端/H5,基于 Rax 的CSR和SSR可以满足所有场景。尤其是Rax SSR给站外H5提供了非常好的首屏渲染时间优化,对C端或活动支持是尤其有用的。
  • 预计3月底,将实现ssr-spec规范的实现代码开源。


在2020年,基于FaaS之上的渲染已经获得大家的认可。另外大量的Node.js的BFF(Backend for frontend)应用已经到了需要治理的时候,BFF感觉和当年的微服务一样,太多了之后就会牵扯到管理成本,这种情况下Serverless是个中台内敛的极好解决方案。对前端来说,SSR让开发变得简单,基于FaaS又能很好的收敛和治理BFF应用,结合WebIDE,一种极其轻量级基于Serverless的前端研发时代已经来临了。

在D2大会上,《Serverless SSR实践》,参见www.atatech.org/articles/16…,首次提出了端渲染方案,并明确sff前后端分工。



提出Serverless端渲染规范。



集团内作为模板集成到def工作台。



集团外,赋能阿里云的workbench云开发平台。

打开workbench.aliyun.com/云开发平台,并且注册阿里云账号登陆。如之前未使用过该开发平台,首次使用需要创建自己的团队。这时候填写自己的团队名以及选择规模即可。创建应用,方案选择FaaS场景下的SSR框架。



造概念其实也是一种能力,基于自身优势和团队业务,做好团队内技术的规划,既要克制又要开放的做好,还是很难的。很多时候,要勇于尝试,其实我最开始接Serverless端渲染的时候,我连发faas是什么都不知道,只是因为node和ssr比较熟悉。然后经过大量学习,了解Serverless和faas,结合前端现状,继而推到出Serverless架构下前端到底能做什么。然后再去制作ssr规范,并落地。

这个过程是痛苦的,但有团队和各位大佬的指导和支持,咬咬牙就挺过来了。因为我相信:方向对了,就不怕路远。

其实,我转岗到前端智能化团队也是基于这个考虑,去年Serverless端渲染是我扛大旗,而前端智能化甄子老师做的更大,一个更大的未知领域内,带着这么大的团队去探索,这需要多么大的勇气!我尊重并钦佩这样的勇气,我也希望自己能够有魄力。吹牛谁都会,但吹出的牛能落地的,都是了不起的勇士。

从演讲者到出品人


我还记得自己2015年在node party上的分享,头5分钟特别紧张,语速极快,脑子中一片空白,完全不知道自己在讲什么。之后每年都有10场以上的分享,到现在我基本上可以做到,在台上调戏下面的观众,掌握分享的节奏,也能够掌握一些技巧,比如开头讲个段子,把大家注意力吸引过来,然后穿插各种知识点,让听得人都能有或多或少的收获。

到做出品人的时候更难一点,你要考虑的是对这一领域的理解,以及人脉。能够找到合适的人其实更难,本身程序员擅长社交的不多,对我也一样。有了之前写文章,做社区,技术分享等经验,我的社交资源也慢慢积累的多了,每次大会都会很是很多人,和很多曾经很仰慕的人称兄道弟,这也是另外一种成就感吧。

2019年主要分享2场,做了2次出品人。并给gmtc提了一个被采纳的建议,那就是增加管理场,很多中小公司的管理参加大会是想解决一些疑问的,员工其实也有学习管理的诉求。据说这个专场效果很好。

  • d2:《前端新思路:组件即函数和 Serverless SSR 实践》d2forum.alibaba-inc.com/
  • qcon:《C端服务端渲染(SSR)和性能优化实践》 qcon.infoq.cn/2019/guangz…
  • 做了2次gmtc(深圳和北京)出品人,拿了一次优秀出品人。




和腾讯河伯等



d2手绘头像



这一年面基无数,图为 @颜海镜 和侯策 《React状态管理与同构实战》作者



和2美女艺璇,书呆一起吃吃吃。


组织北京Node Party活动


组织好一场活动,比演讲写书更难,需要协调的事儿太多了。靠自己的影响力把人聚起来,自己找资源(讲师、场地、赞助),还要协调topic,制作宣传材料,找志愿者维护现场秩序。甚至,自己还要当主持人。

每一次活动基本都是要自己掏2000以上。嘉宾来了,多少要请吃顿饭吧。但是做这事儿的目的,1)锻炼自己,毕竟搞一场活动还是挺难得,以前不喜欢和人打交道,这就是自己要克服的点。2)社区里需要有人站出来,就好比是精神领袖,虽然没啥用,但要有。这大概是布道者的社会责任吧。















更多图片,参见 cnodejs.org/topic/5e169…

  1. 面向B端工作台的微前端方案-ConsoleOS-徐博文 edu.talkingdata.com/open-class?…
  2. Serverless在美团的实践-龙佳文 edu.talkingdata.com/open-class?…
  3. 前端生态建设在瓜子的落地实践-王东 edu.talkingdata.com/open-class?…
  4. Egg-React-SSR深度解析-张宇昂 edu.talkingdata.com/open-class?…
  5. 如何融入并贡献开源-Justjavac edu.talkingdata.com/open-class?…
  6. 圆桌讨论 edu.talkingdata.com/open-class?…

玩出乐趣:少抱怨,多思考,未来更美好


大部分人体会不到坚持的乐趣,不会玩,所以抱怨多。其实玩出乐趣也是一种能力,尤其是像写代码这种看似无聊的事儿。最开始可能只想赚点钱,后面变成热爱,这样才美好。只要坚持每日精进开心就好了。每个人的一生中都有很多坎,类似于瓶颈,唯有苦难和坚持才能冲破,坚持会产生自信,苦难会创造机会。一个经过苦难还有自信的人,一定会有更美好的未来。

  • 年轻死磕是为了长本事,35岁以前都可以这样做
  • 带团队后,要懂得任务下放,让更多人帮你,别带人越多越累
  • 35岁之后是打牌阶段,技能积累足够用,这时要注重社交,打组合拳才能玩的更好


强调35岁不是我创造的,大部分人都会认为35岁后事情,压力会明显大得多,比如家庭,孩子,房子,车子,票子,甚至是管理,权利,欲望等等。我感受最深的是身体不如从前和记忆力明显下降。但是一个内心强大的人是要能够应变的,能够探索更多领域,并在变化中让自己和团队处于比较好的位置。我特别喜欢蜘蛛侠经典台词:"能力越大,责任越大"。换成狼叔的话,就是”少抱怨,多思考,未来更美好“,与大家共勉。