关于做前端的发展方向

[lamada]

做前端也有时间了，或多或少迷茫在重复的页面搭建之中，那么在前端方面，除了做做网页，还有哪些进阶的方面可以发展，这里想和大家探讨一下。

先申明，这里的前端指的是常用 html、css 和 js 的开发人员，android、ios、uwp 等其他不包含在内，当然中间会有相通的地方也可以一起讨论。我根据自己的经验和知识先写几个，不做深入、可能有谬误的地方：

1. 工程化 这个可能是比较容易造轮子的方面，我理解工程化的目的是提升开发效率、降低维护成本和及提供自测、监控及排查错误的能力，让开发人员能够从重复、繁重的劳动中解放出来。目前在各个环节或多或少都有一些较为成熟的解决方案，然而还是有很多可以挖掘的地方。

2. 图像处理 首先是 opengl、webgl 的基础知识，建模和顶点的优化一般通过三方软件完成，需要一点基础的数学知识、如矩阵、向量、归一化的概念，理解投影矩阵、变换矩阵等原理，接着是后处理，如滤镜、识别。滤镜就是 glsl 的算法问题，关于 vertex 和 fragment 的操作，首先是顶点变换，其次是颜色处理，这其中要了解关于色彩、色域的基本知识、rgb、hsl 的应用与转换，接着可以做一些基本的 PS 图形操作，如变亮、变暗、增强对比度，这也会帮助你理解 ps 中曲线的意义。最后就是磨各种算法了...图像识别可以需要了解一些轮廓算法、聚类算法等，这个就比较专业化... 当然处理图像你不一定真的需要 webgl，css 也提供了很多 api 可以给你使用，如 mask、blend mode、filter 等，组合使用你可以获得许多意想不到的想过。 当然我个人觉得你用 canvas 2d 去实现一些 css 或者 webgl 很方面的效果能够更加加深你对这方面的理解，举个很简单的例子，用 canvas 2d 实现 css 中的 border 和 border-radius。 只有你对这些理解深刻了，你才能在项目性能遇到瓶颈的时候找到根结和优化的方法所在。 会图像处理就可以玩很多啦，譬如在 b 站你可以给视频加奇怪的效果，如果 b 站愿意存储你写的特效代码，cdn 只需要同一份视频源，就可以变出更多的视频来。

3. 语音处理 与图像处理是通用的，数学、线代是基础，然后是通信方面的知识，至少要知道频域、时域及滤波器的概念，然后就可以通过算法针对性地对声音做处理。应用方向很多啦，可以是声音的合成、实时声音的美化，如降噪、变声等，其实就是对振幅、频率的变换。也可以做语音识别。至少自己写一个在线谱曲（当然如果你有 nb 的音源）或者后处理的软件。

4. 视频处理 视频处理的后处理可以看作图像处理和语音处理的结合，除此之外就是视频的编码、解码，参照 ffmpeg。在对这些有一定的基础了解之后，就能理解 media source api 中的 source、decoder、destination 等含义，知道在哪里可以实现你的需求，本质上流程不会有太大的差别。

5. webassembly 这方面比较宽泛，难以概述，你都可以在里面跑操作系统了，理论上你可以做任何事。当然现在比较应用多的场景还是针对一些有性能要求的场景，如物理引擎、加密解密、二维码识别等。webassembly 只是一个工具，在你专业领域内的任何实现都可以通过它在 web 上找到桥接的路径。

6. 服务端 这方面做的不多，我的理解目前主要是通过 nodejs 去实现一些中间层以及服务端渲染，做一些比较轻量化的解决方案，重头部分可能还得和其他语言的解决方案做结合。说到服务端渲染，目前还是输出 html 的形式，未来的一条路径是离线“真”渲染，在 5G、6G 可能的后时代，网页、视频、3D 的渲染全部在服务端完成，前端只是提交交互的行为，与服务端的通信主要是图形数据，就像看视频一样，当然这个比较遥远，到时候甚至可能会有专门的语言去做这个事情。

