深入谈谈前端工程师的价值

起头

标题来自于我一位朋友在Front-End Developers里面所提出的问题,完整问题如下:

诚心请问:前端工程师的价值在哪?

我是很想走前端、视觉、美感的人。但是一边在路上,一边却不自主的质疑着这些东西的价值在哪?

比方说前端就是一些画面、表单,boostrap套一下或是用Material UI套一下,就变成一个成品。不够的东西再自己用CSS手码一下。

但大都时候不就是个画面吗?就算很丑好像也没什么人在意。"功能有出来、数据是对的就好了。"

目前我想到的是像D3.js这种视觉呈现,是后端做不出来的东西。除了这个还有其他价值吗?

这是我想到的价值:

(1)做画面(设计图片)、用框架,让各个模块都能有对应画面

(2)如果载入时间太久,前端有责任通过稍微调整,让它的载入时间变短。

(3)像D3.js等那一类的视觉呈现。

一直想很问问大家,请问前端有什么地方是价值所在?

以下仅就我浅薄的前端经验,给出一些我认为的答案并附上理由。

两种价值

我认为前端工程师的价值可以区分为两种,一种是核心价值、另外一种是附加价值

先从附加价值开始谈起,这部分的价值属于「跟其他职位的人沟通的专业度」,也就是与您对接工作人员的熟练度。

首先,「设计」绝对不是前端工程师的核心价值,那是设计师的。「使用者体验」也不是前端工程师的核心价值,那是使用者体验设计师的。可是,前端工程师如果有设计的sense(见识),有UX 的sense(见识),那当然是很不错的一件事情,跟这两个职位的人沟通起来也会比较流畅,因为可以大致理解对方的工作内容是什么。

因此,我把这种价值称为「附加价值」,而不是「核心价值」。

可能有人会问说:「可是有些公司的前端工程师还包设计包UX 欸」,没错,但那是因为公司期望用一到两个人的薪水聘到可以做三个人事情的强者,可是很可惜的,这种意义的前端工程师不在我这篇文章的讨论范畴内。这篇文章的前端工程师指的是「专门做前端」的工程师,意思就是不会要你去做设计稿,也不会要你去弄一些有的没的。

工程师的价值

在「前端工程师」的核心价值里面,也会包含两种价值,因为「前端工程师」这个职位本来就是:前端+ 工程师两个名词组合起来的。所以有一部分是「工程师的价值」,另一个部分是「前端的价值」。

我们先来谈谈第一个部分,「工程师的价值」。要知道哪些是工程师的价值,哪些是前端的价值,只要把同样的命题套用到「后端工程师」或是其他职位的工程师上面,看适不适用就对了。

例如说:「要选择哪一套Framework(框架)」这个问题,无论是前端工程师还是后端工程师都会碰到,所以显然是「工程师的价值」。

但如果是:「要针对哪些浏览器做优化」,这个就显然只跟前端有关(因为后端也碰不到浏览器),所以会归类到「前端的价值」。

前端的价值

把附加价值跟工程师的价值谈完以后,终于可以来谈前端的价值了。

要知道前端工程师的价值在哪,可以用一个很简单的问题来做区分:

一个好的网站跟一个坏的网站差在哪里?

如果我们可以列的出来差在哪里,就知道前端工程师的价值体现在哪里了。

但请注意这个差别并不是页面美观的差别,页面美观与否是设计师的事情,在这边要先假设两个网页都是按照设计师的要求一模一样刻出来的。

也不是网站好不好用的问题,「这按钮太小按不到」、「这结帐流程太冗长」,这些都是UX的事情,在这边先假设公司有一个UX desinger专门在做这些。

坏的跟好的网站差在:

一个坏的网站可能会存在兼容性问题

一个坏的网站载入时间可能是10 秒,好的网站只要1 秒

一个坏的网站开场动画很lag(卡顿),好的网站超级顺

当然,如果你再仔细一点列还可以列出更多,我这边先简单列出三点,但是就可以看到一些端倪了。

前端是「设计稿」跟「现实」的桥梁

一个网站的画面「应该长得怎样」,是设计师的事。可是网站「实际长得怎样」,就是前端工程师的事情了。因为这就是前端工程师的工作内容嘛,负责把画面显示出来。

所以前端工程师的价值之一在于:「你对于设计稿的还原度有多高」,你该怎么利用HTML/HTML5, CSS, JavaScript 把原本只是一张张图片的设计稿,转成在浏览器上面可以看到的介面?

除此之外,既然你是负责画面显示,就代表所有的载具你都应该要顾虑到,像是平板电脑、手机等等,必须保证在各个装置上看到的网页都跟设计师的设计稿长得一模一样。

这难不难?真的超级难啊!光是单位的选择你可能就要思考很久了,px, pt, em, rem, vw, vh, vmin,要用哪一种才能保证在各个装置上看到的大小是差不多的?

还要考虑的是浏览器兼容性,有可能我一个网页在Chrome 上看起来还不错,在IE 上混乱不堪,整个惨不忍睹。所以厉害的前端工程师知道各个浏览器之间的差异性,会尽可能确保在每一个浏览器上面看到的都是一样的画面。这难不难?这也超级难啊,每一个浏览器的解析都不同,有些很好用的CSS 属性在某些浏览器上面就是没有,你能怎么办?

