BT

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

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

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

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

第一届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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个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