发布时间:2019年11月19日
下一代组件。更小、更快、更强目前的一套Vaadin组件是多年发展的结果。我们在构建适合企业级应用的高质量组件方面投入了大量的精力。从Vaadin 10开始,每一个主要版本都有一套新的组件。
在我们不断添加新功能并提供长期支持的同时,还有一个重要的优先事项始终是我们心中最重要的:组件性能。当今的趋势是以最小的网络足迹来发布轻量级、高性能的库,随着时间的推移,这一点变得越来越重要。
在这篇文章中,我们想分享我们对下一代Vaadin组件可能会是什么样子的想法。这并不是一个路线图,而是我们对未来几年的发展方向的总结,以跟上快速发展的前端生态系统的步伐。
为什么是下一代?
我们在Polymer 1和HTML Imports时代就开始构建当前一代的Vaadin组件。虽然我们主要认为它们只是一个实现细节,但它们确实在一定程度上影响了我们的公共API,以及我们一路走来的架构决策。
现在,所有的常青浏览器都支持ES模块,我们可以利用这一点改进我们的代码库很多。改进包括在Web组件之间重用和共享逻辑和样式,使它们更高效,更容易定制、扩展和贡献。
我们还认为下一代是我们技术栈现代化的绝佳机会。这意味着,我们最终将用一套新的库和工具来取代目前处于维护模式的Polymer库,使我们能够构建快速和健壮的Web组件。
我们将如何做到这一点?
我们的计划是逐步将现有的Vaadin组件升级为基于LitElement的,LitElement是一个轻量级的库,用于创建由Polymer作者构建的快速和现代化的网络组件。作为额外的改进,我们正在考虑将我们的代码库转移到TypeScript上。
由于我们符合网络标准,我们可以灵活和轻松地混合使用不同的库,特别是Polymer 3和LitElement构建的网络组件。所以在实践中,我们将继续在已有的基础上进行构建,而不是从头开始重写。
由于此次迁移主要针对的是web组件,所以我们预计不会对我们的Java API进行大的改动。
由于此次迁移主要针对Web组件,我们预计不会对我们的Java API进行重大改动。我们将更新服务器端对应的组件,以确保Java开发者能够顺利过渡到即将到来的下一代Vaadin组件。
这对使用Vaadin的开发者有什么影响?
我们计划在迁移过程中保留Vaadin组件的公共API,并避免中断变化(除非需要),同时专注于内部优化。API表面可能只会在一些特定的方面发生变化,例如<template>元素的使用。
我们预计会有显著改善的一个领域是使用无限滚动的组件的性能,比如Combo Box、Time Picker和Grid。我们希望涵盖的另一个重要领域是为字段组件提供更可定制的表单验证 API。
由于我们遵循语义版本化,每一个更新到LitElement的组件都会作为一个新的主要版本发布。在Java方面,我们希望有最小的改变,主要是通过使API更加灵活和易于使用来改善开发者的体验。
为什么是LitElement?
自2019年初首次稳定发布以来,lit-html和LitElement已经被Web组件的社区采用,作为Polymer的坚实替代品。这些库正在为微软、SAP和VMWare构建的开源UI套件和设计系统提供动力。
在Vaadin,我们将赌注押在由自定义元素和影子DOM标准提供的基于标准的组件模型上。这些仍将是我们组件的低级基础。有了LitElement,我们可以保持这个基础的干净和简单--因为我们一直在追求简单。
在使用Polymer开发时,我们学到了很多关于Web组件的知识。而且特别棒的是,根据我们的估计和研究,使用LitElement可以重用我们已经拥有的大部分代码和我们积累的知识。
为什么是TypeScript?
在过去的2年里,TypeScript作为一种语言发展迅速,它的应用也在稳步增长。你可以通过查看npm的下载量来观察。在2019年,TypeScript的使用量已经翻了一番,从大约4 M到超过8 M的每月npm下载量。
使用TypeScript最大的好处是给前端开发者带来了良好的开发体验。我们也很欣赏DOM API的全面类型定义,以及对lit-html模板的类型检查支持,让我们能够让Vaadin组件更加可靠和类型安全。
从开发者的角度来看,TypeScript支持是纯粹的附加功能,不需要对工作流和工具链进行任何改变。你可以继续编写JS,并获得所有的好处,比如更好的编辑器支持和代码完成,我们将发布TS类型声明。
代码完成与LitElement和TypeScript的关系
我们是怎么做到的?
截至目前,Vaadin有40多个组件(包括Core和Pro),Lumo和Material主题,再加上一些内部依赖关系。我们预计,将它们全部迁移到Vaadin将是一个漫长的过程,涉及到许多重构,需要团队的协调努力。
我们希望基于LitElement和Polymer的组件能够共存一段时间。这意味着新的功能将在两个版本中实现,必要时,通过挑选相应的变化,并将其作为Vaadin 14 LTS次要版本的一部分发布。
未来几个月的计划是,我们首先将某些 "叶子 "组件(依赖性最小的组件)转移到LitElement中。同时,其他组件仍将基于Polymer,直到我们在接下来的迭代中把它们也迁移到Polymer上。
<vaadin-details>,第一个基于LitElement的web组件。
我们的第一步是什么?
最近我们发布了vaadin-details 2.0.0-alpha1,这是基于LitElement的Vaadin组件的第一个预览版。尽管它是我们最小的组件之一,但在工作中,我们学到了很多东西,并测试了新的工具,这将帮助我们提高工作效率。
从终端用户的角度来看,这些最初的步骤可能看起来没有价值,但事实上,它们是促进迁移的广泛基础工作。其中值得注意的工作是,我们保持现有的单元测试和可视化测试几乎不变,以防止偶尔的回归。
我们将随时向您通报我们在下一代的进展情况。当我们将更多的组件转换为LitElement时,我们将在Vaadin Labs中发布它们,以征求您的反馈意见。当然,在GitHub上的开发是完全透明的:请留意 "下一个 "分支。
通过www.DeepL.com/Translator (免费版)翻译