做前端真累：写给其他职能看的前端述职 (吐槽)

[revalue]

年终总结又到了，一年里什么都没做，都在和恶心的逻辑撕咬搏杀，如此也没有什么技术提升。拖延症无心应对年终总结。回想过往，想出了这篇东西。打工人总结 2 个字就是“心累”。那么前端累在哪里呢，让我们带着轻松愉快的心情，一起来回顾一下：

1 逻辑不正交。数据和样式布局必须在页面上通过耦合以实现。我不是单说 css ，而 js 你也负有责任。web 页面的排版布局的本质就是遵照依靠耦合关系，牵一发则动全身。(所以目前被广泛使用的布局排版套路都是很简单的，比如 flex 一把梭，套多一层元素绝对定位一把梭)。其次，css 的逻辑也不是基于正交的法则的，调节样式需要综合几个样式的知识和特性，调个居中需要磨半天。

2 整合数据流逻辑恶心。分别从 A 、B 、C 等各处接口大乱斗大杂烩取到数据，格式各异千奇百怪是常态，一顿数据格式处理，糅合。(有数据格式洁癖的不要做前端。)格式基本上都是后端定义，各个后端格式不一致或者格式不好用，都到前端这里整合。前端 app 代码里面数据流乱如麻，字段的有无也是乱如麻，页面效果还要保持洁净，能做前端的都是些什么神仙。数据到达的时间也是要有讲究做处理的，不然数据没法用。开发一些大型应用，整合数据、数据流恶心是难以避免的。

3 大型应用的联动功能。一个地方的数据变了，其他地方联动显示数据。虽然说花多点时间是绝对没有技术难度实现的，但是就是恶心费时间啊。我滴妈呀。多组件数据联动。带 checkbox 的树形图父子联动。带 checkbox 的多选的树形图联动，外加根据业务逻辑联动勾选，外加重写为懒加载的勾选联动，还有些这个表格项展开里面也需要联动的。乱如麻。麻了麻了。

4 难封装，自暴自弃，没什么领域积累。封装通常是程序员的基本素质嘛。而实际上前端很多东西是不如后端和数据库规规整整，想封装其实是封装不了的，甚至被封装反噬。这才是真正的“代码分布式”啊：代码到处分布。改一个需求不就搜索字段改半天了嘛。封装东西，需要处理的不单指是数据，而是数据样式的混合体。很多工作量是没有办法通过封装绕过去的。前端是最末端，业务逻辑没法封装啊，都被外界打破封装的可能性，没封装的话自己搜代码一个个改呗。


5 页面逻辑难以文档描述，对项目可维护度造成威胁。看前端“吹了这么久页面集成单元测试，而没有几家是实际做成的”，就知道了，这种东西耗费大量人力物力，收益很浅。页面逻辑难以文档描述，接手一个代码，理解起来特别困难，页面逻辑放飞自我。单元测试，可欲不可求。心中敬仰的永远是不可逾越的屎山。

6 业界没什么进步和积累沉淀。不断重复历史，没意思。某些厂拿出所谓的“积累沉淀”出来开源，笑死，都是自用的来强硬开源，不推广怎么有 kpi 呢，心知肚明轮子只够用那两三年，抓住时间机会晋升，实用性的确是呵呵。更新换代一次又重复一次历史。

7 兼容性问题。略。够你玩半天了。其实这也是大头。

8 多端多能。各个客户端开发职能归于前端范畴，还要保持各端样式一致性。各大公司开发自己的样式组件库，vue2 来一套，vue3 来一套，react 来一套，别提多恶心了，但是无可避免。这不得组个大团队？不断重复历史，没意思，请问一大群人搞这一两年有啥进步吗。多端开发其实每个都够一个人十年研究吃一壶的，很不幸过 5 年你这个端会不会被时代抛弃都是未知定论。这也导致了没什么领域积累：当你开发一个东西解决某个业务问题，人家开发框架的窜得比你还勤快，赶紧适配人家的框架吧，star 数正在往下掉了。


