25 岁，毕业写前端的这三年-CSDN博客

本文链接：https://blog.csdn.net/2401_84092169/article/details/138445776

博主分享了自己从毕业到25岁在前端开发领域的成长经历，包括使用和改进富文本编辑框架Slate，参与开源项目，以及在平面设计编辑器SDK上的工作。在面对技术瓶颈时，博主选择了深入学习WebGL，开始涉足计算机图形学，寻找新的挑战和发展方向。

摘要由CSDN通过智能技术生成

对类似 Wiki 的知识库系统来说，Web 前端的富文本编辑器就非常重要了。稍有经验的同学都知道，富文本编辑是个长期以来被认为是天坑的领域，相关主流基础库从启动到成熟的时间都是以年为单位来计算的。我们显然没有必要重新发明轮子，可以基于社区已有的成熟框架来开发。在这个背景下，我首先接触了 Slate，这是一个可以让你以编写 React 组件的形式来定制自己的富文本应用的框架，它的 API 之优雅、文档之完善与源码之整洁使我很快就决定上车了，甚至都没有太在意它还属于 Beta 状态的友情提醒。

在学城的最早的几个版本中，我们基于 Slate 编写的代码还算工整。但很快问题就来了：它还不能算一个 battle-tested 的框架，我们定制的组件在编辑时暴露出了很多状态问题，bug 数量非常高。在我之前的工作经历中，对于框架用着不顺手的问题，基本都可以在业务中变通或绕过。但这对于富文本编辑器来说不适用，因为许多 bug 本身就在框架层，即便反馈到社区，也没人有义务马上替你解决。所以该怎么办呢？下载一份源码自己改吧。

修复框架的 bug 和修复业务代码的 bug，其实并没有本质的不同。毕竟只要能稳定复现，几乎所有 bug 最终都是能被修复的，只是业务代码中更容易出现肮脏的修复代码而已。但修复 bug 之后呢？在我第一年工作的时候，我在 GitHub 上还几乎没有为其他人的项目提交过代码，但我知道只要代码合并入主干分支，你就会成为这个项目的贡献者。虽然这没有任何物质奖励，但这作为贡献过开源项目的证明仍然让我十分心动。抱着这种向往的心情，我为社区提交了第一个 PR。

到现在我还记得很清楚第一个 PR 的内容：给 .npmignore 文件增加了一行，来解决 Babel 默认重复编译的问题。虽然只有一行代码，但出于我对开源项目的敬畏，我还是写了相当详细的描述来表达我为什么需要增加这一行代码，以及它会通过什么方式来解决问题。作者也很快就合并了这个 PR。在发现贡献开源项目原来也就是这么回事之后，我有了很大的动力将更多我的改进提交到上游。到我离开学城项目为止，我把包括 bug 修复、测试、文档在内的近 20 个 MR 合并入了 Slate 的主干，并维护了一份 0.24 版本文档的完整中文翻译。今天 Slate 已经有接近 1.5 万个 star 和超过 200 名贡献者了，而我在它的 contributors 排行榜里仍然可以排在前十。

可惜的是，即便我尽力改进 Slate，它对于表格、列表等存在嵌套的 UI 组件，其稳定性仍然难以满足学城的需求。再加上它较为激进的更新方式，我们很快就遇到了难以继续同步上游更新的问题。在充分地向公司上层抛出问题并给出备选方案之后，我们将富文本框架迁移到了架构相似但更为稳定的 ProseMirror 上，它应该已经在学城上沿用至今了。虽然 Slate 的落地时间不长，但在对它的使用与改进过程中，让我充分地理解了开源项目的运作和参与方式，我在 GitHub 上也终于不再仅仅是自娱自乐了。

2016 年和 2017 年我在 GitHub 的贡献对比。

到了第二年，我在 GitHub 上提交的代码虽然还是有不少玩票成分，但也不再是清一色的玩具了。大致有这些：

异步的数据迁移工具 Bumpover，它实现了 100% 的单元测试覆盖率。
通过提取语法树节点来比较 Vue 与 Angular 相似度的 naming-style-demo 示例。
HTML 字符串转虚拟 DOM 的解析器 html-toy-parser。
40 行的 MVC 框架 nano-mvc。

