- 本月热门
-
“安全开发”之“坑无止境” by 吴海涛 -
当泛型遇上协议(Swift&iOS) by 蓝晨钰@猿题库 -
基于 Java 容器的多应用部署技术实践 by 魏鹏@阿里 -
谈谈服务治理 by 许式伟@七牛 -
互动娱乐时代下-Web音视频性能优化 by 吴浩@腾讯 -
Twitter Messaging的架构演化之路 by sijieg -
ES6入门教程分享 -
蚂蚁金服金融级PaaS平台构建之道 by 悟善 -
开源大数据技术之演进-Evolution of Open Source Data Infrastructure Past, Present, and Future by Fangjin Yang@Imply -
一个二次创业者是怎样失败的 by 范凯
第1页
Vue.js
渐进式前端解决方案
vuejs.org
@vuejs
vuejs/vue
渐进式前端解决方案
vuejs.org
@vuejs
vuejs/vue
第2页
尤雨溪 Evan You
@尤小右
@youyuxi
@yyx990803
现在：Vue.js 过去：Meteor, Google Creative Lab
@尤小右
@youyuxi
@yyx990803
现在：Vue.js 过去：Meteor, Google Creative Lab
第3页
为什么要有框架？
第4页
框架的存在是为了 帮助我们应对复杂度。
第5页
...但是框架自身也有复杂度。
第6页
应用复杂度
VS. 框架复杂度
VS. 框架复杂度
第7页
内在复杂度
Inherent Complexity
VS.
工具复杂度
Tooling Complexity
Inherent Complexity
VS.
工具复杂度
Tooling Complexity
第8页
工具复杂度是我们为了 处理内在复杂度所做的投资。
第9页
工具太弱
内在复杂度
工具复 杂度
内在复杂度
工具复 杂度
第10页
杀鸡用牛刀
内在 复杂度
工具复杂度
内在 复杂度
工具复杂度
第11页
“Pick the right tool for the job.”
第12页
声明式渲染
组件系统
客户端路由
大规模状态管理
构建工具
组件系统
客户端路由
大规模状态管理
构建工具
第13页
纯模板引擎
React
Vue
Backbone
Angular
Ember
Meteor
Less More
React
Vue
Backbone
Angular
Ember
Meteor
Less More
第14页
配合 生态圈的库
和工具
React+
Vue+
纯模板引擎
React
Vue
Backbone
Angular
Ember
Meteor
Less More
和工具
React+
Vue+
纯模板引擎
React
Vue
Backbone
Angular
Ember
Meteor
Less More
第15页
可弹性伸缩的工具复杂度 应对不同复杂度场景
内在复杂度
工具复杂度
内在复杂度
工具复杂度
第16页
视图层核心
+ 可选的附加库/工具链
+ 可选的附加库/工具链
第17页
视图层核心
+ 可选的附加库/工具链
+ 可选的附加库/工具链
第20页
Vue.js 渐进式框架
Progressive Framework
Progressive Framework
第21页
现状
● ~30k stars on GitHub ● ~185k/mo downloads on NPM ● ~264k/mo unique visitors to vuejs.org ● ~55k weekly active Chrome extension users
● ~30k stars on GitHub ● ~185k/mo downloads on NPM ● ~264k/mo unique visitors to vuejs.org ● ~55k weekly active Chrome extension users
第22页
Google Trends
第23页
GitHub Stars
第25页
声明式渲染
组件系统
客户端路由
大规模状态管理
构建工具
组件系统
客户端路由
大规模状态管理
构建工具
第26页
声明式渲染
Declarative Rendering
Declarative Rendering
第27页
User Input
View
Render
State
View
Render
State
第29页
Virtual DOM
Template
compile
Render Function render
Watcher track dependencies
Virtual DOM Tree
create
Actual DOM Tree
Template
compile
Render Function render
Watcher track dependencies
Virtual DOM Tree
create
Actual DOM Tree
第30页
Render Function
Template
compile
Render Function
render Virtual DOM Tree
Template
compile
Render Function
render Virtual DOM Tree
第31页
Render Function
<div class="message"> Hello World
</div>
render (h) { return h( 'div', { class: 'message' }, ['Hello World'] )
}
<div class="message"> Hello World
</div>
render (h) { return h( 'div', { class: 'message' }, ['Hello World'] )
}
第32页
Render Function
<div class="message"> Hello World
</div>
模板 书写便利、易 读 更接近文档结构和 CSS
render (h) { return h( 'div', { class: 'message' }, ['Hello World'] )
}
函数/JSX 更灵活、强大 能够表达更复 杂的逻辑
<div class="message"> Hello World
</div>
模板 书写便利、易 读 更接近文档结构和 CSS
render (h) { return h( 'div', { class: 'message' }, ['Hello World'] )
}
函数/JSX 更灵活、强大 能够表达更复 杂的逻辑
第33页
高效的依赖追踪系统
精确侦测需要重 绘的组件，无需手 动优化
Component Render Function
Trigger re-render
Watcher
render “Touch”
Virtual DOM Tree
Collect as Dependency
Data
getter setter
Notify
精确侦测需要重 绘的组件，无需手 动优化
Component Render Function
Trigger re-render
Watcher
render “Touch”
Virtual DOM Tree
Collect as Dependency
Data
getter setter
Notify
第34页
组件系统
Component System
Component System
第35页
UI 结构
组件树
组件树
第36页
Props: 父 -> 子 单向数据流 Events: 子 -> 父 触发副作用
Parent
Emit Events
Child
Pass Props
Parent
Emit Events
Child
Pass Props
第37页
*.vue
单文件组件
单文件组件
第38页
客户端路由
Client-side Routing
Client-side Routing
第39页
/app/ /app/post/:id
App Home
App Post with { id: 1 }
App Home
App Post with { id: 1 }
第40页
客户端路由的各种问题
● 嵌套路由 ● 具名路由 ● 多个平级路由出口 ● 复杂匹配规则 ● 当前活跃链接
● 重定向 / 别名 ● 跳转动画 ● 异步数据处理 ● 跳转规则限制 ● 滚动条行为 ● 懒加载
● 嵌套路由 ● 具名路由 ● 多个平级路由出口 ● 复杂匹配规则 ● 当前活跃链接
● 重定向 / 别名 ● 跳转动画 ● 异步数据处理 ● 跳转规则限制 ● 滚动条行为 ● 懒加载
第41页
router.vuejs.org
第42页
状态管理
State Management
State Management
第45页
vuex.vuejs.org
第46页
构建工具 / 开发体验
Build Tools / Dev Experience
Build Tools / Dev Experience
第47页
npm install -g vue-cli vue-cli init webpack-simple my-app cd my-app npm install # or yarn npm run dev
第48页
Webpack 支持下的单文件组件
● 集中组件相关的模板，逻辑和样式 ● 编译为 JavaScript 模块 ● 各语言块支持任意编译 / 预处理器
：Babel, TypeScript, LESS, Sass, PostCSS, Pug… ● 开箱即用的热重载，保存即更新 ● Scoped CSS 支持 ● 配合 Webpack 和 Vue 的异步组件特性 轻松实现懒加载
● 集中组件相关的模板，逻辑和样式 ● 编译为 JavaScript 模块 ● 各语言块支持任意编译 / 预处理器
：Babel, TypeScript, LESS, Sass, PostCSS, Pug… ● 开箱即用的热重载，保存即更新 ● Scoped CSS 支持 ● 配合 Webpack 和 Vue 的异步组件特性 轻松实现懒加载
第49页
Chrome 开发者工具
第50页
Vuex Time-Travel Debugging
第51页
Vuex 状态快照导出 / 导入
第52页
Vue 2.0
第53页
更轻
2.0 Runtime Build 16kb min+gzip
Vue + vue-router + vuex 2.0
1.0.26
26kb min+gzip
26kb min+gzip
2.0 Runtime Build 16kb min+gzip
Vue + vue-router + vuex 2.0
1.0.26
26kb min+gzip
26kb min+gzip
第54页
更快
1.82x
1.85x
2.16x
1.37x 1x
Vanilla JavaScript
Vue 2.0
React 15.3.1
Angular 2.0.0-rc.5
Vue 1.0.26
基于第三方独立测试
1.82x
1.85x
2.16x
1.37x 1x
Vanilla JavaScript
Vue 2.0
React 15.3.1
Angular 2.0.0-rc.5
Vue 1.0.26
基于第三方独立测试
第55页
服务端渲染
支持流式渲染 + 组件级别缓存
支持流式渲染 + 组件级别缓存
第56页
vue-hackernews 2.0
https://github.com/vuejs/vue-hackernews-2.0
https://github.com/vuejs/vue-hackernews-2.0
第57页
原生渲染
Native Rendering
Native Rendering
第58页
https://alibaba.github.io/weex/
第59页
2.0
第60页
Weex Native 端特性
跨平台 通用组件
Vue Web 端特性
跨平台 通用组件
Vue Web 端特性
第61页
Thanks!
vuejs.org
@vuejs
vuejs/vue
vuejs.org
@vuejs
vuejs/vue