前端能吃到的甜头：

语法新特性是一马当先快速推广的。有编译器在，语法飞速更新换代。

启动代码应用编译调试起来，是相对比运行起来较快的。

git 代码协作相对于其他职能还是比较和谐的。

和前端妹纸四手联弹，指点江山，不错不错。

[zuosiruan]

我只知道我们后端从不加班，后端嘛，加成狗🐶

[zuosiruan]

@zuosiruan 前端加成狗

[iamv2er]

我见过两家公司 vue 写了的，居然要用 react 重写。当时想，是没事干了硬给自己创造需求吗？

[snoopyhai]

目前感觉还好。

ie6 时代的兼容性是个麻烦事，为了向后兼容，约定不用 csshack 更是难上加难。
习惯了 jquery 后，么有 jquery 的时候寸步难行。

后来有了 vue ，情况好转。
但维护 css 真的是泥马。。。直到 tailwindcss 出现。

再后来，放弃了 vue(cli)，切换到了 nuxt.js ，彻底放下了框架逻辑，专注业务逻辑。

目前 nuxt.js+tailwind.css 轻松加愉快。

[scyuns]

哎 ，都卷。 后端也卷！理想中的 8 小时 ，一年多了。一次没有享受个！

[murmur]

@iamv2er 以前是业务井喷，后面是业务存量，现在是业务减量，不创造需求等着被优化么

[yl20181003]

看楼下后端同学怎么说 😐

[zqx]

前端写页面不划水做个两三年，基本就到头了，只剩重复劳动赶紧堆完页面摸鱼领工资了。再深的就不属于前端范畴了，比如那些写 babel 的，设计 Web 字体的，写开发框架的，最近关注了字节京东的技术号，也是写轮子一套一套的，但都是 KPI ，没有新东西

[tousfun]

校招前端选手已经想放弃前端了

[kop1989]

我个人倒是有觉悟：和交互相关的开发工作（前端、移动端、桌面端等等）一定会繁琐且复杂。

后端是面向数据编程，唯一的核心目标就是将数据处理成想要的呈现形式。数据是一定的，不会因为环境等原因导致不可预知的差异（已知差异可以通过逻辑转换）

而前端面临的是千奇百怪的呈现设备与使用环境。

1 、UI 交互逻辑与数据操作逻辑耦合度高。（楼主的 1 、2 、3 、4 、5 ）

2 、开发负担了过重的 UI 设计、呈现工作（楼主的 4 、5 、7 ）（这各问题目前正在改善，比如大厂往往会开发团队反向输出给 UI 团队设计工具，用于自动化生成 UI 相关代码，但开发人力紧张的中小企业暂时还没有这种能力。）

3 、前端的实现方式一直在根据当前的互联网形态与公司形态巨变。（楼主的 6 ）

4 、前端开发的生产资料占有率相对低，所以企业不愿意投入过度的人力成本。

以上的问题就会导致前端相关工作内容变化快、逻辑难梳理、耦合度高。

[zuosiruan]

@919615766 后端吧 就我见过的前后端来说，后端平均比前端加班要少太多

[yaphets666]

前端就是给 0 基础转行用的一个领域。入行后要尽快转行，不要留恋。

[a4854857]

页面逻辑难以文档描述
最近补文档.有点体会.

[SuperMild]

后端会分工为运维、安全、数据库…等等，如果后端一个人要负责多个领域也很难搞

[3dwelcome]

css 分 flex 前时代和 flex 后时代，不用 display:flex 调个垂直居中，那真是各种 hack ，心力交瘁。

前端最大的问题，应该不是如何把功能实现出来，而是复杂应用中，如何把日益膨胀的代码库给维护好。

如果不借鉴一些别的语言架构，那只有不断的实践-》推倒重构。

[3dwelcome]

@iamv2er
“我见过两家公司 vue 写了的，居然要用 react 重写。当时想，是没事干了硬给自己创造需求吗？”

