原文为 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 上开发软件是极度令人兴奋的一件事。你拥有接触到数以千计使用者生活的机会，你透过网络提供一个很棒的服务给某个人，这一切都能在一个叫做浏览器的东西上发生，尽管它仍有所限制，但它们仍能够分析，描绘或呈现你任何疯狂的想法。

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