Note

html

• 基础
• 新标签

css

• 基础
• scss / less
• css 形式：css module / css in js / style component / ...
• tailwind / unocss
• 新特性

js

• es6 / esnext
• ts
  • 类型体操

framework

• react
• vue
• svelte

builder

• webpack
• vite
• rollup
• other
  • jiti
  • esno
  • esbuild

next.js

• 优化点

server

• node - nest.js
• go
• rust

dev

• chrome devtool
  • memory
  • performance

test

• vitest
• puppeteer

network

project

• micro-frontend
• chrome-extension
• electron

open source

article

• chrome devtool research
  • memory/performance
• next.js research
  • csr
  • ssr
  • rsc
  • edge xxx
• react events
• react rerender/optimization/update
• require on demand
• playground runtime
• micro-frontend / module-federation

规划

• 组件库
  • 组件库规范
    • 组件边界
    • 组件分层
    • api 规范
    • 代码规范
    • 提交规范
    • 组件库建设体系
      • lint 规范
      • commit 规范
      • 打包产物
        • umd/esm/cjs
        • 按需
        • 私有 npm
    • 未来趋势与发展
  • 组件库测试
  • 组件测试 id
  • 组件库主题、token 制定等。
  • 组件库样式覆盖、样式前缀
  • 组件库版本管理
  • hooks 改造
  • 按需加载
  • 设计同步
  • 尝试
    • monorepo
    • 自动化引入
• 组件库衍生问题
  • 自动化测试脚本
    • babel / tsx
• 组件库管理平台
  • nest.js
  • next.js
  • 组件运行时
  • md react demo
• 复杂组件
  • UiSearch/UiTable/SearchTable
  • 范围选择
• 微前端
  • 原理
  • 实现
  • 问题
  • 内存泄露与排查
• Electron
  • 通信
  • 窗口
  • 与 web 开发的不同点。
• 项目
  • 兼容性处理
  • 页面卡顿
  • 打包优化
  • sourcemap 调试
• 性能优化
  • 重排、重绘
  • 图层
  • 内存泄露与排查
  • CPU 占用
  • chrome devtools
• react
  • 合成事件
  • 更新机制
  • 组件缓存
  • jsx 编译解析

思路

• 思考
  • 项目背景是怎样的？遇到的问题？
  • 该问题自己的角色与职责？
  • 已有的解决方案是什么？为什么不行？
  • 自己的解决方案是什么？为什么能行？
  • 具体怎么实现的？有哪些难点？又是如何解决的？
  • 最终带来什么样的价值？
  • 从中学习到了什么？有哪些收获？
  • 如果再来一次，有没有更好的实现方式？有哪些地方是可以优化的？