阅读 12428

[持续更新] VueConf 大会现场笔记

活动很赞,人很多,氛围非常好!

一、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 的兼容

二、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 如何完美结合


三、用比较性思维谈工程化工具在 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:加载时序问题被解决
关注下面的标签,发现更多相似文章
评论
说说你的看法