VueConf 感想与总结

第一次参加conf好激动的说。来，我们先放几张照片！！

能把自己的第一次献给Vue的第一次简直棒！

今天一天的会议下来，对于刚刚涉足前端领域的我来说收获颇丰，于是将自己的感悟总结在这里与广大的Vue爱好者以及尤大大的粉丝们分享！

Vue 2017 现状与发展

By 尤雨溪 Evan You Vue.js作者

起源

• 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 发布（代号：Evangelion，没想到尤大大也喜欢福音战士！好激动！！）
• 2016 年 10 月：Vue.js 2.0 发布（对代码进行了重写 & 一定的向后兼容）

最后对于即将发布的2.4版本，将是以K开头的一部动画，但是尤大大不愿透露更多的细节。

好多自己梦寐以求的公司啊！！！

定位

Just a View Layer Library

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

The Progress Framework

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

现状

• GitHub 超过 53,986 个 Star 数，已经是所有类型项目的历史的 Top 10
• 每月 55万+ 次 NPM 下载（不算阿里爸爸 CNPM 镜像,算了就是 月破百万 的节奏XD）
• 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 （最佳IDE）
• Google I/O Addy Osmani 介绍 Vue + PWA

SSR

Server-Side Rendering (ssr.vuejs.org)

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

SSR 性能进一步优化，通过编译时优化获得 2~8x 性能提升。（后面被阴明吐槽性能还是很差，必须在每一层都做缓存）

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的小伙伴们一个个合影，不由得深感敬佩！近距离接触尤大大，发现他特别平易近人，丝毫没有大神的架子。了解到尤大大是86年出生的，13年（也就是27岁）写出了第一版Vue。打算把尤大大作为自己的男神和榜样，希望自己五年后也可以像尤大大一样做出属于自己的东西。（貌似有点不自量力23333，总之要加油！You can make it !!）

附上和尤大大的合照一枚！

Vue SSR 和API Proxy层深度实践

By i5ting 桑世龙 狼叔 去哪网前端架构师

Vue本身是前端框架，它目前跟服务器唯一的关联就是SSR，基于Stream的Bigpipe实现，虽说是旧瓶装新酒，但还是有很多人不了解其中原理。另外对于Vue项目来说，与后端Api对接、（Spa、大首页）等有没有更好的实践呢？后端Api目前也极为混乱，各种语言、各种实现，真的适合前端么？大家辛苦了，狼叔最懂你。

首先，狼叔分析 Node.js 现状，并且预测了 2017 年趋势。

流行趋势

• PWA
• SSR
• API Proxy
• Isomorphic

Vue SSR 原理

• wepback 插件内置
• BundleRenderer：dev 状态下的 hot-reload 和 source-map support
• streaming/bigpipe：大文件传输
• cache：缓存 lrc-cache 自动集成
• 内置 service-worker：支持 PWA

API Proxy

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

个人感悟

狼叔还是很有个人魅力的，嗯。对SSR的原理有了一些基本的认识，知道了目前主流的打包 工具 为webpack 2，正好最近开始学习webpack，看来没有学错哈哈！狼叔还说如果你想晋升，那么最好学学webpack，看来自己需要更加重视webpack的运用以及原理的学习。

谈工程化在Vue.js的优雅设计

By 张耀春 小春 摩拜单车

前端框架的目的：alleviate the amount of copy & pasting you do between projects.

Pick the right tool for the job.

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

vue-cli

官方出品的命令行脚手架工具，支持：

（1）vue init 按照指定模板，在指定目录生成项目结构

有 3 种模板初始化方式：

1、官方

2、本地

3、线上其他repo

（2）vue list 列出线上 vuejs-templates repo 支持的模板列表

其中大家用的最多的是 webpack

create-react-app VS vue-cli

都是基于 webpack 构建。

create-react-app：更多封装在了react-scripts 里面，同时把它加到了初始项目的依赖里面。

vue-cli：更为直接，把脚本模板都直接放到build 文件夹中，开发者更容易修改。

webpack

和 Vue.js 结合最紧密的构建工具

配置分离

采用 webpack-merge + webpack.base.conf.js + webpack.prod.conf.js

本地开发

需要 Express 和多个中间件：

• connect-history-api-fallback： 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
• webpack-hot-middleware： 热更新，实现修改代码自动刷新浏览器。
• http-proxy-middleware： 代理
• express.static： 托管静态文件

Webpack插件

DefinePlugin：动态的注入一些变量，比如一些版本、环境信息等

friendly-errors-webpack-plugin：recognizes certain classes of webpackerrors and cleans, aggregates and prioritizes them to provide a betterDeveloper Experience.

webpack-sftp-client：开发过程中把本地资源 push 到开发机

html-webpack-inline-source-plugin ：html-webpack-plugin 的第三方扩展插件，通过增加一个 {inlineSource: 'regex string'} 选项来内联你的静态文件到 html 中。

Vue 组件编译

vue-loader

Webpack 的插件，处理 .vue 文件中的三部分：

*、 template
*、 script
*、 styles

个人感悟

小春的演讲诚意满满干货十足，由于讲的太细还有点超时了。由于小春刚刚从滴滴跳槽到了，导致主办方的关于小春的信息还没更新。自己回来之后重新学了一遍PPT，感觉很多vue的原理性的东西，收获不少。

掘金Vue.js后端渲染及重构实践

By 阴明 掘金创始人

Vue核心文件目录

