一个前端工程师的基本修养

有人说互联网是前端工程师的舞台，先不论这个说法是否有些夸大其词，但前端工程师绝对撑起了互联网应用开发的“半壁江山”。随着传统网站、手机应用、桌面应用、微信小程序等次第出现，需要前端工程师设计和完成的客户端功能逻辑在不断复杂化。那么，应该怎么定位前端工程师这个岗位，怎么描绘这个岗位的基本要求呢？下面让我们从前端的发展历史中寻找答案吧。

1. 前端工程师的发展历史

1990年，Tim Berners Lee发明了世界上第一个网页浏览器 WorldWideWeb。1995年，Brendan Eich 只用了10天便完成了第1版网页脚本语言（也就是目前我们所熟知的JavaScript）的设计。在网络条件与计算机设备比较落后的年代，网页基本是静态的。对网页脚本语言功能的最初设想仅仅是能够在浏览器中完成一些简单的校验，比如表单验证。所以网页脚本语言的特点是：功能简单、语法简洁、易学习、易部署。那个年代的Web应用是重服务器端、轻客户端的模式，Web开发人员以服务器端开发为主，同时兼顾浏览器端，没有所谓的前端工程师。

2005年AJAX 技术的问世令静态的网页“动”了起来，异步请求和局部刷新彻底改变了网页的交互模式。同时，网络速度与个人计算机的普及给网站带来了更多用户，用户对网站的需求也越来越多。需求与技术的同步增长让早期的重服务器端、轻客户端的天平向客户端有所倾斜，也就是从那个时候开始出现了第一批专职的前端工程师。这批前端工程师相对于服务器端工程师的优势主要体现在对交互与UI的敏感度和专业度上。所以第一批前端工程师中有很大一部分是设计师出身，这导致前端工程师们有了一个很不相称的称谓：美工。但不可否认的是，第一批前端工程师主要负责的是 CSS 与HTML开发，虽有AJAX技术，但受限于JavaScript引擎的性能，浏览器端的功能逻辑仍然十分简单。

2008年，Google推出了全新的JavaScript引擎V8，采用JIT（实时编译）技术解释编译JavaScript代码，大大提高了JavaScript的运行性能。随后，Netscape公司的SpiderMonkey和苹果公司的 JavaScriptCore 也紧随V8，加入了JavaScript引擎的性能追逐战。JavaScript引擎性能的提升让许多早期不能在浏览器端实现的功能得以实现，浏览器能够承载几千行甚至几万行的逻辑，Web应用服务器端与客户端的天平再次向客户端一方发生倾斜。业内开始提倡REST（Representational State Transfer，具象状态传输）风格的 Web 服务 API ，以及SPA（Single PageApplication，单页应用）风格的客户端。前端工程师承担起了客户端的交互、UI和逻辑的开发，工作职责进一步加重。

2009 年，Node.js 的问世在前端界引发了轩然大波。Node.js 将 JavaScript 语言带到了服务器端开发领域，截止到目前，业内已经有很多公司将 Node.js 应用到企业级产品中。虽然Node.js仍然没有像 PHP、Java 等传统服务器端语言一样普及，但由它引发的“大前端”模式已经在 Web 开发领域中蔓延。Node.js 对前端生态的促进，以及对同构开发的支持是PHP、Java等语言远不能比及的。“大前端”模式下的前端工程师跨越了之前浏览器与服务器端之间看似难以逾越的鸿沟，踏入了Web服务器端开发领域。

可以看到前端工程师的职责范畴已经发生了翻天覆地的变化，那么前端工程师应该掌握哪些技能、拥有哪些职业素养呢？下面一一介绍。

2. 前端工程师的技能栈

从最初的重交互 / UI，轻 JavaScript 的开发模式，到交互、UI、逻辑一把抓，再到“大前端”的服务器端、客户端全掌控，前端工程师的工作内容和工作职责不断扩宽。从前端工程师的发展历史中，我们可以总结出前端工程师的技能栈。

硬技能：HTML/CSS/JavaScript。这3项是前端工程师从蛮荒年代发展至今从未脱离的核心技术。

软技能：用户体验。用户体验是Web产品吸引用户的第一道菜，也是前端工程师工作产出的重点。

