从页面仔到工程师,前端到底在发挥什么价值
玉伯在前端圈子里摸爬滚打十几年,他对前端价值的理解是什么样的?在他眼里,前端到底是一个怎样的岗位?我们带着这样的问题向他提问。支付宝体验技术部是前端同学最希望加入的团队之一,玉伯带领这个团队做出诸多创新产品,一定程度也能代表前端团队的边界拓展方向。因此我们希望把玉伯的理解交付给你,也许能给你不一样的视角。
极客时间:经过你这么多年在前端方向的实践,你觉得前端的核心价值到底是什么?
玉伯:前端的核心价值,可以等同为一个问题:“公司为什么需要前端团队?前端团队因何而存在?” 我找到的答案有三点。
第一点,前端可以为公司降本增效,这是一个基本盘的价值。一个公司要做互联网产品,可以采用外包的方式,也可以采用自建团队的方式。为什么阿里等互联网公司采用了自建技术团队,核心原因是,自建技术团队,可以让产品研发更快,质量有保证,整体可持续发展。长期来看,互联网公司自建技术团队,可以大幅降低产研成本并保证高效产出。
组织设计上,技术团队经常会集中在一起,前端团队往往也会集中在一起。集中可以带来效率提升。假设一个业务需要 30 个前端来支撑,放到我这里,可能只需要 20 人就能满足业务需求。因为集中化管理,可以复用专业经验,我们知道如何更高效更专业地支撑业务。前端团队放在一起,在判断需求的优先级时,全局取舍会更自然发生。当前端分散在各个业务时,好处是能形成自闭环,但会带来一个常见问题:零散前端往往会被迫接好多需求。一旦前端是集中的,同时前端人员整体又紧缺时,面对业务需求,前端往往就不会再无条件接需求了。在需求的取舍过程中,就砍掉了很多没必要做的需求。砍需求往往是对业务的最大提效,不做一些需求,反而能提升需求质量,最终让业务做对需求。
但如果自己就是业务方,独立负责一块业务,很多 Leader 肯定就会想自己闭环最好,不然还得等排期。还不如自己直接招几个人,这样更高效,这是人性。但实际上,需要大家更客观去看。早期自闭环,可以让业务从 0-1 更高效。发展到一定阶段后,特别是各个业务板块需要互相关联时,集中化的技术支撑,往往能复用专业能力,整体业务效能会更高。
我现在更能理解一句话:分工是整个社会效能提升的关键。工业社会的分工极大提高了社会运转效率。以前农业社会衣食住行所需要的东西都可以自己生产,这叫做自闭环,效率是极低的。正是因为有了社会分工,整个人类社会才飞速发展。
降本是最近几年才凸显。现在不少公司开始提经营责任制,各个 Leader 会更意识到要省钱。举个例子,设计师对业务来说很重要,但业务如果自己去招一个创意设计师,往往不如用设计大团队提供的创意同学,这样会更省钱。统一的设计或前端部门,可以整体统筹,议价能力也更强,可以非常实在地降低成本。
简言之,前端团队的存在,是因为技术专业分工能带来整体效能的提升。同时前端团队往往会是一个整体,集中化可以降低公司的整体成本。
极客时间:刚刚聊到增效,那你们怎么去和业务负责人沟通,能让他们感知到,实际上你们是在帮他提效的呢?
玉伯:需要互相建立信任。如果业务方提什么需求你都拒绝,肯定不行。一方面要去接需求,一方面也要有勇气跟对方说我们的想法:为什么某个需求我们觉得不靠谱,为什么当前腾挪不出来同学来做新需求。可以主动把人员投入透明出来,让业务方知晓我们把人员都花在哪了。整个过程中,核心关键点是,如何让业务方相信前端的专业度。前端是技术岗位里离用户最近的,不少优秀的前端工程师经常具备不错的产品思维,往往能给到业务一些靠谱的建议。当这些好建议有一起两起,逐步跟对方开始有互信,开始建立正循环时,一切就好了。要相信,我们的专业,我们的善意,对方是能够感受到的。
带的团队比较大时,与业务大 Leader 的互信非常重要。具体业务 Leader 可能会抱怨“前端团队老不接我的需求”,但是业务大 Leader 往往会更有全局思维。资源投入的本质是优先级管理,上一个台阶看问题,很多优先级就能决策出来。
极客时间:前端团队放在一起,能够给业务更专业的指导或者专业的反馈。看起来你带的团队,前端还是有话语权的,前端的这种专业度是如何建立起来的呢?
玉伯:这取决于前端 Leader 的想法。我一直有个观点,前端并不是为后端服务的,前端跟后端是平等的,共同服务于一块业务。首先自己心态要摆平,同时跟后端也要说清楚我们的想法。有些后端老觉得这是他提的需求,前端做就好了,但是需求不应该来自后端,而应该来自业务方。不少情况下,业务没有专职 PD(产品经理),后端兼了 PD 职责,比如在不少中后台业务场景,对这种情况,也要分开来看这两个岗位的需求。摆平位置之后,前端和后端一起以合作伙伴关系服务于某块产品或业务。
和后端的关系梳理清楚后,更难的,是如何能跟业务达成互信,这取决于你对产品域或业务域的了解程度。要能和业务对得上话,不能纯粹只是一个页面仔,要成为懂业务的工程师。鲁肃担任蚂蚁 CTO 期间,我刚过来蚂蚁不久,看到各种业务类型,琳琅满目,要学的东西很多。在了解业务之前,早期我也是个前端资源,后来随着越来越熟悉业务,对不少产品开始有深度理解,慢慢有了自己的判断,才感觉到能发挥的作用更大。
但我同时发现,前端再理解业务,一般来说都很难超越后端,因为后端掌握真正的业务逻辑。前端懂业务远远不如后端懂业务来得这么自然,但是前端懂体验,这是我们的长处。我们其实对于一些交互设计、体验细节、对用户使用产品的体感会更有优势。后端很多时候不太懂体验,他们甚至会觉得功能堆上去就好了,但是堆功能,往往会带来糟糕的产品体验。
衡量产品体验好不好,有好几个指标。传统常用的是 CSAT(Customer Satisfaction,客户满意度),很多行业都可以用。在 to B 领域往往会用 CES(客户费力度),用这个反向指标来判定用户使用产品费不费力。在 to C 领域常用的是 NPS(净推荐值),有太多介绍,不赘述。当我们能通过 CES 等专业指标去衡量产品体验,并能具体给出优化建议时,前端懂体验的优势就能体现出来。当我们体现出专业度时,大家就会尊重你、信任你。
极客时间:刚才聊了前端对业务的第一个价值点是降本增效,第二个价值点是什么?
玉伯:第二个价值就是前端有助于产品体验的提升,因为前端是最靠近用户的工程师,这个真的是前端这个岗位能够给到产品和业务很大的价值点。一个产品最终展示给用户的界面,都是前端或客户端通过代码写出来的。前端在这个过程中要调试,调试过程中对产品的感觉很重要。当感觉不对劲时,好的前端会去找设计或产品同学反馈,共同去思考是不是哪里没考虑周全,是不是某个细节功能点有问题。我们常说,当代码写不下去的时候,大概率是产品的设计逻辑错了,这时停下来去修改,对业务的价值是很大的。
前端的体验优势,也有一个危机。老一辈的前端,有很多像我这种从物理、化学、生物等各行各业转过来的,是对体验有浓厚兴趣的一波人转行学做前端。这波老前端,普遍对用户体验的感知力很强。随着前端校招生源变好,大量计算机科班出身的同学开始做前端,最近几年有不少学算法的同学也来做前端了。这些科班出身的同学,整体特点更理性,更逻辑化,更像服务端开发,这些优势非常好。不足的是,不少新同学会对体验的感知有缺失,有像素眼、愿意写 CSS 做界面的同学越来越少。
举个例子,之前我面试的时候,经常会出一道题,拿 CSS 实现的页面给候选人看,这个页面中间有些像素偏差,可能只差一像素两像素,我想考的是他能不能看出像素偏差,看他具不具备“像素眼”。给老前端看,一眼就看出来了,但是现在很多前端新同学看了半天都觉得没问题,现在这道题我都不敢拿出来面了。以前前端对体验的感知还是不错的,我们之前已经往前走了一步,使得设计者关注核心的创意和关键元素就好了。早期设计可能不需要出完整设计稿,只需要出关键设计稿就行了,剩下的前端就实现了,效率很高。但现在不行了,现在前端和设计的协作关系又变成了设计要抓还原度。这个现状,是当下前端天空中的一朵乌云。
体验曾经是我们的优势,但是接下来慢慢也会淡化,目前我也在想一些其他解法。当下仍然是优势,至少团队里面还是有一半同学有这块的感知。现在一些前端领域的大会上,一些专家都在呼吁前端回归到关注体验,我认为这很重要。
科班出身的同学只是对用户人机交互层的感知变弱了,在前端工程化和专业代码逻辑层,以及往计算机底层探索的能力,都全面变强了。整体来看,在朝着更好的方向发展。
极客时间:降本增效、提升产品体验,前端在这两方面也都遇到来自业务方或者行业趋势的挑战。前端对业务的最后一个价值是什么呢?
玉伯:第三个价值点,我最近几年有些感悟,发现前端技术开始真正为业务创造一些可能性。
我举个例子,比如数据可视化领域,当时中国最有名的产品应该是百度的 ECharts(注:2018 年捐给 Apache),ECharts 的基本思路是一图一表,比如饼图、趋势图、气泡图等,都是先有图,再去实现这个图。2014 年,我们也想做数据可视化,但如果只是再做一个 ECharts,意义不大。当时我们就在想,可视化领域有可能的创新点会是什么?如何才能做出差异化竞争力出来?
于是我们开始研究学术界的进展,发现其实上个世纪就有一个学术大拿,已经写了一本书叫《The Grammar of Graphics 图形语法》。很厚的英文书,我们团队几个人一起研究,看完之后觉得如果以语法的方式去做数据可视化框架,我们非常有机会超越国内包括国外绝大部分同类产品。
当我们在 AntV 里,真的把图形语法实现出来后,发现跟 AI 领域可以天然结合。利用语法特性,能根据数据特征或用户指令,通过语法智能化生成一些图表,甚至可以生成全新的未见过的图表类型。这是产品方都没想到的,是技术给了业务新的可能性,并有机会成为一个产品亮点。
类似竞品在国外有,比如微软的 Power BI、IBM 的 Watson 等,也是倡导智能洞察,用户只要说一句话“想看特定人群过去一年的留存率”,它就可以把趋势图等洞察给展现出来。当时做 AntV 时,我们压根没想到智能图表场景,后来做着做着发现居然可以让业务智能化,才开始意识到前端技术也能成为产品的核心竞争力。
再举一个例子,大家可能都用过支付宝上的蚂蚁森林、蚂蚁庄园等产品。这些产品背后,是我们沉淀的一套图形互动技术。支付宝上不少应用已经不是传统前端应用,而是互动应用,具备不错的互动体验。基于这套技术,可以实现支付宝的五福、打年兽、神奇海洋等业务。这些互动应用可以做到较低成本研发(和传统游戏比),为支付宝的业务形态提供了新的可能性。
总结起来,前端的价值有三点:降本增效、提升体验、创新可能。
极客时间:经过这个过程,你觉得对于前端来说,大家的自豪感会更高吗,天花板会更高吗?因为逐渐有越来越多的事情可以尝试。
玉伯:这是一定的,我们都逐渐从页面仔变成了工程师。身份的转变花了很长时间,2014 年-2018 年对我来说,我觉得自己还是页面仔,2018 年以后才能自称为工程师。
Ant Design、AntV、前端工程化、前后端分离等事项,在经过 3-4 年发展后,到 2018 年才逐步显露成效。其他团队逐步不再把我们当成资源,会认可前端也是有技术厚度的,同时对效能提升和体验提升,也是显性可见的。
2018 年起,我们也开始有一个倡导,让前端工程师往产品工程师方向发展,目前还在路上,只在语雀等少部分团队实现了产品工程师的倡导。语雀的不少技术人,喜欢写代码,同时也喜欢语雀,在用技术实现语雀过程中,还抱着对产品的热爱和见解。语雀的一些产品模块是前端工程师在负责,这是语雀的核心产品竞争力的来源之一。
之所以语雀的前端工程师能成为产品工程师,有两个因素。第一个因素是全栈开发,语雀的主体是用 JavaScript 实现的,语雀很有可能是中国最大的 Node.js 系统,语雀 90%的代码都是 Node.js 写的。这意味着在语雀,前端不仅是前端,这个产品的后端实现、算法、运维等,前端工程师都在做,再加上对语雀的热爱,对产品有感知,前端写的代码是蕴含着对产品的喜爱的,在这种情况下,前端工程师就有机会成为一个产品工程师。
前端人群里,还很容易出现优秀的产品经理。语雀的产品经理、钉钉的产品经理、微信读书的产品经理、飞书的产品经理,据我所知,都有不少产品经理之前是做前端的。
当然,前端人群里,也有出现 CTO、CEO 等,虽然还不多。但我相信,数字化的大趋势下,有工程师背景的创业者,只会越来越多。前端从业者可以做的事情,也会越来越多。
小结时刻
玉伯总结前端对业务的三大价值,一是降本增效,二是助力产品业务的体验提升,三是前端技术逐渐可以成为产品的核心竞争力,为业务创造可能。
文章来源:极客时间《超级访谈:对话玉伯》
相关文章:
从页面仔到工程师,前端到底在发挥什么价值
玉伯在前端圈子里摸爬滚打十几年,他对前端价值的理解是什么样的?在他眼里,前端到底是一个怎样的岗位?我们带着这样的问题向他提问。支付宝体验技术部是前端同学最希望加入的团队之一,玉伯带领这个团队做出诸多创新产品…...

