项目背景（技术栈：React、TS、Scss、Jest、StoryBook）：让项目能够快速的成型，减少在项目中重复的造轮子。 已实现的组件：目前实现了Alert、AutoComplete、Button、Icon、Input、Menu、Progress、Tabs、Upload、Transition组件，每个组件都会通过jest+testing-library测试，文档使用StoryBook生成。 开发过程：使用React Hooks的形式编写函数式组件，每个组件都会先设计好，使用方式是怎样的，然后再去写简单的代码，然后进行优化，然后在进行测试，有一些组件是使用TDD模式开发的，Menu组件比较复杂所以使用TDD的模式开发，开发组件的使用跟着测试用例开发即可，像Menu组件比较的复杂是需要使用到Context的，在测试的时候单纯使用Jest是不能满足需求的，引入testing-library可以对React组件的测试、事件的模拟、异步的模拟，让测试更加的简单。

项目背景（技术栈：TS、Microbundle）：用户对网站的交互体验要求越来越高，网站有时候会因为JS、CSS大文件导致用户看到界面的等待时间过长，还有用户在使用网站过程中遇到的一些问题不可能一一的通过打客服*的形式进行沟通，这时候就需要一个工具，监控文件加载的时间、FP、FCP、FMP、LongTask指标的记录、用户的网速和错误的捕获和录制错误是如何产生的，并且把这些指标和录制通过api上传到服务器，然后网站管理员就可以通过这些数据分析寻找问题并及时的修复。 性能指标实现方案：像FP、FCP、FMP是可以直接使用performance.timing中获取，像longtask、first-input等通过PerformanceObserver监听获取，这个项目在使用的时候会有长任务的js执行，所以会通过使用requestIdleCallback解决这个问题。 错误录制实现方案：将Html转为VDom，使用MutationObserver监听dom的变化，记录dom的变化，鼠标移动的时候收集鼠标的移动记录，然后将这些数据传到服务端进行保存，然后通过Canvas将鼠标的轨迹模拟出来，像文本框的内容就可以通过vdom模拟出来。

项目背景（技术栈：React、TS、Inquirer、Chalk、Antd、Ora、CommanderJS、Vue、Handlebars、Quicktype、Vite、Snowpack、Webpack）：随着前端工程化工具和开发框架的发展，前端的业务也越来越复杂，但是前端的很多业务都是存在共性的，例如：通过接口我们需要去写TS的接口、经常复制粘贴的CRUD的代码、CRUD的接口联调等业务，这些业务如果可以通过一个工具去生成，那么前端将解放生产力，目前市面上做的LowCode平台也非常的多，例如Procomponents、通过拖拉拽生成代码等，但是这些还不能解决前端某些问题，例如根据接口生成TS的类型定义文件等。 实现方案：这个项目通过CommanderJS制作命令行，通过Inquirer实现用户的交互（比如选择打包工具的类型、是否需要支持TS等），然后根据用户的交互去选择对应的工具，这就快速生成了一套开发环境，然后就是通过命令行生成一套CRUD和根据接口生成TS类型定义文件，CRUD代码有Vue、React版本的代码，代码实现类似于FormRender，可以通过JSON去快速生成需要的业务，其次就是使用QuickType生成类型定义文件，因为QuickType有点不符合我们当前的业务，所以后续我们是想手写这样一个库，去适配Swiper、Yapi等平台等接口转化。 后续：后续打算从设计稿到生成代码整个流程的自动化，通过设计稿生成对应的代码，然后在通过拖拉拽的形式生成代码，重点还是在设计稿生成对应的代码，因为想生成可维护的代码是不太简单的，需要通过算法去计算哪些模块是符合某种类型的（例如列表、网格布局等）。