🐘 koot.js 回忆录

koot.js 的历史到现在，大概有 5 个年头了，我打算停止投入，所以写下这篇回忆录。

初心

2015 年我开始接触 React 觉得很有趣，和 jQuery 相比页面开发思路更清晰，不需要用 js 直接操作 DOM 就可以完成页面交互逻辑。
在学习 React 的同时也接触到了 Redux、Webpack 这些技术，直到现在他们也非常流行。

我第一次完整的使用 React 进行项目实践是 2016 年 5 月，做了一款多人在线贪吃蛇 snakes游戏。
大概用的技术有：React、Redux、Socket.io、Less、Babel、Webpack…
同期也做了一次团队的技术分享，在现场会上大家通过浏览器加入了游戏场景，一起试玩。

问题来了，因为之前有开发游戏的经验，对游戏的设计和编码并不难，所以整个项目花费时间最多的是项目技术搭建，差不多占了一半的时间成本。在工作中，大家不敢轻易使用 React，担心遇到配置问题搞不定而卡住，为了解决团队在使用 React 的疑虑，我开始有了搭建 React 技术框架的想法。

内部孵化 super-project

随后，我就基于之前尝试的 React 项目开始思考如何搭建项目结构、如何选型合适的技术，并动手开发了一个非常基础的 React 开发框架，命名为 super-project，2016 年 8 月 17 日第一次 Commit 到公司内部的 Gitlab 上。
当时的前端 Leader 是李阳，我们在技术上有较好的共识，他开始支持我的 super-project 想法，并召集了当时团队几个技术不错的同学一起搞，所以在此我感谢当时在 super-project 付出的人：李阳、胡昕、孙驰、张攀（排名不分先后）。

目标 & 探索 & 实践

目标

当时 GitHub 社区上就有 create-react-app 脚手架可以快速开始一个 React 项目，但那太基础了，我们开始结合日常的工作思考 🤔

  • 如何一键开启开发环境？
  • css 使用 css-loader 还是 css-in-js 方式？css 的开发能不能像之前一样独立书写 class 又能做的易读、不担心重复？
  • 面对公司的国际化业务，能不能把国际化能力加进去，语音定义能不能更简单？
  • 开发的时候能不能是热更新？（当时的开源例子大部分是保存代码整页刷新）
  • MPA → SPA → Isomorphic，能不能做到“同构”? 能不能用一套代码可以打出 SPA 和 SSR 的代码包？
  • 能不能真正做到按需加载资源？包括 HTML、JS、CSS、Image…
  • 能不能把首屏渲染做到最小且内容非常完整？
  • 后来，关心是否可以直接把 PWA 也实现了

探索

带着这样的目标我们开始了技术的探索。

还记得当时我在做样式处理这部分探索的时候，css-loader 和 css-in-js 两种方式都觉得还不够。
css-loader 和 style-loader 在 webpack 处理的样式是可以满足日常需求的，但是在打包后，class 名的阅读性和唯一性则变得冲突起来，作为前端 geeker，我希望能把鱼和熊掌都需要，把 class 名的阅读性和唯一性都保持下来，另外希望配合按需加载把页面所需要的最少 css 提取出来。所以自己开发了处理 css 的 webpack loader 叫wrapper-css-loader，后来进化成 koot-css-loader 合并到 koot 里。

 还有多语言，当时是胡昕主要负责的模块，期望目标是尽量不改变 JSX 的组件结构，又同时能满足 SPA 和 SSR 两种模式，实现多语言切换双标准。

当然，注入此类的探索还有很多，这里不多说了…

实践验证 PhotoGrid & InstaNews

又过了一段时间，大概 2017 年初，刚好有两个重要性没那么强的项目，我们基于 super-project 开发了 PhotoGrid 网页版和 InstaNews 的网页版。使用了 Isomorphic 技术，也就是同构。成功的把 React 页面通过 Node Server 渲染出来，并且在浏览器端展示出来之后又保持了 SPA 的特性。
满足网页 SEO 的同时又保持着 WebAPP 单页面应用的体验。从此也验证了 super-project 的可行性。

PhotoGrid 的网页版是胡昕开发的，InstaNews 的网页版是李晓改开发的，在此感谢你们的勇于尝试。

坚持

super-project 在向好的方向发展，我从中学习到了很多，这个框架也帮助到了业务，但大家的技术理念不会一直很相同。
一年后，李阳离开了公司，其他同学在 super-project 上的贡献不多，只有胡昕一直还在与我为此奋斗。
当然，他在这个项目上也有较多的成长，所以很长一段时间我们可以一起搞技术研究。

对外公开改名 koot

当技术框架被验证之后，我们想帮助到更多的开发者，让 super-project 发挥更大的价值，所以我们讨论把它放到开源社区 GitHub 上。开始的时候我们想简化一点，比如叫 super.js 或者 superjs，但这些都被别人占用了。胡昕提议看看有哪些简单的字母开源拼起来，我们经过多次尝试发现，koot 这个词简单又没有人注册过 NPM 包，所以我们就定它了。

