LWDW!

Learn the work from doing the work🍺

关于前端工程师进阶的一点猜想,不一定对
Posted on 2023-01-27

在入行了一段时间之后,俺一直有一个迷思:一个熟练的初中级开发者,该如何进阶?我们的选择似乎如此之多,好像什么都能学一点,但又很难自信的说,今日所学将来会派上用场。

let a bit of everything

假设我是一位前端工程师,学会HTML/CSS/JS三件套便可说是初出茅庐,掌握React/Vue等流行技术栈,那就是一个熟练的需求解决小工。再学习一下移动端的适配,CSS/JS动画等常见需求,web开发似乎已经被我拿下!

毕竟在岗位的明确分工指导下,我拿着设计的稿子实现UI,调用着后端提供的接口,由QA保证质量,通过运维搭建的成熟CI/CD工具发版上线,实现策划的需求,一切都是井井有条。

此时我已经是一名所谓的前端工程师,但如果脱离已有项目,脱离这套成熟的工作流,咱似乎什么也完不成;如果让我去启动一个新的项目,俺甚至不知道该从何开始。

但那些有着Senior以及更高的头衔的人,在合适的时候给予我们指导,他们是怎么做到的!该去熟读Vue的源码,然后写一个我自己的JS类库么?

当然可以,但如果你不是非常的坚定,我最近有了一点猜想:即——说到底,我们应该成为软件工程师

软件工程师

"We Deliver Software"——yi zhou.

从前端工程师变为软件工程师,这其中的变化是什么?

前端工程师意味着,我在一个系统中工作,为我的上下游保证前端层的产物。

而软件工程师意味着,我开发并提供软件。这显然是一个相当广义的概念。

这个title的变化,意味着边界的变化。

如何开始

难道该去学数据库、学习后端开发?如果一切都要从零开始,显然是困难重重,也很难取得令自己满意的成果。事实上,我们完全可以立足最基本的前端技能,来向外逐步拓展。以下仅是一些可供参考的方面:

进一步掌握JS框架的上下游运作

对于React、Vue等目前最为常见的JS框架,它们显然都不是独立工作的。Vite、Webpack、babel、eslint等在开发编译打包等各环节使用的常见工具,保证了项目开发的正常体验——换句话来说,在实际的工作中,很多奇奇怪怪的错误,或者代码检查的错误都来源于此。

node.js等“服务端”语言

服务端很容易让人觉得,它就是云端或者机房的东西。但仔细想想,只要不是运行在客户端的,就可以说是“服务端”,在开发时,服务端很可能就是开发者本人的电脑。接触客户端(比如浏览器)以外的宿主环境是一个必经的步骤。比如下面说的CI/CD工作流就可以说是在“服务端”发生的事情,又比如服务端渲染(SSR)也是前端必须需要掌握的技术。

理解CI/CD工作流

我以前以为CI/CD应该就是DevOps负责的,但现在俺发现,每个项目都是不同的,显然运维不会跟着项目的屁股跑。一个项目到底要怎么部署,环境变量怎么配,服务的启动步骤是什么,是直接运行在机器上,还是部署在docker等容器上,等等这些都是开发者要去考虑的。可以从一些常见的自动化工具入手,比如Github Actions,比如Jenkins。

shell脚本

在应用本身的世界里,我们接触的还是JS、Java等强大的编程语言;但是在机器上运行各种应用的时候,shell脚本串联起了一切,可以说它是实现自动化的基础。无论是看发布日志还是写一个快速squash commit的小工具,shell都是绕不开的话题。

多端开发能力

既然已经有了web开发能力,掌握更多的端开发技能,显然是有用的。移动端app、微信/字节等小程序,它们有各自的特点,如离线支持、机器能力调用(GPS、音频、视频)、程序能力调用(支付、唤起)、交互方式(手势交互)等,这些是web开发中不一定能碰到的,其思路却又能互相影响。从另一个角度看,在用户或产品经理的眼里,应用就是应用,但作为软件开发,都理应能够根据ta们的期望场景分析出最合适的技术选型。

Headless CMS等方便易用的CMS服务

CMS咱应该不陌生,我之所以要提到headless CMS,是因为市面上已经有很多开源/免费的Headless CMS项目,比如Strapi、Notion,可以让前端快速部署一个常见的CRUD服务,提供内容管理的图形化界面,并暴露接口,这就让我们有了很多的可能,用极少的成本完成整套服务链路的开发。

Canvas、SVG、WebGL、Web Audio等可以深入的领域

浏览器能力是很强的,canvas:绘图,WebGL:3D,Web Audio:音频,这几样API都提供了非常深入的能力,但同时,在大多数的场景中,ta们的使用都不会很深度(Canvas和SVG还算比较常见)。相对的,如果在其中一样上有很深入的钻研,在特定重视这些fancy互动的项目上,就会有很强的话语权。

package开发

以我们最熟悉的npm package为例,所有的工程师都用过大量的package,也就是“轮子”。开发轮子应该也是工程师必然会动的一个脑筋,而其中需要考虑的方面自然也是与交付前端产品有很大区别的。比如在开发中如何调试,我的轮子是运行在客户端还是服务端,项目依赖是自己引入还是要求宿主安装,需要发布那些文件,要以什么方式进行打包。

总结

过去常常会觉得,这个归运维,那个归后端,不是咱不想学,而是学个皮毛,也无用武之地。但本文想说明的就是,一个小前端也是有许多可入手的点,去逐步拓宽能力的边界。成为软件工程师,即不止步于职责边界,想方设法的去“Deliver Software”,听起来很像全栈开发,但出发点还是不太一样的。