AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

Vue.js渐进式前端解决方案

发布者 FEer   简介 前端技术
发布于 1481866886558  浏览 2307 关键词 前端, JavaScript, 框架 
分享到

第1页

Vue.js

渐进式前端解决方案



vuejs.org



@vuejs



vuejs/vue



第2页

尤雨溪 Evan You



@尤小右



@youyuxi



@yyx990803



现在:Vue.js 过去:Meteor, Google Creative Lab



第3页

为什么要有框架?



第4页

框架的存在是为了 帮助我们应对复杂度。



第5页

...但是框架自身也有复杂度。



第6页

应用复杂度



VS. 框架复杂度



第7页

内在复杂度

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



第14页

配合 生态圈的库

和工具



React+



Vue+



纯模板引擎



React



Vue



Backbone



Angular



Ember



Meteor



Less More



第15页

可弹性伸缩的工具复杂度 应对不同复杂度场景



内在复杂度



工具复杂度



第16页

视图层核心

+ 可选的附加库/工具链



第17页

视图层核心

+ 可选的附加库/工具链



第20页

Vue.js 渐进式框架

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



第22页

Google Trends



第23页

GitHub Stars



第25页

声明式渲染



组件系统



客户端路由



大规模状态管理



构建工具



第26页

声明式渲染

Declarative Rendering



第27页

User Input



View



Render



State



第29页

Virtual DOM



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



第31页

Render Function



<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 更灵活、强大 能够表达更复 杂的逻辑



第33页

高效的依赖追踪系统

精确侦测需要重 绘的组件,无需手 动优化



Component Render Function



Trigger re-render



Watcher



render “Touch”

Virtual DOM Tree



Collect as Dependency

Data

getter setter



Notify



第34页

组件系统

Component System



第35页

UI 结构



组件树



第36页

Props: 父 -> 子 单向数据流 Events: 子 -> 父 触发副作用



Parent

Emit Events

Child



Pass Props



第37页

*.vue

单文件组件



第38页

客户端路由

Client-side Routing



第39页

/app/ /app/post/:id



App Home

App Post with { id: 1 }



第40页

客户端路由的各种问题



● 嵌套路由 ● 具名路由 ● 多个平级路由出口 ● 复杂匹配规则 ● 当前活跃链接



● 重定向 / 别名 ● 跳转动画 ● 异步数据处理 ● 跳转规则限制 ● 滚动条行为 ● 懒加载



第41页

router.vuejs.org



第42页

状态管理

State Management



第45页

vuex.vuejs.org



第46页

构建工具 / 开发体验

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 的异步组件特性 轻松实现懒加载



第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



第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



基于第三方独立测试



第55页

服务端渲染

支持流式渲染 + 组件级别缓存



第56页

vue-hackernews 2.0

https://github.com/vuejs/vue-hackernews-2.0



第57页

原生渲染

Native Rendering



第58页

https://alibaba.github.io/weex/



第59页

2.0



第60页

Weex Native 端特性



跨平台 通用组件



Vue Web 端特性



第61页

Thanks!



vuejs.org



@vuejs



vuejs/vue



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。