7. 客户端 这里的客户端范围比较广泛，不仅指 pc、包括手机系统如安卓、ios，还有智能眼镜、语音助手、贩卖机（ yes 我做过）等各种可能的终端系统。这里面有几个点，第一个是硬件的通信、底层的部分可能是通过 c 实现，js 更多做的还是交互、逻辑和数据的处理。第二个是运行环境，在终端上必须有能够执行 js 的环境，如何通过不同的终端能够编译、部署、执行，找到一种通用的跨多端的解决方案。

8. 游戏 这部分其实结合了上面将的几个点，而且现在一些主流的游戏引擎如 unity 等都有直接导出 html5 的方案，但是如果真要从 js 入手，从零开始手撸一个引擎，那可能要先了解譬如 sprite、scene、stage、camera、world 等通用概念，然后是考虑用 mvc，还是 ecs 架构。这方面可以先从一个流行的游戏编辑器入手，你可以从 unity 借鉴、也可以从魔兽编辑器借鉴。话说魔兽编辑器虽然是上古时代的东西，但是真的很有一些借鉴意义。关于游戏要说的太多，这方面专业的游戏从业者应该可以给到更多的借鉴意义。

9. 其他 webrtc 等，其他可以补充。

以上都是一些概览的概览，仔细看下，其实瓶颈都不在前端，而在于其他方面的专业知识。所以在前端在技术方面有更多的技术，还是要多看、多学习，特别是其他行业和专业的知识。可能你觉得在大学或者大专学习的一些不起眼的技术在前端方面别有一番天地呢？

补充一下。这里所描述的几点都是针对某个专业领域处理的方向，如果想要做的是针对某个问题所产出的一套解决方案，很多时候仅仅靠前端是无法做成的。这就需要我们前端工程师拥有多种的能力。当出现迷茫的时候，不妨想一下，我要解决什么问题，我需要哪些能力，哪些是通过前端能解决的。

举个例子，我要做一个视觉稿自动导出代码的功能，前端可以做哪些事情，那可能有以下几个步骤：

1. 制定设计规范（这个比较考验个人的从业经验，在平时项目中要多和设计师交流，扩展自己的知识）
2. 从设计师那里拿到 sketch 设计稿
3. 根据设计规范，编写 sketch 插件（ object-c & js 方面的知识）
4. 拿到一个树形结构生成代码（考验工程能力 及 ast 语法解析）
5. 本地保存代码（ nodejs fs api ）

评论提到的，即使技术上难度突破比较大，也可以从用户体验入口。
关于这个点，如果能够去系统的了解一些用户交互行为、用户心理以及设计方面的知识是最好不过，其次可以学习一些美学理论、参加一些美术展览或者通过画画的方式来提升自己的审美。
最最简单的，看电视、看电影、看番剧有好的表现方式可以记录下来，不管是提给设计师还是自己实现都可以。
说到番剧，我觉得很多番剧的片头都可以借鉴拿来做一些效果，并且如果你有更大的兴趣，你可以研究分镜的制作，镜头的运用等，这些都会有很大的帮助，这里不做展开。
不把自己局限于码农的位置，而是要做一个有“高级趣味的” creative designer ！

打了一些错字，但不影响阅读，大家见谅

前面也有一些评论提到过，我引用一下 45 的评论:

目前前端吃香的还是如何顺滑的把业务 run 起来，比如成套的工程化和基础设施，包括构建 /埋点 /错误监控 /基础库，可视化搭建，多端统一，这些实打实的解放生产力的东西，配合扎实的基础知识，这些足够你到 p7 或者出去做 leader 了

[strugglexiang]

知识盲区，迷茫中

[lamada]

@strugglexiang 多学多想总会有出路

[jrtzxh020]

同事前端，迷茫中...除了工程化和游戏，估计 80%以上的前端都不会接触到上面的东西。。

[connection]

你列举的有几个需要的前置知识性太强了。
现在国内的前端大多数在 js 上去发力
参考国外的一些团队做 UED，在用户体验上发力也是一个很好的点。

[exonuclease]

发展方向不是转后端么（逃

[lamada]

@jrtzxh020 毕竟是针对某个专业方向，没有一定的经验或者知识基础是做不到的，不是一般的姿势

[lamada]

@connection 上面我列举的几个点都是根据我做过的一些事情总结出来。确实前置的知识很重要，但我觉得想要在技术上有所突破，仅仅局限在 js 内是不够的。

[lamada]

@connection 用户体验确实是一个很好的点，但是也需要一定的交互行为、视觉设计的知识做支撑，并具备审美能力，这又是另一个方面可以补充。

[lamada]

@exonuclease 万事不绝转后端（滑稽

[galikeoy]

@lamada #9 我偏要转后端

[strugglexiang]

拜师。咚咚咚

[lamada]

为什么收藏的比讨论的少，还是希望大家多发表一些意见，我想，或许对一些想入前端，或者正处在迷茫期的前端有一点帮助

[lamada]

@strugglexiang 实践出真知，加油

[johnnyNg]

说的很好了，目前是对图像处理感兴趣，不知道工作机会怎么样，目前在公司是做了一个类似于 lightroom 的图片处理项目，但是不知道出去了能不能找到类似的工作

[lamada]

@johnnyNg 嗯，在线图片处理确实是一个方面，比较主流的方面可能做一些数据可视化多一些，还有可能基于地理位置的一些项目，像地图应用啊这种。当然做游戏、做活动项目也都会有这方面的需求，但不是主攻方向。
如果对 webgl、opengl 比较熟悉，又掌握图像处理和前端的一些技能，只要够扎实，以我的经验还是很有竞争力的。
因为我不是做这一块，了解的并不多。后面有了解的可以补充一下。

[red2dog]

你说的很对。6 我觉得应该不远了。

[lamada]

@red2dog 渲染肯定不是问题，主要还是带宽, 成本，通信这方面的问题，还有一些离线或者弱网的场景，另外就是终端职责的划分，以及如何去处理交互问题。游戏在这方面应该是走的最快的。
能想到的暂时这么多。

[lamada]

说点实在的，在前端，如果有点想法，在上面一个或者多个点努力一下，目前 20 起步没问题的。大佬请无视

[xrr2016]

说的挺好的，赞一个，补充文本编辑，可视化页面搭建也是可以深入的方面

[yuanfnadi]

https://github.com/umijs/vscode-extension-umi-pro

推荐我写的 vs code 插件，让 dva 也能拥有代码提示和引用查询。

我觉得好的 IDE 插件真的可以提高开发效率。

[jandou]

以钱为导向，所以很多人转后端。

[lamada]

@jandou 能够理解

[lamada]

@xrr2016 是的，可视化搭建也是一个方向，就我目前所了解的主流方向，一个是中后台搭建，另一个是建站和博客系统，还有就是模式比较固定的业务，比较容易有沉淀。

[lamada]

@yuanfnadi 好的，稍后看一下。最近我也在做一些这方面的事情，主要是基于特定架构配合 ast 分析，将代码中的流程用可视化的形式表现，并且是可逆的。
感觉开发插件还是挺有意思的，就是有一些文档不全，全靠 so，还是说一句 vsc 大法好

[lamada]

@xrr2016 我还是很佩服做富文本编辑器的。word excel 之流好像也是基于 xml 格式。

[lamada]

@xrr2016 但是我对可视化搭建还有一点顾虑，这里首先说明一下是页面，而不是游戏等其他的可视化。因为可视化搭建的行为主要还是拼接，有两个方向可以跳过这个步骤，一个是设计图直出代码，另一个就是深度学习自建页面。