在美团点评的那段时间里，除了在 GitHub 上提交代码外，我在一些技术社区里也相当活跃。记得刚入职时需要把 Vue 切换到 React，对 Vue 的怀念促使我去 SegmentFault 上回答了许多 Vue 的问题，一度是某几周内这个话题下的第一名。并且，我还发现掘金是个很适合发（新手向）前端技术文章的地方。在 2017 年结束时，我的掘金专栏已经有了 3000 以上的关注者。不过，我可不是纯粹只贡献技术正能量的傻白甜。如果那段时间你在掘金发文章讲如何深入理解 this 的四种指向和寄生混入继承之类老掉牙的糟粕内容，那么我多半会在评论区义无反顾地站出来吐槽 😃 只是现在的我已经没有兴趣参与这些口水话题了而已。

由于遇到了更适合我的机会，我也没有在美团点评工作超过一年，不过我还是很留恋刚刚入职时的那支团队。不论是晚上饭点时小伙伴们吃遍菜单的日常聚餐，还是不定期能蹭到的虎哥牌星巴克，都是相当有趣的回忆。也还要额外感谢佳立、根龙、春雨等接手学城的同学们。多亏了你们，邹老板才没有找上门来追杀我啊。

图中多边形风格的大楼就是美团点评厦门研发中心的前所在地，我们的团队曾在照片拍摄地捕获螃蟹。

突破瓶颈的第三年

在离开美团点评前，我确实可以 hold 住一些基础框架的开发了。但富文本编辑器的性质决定了它在基本稳定后的迭代方式，更多地只是修修补补而非开疆拓土。这让我感到焦虑，感觉自己处在一个为了四处救火而疲于奔命，技术进步开始放缓的瓶颈状态。在这个时候，新的机会出现了。

2017 年底的某一天，我在掘金上灌水时发现了一篇名为《我们在海边写代码》的软文，署名糖饼，看起来出自个颇有底气的前端团队。巧的是它的 base 也在厦门，并且实际地址刚好在我的上班路上。本着聊一聊反正不亏的心态，我骑着单车拜访了这家当时名叫欢乐逛的公司。

接待我的两名面试官，一位说自己花名就是糖饼（真人和头像画风不符），另一位说自己花名叫小米。他们两个人看起来蛮朴素的，但对我的长篇大论却出奇的有耐心，中途还有一名穿着黄拖鞋的男子参与了旁听。那是我经历过的最久的一轮面试，总共和我扯了应该有两三个小时。我本来以为这就是一次初面，寻思着这公司的一线同学还蛮经得住忽悠的。但其实我已经把技术面该遇到的全部 Boss 都过了一遍，没想到说好的青铜局里来了一群王者啊。

必须说，如果糖饼没有贴出他合并到 Webpack 的并行构建支持 PR，我是不会轻易选择在毕业还不到两年的时候被他怂恿着换第三次工作的。当然，我们一般的日常也并不都是那么高大上的 Rocket Science。我在这里的工作，主要集中在当时还没有独立出来的稿定设计项目里。我负责维护这个设计站点中的平面编辑器 SDK，以及相关的 UI 组件。最开始，我还以为稿定就是个较为边缘的新业务，直到公司搬家后前台都挂着稿定设计的招牌，才发现我在这大概相当于在中国邮政分拆之前进了名叫中国移动的部门。

平面设计编辑器与富文本编辑器有许多相似之处，并且这个细分领域中当前的主流开源项目，其设计思想还达不到 Slate 那种高度可扩展的灵活性，这无疑给了我很多发挥的空间。在过去的一年多的时间里，我从细小的 bug 修复开始一步步熟悉这个编辑器，终于在上个季度上线了我最想从 Slate 中借鉴的特性：组件化的可编辑元素。Slate 赋予了我们只要用 React 声明一个 <Table> 组件，就能在富文本编辑器中编辑表格的扩展能力。我将这个思想应用到了我们基于 Vue 的编辑器上。现在我们只需要提供基于 Vue 编写的 UI 组件，就能轻松地为编辑器组装出新的可编辑元素类型支持，而无需改动框架核心源码。再加上小伙伴在前端出图上的不懈努力，我们的编辑器做到了兼取 Canvas 与 DOM 二者之所长，目前暂时还没有主流的开源编辑器能满足这一点。

我们的平面编辑器，欢迎大家访问 gaoding.com 体验噢。

