VueConf 感想与总结

时间 2019-11-16

标签 vueconf 感想总结繁體版

原文原文链接

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

能把本身的第一次献给Vue的第一次简直棒！

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

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开头的一部动画，可是尤大大不肯透露更多的细节。vue

好多本身求之不得的公司啊！！！

定位

Just a View Layer Libraryjava

最先只想解决一些视图层的问题，并无彻底服务于大型业务的功能。可是随着 Vue 的发展开始增长辅助工具，例如 vue-router, vue-loader, vuexreact

The Progress Frameworkwebpack

不须要彻底的全家桶，而是能够渐进式的根据需求一点点增长业务复杂度。这样易于上手，也能够更快的应用在老业务上，比侵入式框架易于上手。git

现状

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)github

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

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 种模板初始化方式：
一、官方
二、本地
三、线上其余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，小程序。而后让目标驱使本身去主动地获取知识。（与此同时，也要注意扎实的基础知识的掌握。）