做网站需要的东西,重庆网站搭建哪里可以做,定制网站建设公司费用,网页游戏网站在线玩HarmonyOS#xff08;二#xff09;初识ArkTS开发语言#xff08;中#xff09;之TypeScript入门
浅析ArkTS的起源和演进
1 引言
Mozilla创造了JS#xff0c;Microsoft创建了TS#xff0c;Huawei进一步推出了ArkTS。
从最初的基础的逻辑交互能力#xff0c;到具备类…HarmonyOS二初识ArkTS开发语言中之TypeScript入门
浅析ArkTS的起源和演进
1 引言
Mozilla创造了JSMicrosoft创建了TSHuawei进一步推出了ArkTS。
从最初的基础的逻辑交互能力到具备类型系统的高效工程开发能力再到融合声明式UI、多维状态管理等丰富的应用开发能力共同组成了相关的演进脉络。
ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript简称TS的基础上扩展了声明式UI、状态管理等相应的能力让开发者可以以更简洁、更自然的方式开发高性能应用。TS是JavaScript简称JS的超集ArkTS则是TS的超集。ArkTS会结合应用开发和运行的需求持续演进包括但不限于引入分布式开发范式、并行和并发能力增强、类型系统增强等方面的语言特性。本期我们结合JS和TS以及相关的开发框架的发展为大家介绍ArkTS的起源和演进思路。
2 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做了一些扩展引入了JSXJavaScript XML语法可以将HTML的内容统一表示成JS来处理Vue则是通过扩展的模板语法Template的方式来处理。
下面通过两个示例为大家简要介绍React和Vue。**示例来源于w3schools网站**https://www.w3schools.com/whatis/
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示例代码也描述了类似的功能。其中第13行是类似HTML的语法描述一个id为app的div页面元素其中的{{message}}是数据绑定的语义在Vue中表示为Template。第69行是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组件的渲染路径。
3 TS
随着JS生态的发展如何更有效地支撑大型的应用工程开发变成了一个重要的课题。大型的应用工程一般会涉及较复杂的代码以及较多的团队协作对语言的规范性模块的复用性、扩展性以及相关的开发工具都提出了更高的要求。为此Microsoft在JS的基础上创建了TS语言并在2014年正式发布了1.0版本。TS主要从以下几个方面做了进一步的增强
引入了类型系统并提供了类型检查以及类型自动推导能力可以进行编译时错误检查有效的提升了代码的规范性以及错误检测范围和效率。在类型系统基础上引入了声明文件Declaration Files来管理接口或其他自定义类型。声明文件一般是以d.ts的形式来定义模块中的接口这些接口和具体的实现做了相应的分离有助于各模块之间的分工协作。另外TS通过接口泛型Generics等相关特性的支持进一步增强了设计复杂的框架所需的扩展以及复用能力。
在工具层面TS也有相应的编辑器、编译器、IDEIntegrated Development Environment插件等相关的工具来进一步提升开发效率。
TS在兼容JS生态方面也做了较好的平衡TS应用通过相应编译器可以编译出纯JS应用可以在标准的JS引擎上运行。同时TS定位为JS的超集即JS应用也是合法的TS应用。此外在标准层面上TS兼容ECMA的相应标准并维护那些还未成为ECMA标准的新特性。
4 ArkTS
如上所述基于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范式中所用的语言就是ArkTS。下面结合一个具体示例从应用开发视角简单介绍下基于ArkTS的全新声明式开发范式。
如图4所示的代码示例UI界面会显示两段文本和一个按钮当开发者点击按钮时文本内容会从’Hello World’变为‘Hello ArkUI’。
图4 ArkTS声明式开发范式 这个示例中所包含的ArkTS声明式开发范式的基本组成说明如下
装饰器
用来装饰类、结构体、方法以及变量赋予其特殊的含义如上述示例中 Entry 、 Component 、 State 都是装饰器。具体而言 Component 表示这是个自定义组件 Entry 则表示这是个入口组件 State 表示组件中的状态变量此状态变化会引起 UI 变更。 自定义组件
可复用的 UI 单元可组合其它组件如上述被 Component 装饰的 struct Hello。
UI 描述
声明式的方式来描述 UI 的结构如上述 build() 方法内部的代码块。
内置组件
框架中默认内置的基础和布局组件可直接被开发者调用比如示例中的 Column、Text、Divider、Button。
事件方法
用于添加组件对事件的响应逻辑统一通过事件方法进行设置如跟随在Button后面的onClick()。
属性方法
用于组件属性的配置统一通过属性方法进行设置如fontSize()、width()、height()、color() 等可通过链式调用的方式设置多项属性。
从UI框架的需求角度ArkTS在TS的类型系统的基础上做了进一步的扩展定义了各种装饰器、自定义组件和UI描述机制再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了应用开发的主体。在应用开发中除了UI的结构化描述之外还有一个重要的方面状态管理。如上述示例中用 State 装饰过的变量 myText 包含了一个基础的状态管理机制即 myText 的值的变化会自动触发相应的 UI 变更 Text组件。ArkUI 中进一步提供了多维度的状态管理机制。和 UI 相关联的数据不仅可以在组件内使用还可以在不同组件层级间传递比如父子组件之间爷孙组件之间也可以是全局范围内的传递还可以是跨设备传递。另外从数据的传递形式来看可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和 UI 的联动。
总体而言ArkUI开发框架通过扩展成熟语言、结合语法糖或者语言原生的元编程能力、以及UI组件、状态管理等方面设计了统一的UI开发范式结合原生语言能力共同完成应用开发。这些构成了当前ArkTS基于TS的主要扩展。
ArkUI完整的开发范式可参考这里
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/arkui-overview-0000001281480754
5 下一步演进
接下来除UI框架需求之外ArkTS也会结合应用开发及运行的其他方面需求持续演进
1. 更完善的类型系统
我们已经设计并实现了专门运行时利用ArkTS的类型输入在程序执行一开始就获得较高的运行性能不像其它传统JS引擎需要预热才能获取高性能。但是目前的类型系统在运行时的设计上仍然考虑了兼容模式即在运行时当对象类型发生变化时会走Bailout机制以使程序在类型不匹配时仍能正常运行。一种更极致的方式是引入一种特定模式来支持确定类型的表达当开发者可以明确类型时提供相应的信息这样运行时可以通过针对性设计进一步提升性能体验。另外ArkTS将来也会在类型系统中拓展一些新的类型在与运行时结合的优化中会提供更好的性能体验。
2. 更灵活的并行化处理
目前的移动设备基本都是多核设备包括同一配置的多核以及不同配置的大小核有些设备还会携带多种计算芯片CPU/GPU/NPU/…。语言在并发特性上如何充分应用多核设备甚至异构芯片是一个重要的课题。目前我们采用的仍然是业界常见的类Actor模型的并发接口——Worker它弥补了Actor模型的些许劣势即允许用户转移和共享大量的Buffer以避免通信时拷贝的开销。但是开发者仍需自己去管理Worker的生命周期利用Worker也不能非常方便地触发一个异步并行任务。我们已经在尝试在Actor模型上封装一种任务接口方便用户更容易利用多核触发异步并行任务。我们也一直在关注Swift、Dart、Kotlin、Go这些语言并发特性的发展和运行时的实现ArkTS的特定模式中静态类型模型的引入也会给并发机制带来更多高性能实现的可能性比如对象的冻结、所有权转移、值语义等等。我们将持续致力于提供简洁高效的并发API帮助应用开发者更容易开发出高性能的应用。
当然ArkTS以及ArkUI开发框架还很年轻还有很多其它方面也会持续演进比如UI自定义能力的进一步完善语言运行时以及跨语言交互的进一步优化跨OS平台能力的扩展分布式开发范式等等。
作为应用生态的底座应用开发框架的创新永无止境。我们希望和广大的开发者一起持续围绕着开发效率、运行体验、跨设备/跨平台等相关方面一起合作一起创新共建繁荣的应用生态。
