前端架构

马上开始. 它是免费的哦
注册 使用您的电邮地址
Rocket clouds
前端架构 作者: Mind Map: 前端架构

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