注册了 NPM 包 koot，也注册了免费域名 koot.js.org，看起来不错，是个好的开始。
随后又有一些新同学的加入：马振雨、王一奇、陈钦洋

技术的推广

团队内部

李阳走之后我成为了前端团队的新 Leader，我发现团队里大部分项目使用的前端技术都不同，有的用 jQuery、有的用 AngularJS、React、Vue。这对团队协作大大增加了成本，于是我做了一个霸王决定，团队项目全部使用 koot 作为开发框架，开发 UI 全部是切换到了 React 上。这样的好处是大家有相同的技术基础，那么团队在技术上的积累和沉淀也有了 koot 这个落脚点。

我的工作从主力开发变成了主要把控方向和技术推广。
大概有一年的时间，前端团队的项目几乎全部切换到了 koot 上。

公司内部

为了扩大 koot 的价值，让技术的能力传递的更广泛，我们在公司内部和开源社区上都做了响应的推广和分享。
2018 年 12 月，我联合培训部和一些热爱技术的同学一起搞了“豹前端主题分享月”，12 月里每周都会做面向全公司的技术分享，大部分内容和 koot 有关，帮助其他部门的前端同学了解 koot、使用 koot。很快公司有很多业务使用上了 koot，到 2019 年底公司与前端相关的业务有 80%都用到了 koot。

开源社区

在开源社区上的推广我们经验不足，通过 GitHub 自动检测发现虽然有一些项目在用，但数量不多，Star 也不多，如果让我再搞一次，我可能会选择多在一些自媒体平台上发布一下技术文章宣传。

选择不投入

背景

2020 年，疫情来了，企业的工作方式发生了很大的变化，这一年我们公司的变动也很大，有不少业务收到影响，感觉一整年都在不停的调整架构。我们团队这一年里大部分的工作是交接和对接，技术的推进不多，主要是 koot 上了 Serverless。业务和团队的缩减，让我们在技术基建方面的投入变得少，我的主要工作偏向管理，胡昕也很少有时间去维护，koot 的在这一年里发展不多。

迭代落后

react-router 已经出了 v5、redux 已经出了 v4、webpack 也出了 v5，等等很多技术生态库已经迭代升级一圈了，但 koot 跟不上了…
现在的市场上已经术业有专攻，React SSR 的解决方案有 Next.js，项目脚手架有 umi ，后台系统组件库有 antd 等等… 此时 koot 解决的问题大部分可以在前端行业里找到相似或者更好的方案。koot 如果不改变就无法为使用者带来较好的技术价值，如果继续投入精力就需要做的比 umi、Next.js 等开源技术做的好，那其实非常难，因为这些开源项目已经建立了很好的生态，有使用者和生产者的自循环。

认知边界

另一方面是到了认知边界。技术的根本是为了解决实际的问题，在最早的 super-project 是为了解决 👆 上面列出的一系列问题而诞生的，这些问题都是我们认知范围内知道要解决的。当我们已经把自己认知范围内的问题都解决掉了，而且业内也有更好解决方案的时候，我们没必要追赶，而是应该去洞察技术开发过程中还有什么问题需要被解决。解决了新的问题才回有新的价值，但不要为了解决问题而创造问题！

站在公司角度的选择

选择不投入，这是我代表公司做出的选择，因为在公司层面是需要考虑投入与产出比的，如果不能为公司带来更多价值，我会果断选项停止投入。但这不代表个人行为的停止投入，胡昕在这个项目上也注入了大量的心血，我们会把 koot 当做玩技术的一个途径，基于它仍然可以做各种尝试。

历史

2016 年 8 月 17 日在猎豹移动的 Gitlab 上提交了第一次代码
贡献者：我、胡昕、孙驰、李阳、张攀

2017 年 7 月 3 日在 GitHub 上提交了第一次代码
贡献者：我、胡昕、马振雨、王一奇、陈钦洋

2018 年 8 月 8 日在 NPM 上提交了第一个 koot 包

2020 年 5 月 15 日 在腾讯云 采访 koot 在 serverless 上的实践
https://serverlesscloud.cn/best-practice/2020-05-15-ssr-interview

2020 年 7 月 9 日 在 ServerlessDay · China 大会上的 koot 案例分享
https://serverlesscloud.cn/blog/2020-07-09-serverlessdays-tencent-2

2017 年 11 月 猎豹十佳技术文章《2017 年的 WEB 前端开发 - 单页面终于嫁给了多页面》
https://twiki.cmcm.com/pages/viewpage.action?pageId=11339894

案例

猎豹移动官网
https://www.cmcm.com

Bitrue 交易所
https://www.bitrue.com

...