src/
├── api/              # 接入微服务的基础 API
├── App/              # App Root Component
├── asset/            # 静态文件
├── business/         # 业务
├── component/        # 组件
├── const/            # 常量
├── event-bus/        # Event Bus 事件总线，类似 EventEmitter
├── global/           # 通用定义的 directive, mixin 还有绑定到 Vue.prototype 的函数
├── model/            # Model 抽象层
├── repository/       # 仓库，接入 Vuex 中
├── router/           # 路由
├── service/          # 服务
├── state/            # Vuex 状态管理
├── style/            # 样式
├── util/             # 通用 utility functions
├── view/             # 各个页面
├── client-entry.js   # 前端业务 & build
├── server-entry.js   # SSR业务 & build
├── ...
└── main.js           # Vue Object Initiation

基础设施层
api/
util/

领域层 Domain
service/       % 各个 Domain 下的基础功能业务
repository/    %某一个独立 Domain 下的获取数据的业务
model/         %数据抽象层

业务层
business/        % 各个 Domain 下的具体业务，会引用 service 和 repository 中定义的功能
validator/       %不同数据的 validation 过程

表现层
state/
router/
component/
view/            % Vue 下具体的交互展示层业务

Event Bus

类似于 Node 中的 EventEmitter

通过事件管理和监听处理异常、Alert、Scroll 触发等

404

需求：

不通过跳转 URL 来显示 Not Found

解决方案：

• 我们在路由表的最后配置了 404 路由，如果当前 URL 没有匹配前面的任意一条规则
• Vuex 状态树中有专门的 error module 存储异常
• ​​然后 dispatch 一个 action 设定为 404 展示

SSR的应用

需求：

后端渲染解决性能问题

解决方案：

• 多层缓存
• 数据层缓存
• 组件层缓存 lru-cache
• 页面层缓存 redis

数据一致性

需求：

前后端渲染数据一致性问题

解决方案：

通过某种事件广播机制实现数据的最终一致性

Vuex 本身就有事件广播模型，我们定义了 3 个 mutation 类型：

• ENTITY_CREATED - 实体已创建
• ENTITY_UPDATED - 实体已更新
• ENTITY_DELETED - 实体已删除

完全通过事件传递行为

略

情怀部分

我相信每一个新技术的出现的最终目的是创造价值

如果一个技术真的好

我就会推荐它，宣传它，帮助它普及给更多的开发者

用开放的心态去尝试、学习、接受新事物

这即是我做掘金的态度，也是我做技术的态度

个人感悟

阴明说这真的是他最后一次技术分享了，不知道大家信不信？我觉得阴明的这次演讲还是很不错的，既有干货又有情怀。在回答问题阶段，阴明说他不是为了学前端而学的前端，他最开始学习的目的单纯只是做自己的个人主页来装逼，因为想要给自己的主页加上炫酷的效果，所以开始自学相关的知识。他认为，抱着一种解决问题的态度去学习知识是最有效率的。我十分认同。以后在自己学习前端的过程中，也要注意问题导向，项目驱动。自己给自己定个目标，例如做出自己的App，小程序。然后让目标驱使自己去主动地获取知识。（与此同时，也要注意扎实的基础知识的掌握。）

Vue 在饿了么的应用

By 李清伟 Element 核心开发

• PWA 在饿了么的实践经验

个人感悟

element 仅仅只有3个人负责，却能保持至少一周一次更新，佩服！

当Weex遇上Vue.js 2.0

By 马天翼（早弦） 阿里巴巴前端开发工程师、Weex 核心开发

Weex 1.0

Weex 2.0

与 web 版本 vue 2.0 的差异点

● DOM

● BOM

● Layout

● scoped

● scroll

● background-image

● 适配问题

DOM & BOM

● 不支持 DOM 操作

● 仅支持部分事件类型

● 不支持事件冒泡

● 没有 window、 document、screen、history、location、navigator 等对象

解决办法：

● MVVM 大法好！

● 未来会有更多

● 新版本已经支持

● 使用 weex.config 或者内置模块

Flexbox

● Weex 官方指定布局系统

● 规范明确

● 布局适用大部分情况

● 面向未来

其他差异

● 样式作用域默认是 scoped ，即只在当前组件生效

● 只有 scroller 组件默认有滚动效果

● 不能设置背景图

● 与 Native 原生组件共存的适配问题

内存差异

● web 时代，内存能吃吗？

● weex 时代，内存 够 吃吗？

这三部分内存属于包含关系。例如：可能一个原生App只泄露了100M的jsfm内存，但是它可能泄露了150M的jscore内存，以及200M的native内存

个人感悟

知道了整个weex 项目原来只有13个人(其中前端仅仅3个人)，很吃惊。Weex包含了vue2.0内核，可以看作vue的三端实现。觉得自己可以尝试用weex完成移动端的vue编写。

用Vue，vuex构建超大Web应用——IDE

By 王骆菲 VIDE（原DebugGap）作者

“某种东⻄的产⽣是由于社会的进步和发展到达⼀定的状态,出现了相应的条件,由此⽽产⽣”

对于协同开发而言，只关心有哪些状态可用，不关心具体实现逻辑。

plugin开发

只需要简单的三步，大大降低了编写插件的门槛，从此国人也可以轻松编写自己的插件。

• 导入组件
  

  

• 添加视图
  

  

• 添加处理类
  

  

vide的未来规划

1. 未来优先支持vue/weex开发
2. 再支持微信小程序等
3. 基于简单快速的插件开发，服务更多的开发者

个人感悟

想尝试写Vue插件

结语

充实而愉快的一天就这样结束了，感谢各位大大的带来的精彩内容！（照惯例放上各位大大的合照2333）

希望自己能够为vue社区这个大家庭做出自己的贡献，也希望有朝一日能够成为vue在github上的Contributors！！！加油！！！

后记

脑洞大开的vue爱好者。。。

部分ppt还没有上传，未完待续~