前端图谱
图片源自Jeff Pelletier的博文: The Front-End Spectrum，我进行了汉化。。。
博文地址：https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0#.284fx8170

引子

假如不会游泳的你不幸落水，碰巧还没有人会来救你，你是不是会觉得自己只能在绝望中溺水而亡。不，你要同死神抗争，要在绝望中寻找希望（等下，这难道不是新东方的slogan？）。其实，你依然有两种方法可以自救。第一种是在生命危在旦夕的巨大恐惧下顿悟，学会了游泳成功续命；如果你觉得这不可能，那么就只能用第二种方法了——把你身边的水全部喝光。

你可能觉得我在逗你。说好的前端呢？别急，听我娓娓道来。

从入门到入门

自从三个月前写完了《JS家的排序算法》之后，我发现自己得了一种病。彼时的我刚刚钻研了几天算法和数据结构，但转眼间就被那些纷繁复杂的前端技术与工具迷住了双眼，勾去了魂魄。学习热情高涨的我，雄心勃勃的制定了一个又一个计划，马不停蹄的搜索下载了各种教程指南，关注访问了数也数不清的技术博客与技术社区。我那亢奋的大脑告诉我，我要努力地把前端技能树上的每一项技能都解锁并升级。于是，我就一头扎入了前端的深海中。然而，下水之后我才意识到，原来自己并不会游泳。

千万别把开头的引子当成笑话，我为了救自己真的就是在用第二种方法，试图喝光身边的水，妄想尝遍前端的各种技术。开始时我还并没有觉得这样有何不妥，我毕竟还年轻，有大把的时光可以慢慢学习，消化这些喝下去的水。可是，问题在于，前端的这片海是动态的。还记得小学数学的那道计算题吗？一个水池一边往里进水另一边往外排水，问多久能把水池排空。前端技术栈的更新换代如此的频繁迅速，很可能在我写下这篇文章的几个小时里就有一个新的前端框架被发布出来了，我又怎敢奢求将前端的这湾海水排空呢？最近的我愈发感觉到网上的教程是怎么学也学不完的，新出的工具packages是怎么下也下不完的，最新发布的各种技术博文是怎么看也看不完的。我总是很难将精力只放在一种语言或一个工具上，它们总是不经意间就被分配到了其他地方。有时我甚至开始质疑自己的职业选择是否正确，一直在入前端的各种门，可究竟何时才能精通，才是个头呢？迷茫，疲惫，无从下手，不知所措。当这些感受通通向我袭来的时候，我知道，我是得了一种叫做前端疲劳的病了。

经常关注前端技术社区的朋友们应该知道，前段时间有一篇很火的博文，叫做How it feels to learn JavaScript in 2016 ，汉化版叫做在 2016 年学 JavaScript 是一种什么样的体验？ 这篇文章引起了国内外众多前端开发者们的共鸣。他们揭竿而起，纷纷点赞，大声疾呼：“我受够啦！”作为一个代码写的比段子好笑的三流程序员，我当然很喜欢这种诙谐幽默的整篇文章都是段子的小品文。作者虽然是歪果仁，但却深刻的掌握了中国传统相声的精髓，设定了一个逗哏和一个捧哏，以对话的形式把涉及到JavaScrip的几乎方方面面面的工具和特点全部过了一遍。其实，作者就是在谈前端疲劳。那么现在问题来了，有这么多不同的前端技术栈，不同的前端框架，不同的前端工具和库像水一样包裹着我，我不去学就不会，学了又学不完。在前端的海洋里越陷越深的我究竟该如何自救呢？

水是喝不完的，游泳才是正道

为了了解前端的海有多深多辽阔，我们把文章刚开始的那副前端图谱拆开来看。

前端图谱圆盘

你一定能在这张乱花渐欲迷人眼的圆盘图上发现很多熟悉以及不那么熟悉的logo。图的作者Jeff Pelletier不愧是名UI工程师，他的设计真的很好看。布局新颖，造型独特，五彩缤纷，生动形象。这张圆盘可以说是整个前端图谱里的颜值担当了。然而，光好看是不能解决问题的，我们更加需要的是它的对应颜色的图解。

对应颜色图解

不知道看完这张图解之后的你作何感想？是从入门到放弃呢，还是从入门到转行？反正当时正打算把前端的水都喝光的我看完之后内心是崩溃的。尤其是看到Back-End也被加了进来，这幅图瞬间就变成了一副全栈图谱。

事实上，抛开前端疲劳不谈，仅仅是JavaScript，就足够我用尽自己的洪荒之力了。先要从原生JavaScript学起，“古代”的ES3/ES5，“现代”的ES6，以后还会有“未来”的ES7。然后是JS框架，jQuery、AngularJS、React或者是最新的Vue。当然，想开发出一个完整的应用，后端知识也必不可少。所以NodeJS的坑也得入。这一套走下来，可能根本还到不了前端疲劳，就已经JS疲劳了。

