回到目录

[前端知识体系] 自我认知

2017-02-08

正如 概览 里说道:互联网发展早期(1995年~2005年)是没有专业的前端工程师的,其实任何职业都如此,是市场需求反向推动岗位的职业化和专业化。同理,是互联网塑造了前端工程师:随着互联网的发展,逐渐要求有一个专业的角色去承担与 Web 相关的繁杂而综合的技术工作,前端工程师接受行业的促进而走向职业。但互联网发展实在是太快了,前端工程师面临的挑战会越来越大,未来的形态更是未知。

认知一:什么是前端工程师?

美工——切图仔——前端工程师,叫法的转变也在透露着这一个职业的价值递进。以往前端工程师(就是传说中的美工)需包办设计,但又非科班出身,所以设计大多拙劣,而且还要写后台语言;随后设计的工作逐渐脱离出来给专业的设计师,前端工程师(切图仔)只需要拿到设计稿后切图并还原出来,不过还要写后台程序;直至最后,前端工程师工作越来越单纯和专注,后台交由更加专业的后台工程师负责(前后端分离),把更多注意力放在视觉还原、页面性能、体验优化等一系列前端相关的内容上。

值得一说的是,目前大部分资深的前端工程师都没有接受过体系化的对口教育,即大学里并无前端开发这门课(大概 2010 年后才陆续有相关的课程)。也就是说现在的成熟前端开发都非科班出身。相比起大学里一开始就学 C、Java、JSP、.Net 等语言毕业后依旧从事这门语言相关的开发工作的人来说,学习前端的人都经历过很长时间的自学、摸索、转型、犹豫和坚持。而且现在培训机构里的前端课程,也都普遍滞后于前端的发展速度,这个行业需要持续不断的学习学习再学习才能保证不被时代所抛弃。

但前端开发的学习曲线先缓后陡,易入门(但难精),初学者能所见即所得地看到自己的代码通过页面呈现并被其他人所浏览和使用,这种成就感很容易让大家不断地保持学习的激情。相信大多数人也都是这么坚持下来的。

最早的前端工程师包办了设计、前端开发、后台开发的工作,随着工作细化和专业化的发展,前端开发逐渐专注于 将视觉设计稿通过 HTML/CSS 转化为网页,并通过 JavaScript 赋予页面与用户交互的能力,并呈现用户数据,设计由专业的视觉设计师接手,数据由后台开发工程师负责。前端负责「连接」两者。

所以,什么是前端工程师?当别人再问你的时候,你也许可以用通俗易懂的话来解释:你们通过浏览器(或 App)看到的网页都是前端工程师编写而成的。为什么叫「前端」?因为从用户层面来说,网页就是离他们最最靠近并可交互的一(界面)。这个「端」也可以是 Phone/Pad/Watch/TV 的界面。

认知二:前端工程师的工作是什么?

最简单粗暴的说,前端工程师的工作即通过 HTML/CSS/JavaScript 将设计稿还原成可以在浏览器上呈现的页面,并与后台对接输出必要数据。

在这个过程中,你会遇到很多的问题:从最基本的设计还原,到兼容性、适配、性能优化,到最后的打包、发布、上线、迭代更新。同时还会有构建、工程化、安全、架构等更进阶的知识。

前端(后面的「前端工程师」简称为「前端」)面对的是这么一个世界:你的上游(视觉设计师)完全不懂编程并充满感性思维,你的下游(后台开发)完全不懂设计并忽略视觉呈现。而你,需要面对几大不同系统(Windows、Mac、Android、iOS)里的 N 个风格各异的浏览器,去保证统一的视觉效果,还得去适配好不同分辨率和尺寸的屏幕,然后增加必要的动效和新颖的交互,再关注项目的架构和可维护性,同时把准确无误的数据从后台拉取并合理呈现,再优化好页面的速度和性能,最后合并压缩发布上线迭代维护改版。

不仅如此,你还需要跟产品经理了解好项目需求,找交互设计师要页面的交互流程图理清网页脉络和信息架构;用浅显易懂的语言去和设计师沟通,解释实现原理,对齐页面效果,针对不同平台做渐进增强或优雅退化;刚刚跟设计师沟通完,还得换个思路跟后台开发去联调数据,编写业务逻辑;然后是跟测试工程师一起测试页面是否无误,最后在项目经理的统一安排下保证项目进度。

以上,基本涵盖了旧时代前端工程师的大部分工作。新时代的前端,我们留到后面说。

认知三:前端属于开发流程中的哪一环节?

首先,从「用户体验设计流程」来看(一般指 UED 部门),前端开发属于最后一个环节,他们核心的的作用即像素级地还原出设计稿,并实现必要的动效,衔接完整的可交互体验流程。

把视野再放大一些,从「整个项目开发流程」来看,前端开发作为连接设计与开发的桥梁,一方面要对接视觉设计,一方面要和后台联调;要理解设计语言,还原动效,也要精通程序语言,实现业务逻辑;有审美能力,也有技术功底,最重要的是不同语境下的沟通能力。

总结一下,从流程上看,前端充当着更多的是「连接」作用。

认知四:前端工程师的价值是什么?

