不吹不黑聊聊前端框架 - 尤雨溪

组件的分类：

1. 纯展示型组件。数据进，dom 出
2. 接入型组件，与 Service Container 组件。
3. 交互型组件。表单，element UI
4. 功能性组件。路由组件，动画组件

JSX 拥有灵活性，Javascript 适合功能性组件 模板，适合展示性

collocation 把一个组件的 JS CSS HTMl 放在一个文件

变化侦测和渲染机制

声明式 view = render(state)

vertril dom 虚拟 dom

变化侦测 https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing

1. push，（细粒度）哪些数据变动了
2. pull，（粗粒度） dom 可能变动，比对

vue2 组件间，push 组件内，pull

状态管理

Source event -> State change -> UI change

vuex 解决 Source -> State change

redux 数据不可变，命令式 MobX 可变数据，副作用，声明式去写

问题：

1. 复杂的异步，推荐用 rx.js 处理
2. 数据放在主状态，还是组件 State
3. 从服务端拿到数据，再存到 data 中，有点多此一举

（服务端直接渲染出模板？）

路由

URL 映射到 组件树结构 ionic app 思路，卡片化路由

css

主流的 CSS 方案

• 跟 JS 完全解耦，靠预处理器和比如 BEM 这样的规范来保持可维护性，偏传统
• CSS Modules，依然是 CSS，但是通过编译来避免 CSS 类名的全局冲突
• 各类 CSS-in-JS 方案，React 社区为代表，比较激进
• Vue 的单文件组件 CSS，或是 Angular 的组件 CSS（写在装饰器里面），一种比较折中的方案

传统 css 的一些问题：

1. 作用域
2. Critical CSS(首屏直出，服务端渲染)
3. Atomic CSS（原子类）
4. 分发复用
5. 跨平台复用

构建工具

构建工具解决的其实是几方面的问题：

• 任务的自动化
• 开发体验和效率（新的语言功能，语法糖，hot reload 等等）
• 部署相关的需求
• 编译时优化

部署

大公司里怎样开发和部署前端代码？ (opens new window)

打包 js rollup.js

服务端数据通信

实时问题 rx.js

graph 数据量，数据层

服务端渲染

ssr.vuejs.org

跨平台渲染

Web Component (opens new window)