前端疲劳

前端图谱
图片源自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有一天也被遗弃,算法、数据结构和那些设计模式也会长久存在。所以,从长远来看,把更多的精力花在学习架构、设计模式以及算法数据结构等更基础的领域比总是追求那些新奇的框架工具要更加有利于我们的技能成长与职业发展。

放松心态

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

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

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

实践最重要

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

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

尾声



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

时间: 2024-08-28 02:40:28

前端疲劳的相关文章

Front-End Developer Handbook 2017 前端开发人员手册2017(4)

2017年预计-- 原文:https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/2017.html Web Assembly, 可能只是高峰. import 可能仅仅被用在 <scripts></scripts> 全部JavaScript解决方案会继续上升, 致敬/服务器交付前端的日子(如html对于客户). 反应性编程仍然兴盛于JavaScript的场景.(见MobX和RxJS). React,更多

web前端自学之路

web前端作为一个新兴的热门职位,在今日互联网的发展上,已经IT行业的一门新贵. 现在,很多人都认识到了这个新兴的职业,并且想要接触它,但是却是不知道怎样下手,如何快速的入门和学习呢? 前端,直白的讲就是做网页的,而我们想要制作网页所要学的,也是必须要学的就是三种语言,HTML.CSS.Javacript. 这三种语言的各自作用如下: 1.HTML是构成网页的骨架. 2.CSS是网页的渲染 3.Javascript是网页的动作. 这样讲可能有些抽象,打一个比喻来说,把网页比作是一个人. HTML

web前端开发必备技术

1.Vue.js是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 如果你是有经验的前端开发者,想知道 Vue.js 与其它库/

前端数据流哲学

本系列分三部曲:<框架实现> <框架使用> 与 <数据流哲学>,这三篇是我对数据流阶段性的总结,正好补充之前过时的文章. 本篇是收官之作 <前端数据流哲学>. 1 引言 写这篇文章时,很有压力,如有不妥之处,欢迎指正. 同时,由于这是一篇佛系文章,所以不会得出你应该用 某某 框架的结论,你应该当作消遣来阅读. 2 精读 首先数据流管理模式,比较热门的分为三种. 函数式.不可变.模式化.典型实现:Redux - 简直是正义的化身. 响应式.依赖追踪.典型实现:

《前端面试加分项目》系列 企业级Vue瀑布流

本文 GitHub github.com/ponkans/F2E 已收录,有一线大厂面试点思维导图,也整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习.文末有福利~~ 前言 接水怪又来了,没有花里胡哨的文字,只有心中那个还未完成的梦想??作为一个在互联网公司面一次拿一次 Offer 的面霸,打败了无数竞争对手,硬核的我带着硬核的文章,他来了!!~ [项目地址在文末哦??????] 介绍 延续接水怪的传统,每篇原创都会在公众号抽取一位小伙伴,送上前端经典书籍一本[文末抽取] 春招[

前端自动化之webstrom

在刚接触前端的时候,使用的就一直是webstrom,版本是webstrom 8. 前端自动画使用的时候,因为webstrom 8版本是没有集成gulp的.所以每次使用都默默跑到Hbuild中使用. 实际最近在webstrom 12中找到了简单的方法,就连cmd都省了. 上图: 在gulp的gulpfile.js文件上右击,点击Show Gulp Tasks 会弹出gulp的控制窗口: 然后右键服务,点击run即可.

Day12 前端html

前端基础之HTML 老师博客: http://www.cnblogs.com/yuanchenqi/articles/6835654.html http://www.cnblogs.com/yuanchenqi/articles/6856399.html html:静态的内容都是一个html标签,是有一组组标签构成的文件 css:对一个个标签做渲染定位 js:所有页面的动态效果做渲染定位 当写一个简单服务端的时候,一般这样写: 主要的是这:conn.send=("HTTP/1.1 201 OK

前端里移动端到底比pc端多哪些知识?

前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧. 首先来看看PC端和移动端在前端开发上的一些区别: (1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化: (2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一些规律要多摸索一下,

一张图掌握移动Web前端所有技术(大前端、工程化、预编译、自动化)

你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa 跨终端技术:HTML 5.CSS 3.JavaScript 跨平台框架:React Native.Cordova 前端工程化:Grunt.Gulp.Webpack 前端预编译:Babel.Sass.Less 自动化测试:Jasmine.Mocha.Karma 一图在手,应有尽有! 更多信息参考:https://item.jd.com/12170351.h