引言  Mozilla发明了JS，Microsoft创立了TS，Huawei进一步推出了eTS。 从最后的根底的逻辑交互能力，到具备类型零碎的高效工程开发能力，再到交融申明式UI、多维状态治理等丰盛的利用开发能力，独特组成了相干的演进脉络。  eTS（extended TypeScript）是鸿蒙生态的一种利用开发语言。它在TypeScript（简称TS）的根底上，扩大了申明式UI、状态治理等相应的能力，让开发者能够以更简洁、更天然的形式开发高性能利用。TS是JavaScript（简称JS）的超集，eTS则是TS的超集。eTS会联合利用开发和运行的需要继续演进，包含但不限于引入分布式开发范式、并行和并发能力加强、类型零碎加强等方面的语言个性。本期咱们联合JS和TS以及相干的开发框架的倒退，为大家介绍eTS的起源和演进思路。

一、JS

JS语言由Mozilla发明，最后次要是为了解决页面中的逻辑交互问题，它和HTML（负责页面内容）、CSS（负责页面布局和款式）独特组成了Web页面/利用开发的根底。随着Web和浏览器的遍及，以及Node.js进一步将JS扩大到了浏览器以外的环境，JS语言失去了飞速的倒退。在2015年相干的规范组织ECMA公布了一个次要的版本ECMAScript 6（简称ES6），这个版本具备了较为残缺的语言能力，包含类（Class）、模块（Module）、相干的语言根底API加强（Map/Set等）、箭头函数（Arrow Function）等。从2015年开始，ECMA每年都会公布一个规范版本，比方ES2016/ES2017/ES2018等，JS语言越来越成熟。 为了晋升利用的开发效率，相应的JS前端框架也一直地涌现进去。其中比拟典型的有Facebook发动的React.js，以及集体开发者尤雨溪发动的Vue.js。React和Vue的次要出发点都是将响应式编程的能力引入到利用开发中，实现数据和界面内容的主动关联解决。具体的实现形式上，React对JS做了一些扩大，引入了JSX（JavaScript XML）语法，能够将HTML的内容对立示意成JS来解决；Vue则是通过扩大的模板语法（Template）的形式来解决。 上面通过两个示例，为大家简要介绍React和Vue。（示例来源于w3schools网站：https://www.w3schools.com/wha…）1. React示例

图1 React

示例以上代码形容了React怎么在指定的页面元素（id为id01的div元素）中扭转相应的字符串内容（从”Hello World!”到”Hello John Doe!”）。其中第5行的ReactDOM.render()是React JS库提供的一个办法，它能够将相应的内容刷新到指定的HTML元素中。第6行是合乎JSX语义的一段代码，它蕴含了一个相似HTML构造的字符串（

…

），以及一个表白数据绑定语义的字段({name})，会关联到第4行定义的name变量。通过这种形式，JSX把HTML的语义以及数据绑定机制和JS语言联合起来，能够不便地在JS语言中应用。2. Vue示例

图2 Vue示例

以上Vue示例代码也形容了相似的性能。其中第1~3行是相似HTML的语法，形容一个id为app的div页面元素，其中的{{message}}是数据绑定的语义，在Vue中示意为Template。第6~9行是JS代码，形容了一个Vue对象，对应了上述的app页面元素以及所需的数据变量message的内容信息。第11~13行则是JS函数，它扭转message变量的值为”John Doe”。执行这个函数时Vue会主动实现相应的UI界面刷新。 如上所示，React和Vue所表白的能力是相似的，不过侧重点略微有所不同。React次要是基于JSX的语法，将类HTML的语法交融到JS语言中；Vue则是基于Template机制，在HTML的根底上扩大相应的语义。当然，下面这两个例子只是简要地形容了React和Vue的根底信息，更具体的语法以及CSS相干的应用等都没波及。 从运行时的维度来看，基于React以及Vue的利用都可运行在Web引擎上。为了进一步晋升相应的性能体验，2015年Facebook在React根底上推出了React Native, 在渲染架构上没有采纳传统的Web引擎渲染门路，而是桥接到相应OS平台的原生UI组件上。2019年Facebook引入全新实现的JS引擎Hermes，并推出一系列架构改良来进一步晋升React Native的性能体验。2016年阿里巴巴开源的Weex则是基于Vue做了一些相似的改良，也是采纳了桥接到原生UI组件的渲染门路。

二、TS