[tnacg]

后期很多人转后端吗？感觉后端也是 crud 工作比较多，很枯燥

[lamada]

@tnacg 我觉得能做多少事还是取决于知识的深度和广度。可能调页面，改视觉会劝退一些人，宁可专注于逻辑本身。另外也要看大环境吧。

[kev1nzh]

我来说下我的看法吧，目前 3 4 年经验的前端。

其实对于 lz 讲的东西自己也有大体想过。

1. 可视化，其实可视化未来需求肯定很大，越来越多的企业都在走可视化。但是个人感觉现在学就是很亏。
2. server，现在 server 深入的比较多，其实适合 node 的话就是中间层，基本很少会全面铺 node，js 这个你懂的，除非上 ts。其实现在这个时间，前端开发者基本都能碰到点 server 端的东西，这个算是必学。
3. 大前端，老哥说的贩卖机哈哈哈，我也写过类似的，比如 pos 机，最近出现很多大前端的框架，js 哪都能写！
4. Wsm 这个很强，之前看到 ebuy 的一篇关于运用这个来开发 pos 扫码的一个项目，其实也是未来大趋势，我个人觉得会深入的。

目前我还在以大前端的方向发展，但是总觉得走错了路，只能看一步走一步。对于前端方向发展其实也关系到了现在入职的公司，手上的项目等等，还希望有大佬来提提意见。

[lamada]

@kev1nzh 哈哈，握个爪，确实关系到入职的公司。想在一个地方单打独斗有所建树是比较难的，最好有对口的项目和靠谱的队友才能相互帮助，快速成长。

[orzorzorzorz]

语音处理跟图形处理是个很消磨时间的方向，就是短时间做不出什么像样的成果，没太大成就感
换个角度，研究这俩的到后期基本都不纠结前后端了，也就是神仙方向。但现在的前端其实还没到那个层次，往后这些年，干的事大致还是把后端的概念给搬过来，减少前端内部以及跟后端的摩擦——前端重点还是在省事，以及不加班
有七学八学还想着学精的心，不如往底层学，还能学一辈子

[yifeng1212]

同…最近也在思考类似问题，来听听大家意见

[dtysky]

感觉 LZ 很多自己都不懂吧…… CG 和 CV 是完全逆向的两个领域被你归到了一类，至于 WASM 你真正用过就知道它在可预计的时间内能力还是很局限的，至于什么工程化个人感觉已经是一个被解决的问题了，而游戏什么 mvcecs 估计也是人云亦云吧……

说的有点直，只能说贪多嚼不烂，找一个领域搞懂做好就很不容易了

[lamada]

@orzorzorzorz 个人可以根据自己的兴趣和能力选择自己合适的方向

[lamada]

@dtysky 感谢，确实我在这些领域也还是在摸索和学习的过程中，如果你对某个方面很熟悉，能指正其中的一些谬误，那是非常感谢。我写的目的也不是说让大家都去学，而是给大家一些选择，然后根据自己的能力和情况做决定。至于你讲的其中一些观点，我觉得个人可以根据自己的实践来体会

[tnacg]

@lamada 现在高级的前端都在写轮子和工程化吗？我还刚入前端，不知如何是好

[005008]

你这个帖子可以回答之前有个童鞋问前端要不要读研

[lamada]

@tnacg 我觉得刚入行可以把重心放在打基础，其次可以多总结自己所做的项目，看看自己是怎么做的，别人是怎么做的，哪些地方可以做的更好。个人的成长离不开实践，多做项目，多思考。

[lamada]

欢迎各种吐槽，讨论或者批评。希望对大家，对我自己都有帮助。

[attackonFourier]

我已经转后台了。。。 虽然 lz 说的点确实是一方面或者说趋势 如果不在一线城市 能选择的工作还是太少了

[lamada]

@attackonFourier 是的，这个因素也不可忽视

