VueConf 感想与总结

栏目: 编程语言 · 发布时间: 6年前

内容简介:VueConf 感想与总结

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

VueConf 感想与总结
合照
VueConf 感想与总结
VueConf 感想与总结
VueConf 感想与总结

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

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

Vue 2017 现状与发展

By 尤雨溪 Evan You Vue.js作者

起源

VueConf 感想与总结
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 发布(代号:Evangelion,没想到尤大大也喜欢福音战士!好激动!!)
  • 2016 年 10 月:Vue.js 2.0 发布(对代码进行了重写 & 一定的向后兼容)
VueConf 感想与总结
K??

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

VueConf 感想与总结
目前国内vue用户

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

定位

Just a View Layer Library

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

The Progress Framework

VueConf 感想与总结

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

现状

  • 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 !!)

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

VueConf 感想与总结

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

VueConf 感想与总结
  • Browser:双向绑定组件化
  • Node Proxy:API 代理给前端浏览器使用
  • 服务组装:链接后端微服务
VueConf 感想与总结
Vue 与 API Proxy 如何完美结合

个人感悟

狼叔还是很有个人魅力的,嗯。对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

VueConf 感想与总结
vue init 原理

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

VueConf 感想与总结
目前的官方模板

其中大家用的最多的是 webpack

VueConf 感想与总结
vue list 原理

create-react-app VS vue-cli

都是基于 webpack 构建。

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

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

VueConf 感想与总结
主流框架脚手架的差异

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: 托管静态文件
VueConf 感想与总结
dev-server 原理

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 中。

VueConf 感想与总结
html-webpack-inline-source-plugin 原理

Vue 组件编译

VueConf 感想与总结
vue-component-compiler 原理
VueConf 感想与总结
vue-component-compiler 原理

vue-loader

Webpack 的插件,处理 .vue 文件中的三部分:

*、 template
*、 script
*、 styles
VueConf 感想与总结
vue-loader 原理

个人感悟

小春的演讲诚意满满干货十足,由于讲的太细还有点超时了。由于小春刚刚从滴滴跳槽到了,导致主办方的关于小春的信息还没更新。自己回来之后重新学了一遍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 核心开发

个人感悟

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

当Weex遇上Vue.js 2.0

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

Weex 1.0

VueConf 感想与总结
Weex 1.0 流程图
VueConf 感想与总结
与Native通信
VueConf 感想与总结
任务中心 流程
VueConf 感想与总结
Paste_Image.png

Weex 2.0

VueConf 感想与总结
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 时代,内存 吃吗?

VueConf 感想与总结
内存关系

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

个人感悟

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

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

By 王骆菲 VIDE(原DebugGap)作者

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

VueConf 感想与总结
vuex

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

VueConf 感想与总结
VueConf 感想与总结
VueConf 感想与总结
VueConf 感想与总结
VueConf 感想与总结
VueConf 感想与总结

plugin开发

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

  • 导入组件
    VueConf 感想与总结
  • 添加视图
    VueConf 感想与总结
  • 添加处理类
    VueConf 感想与总结

vide的未来规划

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

个人感悟

想尝试写Vue插件

结语

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

VueConf 感想与总结

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

后记

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

VueConf 感想与总结
VueConf 感想与总结
微信图片_20170520223744.jpg
VueConf 感想与总结
微信图片_20170520223747.jpg
VueConf 感想与总结
微信图片_20170520223750.jpg
VueConf 感想与总结
微信图片_20170520223753.jpg
VueConf 感想与总结
微信图片_20170520223758.jpg
VueConf 感想与总结
微信图片_20170520223802.jpg
VueConf 感想与总结
微信图片_20170520223804.jpg
VueConf 感想与总结
微信图片_20170520223949.jpg

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


以上所述就是小编给大家介绍的《VueConf 感想与总结》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python金融衍生品大数据分析:建模、模拟、校准与对冲

Python金融衍生品大数据分析:建模、模拟、校准与对冲

【德】Yves Hilpisch(伊夫·希尔皮斯科) / 蔡立耑 / 电子工业出版社 / 2017-8 / 99.00

Python 在衍生工具分析领域占据重要地位,使机构能够快速、有效地提供定价、交易及风险管理的结果。《Python金融衍生品大数据分析:建模、模拟、校准与对冲》精心介绍了有效定价期权的四个领域:基于巿场定价的过程、完善的巿场模型、数值方法及技术。书中的内容分为三个部分。第一部分着眼于影响股指期权价值的风险,以及股票和利率的相关实证发现。第二部分包括套利定价理论、离散及连续时间的风险中性定价,并介绍......一起来看看 《Python金融衍生品大数据分析:建模、模拟、校准与对冲》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码