公司内部技术分享会:复盘我的前端成长

2019-07-15 14:21:04 浏览数 (1)

迟来的抱歉

首先先跟大家说声抱歉,本周连续接了几个广告金主的投放,如果投放课程对你们没用,或者没有一点价值,实在是叨扰各位了。不过,连帅张都说了,今年的大环境不是很乐观,适当恰饭,赚点小钱,很重要。

这话从张哥嘴里说出来,wow,awesome。

我也要紧随张哥其后,做个佛系博主,有广告金主投放就接,没广告就安心写干货给你们。

言归正传。

公众号断更的这几天,土哥的全部精力都扑在了公司的项目上,还有团队技术培训,连vlog都懒得折腾了,毕竟个人精力有限。说到技术培训,之前很多在土哥知识星球里的球友都问过我,说「土哥,啥时候讲讲你这几年的技术成长经历啊」

其实,复盘我的前端成长这件事,我很早就想在公司内部搞一次了,因为有听众基础,我司前端组的小伙伴包括实习生,都乐意听我站在台上吹牛逼。

于是,就在上周五,我带头组织策划了一起公司内部技术分享会。美其名曰,前端漫谈,其实就是技术人扯闲篇。在这里特别感谢下,公司小伙伴们的捧场。

我曾经也是个前端小白

刚开始,我跟很多前端新人一样,从学习前端基础知识入门,比如网页布局基础、javascript动态特效等,为后面学习更深入的知识打好基础。

我最先接触的是html和css,后面又出来html5和css3的时候,我又跟着对比学习了一下它们的新特性,通过前期掌握的知识,我有了网页布局的能力,那会儿已经可以凭借自己的能力,去开发实现淘宝网首页的静态页面了,当时觉得这些标签和属性好神奇,酷爆了。

过了一段时间后,我开始不满足于静态页面的实现,也想掌握如何让自己的网页作品动起来的技能,就跟淘宝网上的效果一样。于是,我紧接着学习了行为层javascript,当我能通过自己手敲的js代码,在网页中加入了轮播图、tab切换、动态导航等特效的时候,当时觉得自己好有成就感。

那会儿我还不知道,这仅仅是切图仔必备的技能包而已。然而当时,我已经很满足了,身边朋友有不会的,我都会主动教他们,从思路分析,到代码实现,如何运用html5、css3、js实现炫酷网页,比如滑动门特效、导航条双向绑定、渐变动画、循环动画等技巧,那会儿的我已经学会了通过教别人为自己捞好处,这是我第一次体验到用技术赚钱的快感,也因此接过几个小活儿,赚了点小钱。

跳出舒适区,才能迎来快速提升

2013年那会儿,当你能通过自己掌握的html、css、javascript开发出一整套动态网页时,就可以在太原找到一份初级前端开发的工作了,工作内容主要是网页制作,行内术语叫「切图」。

当时,还是jQuery大行其道的年代,你只需要掌握ajax前后台数据交换,就可以完美胜任一家公司的前端工程师这个岗位了。

那会儿我也沉浸在「为一个又一个网页里添加动态特效」的满足感里,并且乐此不疲。这种状态一直保持一年多,直到后来无意间添加了好几个不同地区的技术交流群,有北京的、上海的、杭州的、深圳的......,通过在群里的冒泡、潜水以及日常围观,我接触到了一个叫做「组件化」的东西。

其实,那会儿北上广深的前端圈里,已经开始慢慢涌现出了很多前端框架,并开始在前端项目里流行开来。

彼时,太原技术圈还处在刀耕火种、后知后觉的状态,身在太原的前端从业人员,感觉就像井底之蛙。我当时觉得,是时候跟上北上广的节奏了。

于是,我果断入坑前端组件化网页开发。

经过时间洗涤,后来组件化成为了企业中开发的主导思想,也成为流行框架vue、react的核心思想。

当时还做了一个个人信息验证的项目,开始慢慢使用正则验证,提升用户体验,在前端这块及时反馈给用户他填写的是否正确,或者符合规则。

踏上移动互联网的快车

再到后来,移动互联网大热,移动端开发开始流行,为了顺应潮流,我又接触到了webapp的学习。入了这个坑才发现,它和pc端开发套路有点不同,像什么移动布局、适配、兼容机型、性能优化等,一度搞得我头大,好在我坚持了下来。

如果当时我没有咬咬牙坚持,可能现在的我已经被前端淘汰了,或者成前端老油条了,躲在某个二线城市的小公司切图,直到性价比被年轻人超越,然后混到30岁被迫中年转行,然后去饭店端盘子洗碗,闲暇之余跟服务员同事们吹嘘,当年我还是个码农......

嗯嗯,一定是这样的,这境遇听着都挺惨的。快醒醒,这一定是个噩梦。当然了,如果真是那样,你们也不可能认识我这么个人,谁叫“码农土哥”?管他呢,who care !

我人生的这段经历,可以说「成功了,青云直上;失败了,万劫不复」。

后来在项目实战中,我又掌握了表单验证、存储、地图、响应式布局等,当时swiper插件刚刚火起来。在此期间,我练手做了好几个项目,比如swiper移动端轮播项目、canvas手势解锁项目、音视频播放项目、高德地图定位项目等。最后结合之前所学的知识,开发了一套仿美团外卖的webapp项目。