[ZY2071]

@yuanfnadi umi 是 umi dva 是 dva

[tnacg]

@lamada 我是后端转前端的，看到上面都在说转后端，有点不知所措

[yuanfnadi]

@ZY2071 同时支持 umi 和 dva。在兼容 dva 的情况下为 umi 添加了一些专属功能。

[jin5354]

什么音视频，wasm，图形学，webgl 目前落地场景极少，之前做了些 webgl 深度调优的东西，出去面试没几个面试官能听懂，对应业务也少，大厂估计只有 echarts 和 antv 团队要人，还有一些给不起钱的 3d 小厂，路越走越窄；目前前端吃香的还是如何顺滑的把业务 run 起来，比如成套的工程化和基础设施，包括构建 /埋点 /错误监控 /基础库，可视化搭建，多端统一，这些实打实的解放生产力的东西，配合扎实的基础知识，这些足够你到 p7 或者出去做 leader 了，那些研究类的方向可以自己业务玩玩，等待某个爆发点再上船，比如 webVR

[lamada]

@jin5354 你说的有一定道理，确实从目前大环境来看工程化和基建是最重要的，也是最实在的，所以我把工程化放在第一个。

至于只有 echarts 和 antv 团队要人这个我是不苟同的，机会还是有的，webgl 其实在大厂也算是很常见的落地项目，至于前三者专职可能比较少，更多的是用来解决业务中的一些问题。

当然我写这么多肯定不想把大家往坑里走，一个想走也是要花大力气的，另一个还是要跟着自己的兴趣来。

大厂的优势在于它的基建非常完善，基本覆盖了所有常用的需求，而小厂在这方面比较欠缺，也容易落地一些项目。但凡做到这个阶段的，我觉得技术肯定是过关的，更多需要的是业务上的思考。

[lamada]

@jin5354 虽然前半段我不苟同，后半段我十分赞同，也是目前前端主攻的方向。

[lamada]

@jin5354 你说的比较完整，我引用一下 append 上去

[lamada]

有一点我觉得可以说明一下，我写图形写视频并不是真的说投入这个领域一定要产出某个牛逼的算法，那是不对的。譬如了解图像处理，它可以帮助你更好的理解渲染原理，对你编写样式表也会有帮助，如你会知道为什么 transform 中各个变换的顺序不同，效果也不同。另外它在某些场景下可以为你的业务服务，你完全可以用别人现有的解决方案和算法去实现自己需要的效果。
工作上，业务是首要，具备这些能力会使你解决能力的手段也多样化。

[jin5354]

webgl 有啊，性价比比较一般，我之前一直做可视化，考虑过走 3d 这条路，出来看机会发现专职 webgl 的是某些厂无人机 /自动驾驶部门和一些数据部门（帮忙画知识图谱啥的），一般都不是直接来钱的部门，论绩效，工资，升级速度，业务前景，更换工作灵活性都不如去核心业务部门做 general 开发。

有兴趣且家里有矿想学啥学啥。但对于平凡人考虑职业生涯，当前阶段还是选 general 开发好一点。不过为了增强自己的竞争力，最好是能选一个方向先自己沉淀着，以便机会到来时及时上船。

[SuperManNoPain]

感觉前端还是挺好找工作，工资也挺高的啊，

[moocean]

前端好累哦，做了大概 8 个月了，萌新菜鸟，公司处理数据的，要在 web 处理 sql，让我扩展 monaco editor 头大，提示，报错，看的 vscode 代码毫无办法，好累哦，这样的，要你 3 周项目做完，累

[lamada]

@jin5354 嗯，你的经验可以给大家一些参考，感谢

[lamada]

@SuperManNoPain 我的感受是入门比较容易，搞业务也能有比较快的成长空间，如果是技术的话，还是需要沉淀，很容易有瓶颈

[lamada]

@moocean 哈光听你描述就感受到了