转 [译] 为什么我们找不到前端工程师?

原文为 Why can’t we find Front End developers? 作者是 Jose Aguinaga,前端工程师、用户体验设计师跟热爱 JavaScript 的软件工程师。

正文开始


有天,作者偶然在 Quora 上发现一个跟前端工程师及新创公司有关的问题:为什么新创公司很难找到前端工程师?

该讨论串的原 PO 提到:

(前略)我想多数人都同意前端开发比其他软件工程领域简单一些,那到底为何那些新创公司还是很难找到前端工程师?

我看到几个不错的回应,这些回应大多一针见血。而根据过去我寻找前端职缺,面试前端工程师,以及平常在前端项目里的工作经验,以下提出我的个人意见:

这是个相对新的领域

首先最简单的答案就是 「这是个新领域」。很多人可能不同意这句话。因为前端工程几乎等同于网站开发,而网站开发领域也发展超过20年了。然而,作为一门实现用户界面(Interface)及用户体验(User Experiences)的技术,以特定的领域而言,前端工程仍是个相当新的观念。其中「工程」的部分更是在几年前才开始发展。

时至今日,搞混Web开发与前端工程的情況仍所在多有,这怨不了谁。对多数置身Web产业外的人来说:Web开发介于网页视觉设计与其实现技术之间,存在着模糊的空间。说到底,前端工程师还是在做一些网站开发的工作,不同之处在于,他们只着重在牵涉使用者的部分。

「前端」 这个实现使用者界面(UI)与使用者体验(UX)的技术领域,是近年来才出现的名词。在15年前或更久之前,人力被分成网页视觉设计与技术开发两种。但随着 Web 的成长,网页不再只有到达页(landing page)与营销的目的,对工程师的需求也明显增加。人们开始学习 JavaScript,后端技术,使用者体验,数据库,甚至是网站系统设计。如今,像是 AirBnB、Facebook 或是 Quora 等网页应用程序,在工程师的人力资源投注上也比在设计师上来的多。换句话说,产出网页的视觉设计,然后实现出来变得更加快速。这并不代表网页视觉设计较不重要,或是投注在其中的资比 20 年前来的少,而是今时今日对于 Web 工程师的需求比以前更大了。

因为网站实现的技术牵涉到很多不同领域,90 年代中期的 Web 工程师们可以说是十八般武艺。他们可能兼做 DBA、系统管理者、后端工程师、运维(DevOPs)、软件工程师、用户体验工程师跟前端工程师。最近也是大家最怕去做的一件事,就是用 JavaScript、HTML 跟 CSS 把设计图上的样子刻出来,还要让他在浏览器上看起来有模有样。我想要能在前端的领域里悠然自得,除了得对视觉设计有些兴趣,某种程度还要是个被虐狂。

很明显的,当你应付了几次 Web 应用程序大量的需求后,你会发现这一拖拉库的技术工作,需要各种不同角色的人分工完成。我不知道哪些工作比较费时,或哪种角色比较累(注1)。但现实就是,很多公司或网页设计公司发现:一个人不可能处理好各种技术细节。我之前提到的那些工作描述:像是后端工程师,DBA 等,都属于 Web 产业的一部分。记住,这些工作多数已经行之有年,但在 Web 产业中,都是在近十年才明白这些职缺所要求的技术能力。

时至今日,仍有一些可怜的灵魂(在受苦)必须处理 Web 应用程序中所有的技术问题,我们管他们叫「全端工程师」,这么棒的人才可说比独角兽(注2)还难找。当然设计师也没多好找啦,需要更多信息的话你可以参考这篇:如何雇用一个设计师

注1:我其实是在说谎,举例来说:做一个能在 IE 正常运作的网站就是件浪费时间的工作,而且你同时也在浪费你的生命值来做这件事。
注2:多数的全端工程师缺乏建立一个 Web 应用程序的技术深度,包括前端,后端或营运上。在资金充足的新创公司里,期待一个诸葛亮来处理三个正职的臭皮匠才能做完的事,是不切实际的。然而,我知道武林里有少数的高手(Ninja)可以单枪匹马解决上从 GUI,下至僵尸程序的问题。假如你们团队中有这样的高手,帮大伙一个忙,不要放他走。

误解

