前端架构

Get Started. It's Free
or sign up with your email address
前端架构 by Mind Map: 前端架构

1. 应用层架构设计

1.1. 布局系统

1.2. 权限系统

1.2.1. 功能权限

1.2.1.1. 相关

1.2.2. 数据权限

1.2.2.1. 无关

1.3. 元数据转换

1.4. 公式 [?]

2. 开发基础

2.1. 语言

2.1.1. HTML5

2.1.2. CSS3

2.1.3. ES 6

2.1.3.1. ES6 property notation

2.2. 程序设计思想

2.2.1. 函数式编程

2.2.2. Redux

2.2.2.1. Three Principles

2.2.3. React

2.2.3.1. Think in React

2.3. Training Plan

2.3.1. part 1

2.3.1.1. Redux In Netshell

2.3.2. part 2

2.3.2.1. ES6 Walkthrough

2.3.3. part 3

2.3.3.1. Functional Programming Introduction

2.3.4. part 4

2.3.4.1. Redux Advanced

2.3.5. part 5

2.3.5.1. Architecutre Reveal

2.3.6. part 6

2.3.6.1. A Real World Sample ( AGZ Design Pattern )

3. 代码审查

3.1. ESLint

3.1.1. 开发工具集成

3.1.1.1. WebStrom

3.1.1.2. Sublime

3.1.1.3. VS Code

3.1.2. .editorconfig

4. 发布部署

4.1. 持续集成

4.2. 代码编译

5. 前端架构 概念,经验与规范

5.1. 最佳实践 [Todo: moving on to ...]

5.1.1. use yarn instead of npm

5.1.2. Lodash

5.1.2.1. avoid expensive cost code executed too often then calling throttle() with timespan specified

5.1.3. React

5.1.3.1. URL Params

5.1.3.1.1. withRouter

5.1.3.2. How to resolve issue of passing data down to grandchildren component

5.1.3.2.1. Props

5.1.3.2.2. Context

5.1.3.2.3. Provider

5.1.3.3. Ref

5.1.3.4. when lifecycle hook added ?

5.1.4. ES6

5.1.4.1. import the exact dependcy you need

5.1.4.1.1. import throttle from 'lodash/throttle' rather than 'lodash'

5.2. 代码规范

5.2.1. 函数式编程风格

5.2.2. JS代码规范

5.2.2.1. optional

5.2.3. React

5.2.3.1. Anti-Patterns

5.2.3.2. Airbnb React/JSX Style Guide

5.2.4. CSS

5.2.4.1. Airbnb CSS / Sass Styleguide

5.3. 技术栈

5.3.1. React

5.3.2. Redux

5.3.3. React Router

5.3.4. Jest

5.3.5. ESlint

5.3.6. Webpack

5.3.7. Babel

5.3.8. Redux Saga

5.3.9. React Router Redux

6. 基础层架构设计

6.1. 状态管理

6.1.1. 需求

6.1.1.1. 状态历史

6.1.2. Redux

6.1.3. 客户端持久化 (localStorage)

6.1.3.1. Data to save

6.1.3.2. UI State not to save

6.2. 文件组织与目录/命名规范

6.2.1. 文件组织

6.2.1.1. Package by feature

6.2.1.2. Package by layer

6.2.1.2.1. determined by core framework of Redux

6.3. 路由

6.3.1. React Router

6.3.1.1. v4

6.3.1.1.1. change back to V3 due to no React-Router-Redux support

6.3.2. 是否有程序状态和URL Mapping的需求 ?

6.4. 服务通信层

6.4.1. 安全

6.4.2. Callback Hell

6.4.2.1. Fetch

6.4.2.2. Bluebird

6.4.2.3. ES6 Promises

6.4.3. 技术栈选型

6.4.3.1. isomorphic-fetch

6.5. 消息层

6.5.1. TBD

6.6. 异常处理层

6.6.1. TBD

6.7. 包依赖管理

6.8. 代码构建

6.9. 性能优化策略

6.9.1. ReactPerf

6.10. 浏览器兼容性

6.11. 多语言[?]

6.11.1. react-intl

6.12. 安全

6.13. Saga

6.13.1. why Saga

6.13.1.1. redux-saga is declarative

6.13.2. Saga VS Thunk

6.14. side effect management

6.14.1. The saga is the coupling point between the two widgets that coordinate them in a meaningful way for your business.

6.14.2. Thunk vs Saga

7. 技术调研

7.1. React Native

7.1.1. 可行性

7.1.1.1. 学习曲线

7.1.1.2. 苹果市场与安卓市场支持

7.1.1.2.1. 关于JsPatch的问题

7.1.1.3. 用户体验

7.1.1.4. 可扩展性

7.1.2. 结论

7.1.2.1. TBD

7.2. Mobx

7.2.1. MobX vs Redux

7.2.1.1. 参考文章

7.2.2. 结论

7.2.2.1. Not To Use

7.3. React 服务端渲染

7.3.1. 原因

7.3.1.1. 元数据暴露

7.3.1.2. 程序扩展

7.3.1.2.1. 表单字段对应的控件

7.3.1.2.2. 工作流任务

7.3.2. 解决方案

7.3.2.1. 元数据与参数解耦

7.3.2.2. 表单字段有限性

7.3.2.3. 工作流任务移到后端执行

7.3.3. 结论

7.3.3.1. Not To Use

7.4. Enzyme

7.5. normalizr

7.6. knexjs [ Low Priority ]

7.7. editorconfig

8. 单元测试

8.1. deepFreeze

8.2. TDD

8.3. What to test

8.3.1. Redux

8.3.1.1. Reducer

8.3.1.2. Selector

8.4. Jest

9. CSS样式架构设计

9.1. 选型

9.1.1. OOCSS

9.1.2. CSS Modules

9.1.3. ITCSS

9.1.4. BEM

9.1.5. SMACSS

10. API 设计

10.1. URI

10.1.1. 2 level is good enough

10.1.1.1. /users/1/files/2

10.1.2. not to mix id with params

10.1.2.1. /users/age/20/60 is bad

10.1.2.2. /users?minAge=20&maxAge=60 is good

10.2. UML mapping to Rest API

10.2.1. Composition to 2 level resource

10.3. naming