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


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

![let a bit of everything](https://s2.loli.net/2023/01/19/XQdNB3FrbgqKtPj.jpg)

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

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

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

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

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

目录：

- [软件工程师](#软件工程师)
- [如何开始](#如何开始)
  - [进一步掌握JS框架的上下游运作](#进一步掌握js框架的上下游运作)
  - [node.js等“服务端”语言](#nodejs等服务端语言)
  - [理解CI/CD工作流](#理解cicd工作流)
  - [shell脚本](#shell脚本)
  - [多端开发能力](#多端开发能力)
  - [Headless CMS等方便易用的CMS服务](#headless-cms等方便易用的cms服务)
  - [Canvas、SVG、WebGL、Web Audio等可以深入的领域](#canvassvgwebglweb-audio等可以深入的领域)
  - [package开发](#package开发)
- [总结](#总结)

## 软件工程师

"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”，听起来很像全栈开发，但出发点还是不太一样的。


LWDW!