另一个很难找到前端工程师的重要原因 (对我来说这点最重要),因为这是一个被误解的领域。如同原 po 在他提问中所述,大多数人认为前端工程师是一个「相对简单的领域」。用一个之前流行的比喻 -「大多数人觉得 XXX 是(What most people…)」,我们来看看套上前端工程师会是怎样:

大多数人认为前端工程师是:

  1. 拿 PSD 文件,图片或是草稿,然后把他转成网页。
  2. 有时候只是拿以前的 PSD 文件,图片或是草稿来设计(改一改)。
  3. 用 JavaScript 来写动画,做出网页里的过场效果。
  4. 用 HTML 跟 CSS 来写网页里的内容跟外观。

前端工程师真正在做的事:

  1. 建立一种设计师与工程师之间(沟通用)的图像化语言。
  2. 从视觉设计的角度来看,定义一组元件来呈现内容、品牌跟功能等……
  3. 建立一套  Web 应用程序的基础,包含规范、框架、需求、图像化语言(Visual language)跟规格。
  4. 定义 Web 应用程序支援的范畴,包含设备、浏览器、荧幕与动画。
  5. 写一份 QA 指南,以确保品牌忠诚度、程序代码品质,以及产品都有让相关人士审视过。
  6. 刻(Style)一个 Web 应用程序,要运用适当的空间、图片、排版(typography)、标题、字型、icon、内外边距(padding / margin)、格线系统(grid)等。
  7. 刻(Style)一个 Web 应用程序,要能考虑到不同解析度的图片,多种设备为导向的样板图,还要兼顾设计指南。
  8. 下 Web 应用程序的标签时,要考虑到语义(semantic),accessibility,SEO,schemas 和 microformats。
  9. 连 API 抓资料时,要能采用友善,不耗电,了解目前用户端与设备状况的方式(译者按:举例来说:针对移动用户的网络与硬件的限制,改变拉数据的方式来避免电池与带宽的消耗)。
  10. 用户端的程序开发,要能呈现顺畅的动画、过场效果、延迟载入(lazy loading)、互动效果及操作流程,其中大多数的时间都耗费在渐进增强与向下相容标准。(译者按:渐进增强:例如为了在设计与效能间取得平衡,某些前端的效果,例如渐层色,阴影等,只能有条件的支援旧版 IE)
  11. 确保与后端间的连线是安全的,考虑使用跨网域资源分享 Cross Origin Resource Sharing(CORS)时,要避免 XSS 跟 CSRF 的状况发生。
  12. 不要忘了,不管多严格的结案期限,项目相关人士多靠北的要求,以及设备的限制,永远都要把使用者摆在第一

为了达到上面这些目标,前端工程师也使用很多工具,从视觉设计师常用的(Photoshop、Adobe、Macaw、Sketch)到程序开发工具(IDE、指令列、版本控制、bash script、Build Task)。

有时候我们甚至要考虑营销(电子报、广告活动、用户资料分析、SEO、社群媒体),使用者经验(动画、过场、反馈、使用者界面、图像化语言)到内容调整(断行、避免断字、可读性跟色彩)。

不好的前端工程师

也许大多数显而易见的理由指向为什么很难找到前端工程师,是因为市面上充斥不好的前端工程师。如同 Quota 上一篇文章所陈述的答案,前端工程师拥有比较低的进入门槛。JavaScript, CSS 跟 HTML 不是很难掌握的程序语言。任何人只要花几天就可以在  CodeAcademy 或是 Codeschool 学到基础,当你学习像是 Erlang, Go 或是 ANSI C 等语言时,你就需要掌握很多电脑工程的技巧。调个颜色跟在网页中插入一张图片真的非常简单,但那跟了解 Web 的眉眉角角完全是两回事

最终,市场上充斥着假货前端工程师:

