BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

VueConf.US大会第一天上午会议内容概述

| 作者 Kevin Ball 关注 3 他的粉丝 ,译者 谢丽 关注 11 他的粉丝 发布于 2018年4月10日. 估计阅读时间: 7 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

看新闻很累?看技术新闻更累?试试下载InfoQ手机客户端,每天上下班路上听新闻,有趣还有料!

第一届VueConf.US大会于3月26日到28日在新奥尔良市举行,Vue核心团队与来自世界各地的数百名Vue开发人员齐聚一堂。大会包括一天的研讨会,全部由VueJS核心团队成员讲授,接下来两天是演讲。演讲者会宣布新版本和项目进展,详细介绍Vue内部构件,分享最佳实践。

下面是第一天上午的演讲内容。

主题演讲——日渐成熟的项目流程

Vue创建者Evan You的主题演讲拉开了大会的帷幕,重点介绍了Vue自2016年以来的发展以及即将到来的新开发流程和新项目流程。关于Vue的增长:

2017年,我们经历了指数式增长,比2016年增长更快。2016年,我就认为我们经历了爆炸式增长,但在2017年,增长甚至更快了。

2017年,我们是GitHub上得星最多的项目。

随着增长,流程日趋成熟。除了升级工具如重写vue-loader让它可以更好地适应标准webpack配置和vue-cli,从而改进可升级性之外,其在演讲中宣布的重要公告都是关于采用的新流程。

Vue将转而采用一种标准化的发布周期,新的小版本每三个月发布一次,重大版本发布至少提前6个月通知。这一变化将使发布通道由一个变成四个。此外,随着Rust、Ember等最佳实践项目示例的推出,近日,React VueJS将创建一个正式的RFC流程。

VueJS内部构件——揭秘Vue反应性系统

VueMastery.com创始人Gregg Pollack呈献了“VueJS解密”,深入介绍了Vue.js反应性系统。他首先教给观众,如何创建一个简单的反应式系统,通过实现一个简单的依赖跟踪类,并使用Object.defineProperty设置get和set方法钩入依赖跟踪。

接下来,他带领观众浏览了VueJS的源代码,深入调用栈,了解Vue在哪里实现了反应性,使用了他刚刚讲过的模式。这让Vue可以跟踪函数的所有数据依赖,随着数据变化自动计算相关的值。

最后,Pollack向观众介绍了Vue如何渲染模板,它使用一个简单的两步流程把模板编译成一个渲染方法,然后使用这个渲染方法生成虚拟DOM节点,由框架传给浏览器。把渲染简化为一个函数意味着可以插入上文提到的依赖跟踪,让模板反应性成为核心反应式系统的自然结果。

Vue在Gitlab的使用

Jacob Schatz是Gitlab前端负责人,他呈献了一个案例“Gitlab如何使用Vue”,介绍Gitlab如何应用Vue,把它带入一个现实生活项目。许多演讲者都假设开发人员在开发一个新项目,而Schatz带领观众进入到一个已有的、主要使用jQuery编写的大型应用程序,并详细介绍了决策及迁移过程。他介绍了在团队提供建议之前如何对多个框架进行评估。对于他们为什么使用Vue,Schatz是这样说的:

Vue提供了最多的特性和最低的学习曲线。

所有这些框架都可以,但是考虑到你正在开发的应用程序的规模,它是否仍然有效?Vue自始至终都很简单。

他们面对的是一个已有的大型项目,没有复杂的前端构建过程。Schatz详细介绍了在把Vue添加到页面之后,他们使用Vue分步、分组件重写了他们的应用程序,而不用停止新特性的开发工作。

Vue动画

Rachel Nabors是《Animation at Work》一书的作者,她做了题为“Vue动画”的演讲,介绍如何使用Vue实现动画和切换。Nabors首先把CSS切换解释成CSS属性事件查看器,然后她展示了Vue元素如何生成一系列逐步应用的类,让开发人员可以在元素增加、删除、显示和隐藏时钩入,简单地创建动画。例如,一个名为“uncloak”的切换将会在切入时应用类uncloak-enter、uncloak-enter-to和uncloak-enter-active,在切出时应用类uncloak-leave、 uncloak-leave-to和uncloak-leave active。

接下来,她展示了如何使用切换组协调多个元素的动作和切换模式,确定元素替换时的顺序。对于每一组css切换钩子,都会有一组等价的、使用标准vue事件绑定的JavaScript钩子。你可以使用v-bind:leave="animationFunction"简单地绑定到“leave”事件,而不是绑定一组“leave”类。

Vue应用程序测试

在上午最后一场演讲中,Vue核心团队成员兼“vue-test-utils”作者Edd Yerburgh谈了Vue应用程序测试。他展示了一个适应不同环境的前端测试金字塔,包括端到端测试、快照测试和单元测试。

接下来,Yerburgh分类介绍了每种测试类型的优缺点。端到端测试使用浏览器运行代码,这最接近用户实际使用代码的方式,但难以调试,而且速度慢。另一端是单元测试,这类测试易于调试,而且速度快,但是如果不小心,就非常脆弱,而且对不重要的实现细节很敏感。在速度和脆弱性方面,快照测试介于E2E组件和单元测试之间。这类测试会获取已渲染组件代码的快照,然后通过对比得出变化。这些测试用于防止意外修改,阻止开发人员在修改功能时意外修改已渲染的标记或者删除重要的CSS类。

自始至终大力强调社区

大会自始至终都在强调社区,与会者相当积极,“Vue”双关语泛滥。当问他对于这次大会的看法时,与会者Kelvin Spencer表示:

这次大会给了我完美的“Vue”供我将来编程使用。
其他与会者也同意,而且,还特别指出了社区是多么的让人舒服、受人欢迎。

与会者Mike Skott说:

我最欢的事情是见人——来参会,不怕接近陌生人,了解到我们有共同之处,并发现了许多真正优秀的人。

与会者Richard Tallent插话说:

要选出最喜欢的演讲很难——我好想记了15页笔记。但是,最值得一说的是遇到了各种各样的开发者,了解到了各种各样的开发经验,每个人都对这个平台及其可能性有着同样的兴奋。

所有演讲都有录音,将发布在VueMastery.com上。InfoQ正以Q&A、概述的形式追踪报道VueConf大会。

查看英文原文Opening Sessions from VueConf.US

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT