
1. 技术调研
1.1. React Native
1.1.1. 可行性
1.1.1.1. 学习曲线
1.1.1.2. 苹果市场与安卓市场支持
1.1.1.2.1. 关于JsPatch的问题
1.1.1.3. 用户体验
1.1.1.4. 可扩展性
1.1.2. 结论
1.1.2.1. TBD
1.2. Mobx
1.2.1. MobX vs Redux
1.2.1.1. 参考文章
1.2.2. 结论
1.2.2.1. Not To Use
1.3. React 服务端渲染
1.3.1. 原因
1.3.1.1. 元数据暴露
1.3.1.2. 程序扩展
1.3.1.2.1. 表单字段对应的控件
1.3.1.2.2. 工作流任务
1.3.2. 解决方案
1.3.2.1. 元数据与参数解耦
1.3.2.2. 表单字段有限性
1.3.2.3. 工作流任务移到后端执行
1.3.3. 结论
1.3.3.1. Not To Use
1.4. Enzyme
1.5. normalizr
1.6. knexjs [ Low Priority ]
1.7. editorconfig
2. 应用层架构设计
2.1. 布局系统
2.2. 权限系统
2.2.1. 功能权限
2.2.1.1. 相关
2.2.2. 数据权限
2.2.2.1. 无关
2.3. 元数据转换
2.4. 公式 [?]
3. 基础层架构设计
3.1. 状态管理
3.1.1. 需求
3.1.1.1. 状态历史
3.1.2. Redux
3.1.3. 客户端持久化 (localStorage)
3.1.3.1. Data to save
3.1.3.2. UI State not to save
3.2. 文件组织与目录/命名规范
3.2.1. 文件组织
3.2.1.1. Package by feature
3.2.1.2. Package by layer
3.2.1.2.1. determined by core framework of Redux
3.3. 路由
3.3.1. React Router
3.3.1.1. v4
3.3.1.1.1. change back to V3 due to no React-Router-Redux support
3.3.2. 是否有程序状态和URL Mapping的需求 ?
3.4. 服务通信层
3.4.1. 安全
3.4.2. Callback Hell
3.4.2.1. Fetch
3.4.2.2. Bluebird
3.4.2.3. ES6 Promises
3.4.3. 技术栈选型
3.4.3.1. isomorphic-fetch
3.5. 消息层
3.5.1. TBD
3.6. 异常处理层
3.6.1. TBD
3.7. 包依赖管理
3.8. 代码构建
3.9. 性能优化策略
3.9.1. ReactPerf
3.10. 浏览器兼容性
3.11. 多语言[?]
3.11.1. react-intl
3.12. 安全
3.13. Saga
3.13.1. why Saga
3.13.1.1. redux-saga is declarative
3.13.2. Saga VS Thunk
3.14. side effect management
3.14.1. The saga is the coupling point between the two widgets that coordinate them in a meaningful way for your business.
3.14.2. Thunk vs Saga
4. 开发基础
4.1. 语言
4.1.1. HTML5
4.1.2. CSS3
4.1.3. ES 6
4.1.3.1. ES6 property notation
4.2. 程序设计思想
4.2.1. 函数式编程
4.2.2. Redux
4.2.2.1. Three Principles
4.2.3. React
4.2.3.1. Think in React
4.3. Training Plan
4.3.1. part 1
4.3.1.1. Redux In Netshell
4.3.2. part 2
4.3.2.1. ES6 Walkthrough
4.3.3. part 3
4.3.3.1. Functional Programming Introduction
4.3.4. part 4
4.3.4.1. Redux Advanced
4.3.5. part 5
4.3.5.1. Architecutre Reveal
4.3.6. part 6
4.3.6.1. A Real World Sample ( AGZ Design Pattern )
5. 代码审查
5.1. ESLint
5.1.1. 开发工具集成
5.1.1.1. WebStrom
5.1.1.2. Sublime
5.1.1.3. VS Code
5.1.2. .editorconfig
6. 单元测试
6.1. deepFreeze
6.2. TDD
6.3. What to test
6.3.1. Redux
6.3.1.1. Reducer
6.3.1.2. Selector
6.4. Jest
7. CSS样式架构设计
7.1. 选型
7.1.1. OOCSS
7.1.2. CSS Modules
7.1.3. ITCSS
7.1.4. BEM
7.1.5. SMACSS
8. 发布部署
8.1. 持续集成
8.2. 代码编译
9. API 设计
9.1. URI
9.1.1. 2 level is good enough
9.1.1.1. /users/1/files/2
9.1.2. not to mix id with params
9.1.2.1. /users/age/20/60 is bad
9.1.2.2. /users?minAge=20&maxAge=60 is good
9.2. UML mapping to Rest API
9.2.1. Composition to 2 level resource
9.3. naming
10. 前端架构 概念,经验与规范
10.1. 最佳实践 [Todo: moving on to ...]
10.1.1. use yarn instead of npm
10.1.2. Lodash
10.1.2.1. avoid expensive cost code executed too often then calling throttle() with timespan specified
10.1.3. React
10.1.3.1. URL Params
10.1.3.1.1. withRouter
10.1.3.2. How to resolve issue of passing data down to grandchildren component
10.1.3.2.1. Props
10.1.3.2.2. Context
10.1.3.2.3. Provider
10.1.3.3. Ref
10.1.3.4. when lifecycle hook added ?
10.1.4. ES6
10.1.4.1. import the exact dependcy you need
10.1.4.1.1. import throttle from 'lodash/throttle' rather than 'lodash'
10.2. 代码规范
10.2.1. 函数式编程风格
10.2.2. JS代码规范
10.2.2.1. optional
10.2.3. React
10.2.3.1. Anti-Patterns
10.2.3.2. Airbnb React/JSX Style Guide
10.2.4. CSS
10.2.4.1. Airbnb CSS / Sass Styleguide
10.3. 技术栈
10.3.1. React
10.3.2. Redux
10.3.3. React Router
10.3.4. Jest
10.3.5. ESlint
10.3.6. Webpack
10.3.7. Babel
10.3.8. Redux Saga
10.3.9. React Router Redux