我的前端成长之路

此文主要记录自己的前端成长之路，时间从开始前端工作开始，一直到现在在公司担任管理岗位，希望能给前端的伙伴一些启示。

首先说明一下我目前的工作状态：我现在在一家公司的某个产品担任研发管理职位，主要负责整个产品的工作安排、安排需求开发计划、也会对产品提出来的需求做一定的修正、并负责整个项目的需求的解释（不是有产品吗，要你做这个干吗？这个问题后面会做解释）。

入门

在成为前端之前，我做过水电施工、项目实施、Java开发。在目前这家公司是第一份正式的前端工作，到目前为止已经做了4年半的时间。

刚进公司的时候是负责一个产品的微信端，有完整的设计图，只需要根据设计图实现需求即可。两个月后，觉得写CSS太麻烦了，特别是组件层级比较深的情况，有大量的重复工作。于是引进了sass预处理器，最大的好处在于两个：一是嵌套语法，免去了大量的重复工作；二是变量定义，也是省去了很多重复性劳动。

其实这还只是第一个问题，随着项目开展还有一系列的问题暴露出来：

• 首先是文件加载过慢的问题，于是引入grunt，做了个自动化工作流，将压缩代码的事情一键搞定，并顺道解决了图标太多需要使用雪碧图的问题。
• 其次是重复代码太多，每个页面都有类似的代码，改动一个地方的时候需要同时改动所有地方，而且容易遗漏。解决办法是插件化（jQuery时代不说组件化），将遇到的通用型的功能封装成组件，然后统一调用。
• 插件化的好处很明显，代码效率提升了很多，但是也带来一个问题：大部分功能相同，只有部分差异。那时候公司另一个前端的做法是copy出来，然后命名为XXX2.js，遭到了我的强烈反对，于是开始了插件化的个性化参数，目标是让插件耦合度低，且适用场景比较多。
• 兼容性问题，这个时期考的主要是查资料的能力，遇到的问题基本靠查，摸着摸着也就都处理掉了，并且把很多统一性的处理放在全局文件中，避免每个页面都要重复调用。

半年的时间，终于把产品打磨上线，目前哪个产品还在持续维护，我则退出进入下一款产品的研发，也就是下一阶段：探索。顺便说一句，那半年打磨的东西都还在线上跑着，后面四年也没遇到不可处理的场景。

探索

因为需要开发一款新的产品，自己也认识到了jQuery在大型工程方面的不足，所以开始新的项目的时候决心摒弃jQuery，那时候是15年年底，angular一直在憋2的版本，React还处于0.12，vue还没进入大家的视野，综合考虑下来决定使用React，于是又是一番艰难的摸索期。

• 第一个问题是当时根本没有什么中文文档，作为一个英语四级都不是靠自己努力通过的人（是的，我是作弊的，不然没法毕业）只能硬着头皮去啃英文文档，一篇文档要读四五遍才大概知道什么意思。
• 第二是思想太先进，从jQuery到React中间的开发思路转变简直太大了，前者是基于事件驱动，后者基于数据驱动。所以刚开始写的时候很难转变思路，写着写着又回到了之前自己改变DOM的思路，然后绕回来继续改。
• 第三是环境配置太麻烦，webpack、babel、ES6、redux等等一大堆听都没听过的东西，研究了一两个星期才把webpack勉强用上，结果来个redux，还纯函数式编程，简直一度回到刚转行的经历。纠结了一个多月之后发现redux对我们来说其实并不是必须的，而且会造成很多冗余代码，开发效率不高，于是决定放弃redux。
• 好不容易把环境搭上了，下一个问题就是UI框架的问题，当时比较热门的都是国外的框架，怕团队其他人没法接受，选了一个国内的框架antd。以现在的角度来看antd自然是首选，但是当时那个状态antd还处于0.9，而且开源社区对于阿里系的开源诟病很大，所以也做好了如果不行随时自己上的最坏打算。

试错

虽然逻辑框架和UI框架都选好了，但是事情并非就一帆风顺了，React最重要的就是组件化思想，如何有效的用好组件化就成了当时最大的问题。拆分颗粒度太大达不到组件化的效果，太小又没享受到组件化的优势。这一点没有什么神来之笔，只有不断的尝试以及不断的迭代。多的地方代码改动了至少十几次，在不断的迭代过程才逐渐找到开发效率和运行效率的我认为的最优解。

拓展

随着React相关技术栈的熟悉，又开始不安分起来了，开始折腾一些其他的东西。

• 第一首选自然是node.js，这次的拓展对我来说基本上没压力，本省就学过后台，node又是用的JavaScript，所以很轻松的就可以上手，并且做一点前后端的项目。
• 其次是桌面端，NW.js和electron是当时的两大热门选择，但是都没有出1.0的版本，综合考虑了之后决定两个都体验一下，然后做几个demo试试。最终试验下来的效果是electron用起来更舒服，果断利用electron做了个会员管理系统，这个系统给十几个朋友用了几年，效果都还不错。
• 手机端分两个部分：hybrid和React-native，前者基本上就是cordova(phonegap)了，一路把坑趟下来发现没什么特别之处，于是转而主攻React-native，RN的表现着实让我惊喜了一番，很容易就实现了两端同时运行的APP。于是向公司建议可以用RN来重构之前的原生APP，推进了一段时间，也写了很多功能之后因为公司战略问题暂时搁置。当然，我肯定又是写了几个实用的APP给到朋友或者同事实用。

精进

最近一年的时间基本不会去关注什么什么框架除了新的版本，哪里哪里又产了一个新的框架。主要都是结合自己的能力，实现更多更深的需求。看需求的时候也是在考虑能否有一个更好更通用、甚至可移植的方案。然后逐渐产出了几个目前项目中使用很好的组件。

• @eatong/reactable，主要是实现项目中的通用表格的排序、筛选、列拖动、左右固定、表头固定、父子表头等等。其实antd里面的Table已经足够优秀了，只是无奈我们需要大量数据的表格内编辑，还有拖动表格等等。综合下来还是自己实现一个，这样可拓展性也会高很多。由于占用太多上班的时间开发，没有开源出来。
• webpack-stylesheet-variable-replacer-plugin，这是一个很好用的web端换肤的插件，详细可点击链接跳转。
• easy-H5-eidtor，用拖拽的方式实现H5的快速设计，输出结果是JSON，所以理论上来说可以适用于任何移动端的页面搭建，包括小程序。这个组件比较好的地方在于对插件的支持比较好，不仅仅只限于这个项目，而是所有地方都可以试用。当然，也没有开源
• H5-table，基于reactable剥离出来的更轻量级的表格框架，可固定列、表头、全屏查看等，没有开源！

沉淀

提升管理岗之后一个最大的问题就是时间不够用，所以通过将自身学习的内容不断的输出到团队的其他人。现在基本上可以保证两周的发布周期会给团队做个分享，用提升团队的能力来给自己挤出更多的时间来做更多的精进，以及个人其他方面能力的提升。

总结一下：由于我的成长都是在没有人带的情况下自己走的，所以很多时候会走了不少弯路，也会花了更多的时间去探索新技术，一是提升自己的学习新知识的能力，二是不会因为其他人的天花板限制自己的天花板。又因为自己整体负责了几个项目，就逼着自己必须时时刻刻从全局的情况考虑问题，不论是代码风格，组件封装还是框架选型，而这也就相当于给自己的进步上了一个高速电梯。

本文为原创文章，转载请保留原出处。原文地址：https:/eatong.cn/blog/5