1. 前情提要

毋庸讳言，在我刚工作的时候，前端是还是一个不受重视的岗位。切图狗，写网页的这种侮辱性绰号绑在前端开发身上。我自己体验到的一个很明显的标志是：招聘网站上，前端开发的工资是其他开发工资的90%甚至更低。

在知乎一个2011年的前端地位问题（《如何改善国内前端开发行业的尴尬地位？》）中，包括贺师俊老师都承认这种尴尬确实存在。但是，30年河东30年河西，到了2018年，前端已经成了炽手可热的岗位。现在如果开一家科技公司或者组建自己的一个团队，要是还没有自己的前端，那我只能说你这家公司还不上台面。包括最近今日头条和拼多多在疯狂招人，前端也是最需要的岗位之一。

　　究竟是什么原因，导致前端在短短的几年时间里，从一个受尽白眼的菜鸡坑，一跃而成为一个重要的、被广泛需求的开发岗位？这种被重视的情况能存在多久？红利下又有什么样的隐忧？前端开发应该如何发展自己才能成为TOP5？本文将根据我自己的思考回答这些问题，也非常非常欢迎大家留言探讨。

　　注：本文中的前端都是指H5开发，非大前端，不包含iOS和Android终端开发。

2. 前端发展线

2.1 蛮荒时期

应用设备：PC
技术栈：LAMP

这一时期也是前端最被鄙视的时期——坦白说，就没有什么前端概念——在这一时期，前端是被一群人瓜分的：设计师通过DreamWare来做页面，应用开发和后台开发通过JSP、PHP来做。路人甲乙丙丁，是个人就能来前端插一脚。业务逻辑都放在后台，页面上没什么动效，也没有高大上的交互。最惨的是，前端大量依赖后端去实现，要想混出个头必须要会PHP或者JAVA，不然命根子在别人手上，简直寸步难行。

这一阶段的技术栈是LAMP(Linux+Apache+Mysql+PHP)。看这些名词就知道，那个时期的前端，真的和前端没什么关系。被鄙视也是正常的。

这段时期对应着我的大学时光，那时候，我就就是靠着JAVA+JSP+模板网站上随便下个UI模板，混日子做网站，赚得了第一桶金。

2.2 前端时期

这一阶段其实可以分成两部分来说，一部分是MVC时代，一部分是MVVM时代。

2.2.1 MVC时代

应用设备：主要是PC，少量的移动端界面
技术栈：AJAX，JQuery, CMD/AMD，Grunt/Gulp

当有了AJAX之后，前端终于能和后端做解耦了。同时，因为PC的普及和网络性能的提升，人们也希望网页能有更好的用户体验。MVC框架应运而生，不过，受限于各种自我放飞的浏览器，前端能做的事情仍然少的可怜。

这个时候的技术栈是JQuery库，那时候会JQuery就代表会前端，要是你还读过JQuery源码：“哇，兄弟你屌了，哪里高就啊？”

不过大部分的前端工作都是在做浏览器兼容，直到现在，我一想起IE还能瞬间举出几个IE6，7，8的坑。现在的新人可能还不能深刻的这些兼容性让前端工程师有多么抓狂。举个例子，直到2017年，我去参加JSConfig大会，还有个公司把只支持Chrome浏览器作为一项福利写在用人告示上。

在这个时代，设计师和后台已经开始放弃前端了，不过我猜怕麻烦的心胜过了对技术的畏惧，因为我不止听一个人说过：让我写CSS/浏览器兼容，我头就疼。

MVC时代的后期，前端逐渐开始有了一点工程化的影子: 模块化编程有CMD/AMD，构建有Grunt/Gulp，编码约定有Jslint/jshint。我们终于不是在一个JS文件里面写写写了，你以为可以翻身农奴把歌唱了？并不是。

移动端迅猛发展的前期，iOS和Android这样的终端开发才是这个社会的主流，前端开发受限于网络速度和没有统一的Html标准，还是不受重视。

2.2.1 MVVM时代

应用设备：移动端，PC端
技术栈：Angularjs，React，Vue，ES6，HTML5，CSS3，Webpack, PostCss，Flexible, Viewport，ESlint

　　Chrome V8引擎的出现、H5和ES6标准的实施，补齐了前端最后一块短板。前端可以肆无忌惮的彰显自己的存在感：更炫酷的人机交互，更流畅的用户体验。同时，4G网络的普及，也让前端也正式迈入了移动端的开发。

如果说在MVC时代终于体会到前端也算博大精深（主要是前端的优化和兼容，代表人物张鑫旭），那么在MVVM时代则真正体会到了前端的魅力。

不同的框架和新技术如同雨后春笋一样疯狂涌现。作为一个前端，尚不敢说自己掌握了所有的技术，更勿论其他开发了。前端和其他开发之间第一次有了鲜明的壁垒：其他开发当然也可以来做前端，不过要想做的好，学习代价大到令人发指——而这往往是不能被接受的。

在这个时期，前端也不甘心只做个页面或者移动网站，做了很多的类APP尝试，诸如PWA，微信小程序。前端开始正式侵吞终端开发的生存空间。

2.3 全栈时期

应用设备：服务器
技术栈：Express, Koa, Eggjs

单做前端，终究要受到服务器的限制。Node的出现令前端开发拥有了控制服务器的能力。正式宣布广大前端开发向接入层迈进，抢了应用开发的饭碗。