扩展技能：Node.js。并非特指Node.js本身，而是Node.js所代表的Web服务器端知识。即使你不是一个“大前端”，了解Web产品的运行原理也是一个前端工程师必备的素养。

硬技能——HTML/CSS/JavaScript

这3项俗称“前端工程师的三把刷子”，是前端工程师必须掌握的核心技能。其实将HTML/CSS与JavaScript放在一起讨论并不合适，HTML和CSS作为标记类语言，只有在浏览器环境或者类浏览器环境下才会被识别解析，所以可以认为这两者是 DSL（Domain Specific Language，领域特定语言）。另一方面，JavaScript与HTML/CSS的性质不同，虽然不如C++、Java等高级语言那样严谨，但其本质上是一门编程语言。同其他编程语言一样，对于 JavaScript，掌握其语法和特性是最基本的。但上面这些只是应用能力，最终考量的仍然是计算机体系的理论知识。所以，数据结构、算法、软件工程等基础知识对于前端工程师同样重要，这些知识能够决定一个前端工程师的上限。

HTML/CSS/JavaScript这三者只是统称，代表着前端工程师能力的3个方面。三者相互耦合，并非独立。比如CSS必须与HTML配合、JavaScript逻辑须借助HTML和CSS直观地展示给用户。任何一项都是一个庞大的技能树，可以细分出很多子技能。对于HTML，要掌握各个标签的合理使用和基本的Web API。对于CSS，要在理解各属性的工作模式的前提下能够综合使用，给出合理的解决方案；并且由于浏览器的差异，还必须掌握必要的hack方案。虽然这些 hack 方案最终都会被历史的尘埃掩埋，但目前（2017年）我们仍然无法避免兼容性问题。对于 JavaScript，与其他任何一门编程语言一样，除要求掌握基本的语法，有基本的应用编程能力以外，还必须具备良好的抽象能力以及架构能力。

软技能——用户体验

除了以上提到的“硬技能”外，前端工程师还必须掌握一项“软技能”，即用户体验。

前端工程师的产出是直接面向用户的，良好的用户体验是一个Web产品的基本要素。这里的用户体验并非指的是交互方案和视觉设计，当然这些也是用户体验的一部分。此处我们讨论的用户体验包括但不限于以下几点。

保证内容的快速展现，减少用户等待时间。

保证操作的流畅度。

如果是移动设备，应尽量减少设备的耗电量。

上述几点总结起来其实就两个字：性能。如果说按时完成了业务的所有需求是保证了“量”，那么提升产品的性能就是保证了“质”，两者缺一不可。

JavaScript设计之初最经典的应用场景是表单验证。比如，一个需要验证用户名和密码的表单，用户没有输入任何内容就单击“发送”按钮，仍然会发送一个请求到服务器端进行验证。这在当今网络技术下没什么大不了，但在网络速度慢而且上网费用昂贵的年代，这样的代价是非常巨大的，并且用户必须等待服务器端处理后才能得到反馈。JavaScript在浏览器发送请求之前验证内容的有效性，避免一次无效的请求，既减轻了服务器端压力，节省了成本，又减少了用户等待时间，提升了用户体验。可见JavaScript设计的初衷便将用户体验作为重要的考虑因素。

在现今社会的快节奏下，用户对于产品的需求也倾向于快速化：快速展现、快速迭代。用户不想为了看一条新闻而去下载一款新闻软件，他们希望打开网站即可快速查看。Web产品本身就具备快速的基因，性能优化的最终目标也是保证“足够快”。所以，前端工程师不仅要求熟练地使用基本的开发技能，还必须具备性能优化的意识和技能。

你可能会产生疑问：学习能力不算软技能的一种吗？这是因为学习能力是任何岗位都必须具备的软技能之一，并不是专属于前端工程师的软技能。

扩展技能——Node.js

将Node.js定位为扩展技能，并非指的是Node.js本身，而是以Node.js为代表的Web服务器端知识。前端工程师掌握Web客户端的相关知识是基本要求，欠缺的是对 Web 服务器端的了解。虽然并不是每个前端工程师都是“大前端”，并且让前端工程师编写不熟悉的服务器端逻辑也并不十分恰当，专业的事应该由专业的人负责，但这并不意味着前端工程师不需要熟悉服务器端的理论知识。了解Web应用从前到后的工作流程和整体架构模型，有助于前端工程师编写更合理的客户端逻辑，以及对产品出现的问题及时定位。