Java程序员进阶宝典,让你学习面试无忧!
心净则明,心诚则灵如果你想要一个月速成程序员,那么这篇文章不适合,如果你仅想要在IT圈“耍酷”,那你也不需要研读,如果你执着询问“退化”成为一名程序猿有啥捷径,那我只能告诉你,此路不通!不可…...

Hadoop HDFS的主要架构与读写文件
一、Hadoop HDFS的架构 HDFS:Hadoop Distributed File System,分布式文件系统 1,NameNode 存储文件的metadata,运行时所有数据都保存到内存,整个HDFS可存储的文件数受限于NameNode的内存大小一个Block在…...
面试题练习第五篇
面试题第五篇1. 说说React生命周期中有哪些坑?如何避免?2. 说说Real diff算法是怎么运作的?3. 调和阶段setState干了什么?4. 说说redux的实现原理是什么,写出核心代码?5. React合成事件的原理?6…...

hadoop02【尚硅谷】
HDFS 大数据学习笔记 一、HDFS产出背景及定义 HDFS产生背景 随着数据量越来越大,在一个操作系统存不下所有的数据,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,迫切需要一种系统来管理多台机器上的文件&#x…...

Alist ——本地网盘管理器
Alist ——本地网盘管理器 一、下载工具 Alist https://github.com/alist-org/alist二、启动登录 进入下载好的文件中,在地址栏输入cmd进入命令行启动 进入命令行输入 alist start启动 记住密码,和端口进入浏览器 输入 :127.0.0.1:5244用…...