前端工程师的职业特性决定了他们的价值,职业特性即(敲黑板,请注意):

  • 输出物直接面向用户
  • 工作流程中承担连接作用

1、输出物直接面向用户

这意味着前端工程师是良好用户体验的最直接的创造者,接收来自用户最直白的反馈,塑造了互联网体验生态重要的一环。「前端工程师面对的世界是一个残缺不堪的世界,他们的工作就是创造一个理想国」。

残缺不堪,首先体现在页面载体的分化——浏览器与终端分裂严重;其次体现在技术沉淀与革新速度矛盾——没有长久稳定的技术体系,技术革新太快;最后体现在稳定与变更的冲突——越贴近业务和产品层面,越可能改动频繁。

所以前端要解决的是这些问题,正如 Cat chen 这么说过

前端工程师的价值在于能够解决所有其它工程师都解决不了的问题。其实这对任何工程师职位来说都是成立的,如果你解决的问题别人都解决不了,或者解决起来方法很笨成本很高,那你的工作就有价值了。

有什么问题是前端工程师能解决但其它工程师比较难解决的?我们可以堆砌很多术语和热词,但我觉得这些都是没有意义的,能解决最终用户的问题才有意义。例如说,用户想要在移动设备上使用,那怎样才能让用户操作方便,怎样才能让低带宽网络不显得太慢,怎样在不稳定连接时假装还能服务,这样使得出错时能够收集调试信息……说实在的,如果有后端工程师觉得他们很了解这一切,他们可以来解决啊。只是如果你能够做到你解决得比大多数人要好,那你就有价值了。

2、工作流程中承担连接作用

连接的价值大不大?非常大,如果没有连接就会有断层,就会影响效率,就会失去跨界产生的创新。

朴灵这么定义 过前端工程师:

他们也许不懂交互设计,但是没人比他们懂交互设计的实现,和每一个细节。
他们也许不懂视觉设计,但是没人比他们懂视觉设计如何变为现实。
他们也许不懂后台数据库,但是他们其实才是数据的第一消费者。
他们也许不是产品经理,但是产品的质量几乎都是由他们来决定。

张克军这么说过

玩技术的都愿意玩“深”的技术,玩设计的又不愿弄脏自己的手。但是最终能把技术和设计完美结合在一起要靠前端工程师。

而且不仅仅是桥接,还需要对上下游进行补充:

  • 考虑设计师没有考虑周全的地方(如各种页面状态、极端情况,以及最均衡的设计点)
  • 补足交互没有考虑周全的地方(如交互流程缺漏,逻辑不通,层次关系不对等)

所以前端的沟通能力也很重要,因为要和团队大部分人员打交道 (视觉,后端,产品,交互,测试),而且需要深入沟通才能保证给用户的是够好的产品。每个前端工程师其实都一专多长,跨界地掌握了很多不同领域内的知识,并做一个「整合者」将其运用在用户体验的改善中。

认知五:前端工程师的未来?

如玉伯之前所说,前端领域分支逐渐形成:前后端分离、前端工程化、前端质量体系、前端工具与生态圈、数据挖掘、数据可视化、下一代类库框架、前端服务化、前端安全、商业化 H5 等,每个分支都是一个大体系。「大前端」的范畴逐渐往原生开发、桌面应用、可穿戴设备和电视等领域扩展。

时代在发展,我们永远不知道未来会发生什么。回顾历史,前端经历了 PC 年代大一统的局面,只需要将设计稿 1:1 还原并关注不同浏览器特别是 IE 的兼容性就差不多了,那个时候前端还得做设计写后台;而移动时代的到来给前端增加了新的工作量,即适配动效工程、不同的兼容问题等,这时各种炫酷的 H5 案例传播了起来,甚至多了「H5 工程师」的岗位。

Node.js 的出现打破了 JavaScript 只能在前端使用的局面,前端工程师可以通过 JavaScript 写服务器代码了;随着浏览器内核的不断更新开源以及套壳方案的出现 (Node-webkit、Electron),前端开始能开发桌面客户端了;为了提升 App 的开发效率和更新效率,React Native、Weex 等使用 Web 开发体验来开发高性能原生应用框架也随之而来,前端 write once, run anywhere 理念似乎开始传递给其他软件行业;微信开启了「小程序」的大门,支付宝/百度/字节跳动紧随其后,行业里有多了「小程序工程师」岗位。

WebAR、WebVR、WebAssembly、WebGL,网页如今扛起了一切技术应用的大旗,你不仅仅可以在网页里玩 VR 和 AR,还可以在网页里做机器学习、区块链,甚至是在网页里运行大型 3D 游戏或者一个操作系统。如今的前端以及其工作范畴,你已经无法去概括了。

职称上的转变也在透露着前端工程师的转型,如淘宝的前端工程师开始叫「端工程师」,2017 年又与客户端合并为「终端团队」,而腾讯里一些前端工程师开始转为「应用开发」(工作中还需要写 PHP 和 C 语言)。如今前端不再大一统,而是根据不同的业务场景衍化出不同的分支。对于个人的启发就是:夯实核心能力,围绕业务有偏重性地发展。

但最后前端工程师会被机器人淘汰?或者开辟出更多新的战场?这个就需要靠各位的努力了。