而且不要忘了,在这个hybrid App(混合开发) 横行的年代,你要支援的载具多了iOS 跟Android 的Webview,又是两个麻烦的东西。

这其实就像是专业的设计师,在设计Logo 的时候,需要考虑到Logo 在各个地方的呈现,不只是网页、文书,也有可能出现在衣服、杯子等等的东西上面,必须要一并考虑进去,设计出各个场景都能够使用的Logo。

前端既然是设计跟现实的桥梁,就代表也必须跟设计师沟通,在理想跟现实之间取得平衡。例如说设计师今天想要做一个超级酷炫的开场动画,你也觉得这个超屌的啦做出来一定很猛,可是设计师跟你说他要用Flash。

▆▅▄▃-崩╰(〒皿〒)╯溃-▃▄▅▆

大家都知道Flash 已经是一个快死掉的东西了,浏览器慢慢在抛弃它,放上去之后说不定只有两成的人看得到你屌炸天的开场动画。那怎么办呢?一个专业的前端工程师会建议设计师可以用HTML5 来做动画,至少支援度会比Flash 要来得高。

或者说如果动画没有很复杂,专业的前端也要有能力用JavaScript 或者是CSS Animation 做出来。

可是做出来是一回事,出来的效果又是一回事,说不定CSS 刻出来的动画只有惨不忍睹的20 fps,那怎么办?当然就是前端工程师要去调整,要去知道说为什么这边会消耗那么大的资源,要知道该怎么样去优化。

例如说要用transition的话就要知道同样是让元素左移50px,transform: translateX(-50x)比left: 0px快得多,或是backface-visibility: hidden跟transform: translate3d也都对增进效能可能有帮助。也要知道有will-change这个属性可以用。

那如果最后还是不行怎么办?就要站在专业的立场跟设计师说:「虽然我也很喜欢这动画,但这个目前在网页上真的不可能实现」之类的话。

好,讲了这么多,要表达的重点就是前端工程师的价值在于:「确保网站最大化的还原设计稿,并且在各个载具上的观看体验一致」。

效能优化

上面有提到说:一个坏的网站载入时间可能是10 秒,好的网站只要1 秒。

身为一个专业的前端工程师,你必须知道怎么样去调整网页的代码整洁度,让它更快render(服务)、更快载入。这里面网络有很多教程和方法,大家可以搜索下。

网页载入速度怎么会那么慢呢?这边先假设「载入速度」指的是「下载速度」好了,慢的原因有两个:

Request 太多

Request 太久

也就是下载速度快慢跟下载数量的问题,针对下载速度,有价值的工程师可以提出很多建议,例如说利用Cache把图片存起来,下一次就可以大幅缩短下载时间,或者是利用CDN储存图片,速度也会变得比较快。或是会跟你说有Resource Hints可以用,也可以多少缩短一些时间。

那针对下载数量的问题,就可以考虑用CSS Sprites 把图片集中在一起,或者是用Base64 直接把图片写在CSS 里面,就可以省一个Request(但也要注意会增加文件大小)。

讲到图片,有价值的前端应该也会知道jpg, png, svg, gif 的异同以及应该用在哪里,甚至是尝试比较新的webp 格式,这些也都是调整网页效能的一部分。

所以在这个部分,前端工程师的价值就在于:「如何使网页载入的速度变快、效能变好」。

你确定这些有价值?

有些价值是因人而异的,要看对象而定。对一人当三人用的小公司来说,谁管你网页从2 秒变1 秒,Request 从20 个变15 个,他们只管你能不能在最短的时间内自己画设计稿、自己切版、自己把整个网站做完,让他们好跟客户交代。

在这种公司里做前端,你的价值当然又会变得不一样,价值取决于你能够多快的把案子完成。但是我上面也说了,这种类型的前端工程师不是本文章所讨论的范围。

效能优化有价值吗?当然有价值,尤其是你把规模放大的时候。

例如说我小时候年轻不懂事,js 跟css 都不压缩直接放上去,我们假设压缩之后总共少了10kb 好了,如果你的网页一天有1 万个不重复浏览,就代表你一天节省的流量大约是100 MB,一个月就大概节省了3 GB!

听起来满多的吧!那如果像是脸书这种大公司,我们就假设一天有一千万个不重复访客好了,就算只有压缩1 kb,整体流量也少了10GB。当你把规模放大的时候,很多细节都会变得重要起来。

「魔鬼就藏在细节里」,这句话是我最喜欢的至理名言之一,你去观察很多专业跟业余的差别,就会发现两个一样都可以把事情完成,但价值却都是体现在这些细节里。

业余的前端可以完成一个网页,载入速度普通、乍看之下不跑版,一切都看似平常,可是专业的却能把载入速度加快一倍,并且保证在各个装置上面观看都有最佳的体验。

总结

最后来总结一下,我认为前端工程师具备的两种价值:

确保网站最大化的还原设计稿,并且在各个载具上的观看体验一致

如何使网页载入的速度变快、效能变好

至于那些什么画面美不美观,使用者体验好不好,我都觉得不是前端工程师真正的价值所在。在一个专业分工的地方,那些都会有其他人帮你做掉,前端只要专注在上面这两点就好。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180115A0X5VO00?refer=cp_1026

相关快讯

扫码关注云+社区