当然之前有些前端开发也会PHP，但是偏PHP的那叫应用开发。现在，使用同样的JS就能控制服务器，更不用提Node在SSR上的先发优势（PHP使用js扩展也能做，不过我想只有应用开发才会干这事）。前端控制了接入层之后，后端彻底沦为了前端的接口提供方。之前的跨域，gzip压缩这种求爷爷告奶奶的事情，自己就可以完成了。

可以说，Node拓展了前端的地盘，这时候，前端也不再被称之为前端，而是改称全栈开发。

2.4 未来

应用设备：全部终端，服务器

移动手机的普及让iOS和Andriod为首的终端开发享受到了红利，而随着5G网络的推进和[PWA][3]被支持，前端开发也将迎来最大的一波红利。在可预见的将来，前端受益于灵活的部署和安装，在移动端开发中比例会逐渐加重。

我甚至认为，前端会成为终端开发的最终解决方案，包括但不限于手机，电视，车载中控等等。

项目 = 前端 + 大数据/AI

3. 个人发展思路

3.1 遇到的问题

上面说到过，前端不仅现在火爆，而且还将在继续火爆的路上走很久。但是在前端开发技术的提升上，我也会遇到了很多的问题，具体如下。

3.1.1 组件太多，浮在表面

毋庸置疑，会使用某项技术当然是最重要的。但是，如果在学习技术的时候，如果只停留在学会使用的层面，是远远不够的。

只学习表面的使用，首先是很容易忘记，其次是遇到了问题不能迅速解决或者定位。整个人都会产生一种明明用过，但是实际上一问三不知的感觉。

就我自身而言，我最讨厌的一种感觉是：

A: 听说你用过XX？
B：嗯
A：那你能我讲讲它的XX逻辑吗？为什么要这么写，我没看懂哎
B：(⊙o⊙)…

而且现在框架和组件太多，浮在表面的另一个坏处是对各种框架和组件都了解不深，在技术选型时会遇到迷茫的抉择。

3.1.2 基础不牢，难以接纳新技术

当我们去接触一项新技术的时候，有时候会觉得文档晦涩难懂，怎么看也很难看懂。排除小概率文档确实不咋地的情况，大部分情况是我们缺少了这部分的知识体系基础。

举个很简单的例子，去补充一个完成了一部分的拼图，一定比拼一个完全空白的拼图容易。

如果回顾一下前端这些年的技术栈，你会发现前端的技术更新是最快的（远快于其他各端开发）。如果难以接受新技术，就会大大降低自身的价值，我想这是作为一个有梦想的工程师都难以接受的。

注：前端技术更新快的原因：

• 零历史负担：代码随时可以更新，无需像终端那样等审核，也无需像后台那样要支持多个业务不能随便变。
• 硬件更新带来的红利：浏览器性能的提升，移动手机的普及，4G网络的应用，前端网页有大量的需求
• 更广的技术范围：前端H5, 接入层Node。相比起来终端开发和后台开发都只有自己的一亩三分地。

3.2 采取的策略

谈问题只能发现不足，有策略才能不断提高。论坛上也经常也能看到如何有效的提高自己的问题，这时候就有人跳出来说“看源码”。我完全不否认看源码的作用——实际上我觉得看源码是质变的一种方式——但是，提升不仅仅只有看源码一条路，实际上当基础不牢的时候看源码是完全看不懂的。所以要根据自身情况，在不同的阶段选择不同的策略。

3.2.1 明确自身定位

这一块我觉得是最重要的。在我们开始学习、工作之前，或者是学习、工作了一段时间之后，审视自己，确定自己的层次，给自己制定一个合适的提升策略才是关键。明确定位应该不断的被提起，通过对业界，对自己的反思，才能理清自己进步和努力的方向。

3.2.2 培养技术品味

当理清了自身的定位时，如何前进，向哪里前进就成了另外一个问题。自己是很难形成技术品味的，要有更多的输入，包括但不限于上文的阅读源码和博客，才能形成自己的技术品味，也从而知道自己该前进的方向。

3.2.3 巩固基础，解决问题

认真对待自己遇到的每一个问题，从不轻易放过，尝试结合原理从自己的理解去解释问题。每解决一个问题，就是对原理的又一次深入理解。几次三番之后，即使遇到自己没有遇到过的问题，也可以举一反三，事半功倍。

这个部分和第二步是不分先后的，二者交替进行。

3.2.4 多写博客，多做总结

我之前经常会遇到感觉自己已经完全弄清楚了某件事情，但是过了一段时间，再去看的时候又忘记了。这有两个原因：

• 之前理解的并不深入，如果自己深究，还是有不理解的地方
• 记忆确实遗忘了

解决这个的方法就是多做总结。总结的过程也是一个反思的过程，这时候更能清晰的梳理自己的思路，然后把自己的闪光点记录下来。从而达到深入理解和备忘的两个功效。

如果是坚持不下来可以找个朋友采用对赌方案，每次不写就扣个几百块，我自身的亲身体验，有奇效……另外，因为隔一段时间就要写博客，也促使自己一直在留意和反思日常的工作，简直一举两得。

3.2.5 以点带面，跨界突破

这一块我也是单纯有个想法。我遇到的大牛，不仅对自己的领域非常了解，对其他的领域也有所认知。这是一种深层次的帮助——通过理解别的领域的方案，从而反哺自身。所以学习其他的语言，研究其他开发的理念，对前端的开发都是有帮助的。

以上这五点要是都能做到，不说成为大神，养家糊口、自信爆棚应该还是可以期望的。

4. 总结

前端开发正当其时，但是也要居安思危，提升自身的技术，既不作之前的切图狗，也不作现在的使用组件仔。打牢基础，扩宽视野，才是正道。
本次给大家推荐一个交流圈，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入：582735936，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。