综上所述，一个合格的前端工程师应该掌握的技术栈可以用下1概括。

前端工程师是承载用户层所有功能的资源产出者，不仅是客户端最终呈现给用户的HTML/CSS/JavaScript等资源成品，而且还包括这些资源从零开始到最终产出的生产流水线所涵盖的所有环节。

从诞生到发展至今，前端工程师的定位一直在变化。从“切图仔”升级到“大前端”，改变的是负责的技术范畴，不变的是前端工程师产出的对象永远是用户。这种变化不会停止，下面让我们看看前端工程师未来可能的定位。

3. 前端工程师未来的定位

前端工程师的发展方向并未明确，但是现在平台的多样性以及新技术的不断涌现，前端逐渐发展出了面向Web和面向移动App两个方向。

不只是浏览器

在Node.js之前，浏览器是前端工程师唯一的“阵地”，Node.js的出现打破了这个局面，以致出现了所谓的“大前端”。之所以Node.js出现之前没有“大前端”概念的主要原因之一是，当时的 Web 服务器端编程语言并不是JavaScript，虽然PHP、Python等Web脚本语言同样简洁易学，但是学习两门编程语言毕竟需要消耗大量的精力。而 Node.js 出现之后，语言的共通性不仅降低了使用 Node.js 进行服务器端开发的门槛，也为实现同构编程提供了有力的技术支持。除此之外，Node.js 的轻量、非阻塞I/O、异步处理等特性非常适用于微服务等特定场景。

前端工程师掌控着与用户相关的所有资源（数据、逻辑和模板），能够更全面地掌控开发进度以及实现更合理的前后端分离。这种模式的前端将技术范畴扩大到Web服务层，可以视为在Web领域纵向的延伸。国内外团队对这种模式的接受程度也越来越高。突破浏览器、面向Web应用层的“大前端”逐渐成为了前端工程师未来发展的主流方向。

也不只是Web

不论是专注浏览器端，还是兼顾 Node.js 中间层，前端工程师始终未脱离常规意义上的Web领域（即面向浏览器的 Web）。近些年随着 React Native、Weex 等技术的发展，JavaScript语言可以直接编写接近Native体验的移动App，这令前端工程师有望探索常规Web以外的开发领域。实际上，近几年前端工程师“入侵”移动开发领域的脚步从未停下。以PhoneGap、Cordova、Ionic等为代表的类App开发，以及内嵌在App中WebView的Hybrid开发，加上近期 Google 提出的PWA ，甚至微信小程序和支付宝小程序等，前端工程师的阵地早已不再是单纯的浏览器了，而是面向各类GUI应用的泛前端领域。

移动客户端开发领域之所以不断被Web“入侵”，一方面是由于Web技术发展迅速，比如JavaScript引擎性能的提升以及随着HTML5的推广浏览器和类浏览器的权限不断增强；另一方面是由于移动操作系统政策的不断收紧。2017年6月，Apple公司发布公告禁用以JSPatch为代表的“伪热更新”技术；Google I/O 2017开发者大会上点名提出以MIUI为代表的第三方Android定制系统粗糙的图标，虽然并未宣布 Android 即将闭源的任何消息，但这件事也令很多开发者和媒体嗅到了不安的气氛。所以目前的局面是：Native不断收紧，Web逐渐开放。这是前端能够有机会并且有能力“跨界”踏入移动App开发领域的重要前提。虽然这个方向目前仍然处于起步阶段，距离真正成熟还有多长的路谁也无法预测，但不可否认的是前端的横向边界正在不断延伸。

Web自身格局不断变化的同时，其他领域的诱惑也不断挑逗前端不安分的触角。前端工程师未来的具体定位虽然无法精确预测，但不论是Web领域还是客户端领域，前端的工作产出均直接面向用户，这在任何时代都不会改变。秉承这项宗旨，不论角色如何转变，前端工程师始终需要坚持如下两项原则。

于产品而言，须保证性能和体验。

于开发而言，须保证快速与严谨。

————