前端的兴起
前端真正兴起和开始频繁出现在大家的视线里,大概是在十年前。彼时的 Web 开发基本是由后端主导,前端能做的只是校验一下数据、操作一下 DOM。(其中数据检验是 JS 产生的根本原因:当时网络太慢,在服务端检验数据并反馈给用户,让用户知晓输入错误,这个流程太长、反应太慢,因此通过脚本在用户端完成第一步校验,既方便了用户,又减轻了带宽的压力。)即使 06 年 jQuery 发布并风靡全球,以及 XMLHttpRequest 被纳入 W3C 标准,也没有改变这种状况。制约它进度的原因很简单,因为很多事情前端 做不了 或者 做不好。随着时间的推移,近几年,Angular、Backbone、React、Vue 等框架陆续发布,让前端越来越正规化、体系化。此时虽然仍有很多事,前端 做不了 或者 做不好,但前端这个岗位却已变得热辣空前。那么,是什么推动着前端发展到如此大的规模和火热的程度?
也许,你可以列举出很多各种各样的原因,但是综其一点,就是 『用户体验』 ,是由于所有人对用户体验的重视,才让前端发展得这么迅猛,这么快地兴起。这里,可能要感谢 Apple,感谢 iPhone,感谢 Jobs,07 年第一代 iPhone 发布,正式引发了几乎所有人对用户体验的重视,从『只要能用就好』,变成『要好用我才买单』的心理。而,前端的先驱者们、浏览器的开发者们,也顺应了这个潮流,将一系列重要的能力加入了浏览器,加入了前端。
其中最重要的一项是 XMLHttpRequest,也就是 Ajax,它是富 Web 应用的基础,它让前端可以脱离后端的掌控,不用通过跳转的方式就能实现数据交互。感谢微软,感谢 IE,虽然被 IE 6~8 虐了无数遍,但是是它引入了 XMLHttpRequest ,引入了 Ajax,开启了富 Web 应用的时代,让用户体验大幅提升。
而近几年,随着移动互联网的发展,多端多平台的需求越来越多,产品形态和数据分离,是形势所趋。而与此同时,移动时代对产品形态跨端、跨平台、多元化的用户体验要求,让本身就有跨平台特性的前端技术着实又火了一把,它让开发者有更多的时间和精力关注用户体验,并很容易保持多平台用户体验的统一(不同平台用不同技术实现,虽然可以,但成本太高);除去上面的原因之外,前端技术自带的热发布、热更新特性,能在及时更新业务需求的同时快速修复用户所遇到的问题,也是大家选择它的一种原因。虽然另外还有很多零零总总、各种各样的原因,再促使着前端成为当前最火爆的几个职位之一,但是最根本的原因仍旧是大家对用户体验的要求。
从上面可以看出,前端的兴起源于所有人对 用户体验 的重视,而火爆更是由于所有人对 多元化的用户体验 的关注。当然,用户体验不只只是 UI 漂亮、好看,它是多方面的,例如视图的加载速度和流畅程度,这些取决于你选择技术的编码体积、运行效率等多种因素。说白了,前端的目的就是 让用户用得爽,那么 用户体验 必须是重中之重。
说了这么多,其实有一个很重要的点没有提到,那就是 CSS。注重用户体验,首先你要用界面要有 UI,HTML + CSS 作为最简单的 UI 构建方式,让前端的 UI 开发成本低到无与伦比,而开发成本低才会有更多的时间和精力去注重用户体验。同时,现在 CSS 也有相应的框架,像 PostCss、Sass 等,更进一步降低了开发成本,释放了开发者的时间和精力。
前端兴起这十年,也是用户体验飞速增长的十年。不管是技术完善度还是从业人数,前端这个方向受到了足够多技术人员的关注,同时也受到了足够多企业的重视。经过前端人不断的努力,现在的情况又如何呢?
前端的现状
提到现状,必须先提到一个概念 大前端。由于近几年互联网的发展,尤其是移动互联网的发展,有的大前端概念将 Native 归入前端的范畴,有的大前端概念将 Node 甚至只渲染页面的 PHP 归入前端范畴,但不管怎么说,笔者认为 大前端 是未来的一个趋势,将最终目标(提升用户体验)一致的技术归类到一起,让开发者清楚自己的最终目标是什么,要怎么做。当然,也正因为这点,作为一个前端工程师,如果你想更好的发展,你应该有更广的知识面,包括移动端知识、服务端知识。这些知识结合你的前端技术,才能更好地实现优秀的用户体验。
抛开大前端,单谈前端,从前端架构层面谈,最近比较流行的有四个:老牌劲旅 jQuery、最近火得不能再火的 React、Google 精品 Angular 以及 MVVM 框架 Vue。现在几乎所有的项目都会在这四种架构方案中选择其一作为基础,进行业务开发。四种框架,四种不同的思想,简单来说:jQuery Dom 驱动的思想深入人心;React 则推崇组件化,万物皆组件;Angular 则把 MVC 在前端领域发扬光大;而 Vue 则是以数据驱动为核心的 MVVM 架构。作为一个前端新人,不可能很快就理解所有知识和思想,只能一步一步来,先把你在工作中所使用的框架理解透彻,再去思考和学习别的。说实话,会用和理解的差距很大。
在这里,可能会有个疑问,上述四个架构,都很火,但是哪里涉及到用户体验了?是的,这些架构都没有直接涉及到 UI。但是就像足球,没有勤奋的训练和优秀的战术,再好的11人也踢不出好的比赛一样,这些架构从开发成本和开发体验上,降低了开发者编码和维护的难度,让其在 UI 的用户体验上的付出,事半功倍。当然,框架在编码体积、运行效率等多个方面影响了最终的用户体验。
上面所说的是,当前前端的一大现状 —— 框架横行,现在很少有公司、有工程师用纯原始的方式撸代码了。而前端另一大现状就是 —— 移动为先。原因很简单,随着移动互联网用户的暴涨,各个公司的产品都是移动为先,技术跟随着产品的步伐,也必须移动为先。这时,为了解决多平台的问题,Hybrid 方案脱颖而出,包括传统的基于 WebView 的 Hybrid 方案(例如 Cordova)和 React-Native 等一系列技术方案。在这里我就不多说了,关于移动前端的内容最近充斥着各种技术论坛、交流群、公共号,具体的,大家可以自己亲身去了解。
最后,对于现状,我想大家可能最关心的其实是职业形势。由于前端的兴起,前端人才市场相当活跃,平均薪金水平也是名列前茅。与此同时,前端的技术入门比较容易,造成另一个极端情况:人员泛滥、人才稀缺。这种情况,一方面由于前端发展太快,很难短时间掌握全部知识;另一方面,高等院校并没有开设专门的前端专业,大家更多是自学,野路子很多。所谓乱世出英雄,这样的前端大环境或许对一个新入行的同学更有利。当然,在如此『乱世』中,一个好的职业规划,才能避免『误入歧途』,保证自身顺利地成长。
如何做一个职业规划
上面讲述了前端如何兴起和前端的现状,下面将基于上述两点,分几个方面为大家提供一些有关职业规划的观点,希望对大家有帮助。
确定方向
做职业规划的目的是避免迷茫,而避免迷茫最有效的方式就是确定明确的方向和目标。
对于任何一个技术岗位,都有固定的两个方向:技术专家(架构师)和 开发经理。前者偏重技术,需要你在当前领域钻研得很深;后者偏向管理,需要你在对技术有很深掌握的同时,可以带领团队完成项目的开发。当然,两者并不是鱼与熊掌的关系,你可以同时成为技术专家和开发经理。
对于技术专家和开发经理两个方向的选择,更多取决于你自身在工作中多巴胺的分泌情况。当你专研技术时,多巴胺分泌得更多,感到更兴奋,或许你会很容易成为技术专家;反之,当你跟团队一起做业务时,多巴胺分泌得更多,更有获得感,那么你可以尝试向开发经理方向发展。当然,你也可能做什么都没有分泌太多的多巴胺,那么,你可以在尝试一段时间后,转型其他职业,例如产品经理。前端作为核心是用户体验,与用户最近的工程师,转型产品经理,阻碍会小一些。况且,文艺型前端布道人豆瓣前端负责人张克军认为,前端工程师正慢慢演变为产品工程师,前端和产品离得确实很近。
当你选择好一个方向后,你就要朝着这个方向一步一步进发。丹尼尔在《一万小时天才理论》提出一万小时定律,即要成为某个领域的专家,需要积累一万小时。当然这只是个概数,不过每天花更多的时间去学习和实践,肯定是最有效的。这里,成为技术专家和开发经理过程中,关注的点略有差别。成长为技术专家,要更多关注技术本身的实现,包括逻辑、架构、设计模式、方法论等;而成长为技术经理,则要更多关注技术开发的过程,考虑如何提高开发效率、降低开发成本、优化开发质量等等。不同的人,精力是有限的,选择性关注一些必要的方面,对自身快速的成长是很有必要的。
做业务还是做架构
做业务,时间要求比较紧,代码质量要求高,可参考的代码比较多,业务知识需要学习。做架构,时间稍微自由,对经验要求比较高,无可参考代码,专业基础知识需要深刻理解;最主要的,做架构的你既是开发,又是用户,还是 PM ,只有 80% – 90% 的明确目标,并在开发过程中不断微调最终的目标。
对于一个新人,其实不用纠结,做业务才是好的选择,而且做 技术含量高、使用流行技术 的业务才是最好的。原因很简单,架构的最终的目的是解决业务当中的问题,你没做过业务,哪能知道业务的问题在哪,你都不知道要解决什么问题,如何做好架构。所以,从业务做起,是新人最好的选择,也是唯一可行的选择。而选择有技术含量、使用流行技术的业务的原因更多在于成长,这样你的成长可能会更快、成长道路可能会更直。当然,这只是『可能』,不同的人适合不同的业务,所以不要强求一定『技术含量高、使用流行技术』的业务,更多的而是改变自己,去 适应团队、适应业务,这样才能 更快地成长。
事实上,很多时候,你会遇到很业务工作很繁重没有额外时间学习的情况。而如何在这样环境中更快地成长呢?说白了就是『抄』,不不,是 参考。将学习融入到工作中,是最好的方法。做新项目,参考老项目代码;做新需求,参考老需求的代码;没有同类型的代码,参考别的业务的代码。参考前人的经验,在巨人的肩膀上,成长才会变得更快。同时,你的导师和你的伙伴,也会在业务中给你指点,帮你快速解决成长路上的问题。
在这里,总结一下,在繁重的业务环境下快速成长,你需要 很优秀的学习能力、很持久的耐心 以及 很好的导师和伙伴,这样才能在技术成长的路上事半功倍。
技术的学习
说了半天,到了最核心的问题了,对于一个新人如何学习技术?笔者给的建议是:千万不要囫囵吞枣,先把当前使用的技术学透用熟,才是最重要的;千万不要在还没把当前使用的技术吃透之前,去学新的东西,不管新的东西有多火。就像上文所说,不同的框架,有不同的核心,有不同的思想。两个框架代码相似之处的思想不一定相似,例如 Angular 和 Vue 都有双向绑定,虽然效果相似,但是实现思想和内部实现方式是截然不同的。还在入门阶段的你,会被各种思想充斥头脑,反而会更不清楚。
一定的时间后,当你理解透一个架构体系后,你可以 类比地去看 更多的架构体系。这时候,你会发现不同架构很多东西都是殊途同归,理解得很快。
当然,理解透一个架构体系,有人需要一年,有人需要三年,还有人可能需要更长时间。为什么有这么大的区别呢?因为有些人在开发中,并不认为完成就可以了,会在开发中,追求代码的优美,会不断优化自己的代码,让自己的代码性能更好、可读性更高,并通过长时间的积累,达到 量变导致质变 的程度。即使一个特别聪明的人,没有『量』也不可能『质变』的,只不过他的量可能比其他人少而已。
要提醒的一点是,学技术,一定要结合你所在公司、团队的技术栈。例如,去哪儿前端应届生会在进入业务线前,进行3个月的脱产培训,2017年的前端培训课程内容中涉及的技术主要是 React 和 React Native,而去哪儿业务的技术栈也大多是 React,那么作为去哪儿的前端应届生,你优先学习 React 的技术体系是事半功倍的,既有前人可以问,又有项目可以实践。
当然,在学习架构的同时,不要忽略两样最基本的东西,一个是 技术基础,一个是 开发规范。
技术基础是一切开发、架构的前提,没有一个好的基础,是无法让你自身的技术水平达到足够高的维度。例如你对于继承理解的并不透彻,你很难理解清晰 React 的内部实现。
对于开发规范,笔者在带应届生时特别注意让他们遵守。代码规范比比皆是,但是很少有人严格遵守。究其原因,多是在代码规范制定之前,已经有自己的一套代码习惯,很难短时间改变自己的习惯。而应届生,一般来说代码并不多,还没有形成自己的编码习惯。这时候,开始遵守一定的规范,会促使他们养成一个较好的编码习惯,为后续的成长打好基础。下面,列举一下开发规范的几点好处,让大家明白代码规范的重要性:
规范的代码可以促进团队合作。
规范的代码可以减少 Bug 处理。
规范的代码可以降低维护成本。
规范的代码有助于代码审查。
养成代码规范的习惯,有助于程序员自身的成长。
这部分最后,推荐一些学习技术的好地方,例如情封大大三年不停更的《前端早读课》、阿里大漠(不是大漠穷秋)的 w3cplus.com、微信公众号《前端圈》、《前端之巅》、《Node 全栈》,当然还有公司内的 《Qunar 技术沙龙》微信公众号,笔者所在团队 YMFE 的博客 blog.ymfe.org 等,都是学习技术的好地方。
主战场 —— 移动混合开发
随着移动浪潮的兴起,业务在移动端App 的需求量迅速扩大,应用迭代更新的频率也随之极速攀升,但与此同时纯 Native 的开发和更新成本成为了业务增长难以逾越的瓶颈。因此,引入一种开发更高效、成本更低的解决方案势在必行。
在当前的移动互联网环境下,iOS 和 Android 上的 App 已经成了每个互联网产品的标配。如果一个用户端产品并不提供相应 App 版本,几乎会直接定义成一个不完整的产品。而被互联网人尊为铁律的『唯快不破』—— 快速开发、高速迭代、低成本上线,同时也是移动时代每个开发团队所追求的目标。综合以上两点原因,『Native 搭台,Web 唱戏』的 Hybrid 开发模式,以『快』的特点赢得了大家的青睐,并纷纷投入大量开发力量,使这种开发模式迅速走红。当前最常见的技术架构方案有以下三种:
基于 Web 的 Hybrid 解决方案:例如微信浏览器、各公司的 Hybrid 方案
非基于 Web UI 但业务逻辑基于 JavaScript 的解决方案:例如 React-Native
基于 Web UI,但是为了追求运行效率,对 UI 展现逻辑和业务逻辑的 JavaScript 进行了隔离的解决方案:微信小程序
对于一个前端,笔者感觉每个人必须了解这三种常见方案的实现方式和优缺点,这样才能在开发移动端业务的时候,更为清楚自己所要注意、所要学习的地方。当然,仅仅了解实现方式是不够的,你要有环境去实践你学习的东西。再拿去哪儿为例,去哪儿现在大多数业务都是移动端的,Hybrid 和 RN 方案都在被使用。所以,作为一个应届生,你很有可能去做一些 Hybrid 或者 RN 的项目。做 Hybrid 项目时,你更多要考虑的是『如何高效地操作 Dom』;反之,做 RN 项目,你更多要考虑的则是『如何减少和 Native 的通信』。这两点,最终都会反应在项目的用户体验上。
前端中的『另类』—— Node
对于 Node,作为一个前端,应该并不陌生。Node 最大的卖点在于完全异步的 I/O 模型,相比于阻塞 I/O ,异步 I/O 模型极大提高 Web 服务的并发性。因此,前端都可以自己开发服务端了?
这样认为的同学,笔者只能说,你想多了。Node 是可以开发服务端,但是不代表所有前端都可以使用 Node 去开发一个庞大业务的服务端。你去知乎搜索使用 Node 开发服务端的相关问题,一部分人会说 Node 不能替代之前的服务端语言,另一部分人会说什么也阻挡不了 Node 在服务端的脚步;同时有很多诸如 Paypal、阿里这样大公司大规模使用 Node,也很多公司在落入 Node 深坑而不起。不论争论如何,笔者认为,Node 是否能写服务端,主要在于使用 Node 的人是否有服务端的思想。开发服务端和开发前端是完全不同的思想,服务端更注重效率、更注重稳定、更注重高并发情况下数据的处理,用前端的思想去开发服务端显然是不行的。当然,成功的案例中,Node 也更多运用在页面渲染这一层,配合前端更快的渲染页面,提高用户体验;而复杂的数据逻辑,还是用传统的服务端语言进行开发,毕竟技术成熟、运维成本低。
这里,会出现一个问题,我只是前端,需不需要去学习 Node?笔者的答案是 需要。前端兴起已经很多年,已经从游击队乱枪打鸟的阶段逐渐变为规模化、工程化的时代。在这个时代中,尤其是在工具和流程方面,Node 起到了很大的作用,扮演很重要的角色。诸如 Webpack、Gulp、NPM 这些工具,他们被运用在各个公司的各类前端项目中。学习 Node 其实就是去学习前端的工具,去学习前端的工程化。