好在此时的我终于意识到了，把水喝光是不现实的。因为这样做的后果很可能并不是被淹死，而是先被撑死。每当看到前端技术社区里接二连三的出现从未听闻过的新的名词，新的工具，新的框架，我就会产生一种深深的落伍甚至自卑感，觉得自己什么都不会，严重怀疑自己正在使用的技术栈是不是早就被抛弃在了前端世界那无人的尽头。但我可不想就这样消失在世界的尽头。我需要做的是立刻停止一切恐慌，闭上嘴巴，尽快熟悉这种全身被水包围的感觉，然后尝试让自己浮起来，把头抬出水面，找到一块陆地，接下来，就是朝着那块陆地的方向，抡起膀子甩开腿，游起来吧。

拯救前端疲劳

你不是一个人在战斗

一开始我总觉得前端疲劳是因为自己的学习能力不足进而受挫而导致的心理疲惫。我不愿意跟别人说，因为觉得有点丢人。然而，当我在很多前端开发者们的博客里看到他们也提到了这种疲劳的问题，我才知道，原来我不是一个人在战斗。这种疲劳感普遍存在于前端开发者当中。即使是那些顶尖的大牛们也会偶尔疲惫困惑，但他们总能很快的找到解决之道。所以，如果你也有这样的困惑与疲劳，并且试图找到方法来克服它，请记住，你不是一个人在战斗！

夯实基础

不知道是我的幻觉还是事实，前端程序员好像一直是处在程序员鄙视链条里的最底层。不需要懂编译原理，没必要学算法数据结构，只要懂点HTML/CSS以及JS，会抠图知道怎么引用个库，就可以去建网站了。根据我自身的体验，如果只是建一个蹩脚的只有自己会访问的网站，那么确实这样就够了。可是，一旦遇到逻辑更复杂的网页应用，仅靠这些知识可就完全hold不住了。当然，仅仅理解了这点对我并没有帮助。我反而陷入到了另外一种死循环中，就是不停的去学习新的工具，新的框架，新的别人造的轮子。

事实上，无论那些工具和框架变得有多么快，最基础的知识是一直都不会变的。我们应该把注意力放在怎样去解决问题，放在问题本身，而不是纠结于工具。要知道，工具肯定会一直变，唯解决问题的方法与思路不会变。现在风头正劲的React可能过几年就会消失，但是JavaScript会接着活下去。即使JavaScript有一天也被遗弃，算法、数据结构和那些设计模式也会长久存在。所以，从长远来看，把更多的精力花在学习架构、设计模式以及算法数据结构等更基础的领域比总是追求那些新奇的框架工具要更加有利于我们的技能成长与职业发展。

放松心态

其实，前端疲劳的病灶不在于那些繁多的工具与框架，它们被造出来的初衷就是为了更好地解决相应的问题，这个锅它们可不背。真正的原因还是出自我们自身。我们总是会被新鲜的事物所吸引，总觉得我们应该去学习它，不学就会落伍，就会被时代的潮流所抛弃。毕竟，喜新厌旧可能就是我们人类的天性。

我不太清楚国内互联网公司的情况，就我自己所在的美国来说，很大一部分的美国公司是不会去追赶潮流的。他们使用的是早已证明了自己拥有良好性能表现的那些成熟的语言和框架。对于最新的前端技术，他们大多都是持观望态度。等到这种技术已经可以证明自身的稳定以及性能的优异时，他们才会慢慢的去过渡。

因此，没必要为了自己认为的不落伍而去赶潮流。放松心态，专注于自己目前正在使用的技术栈。对于那些新技术，有兴趣当然可以去尝试，不去尝试也没有关系。不过，如果确实准备去尝试了，要专一不要贪心，千万别给自己列一堆新技术的学习计划，然后最后没有完成就只能变成无形的压力堆积在心里了。

实践最重要

对于前端学习，我之前有一个很大的误区。面对一项新技术，我总是计划先把理论研究一遍，再去上手操作。然而，这种策略给我造成的后果就是，很多技术的学习我都半途而废了，因为理论很枯燥，还没等到实践就已经对它失去了兴趣。这和学游泳是一个道理。想学游泳就应该直接扎到水里，惊涛拍浪。那些在岸上捧着本流体力学研读的人，不仅不可能掌握游泳的诀窍，还会对游泳失去兴趣。

所以，对于那些基础知识，我们当然需要进行理论层面的研读。然而，对于很多前端技术，我们就应该放下手中的手册与指南，直接上手，在实践中摸爬滚打，方能求得真知。

尾声

“那个选择把水喝光的年轻人最后怎么样了？”
“我们开船路过这片海的时候刚好发现了他，就把他救了上来。当时他整个人已经昏迷了。”
“那他活过来了吗？”
“他死了。医生说本来可以救他一命，可是没想到他喝了那么多水，把自己给撑死了。”
“那另外一个学会了游泳的年轻人呢？”
“我们把他救上来以后他吃了点东西。可他一直很亢奋，说自己终于会游泳了，然后吃完东西他又跳回海里游泳去了。。。”
（完）