随着JS生态的倒退，如何更无效地撑持大型的利用工程开发变成了一个重要的课题。大型的利用工程个别会波及较简单的代码以及较多的团队合作，对语言的规范性，模块的复用性、扩展性以及相干的开发工具都提出了更高的要求。为此，Microsoft在JS的根底上，创立了TS语言，并在2014年正式公布了1.0版本。TS次要从以下几个方面做了进一步的加强： ● 引入了类型零碎，并提供了类型查看以及类型主动推导能力，能够进行编译时谬误查看，无效的晋升了代码的规范性以及谬误检测范畴和效率。 ● 在类型零碎根底上，引入了申明文件（Declaration Files）来治理接口或其余自定义类型。申明文件个别是以d.ts的模式来定义模块中的接口，这些接口和具体的实现做了相应的拆散，有助于各模块之间的分工协作。另外，TS通过接口，泛型（Generics）等相干个性的反对，进一步加强了设计简单的框架所需的扩大以及复用能力。 在工具层面，TS也有相应的编辑器、编译器、IDE（Integrated Development Environment）插件等相干的工具，来进一步晋升开发效率。 TS在兼容JS生态方面也做了较好的均衡，TS利用通过相应编译器能够编译出纯JS利用，能够在规范的JS引擎上运行。同时，TS定位为JS的超集，即JS利用也是非法的TS利用。此外，在规范层面上，TS兼容ECMA的相应规范，并保护那些还未成为ECMA规范的新个性。 

三、eTS

如上所述，基于JS的前端框架以及TS的引入，进一步晋升了利用开发效率，但仍然存在一些有余。从开发者维度来看： 写一个利用须要理解三种语言（JS/TS、HTML和CSS）。这对Web开发者绝对敌对，但对非Web开发者来说，累赘较重。从运行时维度来看： ● 在语言运行时方面，只管TS有了类型的加持，但也只是用于编译时查看，而后通过TS Compiler转成JS，运行时引擎还是无奈利用到基于类型零碎的优化。 ● 在渲染方面，支流Web引擎因为自身复杂度以及历史起因，性能、资源占用方面与常见OS原生框架都有肯定的差距，尤其在挪动平台上。React Native通过渲染架构的改良肯定水平上晋升了性能体验，但在平台渲染成果和能力的一致性，以及JS语言性能等方面还是存在肯定的有余。 Google在2018年底推出的Flutter则走了另外一条路，联合新的语言Dart，引入新的申明式开发范式，基于Skia的自绘制引擎构建可跨平台的独立的渲染能力。这是一种较为翻新的计划，不过也有几点有余： ● Dart语言生态。只管Dart语言2011年就已推出，而且指标是取代JS，但整个生态还是十分强大，Dart语言公布7年后随着Flutter的推出才有所改善。整体而言，Dart和支流语言生态相比还是有十分大的差距。 ● 开发范式。Flutter裸露了很多细粒度的Widget接口，整体开发的简洁度，开发门槛，尤其是和Apple推出的SwiftUI相比，存在肯定的差距。 有意思的是，Google在2021年又推出了新的开发框架Jetpack Compose，联合了Kotlin的语言生态，设计了新的申明式UI开发范式。 2019年，咱们在思考如何构建新的利用开发框架的时候，从以下几个维度进行了重点思考： ● 语言生态 ● 开发效率 ● 性能体验 ● 跨设施/跨平台能力 因为JS/TS有比较完善的开发者生态，语言也比拟中立敌对，有相应的规范组织能够逐渐演进，JS/TS语言成了比拟天然的抉择。以JS/TS为根底，在开发框架的维度，咱们做了如下的架构演进设计： ● 通过基于JS扩大的类Web开发范式，来反对支流的前端开发形式。同步的，在运行时方面，通过渲染引擎的加强（平台无关的自绘制机制、申明式UI后端设计、动静布局/多态UI组件等），语言编译器和运行时的优化加强（代码预编译、高效FFI-Foreign Function Interface、引擎极小化等），进一步晋升相干的性能体验，并可部署到不同设施上（包含百KB级内存的轻量设施）。另外，通过平台适配层的设计，构建了跨OS平台的基础设施。 ● 通过基于TS扩大的申明式UI开发范式，提供了更简洁更天然的开发体验。在运行时方面，在上述的根底上，联合语言运行时的类型优化，以及渲染运行时的扁平化流水线技术等，进一步晋升性能体验。

图3 ArkUI开发框架

图3形容了ArkUI开发框架的整体架构，其中，基于TS扩大的申明式UI范式中所用的语言就是eTS。上面联合一个具体示例，从利用开发视角简略介绍下基于eTS的全新申明式开发范式。  如图4所示的代码示例，UI界面会显示一个 “Hello World” 的文本和一个 “Click me” 按钮。当用户点击“Click me”按钮时，字符串变量 myText 的值会从“World” 变为“ACE”，文本最终显示为 “Hello ACE”。

图4 eTS申明式开发范式