【白话科普】聊聊网络架构变革的关键——SDN
最近二狗子在网上冲浪的时候,不小心将 CDN 搜索成了 SDN,结果跳出来了一大堆相关的知识点。 好学的二狗子当然不会随随便便糊弄过去,于是认认真真学习了好久,终于了解了 SDN 是什么。 原来,SDN 的全称是 Software De…...

go gin学习记录4
环境 环境:mac m1,go version 1.17.2, goland, mysql 除了原生sql,和orm操作之外,go还有一类包,只用于生成sql,典型的如sqlbuilder,今天就来研究一下它。 安装sqlbuil…...

家政服务小程序实战开发教程015-填充用户信息
我们上一篇讲解了立即预约功能,存在的问题是,每次都需要用户填写联系信息。在我们前述篇章中已经介绍了用户注册的功能,在立即预约的时候我们需要把已经填写的用户信息提取出来,显示到表单对应的字段中。本篇我们就讲解一下如何提…...

python+selenium使用webdriver启动chrome出现闪退现象解决
这两天发现之前开发的爬虫程序出问题了:谷歌浏览器出现打开立即闪退的现象,代码未修改过,检查也没有任何问题! 查看chrome浏览器发现版本更新了 ↑(点击chrome浏览器右上角三个点,最下面帮助→Google Chr…...

新建idea项目
目录IDEA系列之创建各种项目 https://blog.csdn.net/LOVEQD123/article/details/105886077 idea 创建项目的三种方式 https://blog.csdn.net/weixin_50034122/article/details/118754521 创建空项目 https://blog.csdn.net/qq_44537956/article/details/123075134 创建 spri…...

Django框架之类视图
类视图 思考:一个视图,是否可以处理两种逻辑?比如get和post请求逻辑。 如何在一个视图中处理get和post请求 注册视图处理get和post请求 以函数的方式定义的视图称为函数视图,函数视图便于理解。但是遇到一个视图对应的路径提供…...

win11/10+Azure kinect DK配置 VS2019/2017/2015的方法(简单,亲测可以)
首先下载文件:文件的下载和安装方法参考我的博客(131条消息) WIN11/win10Azure Kinect DK详细驱动配置教程(亲测)_Vertira的博客-CSDN博客安装好VS2019,创建好控制台c工程。这些都很简单,不细说。配置:首先配置环境变量…...
子查询的相关例题
子查询的相关例题: 查询和Zlotkey相同部门的员工姓名和工资 SELECT e1.last_name,e1.first_name,e1.salary FROM employees e1 WHERE e1.department_id (SELECT e2.department_idFROM employees e2WHERE e2.last_nameZlotkey );查询工资比公司平均工资高的员工号…...
vue2.0与vue3.0及vue与react区别
vue2.0与3.0及vue与react区别vue2.0 与 vue3.0 区别1. 双向绑定原理2.Vue3支持碎片(Fragments)3.Composition API4.生命周期5.v-if和v-for的优先级6.typescript支持vue与 react区别共同点1.虚拟domdiff算法2.提供了响应式和组件化的视图组件。3.注意力集中保持在核心库…...

【SQL】MySQL秘籍
chihiro-notes 千寻简笔记 v0.1 内测版 📔 笔记介绍 大家好,千寻简笔记是一套全部开源的企业开发问题记录,毫无保留给个人及企业免费使用,我是作者星辰,笔记内容整理并发布,内容有误请指出,笔…...

vue-router 的基本用法
vue-router 的基本用法 1.什么是 vue-router vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。 vue-router 的官方文档地址:https://router.vuejs.org/zh/ 2.vue-router 安装和配置的…...

图像显著性目标检测
一、概述 1、定义 图像显著性检测(Saliency Detection,SD), 指通过智能算法模拟人的视觉系统特点,预测人类的视觉凝视点和眼动,提取图像中的显著区域(即人类感兴趣的区域),可以广泛用于目标识别、图像编辑以及图像检索等领域&am…...

力扣-查找重复的电子邮箱
大家好,我是空空star,本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目:182. 查找重复的电子邮箱二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果总结…...
如何选择正规可靠的ISO认证机构?
ISO认证其实早已融入我们生活中,因为日常生活很多产品都有认证标识,企业办理ISO体系就需要找第三方认证公司,市面上这种公司也有不少,但找到合适可靠、认真负责的还是不易,尤其是体系认证有年审,如何留住客…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...

label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...

【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
A2A JS SDK 完整教程:快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...