前端leader找我谈心:我是如何从刚毕业的前端菜鸟一步步成长为前端架构师的?

谈谈学习

我做前端已经有五年的时间了,从大学刚毕业的时候,我是一个完全什么都不懂的小白。虽然我大学里学的是软件工程专业,但是因为在大学里荒废学业,每天只知道打游戏,基本上到大学毕业之前我是什么都不会的,而且大学里是没有教前端相关的东西的。

我是在大学毕业之前,两三个月,自学了一点点前端的皮毛,也就是会写一点点的html和css。那个时候找工作也不容易,终于有一个公司收留了我,虽然说工资什么的我们暂时按下不提。但是至少他们要我,我就非常地开心了。

从那个时候开始,因为有了项目要做,所以我逼迫自己,每天去学习新的内容。那个时候我从jQuery开始做,因为公司的项目比较特殊,就是单页应用,总共加起来大概就五六个页面,但是要一次性全部加载完,后续的所有数据都是根据接口去获取。那个时候没有框架,没有React,ngular也刚刚出来,还并不流行。所以那个时候我们就用jQuery。

然后我就想办法去做,第一版做的非常的烂,就一个js文件我写了3000多行代码。所以在那个时候我逼迫自己想办法去解决各种问题。我就针对自己当时的认知,比如说js文件太大了,应该怎么办?

然后我去网上搜,我发现了sea.js这个东西。我学习了它异步加载JavaScript的方法,后来才把它引用到项目里。

当我发现代码量多了,很难去维护这个逻辑,还有页面的切换。于是我就去网上搜资料学习,发现有backbone.js这个东西,它可以帮我解决这个问题。

在后来这段时间里,我积累了非常多的东西,也是我进步最快的一个时期。

当我再去接触到这些Vue、React这些框架的时候,我先去学习了一遍它们主要是解决了什么问题,它们主要的功能有哪些。然后我再尝试用到项目里面去。那个时候,我刚开始学的是Angular,当时也没有了解到有构建工具这个概念。那时候最多只知道有Grunt,帮你去压缩一下js。

当时,我还没有模块化的概念。

后来又做了一些项目,发现了很多的问题,我再去想办法去解决。这个时候才会知道有Webpack这些模块化组织代码的工具。我就是在这种环境下一步一步成长起来的。我所有学的内容,对于前端的了解,基本上都是基于我想要去解决一个问题,然后再去网上搜相关的内容,然后去想办法把这个问题解决掉。

所以对于我来说,学习这个东西,你要知道你要解决什么问题。然后你学的这个东西,它解决了什么问题。它适不适合用在你遇到的这些问题上,以及你在学习这个内容之前,你必须要对它的整体有一个了解。不然的话,你就是瞎用。你用的方法可能根本就不是这个框架要解决的问题。

比如Vue,大家对于vue整体有一个概念之后,再去用到一个项目里面去。而项目一开始我们做的时候并不要求做的特别的复杂。只要你基础扎实,你肯定有办法去解决这些在项目里碰到的问题。而在解决问题的过程当中,才是你掌握了你学习到的东西,巩固了你学习到的这些内容的地方。

所以这就是我要谈的学习。

谈谈前端

现在的前端跟五年前的前端是天壤之别。

五年前的前端,框架之流刚刚兴起,也就是Angular带的头,那个时候刚出来没多久。那个时候流行什么呢?就是写页面模板。

我们写好html、css,以及这个页面上简单的动画效果,比如说点击一下有什么事件之类的。然后这个东西写好之后干嘛呢?丢给后端人员他们用后端模板,比如说最多的用Java,Java有jsp模板语言,接着把数据填进去,就OK了。

这个时候我们一个网站有很多页面怎么办呢?比如说我们写了很多的html页面,写好之后交给后端人员,然后他们整合在模板,再把数据动态插进去。这样的话,每个http的请求发送到后端那边,后端根据这个http请求,返回不同的模板,并且把数据渲染进去,最终返回给用户。

这就是以前的前端。那么现在的前端呢?

