新经网logo.png新经网

新经网
新经网是百姓城市生活中不可缺少的信息港。
新经网

爱奥尼亚的模板组件编译器设计考虑

导读 Adam Bradley是StencilJS的创建者和ionframework的共同创建者,他在dotjs2019上回顾了进入Stencil的设计和架构,Stencil是一个组件编译器,可以生成与框架无关的组件。 布拉德利首先

AdamBradley是StencilJS的创建者和ionframework的共同创建者,他在dotjs2019上回顾了进入Stencil的设计和架构,Stencil是一个组件编译器,可以生成与框架无关的组件。

布拉德利首先解释了组件编译器背后的原理。在同一个组织中,技术团队可以将Angular用于采购应用程序,而内部支持团队可以将Vue用于费用报告应用程序,而另一个团队可以创建一个带有React的营销PWA。虽然这在当地可能令人满意,但在组织一级,由于在不同的框架中执行相同的组成部分而造成的工作重复是造成效率损失的根源。即使是那些使用设计系统的公司,也只能在设计系统实现的框架内从组件的可重用性中获益。

虽然这种情况在小公司中较少发生,但是拥有许多团队的大型组织面临着来自多种框架的成本和挑战。将单一框架强加给整个组织的选择不仅通常是不可能的,而且还会带来另一组问题。

作为一个以移动为中心的UI库,为web提供了数百个组件,也面临着类似的挑战。2013年,爱奥尼亚开始采用AngularJS组件模型。随着其他框架的出现,包括一个全新的Angular,开发人员社区不断地要求爱奥尼亚团队为特定框架提供爱奥尼亚风格的服务。然而,采用给定的组件模型意味着任何bug修复或设计改进都只能用于组件模型的框架,因此必须在多个框架之间重复工作。随着新框架不可避免地出现,这种情况很可能在未来重演。

然后,爱奥尼亚决定采用一个通用组件模型,即重用现有的标准浏览器api的web组件标准,这些api在未来任何时候都不会改变。ionion还精心制作了一个名为Stencil的组件编译器,它只在构建时运行,是对现有框架的补充,可以将一个组件描述编译成几个框架组件模型。布拉德利强调:

模板是一个内置的工具。它不是一个框架。模板解决的问题是允许我们的组件在许多今天的框架中工作,希望明天也可以。它是一个帮助我们生成和维护可重用组件的工具。

布拉德利接着更详细地介绍了为编译器所做的设计目标和技术选择。模板使用TypeScript自定义转换器静态分析模板组件源代码,并根据选择的目标组件模型生成编译后的代码。

编译器应用许多优化来生成精简的、优化的和高性能的源代码。布拉德利举了一个缩小优化的例子,在这个例子中,函数在可能的情况下转换成箭头函数,删除函数并返回关键字。然后将输出代码简化为一个常量,并将其分配给一个arrow函数,这将极大地减少代码的大小。

有了这些积极的优化,生成的代码为一个<hello-world/>组件只有87个字节。TodoMVC应用程序通常用于对前端框架进行基准测试,其大小为2.2KB。有关编译器执行的优化的更多技术细节(包括本机模块预加载),读者可以参考演讲的视频。

模板编译器可以从同一个源输出以下任何内容:延迟加载组件、支持IE11的遗留ES5和SystemJS组件、绑定的自定义元素库、框架绑定、支持服务器端呈现和预呈现的NodeJS脚本。作为一个主要的例子,在同一个源代码中,ion.com为Angular开发人员提供了真正的Angular组件,为React开发人员提供了真正的React组件。

完整的讨论可以在dotJS2019网站上找到,并包含更多的源代码示例和感兴趣的技术细节。dotJS是一个JavaScript会议,是dotConferences系列的七个会议之一。2019年12月在巴黎举行。

相关推荐



最新文章