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

迟来的抱歉

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

这话从张哥嘴里说出来，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.