关于做前端的发展方向

2019-05-31 15:25:56 +08:00
 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 等,其他可以补充。

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

6006 次点击
所在节点    程序员
55 条回复
strugglexiang
2019-05-31 15:28:59 +08:00
知识盲区,迷茫中
lamada
2019-05-31 16:19:59 +08:00
@strugglexiang 多学多想总会有出路
jrtzxh020
2019-05-31 16:21:24 +08:00
同事前端,迷茫中...除了工程化和游戏,估计 80%以上的前端都不会接触到上面的东西。。
connection
2019-05-31 16:23:55 +08:00
你列举的有几个需要的前置知识性太强了。
现在国内的前端大多数在 js 上去发力
参考国外的一些团队做 UED,在用户体验上发力也是一个很好的点。
exonuclease
2019-05-31 16:26:04 +08:00
发展方向不是转后端么(逃
lamada
2019-05-31 16:27:08 +08:00
@jrtzxh020 毕竟是针对某个专业方向,没有一定的经验或者知识基础是做不到的,不是一般的姿势
lamada
2019-05-31 16:30:56 +08:00
@connection 上面我列举的几个点都是根据我做过的一些事情总结出来。确实前置的知识很重要,但我觉得想要在技术上有所突破,仅仅局限在 js 内是不够的。
lamada
2019-05-31 16:33:58 +08:00
@connection 用户体验确实是一个很好的点,但是也需要一定的交互行为、视觉设计的知识做支撑,并具备审美能力,这又是另一个方面可以补充。
lamada
2019-05-31 16:34:30 +08:00
@exonuclease 万事不绝转后端(滑稽
galikeoy
2019-05-31 16:47:07 +08:00
@lamada #9 我偏要转后端
strugglexiang
2019-05-31 16:47:34 +08:00
拜师。咚咚咚
lamada
2019-05-31 17:19:26 +08:00
为什么收藏的比讨论的少,还是希望大家多发表一些意见,我想,或许对一些想入前端,或者正处在迷茫期的前端有一点帮助
lamada
2019-05-31 17:20:15 +08:00
@strugglexiang 实践出真知,加油
johnnyNg
2019-05-31 17:20:18 +08:00
说的很好了,目前是对图像处理感兴趣,不知道工作机会怎么样,目前在公司是做了一个类似于 lightroom 的图片处理项目,但是不知道出去了能不能找到类似的工作
lamada
2019-05-31 17:26:49 +08:00
@johnnyNg 嗯,在线图片处理确实是一个方面,比较主流的方面可能做一些数据可视化多一些,还有可能基于地理位置的一些项目,像地图应用啊这种。当然做游戏、做活动项目也都会有这方面的需求,但不是主攻方向。
如果对 webgl、opengl 比较熟悉,又掌握图像处理和前端的一些技能,只要够扎实,以我的经验还是很有竞争力的。
因为我不是做这一块,了解的并不多。后面有了解的可以补充一下。
red2dog
2019-05-31 18:13:18 +08:00
你说的很对。6 我觉得应该不远了。
lamada
2019-05-31 18:20:34 +08:00
@red2dog 渲染肯定不是问题,主要还是带宽, 成本,通信这方面的问题,还有一些离线或者弱网的场景,另外就是终端职责的划分,以及如何去处理交互问题。游戏在这方面应该是走的最快的。
能想到的暂时这么多。
lamada
2019-05-31 18:26:07 +08:00
说点实在的,在前端,如果有点想法,在上面一个或者多个点努力一下,目前 20 起步没问题的。大佬请无视
xrr2016
2019-05-31 18:33:56 +08:00
说的挺好的,赞一个,补充文本编辑,可视化页面搭建也是可以深入的方面
yuanfnadi
2019-05-31 18:42:30 +08:00
https://github.com/umijs/vscode-extension-umi-pro

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

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/569489

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX