VueConf 2017 大会现场笔记

活动很赞，人不少，氛围很是好！

1、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

服务端渲染改进 ssr.vuejs.org

在存在代码分割的状况下，经过分析 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 的兼容

---

2、Vue SSR 和 API Proxy 实践

By i5ting（狼叔）@去哪儿

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

1. 跨平台
2. Node 后端
3. 前端
4. 工具

异步流程控制：

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

流行趋势：

• PWA
• SSR
• 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 层诸多思考

当页面里有不少个业务须要加载的时候：

1. 可选
2. 可并行
3. 先到先得：先到先显示
4. 容错：有东西错了，不能 block 其余操做

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

API 多的问题

• 跨部门
• 跨域
• API 返回的数据对前端不友好
• 改动多

API Proxy

• 产品需求应变，后端很差变，前端更容易
• 后端讨厌（应付）前端，集中 API 都拦着根据 UI／UE 去定制，能偷懒偷懒

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

1. Browser：双向绑定组件化
2. Node Proxy：API 代理给前端浏览器使用
3. 服务组装：连接后端微服务

Vue 与 API Proxy 如何完美结合

---

3、用比较性思惟谈工程化工具在 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：加载时序问题被解决