VueConf 2017 大会现场笔记-白红宇

活动很赞，人很多，氛围非常好！

一、Vue 2017 现状与发展

By 尤雨溪 Evan You @ Vue

起源

2013 年 6 月：First Commit (Seed)

2013 年 12 月：第一次将项目名字 Vue

2014 年 2 月：第一次公开发布 Hacker News

2014 年 11 月：0.11 版本（重写）

2015 年 4 月：Laravel 社区作者开始使用并宣传

2015 年 10 月：Vue.js 1.0 发布

2016 年 10 月：Vue.js 2.0 发布（重写 & 一定的向后兼容）

定位

Just a View Layer Library

最早只想解决一些视图层的问题，并没有完全服务于大型业务的功能。但是随着 Vue 的发展开始增加辅助工具，例如 vue-router, vue-loader, vuex

The Progress Framework

不需要完全的全家桶，而是可以渐进式的根据需求一点点增加业务复杂度。这样易于上手，也可以更快的应用在老业务上，比侵入式框架易于上手。

现状

GitHub 超过 53,986 个 Star 数，已经是历史的 Top 10

每月 55万+ 次 NPM 下载（不算阿里爸爸 CNPM 镜像）

Chrome DevTool 插件 17.4 万日活

314 Contributors

社区化的开源产品：NUXT.js，Quasar Framework（Ionic），Element，iView，Muse-UI，Vux，Vuetify，Vue Material

与阿里合作的 Weex

Microsoft Build TypeScipt 老大作者 Anders Hejlsberg 在 Demo 中 Vue + VSCode 中可以推倒

Google I/O Addy Osmani 介绍 Vue + PWA

Vue 2.3

服务端渲染改进

在存在代码分割的情况下，通过分析 Webpack 服务端和客户端的构建信息，自动推导需要在客户端预加载的文件，生成最优的 <script> 和 <link re="preload/prefetch"> 链接

异步组件改进

Loading / Error / Timeout Fallback

函数式组件改进

不再需要显示式 props

其他

Passive 事件侦听：@touchmove.passive

.sync 回归了

Vue 2.4（K__）

与 TypeScript 更好的整合

TypeScript 团队 Type 声明

VSCode 团队最好的 IDE

SSR 性能进一步优化

通过编译时优化获得 2~8x 性能提升，通过字符串实现性能优化，但是很多 2.0+ 都是用 render 实现的。现在是可以自动分析出来，非组件内容多的话，可以快速提升。

SSR + webpack code split 完美支持

不再局限于路由

vue-cli 3.0

配置依赖化 + 可组合（更新升级）

PWA by default

一个模版，不同参数（--ts, --sr ...）

更好的测试方案

长期展望

单文件组件 CSS 改进

基于 Proxy 的响应式系统重构
- 不再需要 Vue.set 或者 this.$set，直接 =
- Lazy Observation，性能优化
- 显示构建响应式对象

HTML Modules：
- 类似单文件组件的新标准（由 Google 起草中）

与 Web Components 的兼容

二、Vue SSR 和 API Proxy 实践

By i5ting（狼叔）@去哪儿

分析 Node.js 现状，以及 2017 年趋势预测

跨平台

Node 后端

前端

工具

异步流程控制：

Callback => Thunk => Promise => Generator(yield) => Async(co)

流行趋势：

API Proxy

Isomorphic

Vue SSR 原理

wepback 插件内置

BundleRenderer：dev 状态下的 hot-reload 和 source-map support

streaming/bigpipe：大文件传输

cache：缓存 lrc-cache 自动集成

内置 service-worker：支持 PWA

模块系统

开发环境 module loader：当用户到某一个模块时，按需加载进来

产品环境 module bundler：提前打包好各个包文件，运行时各个包按需加载

打包演进

browserify

webpack 1

rollup：采用 ES6 模块

webpack 2：ES6 模块也跟进了 & 性能也优化了

Bigpipe：分块加载技术

加快了 Time-to-Content 时间

距离并引出 Api 层诸多思考

当页面里有很多个业务需要加载的时候：

可选

可并行

先到先得：先到先显示

容错：有东西错了，不能 block 其他操作

前端逐个模块渲染，或者是后端加载完整体输出。

API 多的问题

跨部门

跨域

API 返回的数据对前端不友好

改动多

API Proxy

产品需求应变，后端不好变，前端更容易

后端讨厌（应付）前端，集中 API 都拦着根据 UI／UE 去定制，能偷懒偷懒

对后端业务、API 抽象出一个 Model Proxy 洗好接口，给前端业务输出，到完整 Web 框架：

Browser：双向绑定组件化

Node Proxy：API 代理给前端浏览器使用

服务组装：链接后端微服务

Vue 与 API Proxy 如何完美结合

三、用比较性思维谈工程化工具在 Vue.js 的优雅设计

by 小春 @ Ex-豌豆荚，Ex-滴滴，摩拜单车

Q：Vue.js 比 jQuery 好学吗？

简洁与简单

脚手架工具

Alleviate the amount of copy & pasting you do between projects

重复的工作尽可能通过脚手架工具提高工作效率。

工具复杂度是为了处理内在复杂度所做的投资 -- Evan You，《Vue 2.0，渐进式前端解决方案》

Vue.js 脚手架

yeoman：通过 yo 命令在初始化项目

vue-cli：支持 vue init 按照制定模版，在制定目录生成项目结构，也可以通过 vue list 列出线上 vuejs-template repo 支持的模版列表。如 webpack, webpack-simple, browserify, browserify-simple, simple.

React.js 脚手架

create-react-app：调用 react-scripts 里的函数来实现脚手架功能

Angular.js 脚手架

angualr-cli：Angular 2.0 开始有的

vue-cli + vuex + vue-router

URL 根据 route 配置连接到相应的 Route Component 根据数据依赖 dispatch 数据到 Model 并根据业务访问相应 Service。

本地开发

Express + 多个中间件：

connect-history-api-fallback

webpack-hot-middleware

http-proxy-middleware：跨域请求，配反向代理 Nginx

express.static

friendly-errors-webpack-plugin：更友好的 webpack error messages 方法

webpack-sftp-client：webpack sftp Client

打包上线

webpack.optimize.UglifyJsPlugin

extract-text-webpack-plugin

optimize-css-assets-webpack-plugin

html-webpack-inline-source-plugin：加载时序问题被解决