VUE 设计再方便，想找好工作还是要学 React ，都已经达成业内共识了。

没办法，这个前端世界，就是这个游戏规则。

[ALVC666]

css 的代码维护现在的确还没有银弹

[murmur]

@3dwelcome 为啥不学 flutter ，国内桌面端都是被放弃了，微信端一水的 vue 语法，移动端在卷 flutter ，学 react 是什么需求呢

[xingguang]

对第四条深有感触，之前一个组件封装好了，但是 UI 有略微的改动，然后就重新 CV 了一份，然后慢慢的好多逻辑一样但是 UI 略有变化，就导致了同样逻辑但是 UI 不太一样的代码 CV 了好多份

[otakustay]

@iamv2er #3 业务有空间让你重写就是没事干了啊，要不下次没事干的时候爽快点直接裁掉一半人？

[fiypig]

我不知道是哪类前端，我写过后端以后在写前端，感觉简单多，只要给我蓝湖，基本上都好处理

[lizhesystem]

后端更接近业务的实现，对业务的整体把控比前端更全面，技术是服务业务的，学好业务我觉得更重要，特别是中小公司，后端发展的慢，积累，踩坑等一些技术的生命周期更久。

我司根本没前端部门，领导都是后端出身，前端都是一些后端学几天 VUE 拉过来开始做，导致写出来的项目可想而知😓，唉 一言难尽。。。

没办法，打不过就加入他们吧。。

[3dwelcome]

@murmur

前端又不只开发移动端 APP ，flutter 做 web 目前还非常不完善。

自渲染早在 flash 时代就火过一次，可还是打不过浏览器的原生组件。

ReactNative 和 flutter ，谁能笑到最后，还不知道呢。

[murmur]

@3dwelcome 我也是 rn 的粉丝，我也坚信语言复用不造语言轮子才是正道，无奈 rn 版本至今还是 0.x ，我也知道版本号战争没意义，但是的确人家这么说戳心窝

[JudyHal]

最关键是前端很复杂，但是却深受歧视，得不到应有的尊重，在国外 TechLead 大部分都是前端，国外的后端基本都是数据库操作而已，业务逻辑什么的都在前端。所以用户体验非常好。

[revalue]

>"国外的后端基本都是数据库操作而已“

@JudyHal 这话说得也不太对。其实后端的集成化和沉淀还没有发展到这个地步

[DOLLOR]

前端基本就是程序员鄙视链的最底层，外行眼里是娱乐圈，内行眼里是疯狂卷。

[DOLLOR]

@DOLLOR 每当有人跟我说想转前端的时候，我就跟他说，你要做好成为同行鄙视链最底层的心理准备。

[cmdOptionKana]

换个角度，前端曾经被鄙视为切图仔，现在地位已经提高了很多，后端曾经也经历过忙乱的阶段，现在后端的大量业务被移到前端，前端虽然累但是生机勃勃，后端虽然变轻松但也逐渐被鄙视为 crud boy 。

[P233]

@3dwelcome

"前端最大的问题，应该不是如何把功能实现出来，而是复杂应用中，如何把日益膨胀的代码库给维护好。"

就是这样！

[Mirage09]

@JudyHal
当你的言论蠢得恰到好处，以至于不确定你是认真还是反串.jpg

别的不说，求求你在发表高论之前先去见见世面好不好

[lizhesystem]

@cmdOptionKana 是的，我特别讨厌大量业务移到前端，我觉得前端主要是来渲染交互，但是现在很多后端偷懒，很多不应该让前端处理的数据交给前端，前端代码能不膨胀臃肿么，

[koor]

前端开发的一大半时间都在写样式调样式，面试的时候却对这部分一笔带过几乎不考察，对跳槽不够友好

[cmdOptionKana]

@lizhesystem 但这不是一个乌托邦世界，理论上怎么好不重要，这是资本世界，重要的是成本低利润高。

[d873139022]

默默说句，测试的地位更低

[loveyu]

前端认为后端不懂 react 的好，前端不懂 vue 的好

