前端开发未来三年规划（从前端到未来前端发展闲聊）

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. 总结

前端开发正当其时，但是也要居安思危，提升自身的技术，既不作之前的切图狗，也不作现在的使用组件仔。打牢基础，扩宽视野，才是正道。

最后

以下是总结出来最全前端框架视频，包含： javascript/vue/react/angualrde/express/koa/webpack 等学习资料。

【领取方式】关注头条 前端全栈架构丶第一时间获取最新前端资讯学习手机用户可私信关键词 【前端】即可获取全栈工程师路线和学习资料！

,