我们把渲染模板的操作从后端挪到了前端来做。因为把模板渲染这部分拿到前端来做,所以很多业务逻辑的判断、渲染、数据获取等都要在前端来做。这个时候就大大加深了前端的业务逻辑。它包含的内容就比以前上升了好几个量级。

在这种情况下,我们需要一个框架去整理代码。而这个时候就会出现各种帮助我们前端开发者去处理这些内容的东西,比如说我们有了前端路由的概念,我们有了store状态管理的概念。以前MVC的时候,还有过其他的处理数据的方式,反正各种各样的工具帮我们去处理这个问题。

伴随着前端业务代码越来越复杂,我们用以前的方式去写JavaScript代码,效率非常的低。因为我们写的JavaScript代码很多都受浏览器兼容的限制,或者是它的低版本的很多功能不支持,导致我们写起来非常的蛋疼。

彼时前端界不缺人才,他们发明了各种各样的工具,比如用babel让我们能提前享受到最新的JavaScript语法带来的很多很好用的功能。当我们有了React这类框架之后,希望前端的应用以js作为入口,而不是以html作为入口。我们html里显示的内容都是从js里面渲染出来的。

由于整个应用基本上以js作为入口,我们就需要用js来处理css、图片等其他静态资源。这个时候我们发现,js本身不是用来处理这些东西的,而我们又迫切需要一些工具来处理这个问题,因此又出现了webpack。

所以前端的发展速度在整个编程界来说,是相对特别快的。主要的原因就是因为以前的前端它的标准实在是太低了。现在补充的很多js 的标准、前端的一些标准都是以前发展缓慢,落下来的。所以说,现在只能说是慢慢地变成了一个正常的状态,而不是说已经超前非常多了。

前端现在要入门的童鞋,对你们来说,其实不算是一个特别好的时机。

如果你之前是有基础的,那么还可以。如果你之前一点基础都没有,你会发现前端进来之后,你要学的东西特别的多,各种各样的东西。在这种鱼龙混杂的时候,你必须要保持一颗好奇心,保持一个吸收新知识的能力。你要经常去看一些文章,或者是GitHub,或者是一些厉害的程序员的博客。他们有发现新的东西,好玩的东西,都会分享出来。然后你要立马去学习,因为它有可能就是将来的主流。

所以现在去学习前端,你要时刻保持一种学习的心态。

谈谈面试

现在的前端状态有点混乱,发展节奏有点快,你仅仅是想把vue学好是不可能的。你要学vue就必须要学webpack。当然你可以直接用vue-cli去生成一个项目。但是对于好奇的你,肯定会想,vue-cli里面到底做了哪些东西。

然后当你以后出去面试的时候,你跟面试官说,你做过vue的项目。然后面试官肯定会问你一些webpack相关的一些东西。这个时候你又说不出个所以然来。他会问你,那你的项目是怎么生成的,你会说用vue-cli脚手架生成的。他会问你,那你有没有看过vue-cli里面生成的一些代码,然后这个时候你又说没有。那么他对你的期望值就会变得非常的低。

当然有的面试官还会不厌其烦地问你,为什么我们用webpack生成的文件名后面要带上一串哈希码?这个问题至少我问过很多初中级的童鞋,他们都是不知道的,不太清楚,或者只是清楚一些有概念叫做缓存。但是至于这个文件名后面加一堆哈希码,到底是做什么事情,他们不太清楚。浏览器如何去缓存,他们也不太清楚。

所以webpack是一个逃不开的话题。然后还有vue-router、vuex这些已经算是vue项目开发的三驾马车。因此当你想学好vue的时候,意味着你还要学好webpack、vue-router、vuex。

当然,服务端渲染也是值得讨论的话题。这些东西要去全部学习好,对于基础比较差的童鞋来讲,确实有点难,他一下子接收的东西实在太多了。一旦涉及到webpack,而webpack又是跑在node端的,所以你还要学习用node.js如何去写脚本。

当然,如果对于追求上进的你来说,还想学习下SSR服务端渲染,首先你要去学习用node.js如何去写一个server,然后还有服务端的接口实现,虽然这是一个纯后端的实现内容。