[sologgfun]

不同公司前端的重要程度不一样，不过一般情况下前端地位还是偏边缘的

[xsm1890]

说句话，别骂我。公司的前端能力好点的就两三个，其他都是水货。

[kensoz]

我一直在思考前端封装的意义，
封装与否在页面上一样显示，
不封装轻度封装到处复制，虽然不好但是爽，快
封装了需求一改，还不如不封装

[dinjufen]

我就是转行入的前端，看完这么多评论感觉又要转行了...

[nekoneko]

@yl20181003 #7 后端无话可说.一个项目我一个后端对三个前端,我每天 8 小时,前端天天加班

[lifesimple]

@P233 #30 确实 堆代码，本来写的还好的，但是不断迭代不断加需求，也不想拆了 赶吧 不忘初心，终成💩山

[sologgfun]

@sologgfun 接一下自己的想法
我之前在某大厂任职前端，述职包括跳槽的时候，简历是从来不写页面上那些业务工作的，保留的都是 nodejs 相关的工作，除非业务上用了 ssr 这种有一定难度的技术方案。
同时我自己今年从前端转了后端（因为当前公司后端的业务比较核心），个人体会是后端心累很多，当然这和公司的业务类型有很大的关系。（如果是 echart 之类的团队肯定前端才是核心）
前端工作的主要问题你能做的东西比后端少，能做的深度也要浅一些，还有很多杂活，个人觉得不用拘泥于前后端，都可以尝试一下，找到适合自己的岗位

[anonymousar]

说实在 你这些压力比后端根本没法比 光一个 oncall 有几个前端要负责的？

[charlie21]

不要信前端开发工程师和前端人员的话，尤其是 “轻松加愉快” “工具提高效率” 什么的，他们没体会过什么是真正的轻松加愉快

[JackZhu0Amazing]

后端 crud boy 赞一个

[Kaier]

考虑转行中...🤔

[serge001]

唉 深有同感

[IamCyborg]

前端 boy 看了有点心酸酸，本来今年成功转行到前端，工资也翻了挺多，一看到这个帖子，妈的...

[jeffrey921]

后端 考虑转前端

[cmdOptionKana]

@IamCyborg 如果大量后端真如上面说的那么悠闲，那后端就会不招人甚至会挤走一些人，动态平衡到一个人会很忙的状态。

压榨劳动力是资本家的必修课。

[Otho]

虽然...但是... 移动端都没人提了

[Constantine1]

前端不挺好的吗？

[macha]

怎么大家都不提客户端，客户端已经被彻底遗忘了么

[rsyjjsn]

换个钱多事少的公司

[KeyboardManAnAn]

iOS 及 Android 原生开发已经这么没排面了吗?

[murmur]

@macha 前端为了彰显重要性把 android ios flutter 都算成前端了

[az22c]

@murmur 错了。大不了移动端开发的自己发文一篇呗

各自有各自的立场

[stkstkss]

哎 前端

[YidaZh]

四手联弹，慕了、、

[revalue]

> iOS 及 Android 原生开发已经这么没排面了吗?
@KeyboardManAnAn
@Otho
@macha 术业有专攻，移动端开发个人不懂啊。仅发表个人知道的领域

[d873139022]

@jeffrey921 啊，为啥，老哥。可以说下原因嘛

[Chad0000]

@JudyHal #25
“tech lead 大部分都是前端”

何以得出？我已肉翻，在外面做后端的时候前端都挂在我名下。我后面发展就是 teach lead ，经理都是让我而不是其他前端人员去干这个职位。

[lap510200]

再累也没有我这种全干工程师累

[xilixjd]

总结的非常好，给大家泼一盆冷水，大厂前端这些东西都少不了，而且跟中小厂前端相比没啥区别，甚至因为某些原因更加恶心

[kop1989]

@KeyboardManAnAn #55
@Otho #51

仅从这个话题讨论来讲，移动端、桌面端和 web 前端面临的问题其实都是相仿的。只是程度依照各自的生态各有不同。
所以个人理解这里面的前端很大程度上可以理解为“所有的 UI 展示领域的技术”。

[vance123]

@kop1989 我觉得 C/S 架构中所有跑在 Client 上的代码都属于前端

[1016]

呆过大厂的人 也说过大厂的代码也是屎堆屎

[Dragonphy]

老哥说的大部分我都深有体会😅

[Actrace]

楼主你可能喜欢这个
https://github.com/tmplink/tmpUI

[jones2000]

没有技术含量的体力活留给年轻人去做。 做点有深度的东西不就行了。

[AlexaZhou]

想想可以 四手联弹，其他好像也能忍 哈哈

[liandi1990]

很正常，我们后端述职还要写给用户看

而且他们的打分几乎决定了我们能不能晋升（比主管的打分权重要高）

[micean]

关于第 2 点
我已经准备在新项目里让后端开发人员来写接口的 JS 代码了，减少前后端沟通问题和前端开发压力，让前端专注在 UI&UX 上，到时候看看效果如何

[shidaibenyi]

后端除了 curd 还可能需要做的 1.服务部署.2 数据清洗.3 应急响应.4.编写技术文档.5.架构抽象.6.高并发问题.7.安全相关.还有乱七八糟的比如服务器证书更新.还有现在都开始上 k8s 了,容器编排容器部署这一大块,近几年不学也会被淘汰的.

[wukongkong]

@snoopyhai 请教下 习惯了 pxtorem 这个 tailwind 可以处理么，学了下，好像很多都是直接 rem ，没法精细化

[chengxy]

同意楼主说的代码洁癖者别碰前端，否则就会像这样做一些无意义的事。

[shilianmlxg]

@snoopyhai 大佬 tailwind 你是用默认的还是自己 diy 的呢。会不会考虑 rem 的情况呢。有什么好看的教程吗

[snoopyhai]

@wukongkong tailwind 都是 rem ，vscode 装插件后，可以看到 rem2px 后的值。缺少的数值可以在 tailwind.config.js 文件自定义（ px/4=key ，px/4/4=rem ），例如：
width: {
2.5: '0.625rem', // 10px
12.5: '3.125rem' // 50px
},

[snoopyhai]

@shilianmlxg
尺寸都是 rem 啊；
设计给的奇怪数值就 tailwind.config.js 自定义；
教程去 b 站随便看看就行，大概知道使用方法即可，剩下的就是官方文档了，随用随查。

[jeffrey921]

@d873139022 现在只会 c#，在三四线城市工资还不如前端的，面试的时候还要求会前端技术

[wukongkong]

@snoopyhai 感觉有点难受，px 和设计稿一一对应，后面修改也方便，也有插件自动转换，这样一搞，反而有点回去了

[shilianmlxg]

@snoopyhai tailwind 方便维护吗。大佬

[snoopyhai]

@shilianmlxg 巨方便。
tailwind 之前，
都讲究 css 复用，多个地方，样式相同（相似）、结构相同（相似），共用一套样式。
写的时候挺爽，维护的时候就灾难了。

比如说共用样式的区域，有一个地方要改变设计。而且是上线 3 个月之后，你压根就不记得定义的这些个 class 能不能直接改，会不会对别的地方造成影响。唯一的办法就是为变动的设计从新重新起名，加一套样式。

上面的事情，随机来个三五次。你的样式表就没法看了。。。

tailwind 不一样，哪里变，就改哪里，只管改 className ，不会对背后的样式做改动，也就不用担心会影响其它地方。

tailwind 其它就是把 className 对应的样式打散，做细。感觉没啥用，实际用起来缺超乎想象。
前提：你要对 css 足够熟习，用 tailwind 才足够顺手。

[whi147]

原生开发好像已经不在鄙视链中

[shilianmlxg]

@snoopyhai 谢谢大佬

[izecson]

@chengxy 一看就是大厂

[kamilic]

@chengxy 扎心了老哥……