不及格的前端工程师会做出这些事(同时也伤害真货的前端工程师)

  1. 滥用 JavaScript 函数库,因为他们不懂怎么使用原生 JavaScript(例如:无处不用 jQuery)。
  2. 滥用 JavaScript 外挂,用别人写的程序但没办法看懂別人写什么(例如:jQuery.doParallaxPls.js)。
  3. 不看需求,设计文件,也没做任何比较跟评估,就在 Web 应用程序里用了 CSS 框架(Bootstrap, Foundation, Skeleton),却只用其中 5% 的 CSS / JS。
  4. 用了CSS 框架,网站是响应式(RWD)的,或认为响应式设计只是一种你随时可以加到 Web 应用程序里的调味料而已。
  5. 把「响应式网页设计(Responsive Web Design)」挂在嘴边,却不知道 Server 端有哪些解决方案可以用。
  6. 不遵守规范,不使用前置处理器(Pre-processor),命名规则,好的典范,并且同时过度地使用 CSS selector,id,CSS 里面有某个神奇的数值, !important。
  7. 忽视效能,memory leak(或是根本不知道这是什么),也不做程序代码的检查跟评量。
  8. 展示成品的时候没做任何的评估,或者评估就是「这在我的电脑 / 浏览器 / 设备上会动」。
  9. 过度的闭门造车(译者按:就是重复造轮子的意思?),忽略了已经发展 30 年的软件工程。

很多情況下,你想找一个计算机科学背景,然后决定走前端工程的人。要当一个好的前端工程师,计算机科学背景并不能当作是条件,但那些电脑与软件的基本功的确应该被考虑进来,无论这些人是用 JavaScript 写程序,或是在浏览器上写程序。好的前端工程师了解 Web 或许是一个有史以来最威的平台与环境,程序代码可以在上面直接执行,跟其他在 Virtual Machine 或 Runtime 上执行的语言相比,开发时同样要小心,甚至更小心。

一个好的前端工程师不会只重视 Web 技术跟其使用的语言,反而是在不同的元件,系统跟概念上拥有丰富的经验。

下列是一些老鸟前端工程师应该知道,或是比一般前端工程师做得更好的部分(这些人才是你应该要找的人才):

  1. DNS 解决方案,使用 CDN,把资源文件的请求分散到多个不同域名上。
  2. HTTP Headers(Expires, Cache-Control, If-Modified-Since)
  3. 所有 Steve Sounders 说的规范,参考:高效能网页
  4. 如何解决所有 PageSpeed, YSlow, Chrome Dev Tools Audit, Chrome Dev Tools Timeline 上列出的问题。
  5. 什么时候要把事情交给 Server,什么时候要交给前端。
  6. 利用缓存快取(cache), 预先抓取(pre-fetching)跟延后载入(post-load)技巧
  7. 原生 JavaScript,知道何时要自己刻,何时要去找別人的程序代码来参考,同时还能够评估出优点跟缺点再去做。
  8. 新潮的 MVC JavaScript 函数库知识跟用法(例如:AngularJS, EmberJS, ReactJS),图形函数库(例如:D3, SnapSVG),DOM 操作函数库(例如:JQuery, Zepto),延迟载入(lazy loading)或是 package 管理函数库(例如:RequireJS, CommonJS), 任务管理(例如:Grunt, Gulp),package 管理(例如:Bower, Componentjs)及测试(例如:Protractor, Selenium).
  9. 图片格式,优点,何时使用哪一种,如何使用。图片的优化技巧,载入的策略(Sprites, lazy loading 技巧, 快取刷新, PNG 交错)
  10. CSS 标准的知识与用法,现代规范与策略(例如:BEM, SMACSS, OOCSS)
  11. JavaScript 在计算机科学的部分(memory management, single threaded nature, garbage collector algorithms, timeouts, scoping, hoisting, patterns)

结论

时至今日,尤胜于前,前端工程师已在网络占了一席之地。可能是因为各种设备,浏览器跟网页标准的进化,使得人们能专注在 Web 应用程序的使用者上。全世界的前端工程师跟开发者已经能够打造出让人兴奋的产品,网络不再只是我们过去所认为:一个让人看到你餐厅菜单,或是公司营业时间的地方。现在我们拥有从 3D 图库即时影音沟通电台,甚至是整套办公室工具(例如:Google Apps, Microsoft Office Online)。所有东西都在云端,无所不在的储存了我们所写下,所听见,电子邮件甚至我们所观赏的影片。

虽然前端工程师很难找,但我知道有越来越多人将投身前端大军的行伍。不只是因为让人惊艳的工作环境或是这份工作提供的优渥薪水,而是因为在 Web 上开发软件是极度令人兴奋的一件事。你拥有接触到数以千计使用者生活的机会,你透过网络提供一个很棒的服务给某个人,这一切都能在一个叫做浏览器的东西上发生,尽管它仍有所限制,但它们仍能够分析,描绘或呈现你任何疯狂的想法。

前端工程师们,网络正在等你,前程似锦。

Leave a Reply

Your email address will not be published.