当你以为这就结束了的话,你就错了。如果你面试的是BATJ等互联网大厂,面试官可能还会问你http相关的内容。比如说,面试官会问你,像http的get、post、put、delete这些request methods它们又有什么用,有什么区别?从语义上来讲,http的code又有什么用。当这些问题抛向你的时候,如果你平时没有注意这方面的技术沉淀,此时的你是否依然会处于一个懵圈的状态?

这些东西,对于一个纯做前端,纯做页面的童鞋来说的话,你确实不用特别的了解。但是你一旦升级为一个工程师,你要去跟后端交流一些接口,你要去思考统筹整个项目的时候,你必须要了解。不然的话,你会踩非常多的坑,犯非常多的错误。导致你的整个项目到后期维护的时候,有很多的内容到后期是没办法去升级的。

讲了这么多关于学习、前端、面试等话题,终归学习是要讲效率的,如果你学了非常多的时间,发现自己还是不怎么会,你就会特别没有成就感。当时就不会想继续学下去了。

不知不觉就写到这儿了,此文也行将ending,最后在这里有几句话想送给大家:

向内认知,向外行走。

祝大家在以后的日子里做更好的前端,遇见更好的自己。

以上内容来自某大型互联网公司前端架构师的心路历程,闰土整理,在此表示感谢。

原文发布于微信公众号 - 闰土大叔(running_hacker)

原文发表时间:2018-05-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏about云

程序员:如何提高影响力,为自己代言

影响力,让梦想离你更近。 试想一下,有一天你开发了一个新的语言。它比现有的某某主流软件,运行效率将提高了50%,开发效率提高了100%。接着,你在github...

3827
来自专栏知晓程序

研究表明,想开发小程序插件的人,最想做这些方向

1493
来自专栏JAVA高级架构

卷首语:什么样的人可以称为“架构师”

我曾问过很多自称热爱代码的程序员的发展规划,大多都回答说期望成为一名架构师。而在招聘一方,有的团队会过滤掉多次提起架构一词而一点不提具体内容的简历。可见,虽然在...

3709
来自专栏C语言小白到大神

C语言实现动态菜单,智慧的C语言,零基础也可以学会

学习源于兴趣,源于快乐,源于追求,在这里你将收获更多的学习乐趣。在这里你将用代码将未来编写为现实。

2660
来自专栏web前端教室

前端框架这么多,要学哪个?

这个话题很大,没有一定的水平是驾驭不了这个话题的。但我还是说说我的偏见。 现在这前端框架井喷一样的更新,不断的有新东西冒出来,先是Backbone,然后是Kno...

3768
来自专栏全栈工程师成长之路

全栈开发学习笔记(持续更新)

37410
来自专栏BeJavaGod

前端这条路怎么走,作为一名后端er,说说我的见解

近期都游荡在各大群里看大家的讨论,经常看到关于程序员生涯的一些讨论,颇有感触,最近的国庆的确过得有些堕落,都没怎么更新,仔细相信还是应该分享点经验给大家的!想必...

3415
来自专栏AI科技大本营的专栏

厉害!这还是我认识的Python吗!

Python 可用的地方非常多。无论是从入门级选手到专业级数据挖掘、科学计算、图像处理、人工智能,Python 都可以胜任。或许是因为这种万能属性,周围好更多的...

1533
来自专栏灯塔大数据

盘点:10款最受欢迎数据可视化工具

在数字经济时代,人们需要对大量的数字进行分析,帮助用户更直观的察觉差异,做出判断,减少时间成本。当然,你可能想象不到这种数据可视化的技术可以追溯到2500年前世...

4488
来自专栏效率达人

推荐6款好用却不为人知的效率软件!

如今科技越来越发达,越来越多的日常辅助软件工具被人们用于办公。软件工具只是为了表达我们诉求的一种方式,所以在不同的工作环境或个人习惯的情况下,每个人使用的方式也...

1102

扫码关注云+社区

领取腾讯云代金券