四个方面去考虑
模块化、组件化、规范化、自动化四个方面来思考。
模块化
模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。
CSS的模块化
解决命名空间问题：CSS Modules
js 模块化
资源的模块化
图片，icon
组件化
从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。
组件化更重要的是一种分治思想。
Keep Simple. Everything can be a component.
-
页面上所有的东西都是组件。页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件，作为组件的基本单元。
-
传统前端框架/类库的思想是先组织DOM，然后把某些可复用的逻辑封装成组件来操作DOM，是DOM优先；而组件化框架/类库的思想是先来构思组件，然后用DOM这种基本单元结合相应逻辑来实现组件，是组件优先。这是两者本质的区别。
-
组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象。
-
所以我们除了封装组件本身，还要合理处理组件之间的关系，比如（逻辑）继承、（样式）扩展、（模板）嵌套和包含等，这些关系都可以归为依赖。
规范化
- 目录结构的制定
- IDE规范
- .editorconfig
- 编码规范
- css 规范（style lint）
- js 规范（ts lint）
- html 规范（todo：）
- 不能有硬代码，节点与数据完全分离
- 前后端接口规范
- 接口文档
- 文档规范
- js doc
- 在线文档
- 组件管理
- 对外暴露接口简单
- 兼容性
- Git分支管理
- git flow
- commit描述规范
- 详细描述commit内容
- 定期CodeReview
- 视觉图标规范
- 沟通规范（降低沟通成本）
- 使用协同工具与各个部门交流
- 视觉：zeplin，语雀
- 文档：语雀
- 原型图：语雀
- 项目信息管理规范
- 工具：语雀
- 一份包括开发人员、产品、视觉，现有对接维护人的数据列表。
- 产品经理 (初始产品经理，当前维护人员)
- 视觉 (初始视觉，当前维护人员)
- 后台 (初始开发人员，当前维护人员)
- 前端 (初始开发人员，当前维护人员)
- 测试 (初始测试人员，当前维护人员)
- 运维配置（初始运维配置人员，当前维护人员）
编码规范最好采取ESLint和StyleLint等强制措施，配置git hooks可以实现Lint不过不能提交代码等机制，因为人是靠不住的。
自动化
任何简单机械的重复劳动都应该让机器去完成。
- 持续集成
- 自动化构建
- 自动化部署
- 自动化测试
-
Karma + Mocha + Chai
-
发现痛点
规约
可视化
人工智能
- ...