点击围观!腾讯 TAPD 助力金融行业研发提效、敏捷转型最佳实践! 了解详情
写点什么

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

  • 2018-05-06
  • 本文字数:2567 字

    阅读完需:约 8 分钟

看新闻很累?看技术新闻更累?试试下载 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

2018-05-06 19:001091
用户头像

发布了 1008 篇内容, 共 356.7 次阅读, 收获喜欢 332 次。

关注

评论

发布
暂无评论
发现更多内容

如何实现特定列脱敏?这两种方法你都要会

华为云开发者联盟

postgresql 数据 脱敏 匿名 视图

数字货币交易系统应用开发,区块链交易所app

13530558032

释放数据价值:DAYU数据运营新能力解读

华为云开发者联盟

大数据 数字化转型 华为云 代码原理 数据运营

架构师训练营十二周作业

方堃

架构师培训十二周练习

小蚂蚁

Git技术干货!工作中"Git"的使用实践和常用命令合集!

Geek Tech

git git常用命令 git常用实践 工作中git的使用

Android中的特殊攻击面(二)——危险的deeplink

OPPO安全

android 安全攻防 安全

疫情对在线教育的影响

anyRTC开发者

在线教育 直播 RTC 安卓

交易所合约跟单系统源码开发,合约跟单平台搭建

13530558032

Android 中的特殊攻击面(一)——邪恶的对话框

OPPO安全

android 安全攻防 安全

一文说透"静态代理"与"动态代理"

Geek Tech

源码分析 动态代理 静态代理

易观郭炜:流动水系数造未来

易观大数据

除了方文山,用TA你也能帮周杰伦写歌词了

华为云开发者联盟

AI 数据 周杰伦 modelarts 歌词

架构师培训 -12 hadoop

刘敏

架构师训练营第 0 期第 12 周作业

无名氏

云小课 | 一份超实用的勒索病毒自救预防指南

华为云开发者联盟

勒索病毒 弱密码 云小课 企业主机安全 病毒云查杀

加密数字货币钱包APP系统开发,数字货币钱包系统定制

13530558032

大数据作用

纯纯

我们从Kubernetes发展中学到了什么(1)

thuni

Kubernetes 容器 k8s

非传统的“易观”,和他的技术驱动之路

易观大数据

区块链USDT支付系统,USDT承兑支付软件开发

13530558032

前端源码宝库

InfoQ_34a83d636158

SpreadJS 纯前端表格控件应用案例:Teammark知识管理库

葡萄城技术团队

SpreadJS

LeetCode题解:155. 最小栈,使用链表代替栈,JavaScript,详细注释

Lee Chen

大前端 LeetCode

阿里巴巴Java开发手册-日志规约

魏杰

超声大数据应用

周冬辉

大数据

收藏!一篇教会你写90%的shell脚本!

Geek Tech

Shell shell脚本编写 收藏教程

架构师训练营第十二周作业

叮叮董董

Android的特殊攻击面(三)——隐蔽的call函数

OPPO安全

android 安全攻防 安全 函数

【架构师训练营】第 12 周作业

花生无翼

为什么阿里巴巴的程序员成长速度这么快,看完他们的内部资料我明白了

Java迁哥

VueConf.US大会第二天会议内容概述_JavaScript_Kevin Ball_InfoQ精选文章