前端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又有什么用。当这些问题抛向你的时候,如果你平时没有注意积累这方面的技术知识,此时的你是否依然会处于一个懵圈的状态?
这些东西,对于一个纯做前端,纯做页面的童鞋来说的话,你确实不用特别的了解。但是你一旦升级为一个工程师,你要去跟后端交流一些接口,你要去思考统筹整个项目的时候,你必须要了解。不然的话,你会踩非常多的坑,犯非常多的错误。导致你的整个项目到后期维护的时候,有很多的内容到后期是没办法去升级的。
讲了这么多关于学习、前端、面试等话题,终归学习是要讲效率的,如果你学了非常多的时间,发现自己还是不怎么会,你就会特别没有成就感。当时就不会想继续学下去了。
最后,向内认知,向外行走。
谨以此文与君共勉。
以上内容参考自某大型互联网公司前端架构师的心路历程,在此表示感谢。
最新的文章都会第一时间更新在我的公众号<闰土大叔>里面,欢迎关注。
前端leader找我谈心:我是如何从刚毕业的前端菜鸟一步步成长为前端架构师的?的更多相关文章
- 入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)
继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Serv ...
- 前端架构师亲述:前端工程师成长之路的 N 问 及 回答
问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度. 1. 前端开发 问题 大佬,能分享下学习路径么,感觉天天忙着开发业务,但是能力好像没有太大提升,不知道该怎么充实自己 ...
- 一名前端Web架构师的成长之路(转载)
本人也是coding很多年,虽然很失败,但也总算有点失败的心得,不过我在中国,大多数程序员都是像我一样,在一直走着弯路.如果想成为一个架构师,就必须走正确的路,否则离目标越来越远,正在辛苦工作的程序员 ...
- 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
- 上海洋码头(www.ymatou.com)急招技术人才(职位:互联网软件开发工程师,.NET网站架构师,Web前端开发工程师,高级测试工程师,产品经理)
对公司招聘职位有兴趣的童鞋可以把简历发送到zhangzhiqiang@ymatou.com,我们HR会快速给你答复. 互联网软件开发工程师 岗位职责: 1.参与洋码头各个平台(www.ymatou.c ...
- 前端架构师 摘自《前端架构设计》-micah godbolt
作为前端架构师,你经常需要制定,或至少能够掌握以上所列的每一项内容.流程中的任何一个环节出现问题,都会迅速演变为开发人员的痛苦,或者导致网站无法持续满足用户要求,甚至崩溃. 前端架构师的用户是开发人 ...
- 葡萄城首席架构师:前端开发与Web表格控件技术解读
讲师:Issam Elbaytam,葡萄城集团全球首席架构师(Chief Software Architect of GrapeCity Global).曾任 Data Dynamics.Inc 创始 ...
- 前端Leader你应该知道的NPM包管理机制
npm install 命令 首先总结下npm 安装一个模块包的常用命令. /* 模块依赖会写入 dependencies 节点 */ npm install moduleName npm insta ...
- [web前端] 去哪儿网前端架构师司徒正美:如何挑选适合的前端框架?
原文地址: https://www.jianshu.com/p/6327d4280e3b 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是 ...
随机推荐
- 跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程
前端开发APP,从HBuilder开始~ 序 通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备.为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plu ...
- Retinex图像增强算法
前一段时间研究了一下图像增强算法,发现Retinex理论在彩色图像增强.图像去雾.彩色图像恢复方面拥有很好的效果,下面介绍一下我对该算法的理解. Retinex理论 Retinex理论始于Land和M ...
- 并发服务器--02(基于I/O复用——运用epoll技术)
本文承接自上一博文I/O复用——运用Select函数. epoll介绍 epoll是在2.6内核中提出的.和select类似,它也是一种I/O复用技术,是之前的select和poll的增强版本. Li ...
- OpenCV 矩形轮廓检测
转载请注明出处:http://blog.csdn.net/wangyaninglm/article/details/44151213, 来自:shiter编写程序的艺术 基础介绍 OpenCV里提取目 ...
- 【Linux 操作系统】vim编辑器配置及常用命令
最近工作不安分, 没有了刚入行时候的锐气, 不知道什么时候开始懈怠起来, 周末在电脑旁边看新闻, 搞笑图片, 追美剧, 一坐就是一天, 很是空虚. 我需要摆脱这种状态, 正好想学习一下安卓底层, An ...
- linux内核中的排序接口--sort函数
linux内核中的sort函数,其实跟我们所说的qsort函数很像,我们来看看qsort: qsort 的函数原型是 void qsort(void*base,size_t num,size_t wi ...
- myBatis源码之Executor、BaseExecutor和CachingExecutor
接下来是mybatis的执行过程,mybatis提供了一个接口Executor,Executor接口主要提供了update.query方法及事物相关的方法接口 /** * @author Clinto ...
- MR for Baum-Welch algorithm
The Baum-Welch algorithm is commonly used for training a Hidden Markov Model because of its superior ...
- 关于L298N的应用
最近在开发一个基于STM32的智能小车,用的底板是野火ISO mini的板子.如图: 这里有个电机驱动模块L298N,说起它,我还真的泪奔,前阵子被卖家坑了,拿上去一接电源马上就烧了,这都怪我粗心大意 ...
- Digogo ugdx文件的制作
The openplatform source code is in old IT FTP server at "vte/KCD/20150814/openplatform_wallace. ...