除了在较高的层面上，将框架按照自己的设计思想重构之外，我还在较低的细节层面上做了些有意思的工作。比如，我使用坐标系变换的思想，将图形旋转后的裁切拖拽限制算法从上百行的 if else 判断简化为了十余行数学变换；基于节点序列化数据的哈希值，实现了更细粒度的历史状态结构共享，并开源了历史状态管理库 StateShot；使用 CodeMod 自动将 ES5 代码重构为 ES6；设计实现了编辑器的特效调节机制，并作为第一发明人提交了专利申请等等。现在我是 Web 工具团队名义上的负责人（吉祥物），工作至今写了 80 篇左右的技术博客，掘金专栏的阅读量也超过了 20 万，看起来似乎还过得去吧？

但这些工作并没有让我感觉突破了瓶颈。

很早之前我就问过小米，我们做的事情比起 Adobe，有什么特别的优势吗？小米的回答是我们需要主打内容与细分的场景，做到对普通用户更高的易用性。从商业角度来讲我很认可这个答案，但我在纯粹的技术角度上，总觉得这是更适合市场部门负责人的回答而不是属于技术部门的觉悟。并且，我也一直觉得我自己的技能体系还差了一些什么，使我虽然在一家主打商业设计而特别重视前端技术的公司里，做的事情却还不够酷。到底还差了什么呢？我的答案是渲染。

我们前端同学们所擅长编写的 JavaScript，只是在 CPU 里执行的单线程代码而已。别忘了我们还有 WebGL 这个虽然非常繁冗，但能让我们释放 GPU 潜力的武器。这个领域常常被认为是游戏开发者所专属的。而大家对于应用 Web 上的 3D 能力，首先想到的可能也都是套用 Three 等充分封装后的成熟开源渲染引擎。因此，在这个领域就没有必要重新发明轮子了吗？恰恰相反，我发现这是一片巨大的蓝海，它在 Web 设计领域的应用几乎还是白纸一张，存在着非常大的定制、优化可能性和应用前景。限于篇幅和本文的主题，这里不再详细展开，只展示一下我们自研的渲染引擎在投入开发一个月之内所得到的一些渲染效果就足够了：

在我前一段时间选择深入 WebGL 的时候，幻神提醒过我这基本相当于删号重练了。确实，在学习曲线的初期，图形学晦涩 API 的门槛让我感到非常艰难，但在坚持不使用现成引擎来实现 Demo 的一段时间后，某个时间点上我感觉自己终于可以把那些零散的点连接起来了。而这时再加上前端框架的设计经验，我确实找到了非常适合我们应用场景的一个自研方向，具体的内容暂时没有办法在这里详述，只能说我和小伙伴们正在紧张的开发中，非常希望能让我们的新特性早日和大家见面 😃

在 25 岁的今天，我感觉终于走出了之前几年在 CPU 上编写逻辑的瓶颈。从最早的玩具编程语言和游戏模拟器，再到现在的渲染引擎，所谓「编程语言、操作系统和计算机图形学」的程序员三大浪漫，我也能吹牛说自己都略有涉猎了。对我来说，从事一份工作三年之后仍然保持高涨的热情和找到值得继续钻研的技术领域，可能不是件很容易的事，因此现在的状态对我来说已经很好了。当然，要想在未来在技术上还能够继续深入，所需要的应该就不仅仅是传统的 Web 前端的领域知识，还需要更多跨领域和学科的知识了。感谢稿定这里钻研游戏引擎和图形学的大佬们，和他们的交流让我获益匪浅。现在我实在有太多需要做的事情了，因此我的博客和专栏也可能不能再维持月更的节奏，希望日后能用更多的干货来弥补 😄

后记与致谢

从第一年编写展示页和后台业务逻辑，到第二年活跃在开源社区，再到第三年开发自研框架并尝试往图形学领域转型，毕业以来的这些经历让我觉得我确实还在成长。我虽然已经不再是团队里最年轻的成员了，但现在我还远远没有到转型完全的管理者去分配需求和任务的时候：还有这么多有趣的代码可以写，放弃了岂不可惜？

虽然这篇文章主要和技术相关，但我的生活其实也并不只有技术啦：我有微单和无人机，玩通了 Switch 上的塞尔达和马里奥，花名（雪碧）和公众号名（彩色相簿）都来自白学，毕业以来除了公费游历了北上广沪杭等大城市，也去了台湾、新加坡、捷克、法国（包括白学家的圣地斯特拉斯堡）等相当有趣的地方。只要在生活里保持开放的心态，总能认识到许多比自己更厉害的人并向他们学习。如果按照论文致谢的方式列出个名单，那么我感觉对我影响最大的是这么几位，即便其中的一些人我还未曾谋面：