这个示例中所蕴含的eTS申明式开发范式的根本组成阐明如下：  (1) 装璜器 用来装璜类、构造体、办法以及变量，赋予其非凡的含意，如上述示例中 @Entry 、 @Component 、 @State 都是装璜器。具体而言， @Component 示意这是个自定义组件； @Entry 则示意这是个入口组件； @State 示意组件中的状态变量，这个状态变动会引起 UI 变更。 (2) 自定义组件 可复用的 UI 单元，可组合其它组件，如上述被 @Component 装璜的 struct Hello。 (3) UI 形容 申明式的形式来形容 UI 的构造，如上述 build() 办法外部的代码块。 (4) 内置组件 框架中默认内置的根底和布局组件，可间接被开发者调用，比方示例中的 Column、Text、Divider、Button。 (5) 事件办法 用于增加组件对事件的响应逻辑，对立通过事件办法进行设置，如追随在Button前面的onClick()。 (6) 属性办法 用于组件属性的配置，对立通过属性办法进行设置，如fontSize()、width()、height()、color() 等，可通过链式调用的形式设置多项属性。 从UI框架的需要角度，eTS在TS的类型零碎的根底上，做了进一步的扩大：定义了各种装璜器、自定义组件和UI形容机制，再配合UI开发框架中的UI内置组件、事件办法、属性办法等独特形成了利用开发的主体。在利用开发中，除了UI的结构化形容之外，还有一个重要的方面：状态治理。如上述示例中，用 @State 装璜过的变量 myText ，蕴含了一个根底的状态管理机制，即 myText 的值的变动会主动触发相应的 UI 变更 （Text组件）。ArkUI 中进一步提供了多维度的状态管理机制。和 UI 相关联的数据，不仅能够在组件内应用，还能够在不同组件层级间传递，比方父子组件之间，爷孙组件之间，也能够是全局范畴内的传递，还能够是跨设施传递。另外，从数据的传递模式来看，可分为只读的单向传递和可变更的双向传递。开发者能够灵便的利用这些能力来实现数据和 UI 的联动。 总体而言，ArkUI开发框架通过扩大成熟语言、联合语法糖或者语言原生的元编程能力、以及UI组件、状态治理等方面设计了对立的UI开发范式，联合原生语言能力共同完成利用开发。这些形成了以后eTS基于TS的次要扩大。 ArkUI残缺的开发范式可参考这里： https://gitee.com/openharmony…

四、下一步演进

接下来，除UI框架需要之外，eTS也会联合利用开发及运行的其余方面需要继续演进：1. 更欠缺的类型零碎 咱们曾经设计并实现了专门运行时，利用eTS的类型输出，在程序执行一开始就取得较高的运行性能（不像其它传统JS引擎须要预热能力获取高性能）。然而目前的类型零碎在运行时的设计上依然思考了兼容模式，即在运行时，当对象类型发生变化时会走Bailout机制，以使程序在类型不匹配时仍能失常运行。一种更极致的形式是：引入一种特定模式来反对确定类型的表白，当开发者能够明确类型时，提供相应的信息，这样运行时能够通过针对性设计，进一步晋升性能体验。另外，eTS未来也会在类型零碎中拓展一些新的类型，在与运行时联合的优化中会提供更好的性能体验。2. 更灵便的并行化解决 目前的挪动设施根本都是多核设施（包含同一配置的多核以及不同配置的大小核），有些设施还会携带多种计算芯片（CPU/GPU/NPU/…）。语言在并发个性上如何充沛利用多核设施甚至异构芯片是一个重要的课题。目前咱们采纳的依然是业界常见的类Actor模型的并发接口——Worker，它补救了Actor模型的些许劣势，即容许用户转移和共享大量的Buffer以防止通信时拷贝的开销。然而开发者仍需本人去治理Worker的生命周期，利用Worker也不能十分不便地触发一个异步并行任务。咱们曾经在尝试在Actor模型上封装一种工作接口，不便用户更容易利用多核触发异步并行任务。咱们也始终在关注Swift、Dart、Kotlin、Go这些语言并发个性的倒退和运行时的实现，eTS的特定模式中动态类型模型的引入也会给并发机制带来更多高性能实现的可能性，比方对象的解冻、所有权转移、值语义等等。咱们将继续致力于提供简洁高效的并发API，帮忙利用开发者更容易开发出高性能的利用。 当然，eTS以及ArkUI开发框架还很年老，还有很多其它方面也会继续演进，比方UI自定义能力的进一步欠缺，语言运行时以及跨语言交互的进一步优化，跨OS平台能力的扩大（包含Android、iOS等），分布式开发范式等等。 作为利用生态的底座，利用开发框架的翻新永无止境。咱们心愿和宽广的开发者一起，继续围绕着开发效率、运行体验、跨设施/跨平台等相干方面一起单干，一起翻新，共建凋敝的利用生态！

相关链接