VueConf.US大会第二天会议内容概述

语言 JavaScript Vue

摘要

第一届VueConf.US大会于3月26日到28日在新奥尔良市举行，VueJS核心团队和来自世界各地的数百名Vue开发者齐聚一堂。28日的会议包括高级Vue模型、使用Vue设计系统、TypeScript与Vue搭配使用、Vue与React比较、使用Vue进行服务器端渲染、Vue Storybook以及使用Vue单文件组件的快速原型。

正文

第一届VueConf.US大会于3月26日到28日在新奥尔良市举行，VueJS核心团队和来自世界各地的数百名Vue开发者齐聚一堂。大会包括一天的研讨会，全部由VueJS核心团队成员讲授，接下来两天是演讲。InfoQ之前已经发表了3月27日上午的会议概述、下午的会议概述以及对Vue Mastery创始人Gregg Pollack的采访。

本文是3月28日的会议概述。演讲内容涵盖高级Vue模型、使用Vue设计系统、TypeScript与Vue搭配使用、Vue与React比较、使用Vue进行服务器端渲染、Vue Storybook以及使用Vue单文件组件快速搭建原型。

Vue顾问不想让你知道的7个秘密模式

Chris Fritz是Vue顾问兼核心团队成员。他以关于“改进开发人员编写Vue代码的七个模式”的演讲开启了这一天的会议。这七个模式可以分成三类：“生产力提升”、“重大调整”和“让不可能成为可能”。

其中一项直接提升生产力的特性是把对象传给“观察器（watcher）”，让你可以把它们配置成在页面加载时立即运行，消除了观察器和mounted钩子之间常见的重复模式。

watch: { 
  searchText: { 
    handler: 'fetchUserList', 
    immediate: true, 
  }, 
} 

其他提升生产力的特性包括自动化组件和模块注册。重大调整包括可以延迟加载的routs、构建透明封装组件等。最后，在“让不可能成为可能”类别下，Fritz提出了功能强大的工具，如使用函数组件构建multi-root组件，使用返回null的渲染函数渲染像“地图层（map layer）”这样的非HTML元素

Vue中灵活的设计系统

第二位演讲者是Miriam Suzanne。她是一名Web顾问、编辑，同时也是Suzy网格系统的创建者。她谈了设计系统以及如何让它们成为开发过程的一部分。把设计的概念从开发中独立出来，Suzanne指出：

设计系统总是设计和代码的统一。从来不是二选一。那不仅是如何使用字母“m”，而且是如何构建“m”依赖的符号？

和为API创建文档类似，Suzanne主张创建设计指南作为交流和分享设计模式的方法：

如果你的应用程序包含了模式，而你没有告诉人们那些模式的存在，那么两个小时后那些模式就不存在了。

为了防止设计指南过期，她重点强调了把设计指南生成加入工具的重要性，样式表中每有新内容都会自动添加到设计指南。

Vue和TypeScript：启动与运行

微软项目经理Daniel Rosenwasser介绍了在JavaScript开发中使用TypeScript的价值，并专门介绍了Vue。Rosenwasser说：

类型系统不仅能告诉你不应该做什么，而且也可能推测出你想做要什么。

接下来，Rosenwaser介绍了他们为在Vue中引入类型所做的工作，他指出，由于涉及到元编程层面，所以这非常有挑战性。TypeScript和Vue团队协同工作，通过多次发布对TypeScript和Vue同时做了多处修改，但是，现在，只要使用vue-cli预先设置并向计算属性添加类型之后，就可以搭配使用TypeScript和Vue了。

把类型迁移到已有的项目更有挑战性，但是团队正在编写指南让这个过程变得更容易。要了解更多信息，可以查看Vue TypeScript支持文档。

Vue的React视角

下一位演讲者是Divya Sasidharan，她是Lucro Global LLC的一名Web开发人员。Sasidharan探讨了她在从React切换到Vue时发现的理念差异：

在Vue中，我们编写代码的方式是声明式的，有一个清晰的关注点分离，而在React和JSX中，代码阅读起来就困难一些，因为逻辑就在标记中。

在整个演讲过程中，Sasidharan都在介绍React中的方法，并把它们和Vue进行比较，逐个强调Vue的声明式方法。她在演讲结束时甚至还展示了如何将无法自然纳入这种模式的功能，如使用了单个画布元素的Web地图，使用返回null但是把层应用到共享画布的渲染函数来创建一种类似Vue的声明式方法。

Vue和SSR：最佳实践

在又一系列的闪电演讲后，Nuxt.js作者Sebastien Chopin开启了下午的会议。Chopin强调，“服务器端渲染”一词有点不得要领——Web应用程序从一开始就是在服务器渲染的——但是，这个全新的功能是真得在服务器和客户端之间共享代码，并在服务器端渲染的内容之上把一个单页应用程序在客户端透明地“水化（hydration）”。

Chopin强调了这种方法的好处，他称之为“Universal JavaScript”，如更简单的SEO和社交分享实现、比单页应用程序更快的初始加载时间。同时，通过在渲染后水化一个单页应用程序，Universal JavaScript应用仍然具有SPA所具有的好处，如完全客户端控制、更快的页面转换、更低的数据需求等等。

在剩余部分的演讲中，Chopin给观众展示了一系列的例子，说明利用Vue的服务器端渲染能力创建Universal Javascript应用程序所需要做出的选择和采取的步骤。接下来，他展示了Nuxt.js框架如何让采用所有这些最佳实践和使用vue init nuxt-community/starter-template安装一个起始模板一样简单。

Vue Storybook简介

按照日程安排，接下来是由SalesLoft的Peter Finn介绍Vue Storybook。Storybook是一个UI开发环境，供开发人员构建组件，本质上讲，这是一个交互式设计指南。这个库最初是因为React流行起来的，但Finn重点介绍了如何开发出Vue版本，让它可以很容易地用于Vue.js。

他在演讲中逐个介绍了Storybook的特性，展示它如何促成了独立的UI测试和UI组件编辑。接下来，Finn转而介绍了组织在使用Storybook时可以做的部分修改，并提出了把“UI驱动开发”作为测试驱动开发或其他过程的替代选项的可能性。

使用Vue单文件组件构建原型

最后演讲的是来自微软VS Code团队的Pine Wu。从Twitter的评论看，他的演讲是此次大会最受欢迎的演讲之一，他提到了一个新的、正在开发中的原型工具Proun。

Proun的名字源于一种艺术风格，按照Wu的说法，是“介于艺术和架构之间的中间状态”。这是一个集成在VS Code中的编辑器内原型工具。该工具现在还没有公开提供，但Wu展示了它如何实现Vue单文件组件极其快速的迭代，让开发人员可以修改他们的代码，并立即看到变化，而不必在编辑器、浏览器和开发工具之间切来切去。这个简单高效的过程赢得了热烈的掌声。Wu说：

我使用的这个工具从根本上改变了我的思维方式。我非常喜欢的一个理念是，让工具帮助你更轻松地构建东西，因为这些工具，你开始构建更简洁的东西。

查看英文原文：Session from Day 2 of VueConf.US