坊间传言,优秀的码农,都敲过10万行代码。

这句话,我信了,一信就是八年。

再后来,微信小程序横空出世。为了不掉队,土哥立马跟进学习,敲代码,写demo,当时好像做的第一个小程序就是新闻列表的一个项目,还记得第一次利用json文件配置信息成功时的那种兴奋劲,现在都回味无穷。

在这个小程序中,巩固加深了我对数据绑定、列表渲染等小程序API知识的运用熟练程度。

至此,移动端开发让我尝到了甜头,薪资也随之水涨船高,比之前刚入行那会了翻了不止10倍,经过前期资本的积累,真正做到了银行卡里有六位数存款,那段时间睡着都能笑醒,中午出去吃饭再也不会点最便宜的土豆丝盖饭了,都往贵的来,过油肉、木须肉、水煮肉,只要是带肉的、比土豆丝贵的盖饭,我都吃了个遍。

我终于证明,贫寒学子靠编程翻身,不是说说而已。

然而,随着工资和经验的增长,我却慢慢变成了前端圈里的老人,一晃八年已过,这一点在以后的岁月长河里,埋下了隐患。

我技术栈的最终形成

其实,前面讲的有些内容我是穿插着学的,并没有先后次序,工作中用到什么就去学什么。熟练运用前端框架是提高工作效率的必备技能包,说到前端框架,就不得不提vue.js and react.js。

很多人都知道,土哥是vue阵营的忠实粉。可我一开始入手学习的,却是react。一开始我被react的虚拟dom和jsx语法糖吸引住了,就像小孩看见了玩具。

紧接着,我又发现react提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。兴奋之余,我准备找个项目练练手,越往后走,越发现react框架带来的便利性和颠覆性的编程思想,它不止能在javascript中写css,还能有路由去串联各个页面模块。

当时觉得,我可能要成为react信徒了,谁都别拦我,它是如此的awesome。

直到后来vue.js的出现,加上国内很多公司和前端开发者使用vue作为项目开发框架,我才慢慢将注意力转移到了Vue.js的身上。

不得不说,vue和react有很多相似之处,这也决定了我技术选型的难度不是那么高。而且,vue同样提供了Virtual DOM,提供了模版、组件树的概念。后来vue的框架开发者也提供了渲染函数,甚至支持jsx。

真正让我投靠vue阵营的,是它的vuex状态管理工具和vue-cli脚手架,这样可以更好更快速地搭建项目环境,相比于react学习曲线的陡峭,vue显然更适合前端同学入门,选择vue作为技术栈,我也更方便去管理和培训前端组成员,降低了学习成本。在项目开发缺人时,公司也更容易招聘到会vue开发的前端应聘者。

当然,如果你想更加深入掌握vue框架,es6的功底是绝对不能差的,项目开发中,es6和vue框架更配哦。

比如es6里面的promise、class、async、proxy、iterator等,都是需要熟练掌握的,当然,这些也是现在前端面试中,可能会经常问到的话题。

除了es6,整个技术栈班底,可缺少不了webpack和node.js的加盟。只有将这一套技术工具结合使用,才能算是发挥出mvvm框架的最大威力,前端后分离如今也是大势所趋。

每个人都是awesome

其实,我这几年的技术成长经历也没什么特别的,基本上是跟着项目走的,随着项目开发数量的增多,我学会并掌握的技术也在增加。我走过的,只不过是大部分人正在走的路,这本身没什么新鲜的,每个人都会最终到达他自己的目的地。

后来,我如愿当上了我司的前端leader,抵达了我自己的目的地。之后,我开始了一段新的旅程。

这些年一路走来,我喜欢并爱上了编程给我带来的神奇感和成就感,每天不敲几行代码,感觉就浑身不舒服。

我也曾为了学习一个框架,周六日宅在家里没日没夜的研究,饿了就吃,吃完了就学,敲累了就睡觉,睡醒了就接着学......拉着窗帘的我都不知道窗户外面是上午还是下午,不知道天气是刮风还是下雨,是晴空万里,还是乌云密布。

我也曾为了赶项目进度或者接私活,不睡觉不洗脸不洗头不刷牙不换衣服一天不喝几杯水不上几趟厕所,忘乎所以的干过,现在想想,当时的自己真tm疯狂,wow, crazy boy!!!

等私活儿发给甲方或者项目交付给领导,获得对方认可之后,呼呼在家蒙头大睡一天一夜。第二天起床去卫生间照镜子,挠挠头发,发现掉了好几根。早晨去公司上班,有同事提醒我,“你后脑勺多了几根白头发”。当时我记得自己还自嘲过,「hai,谁还没为梦想疯狂过?」

我也曾为了一个bug,熬夜到天亮,留宿在公司,吃喝全靠外卖,相信大家都有这种经历,选择了编程,就义无反顾的去热爱它,可能你入行之初,是抱着挣高薪的目的进场的,可越往后走,越觉得,编程已然成为了你生命不可或缺的一部分。

如果有一天,你终于不再敲代码了,等你回头翻看你曾经敲过的项目代码时,你也可能会感叹一句:卧槽,这谁写的,太有才了!

是的,只要你一腔热爱并为之付诸努力,每个人都是awesome。

Hey man, what's up? Just keep your swag.

0 人点赞