在小型网站建设小组,正能量网站推荐不需要下载,百度指数的使用方法,精品资料网站前言
在上一篇文章HarmonyOS#xff08;二#xff09;—— 初识ArkTS开发语言#xff08;上#xff09;之TypeScript入门#xff0c;我初识了TypeScript相关知识点#xff0c;也知道ArkTS是华为基于TypeScript发展演化而来。
从最初的基础的逻辑交互能力#xff0c;到…前言
在上一篇文章HarmonyOS二—— 初识ArkTS开发语言上之TypeScript入门我初识了TypeScript相关知识点也知道ArkTS是华为基于TypeScript发展演化而来。
从最初的基础的逻辑交互能力到具备类型系统的高效工程开发能力再到融合声明式UI、多维状态管理等丰富的应用开发能力共同组成了相关的演进脉络。
ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript简称TS的基础上扩展了声明式UI、状态管理等相应的能力让开发者可以以更简洁、更自然的方式开发高性能应用。TS是JavaScript简称JS的超集ArkTS则是TS的超集。ArkTS会结合应用开发和运行的需求持续演进包括但不限于引入分布式开发范式、并行和并发能力增强、类型系统增强等方面的语言特性。本期我们结合JS和TS以及相关的开发框架的发展为大家介绍ArkTS的起源和演进思路。
走进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/
React示例
div ididDivHello World!/div
script typetext/babel
const name John Zhang;
ReactDOM.render(h1›Hello•{name}!/h1›,document.getElementById(idDiv));
/script以上代码描述了React如何在指定的页面元素id为idDiv的div元素中改变相应的字符串内容从Hello World!“到Hello John Zhang!”。其中第5行的ReactDOM.render()是React JS库提供的一个方法它可以将相应的内容刷新到指定的HTML元素中。第6行是符合JSX语义的一段代码它包含了一个类似HTML结构的用H1标签显示的字符串,以及一个表达数据绑定语义的字段({name})会关联到第4行定义的name变量。通过这种方式JSX把HTML的语义以及数据绑定机制和JS语言结合起来可以方便地在JS语言中使用。 Vue示例
div idapp
{{ message }}
/divscriptvar myobject new Vue({el: #app,data: {message: Hello Vue!}function myFunction() {myObject.message John Zhang;
/script以上Vue示例代码也描述了类似的功能。其中第1-3行是类似HTML的语法描述一个id为app的div页面元素其中的{{message}}是数据绑定的语义在Vue中表示为Template。第6-9行是JS代码描述了一个Vue对象对应了上述的app页面元素以及所需的数据变量message的内容信息。第11~13行则是JS函数它改变message变量的值为John Zhang。执行这个函数时Vue会自动实现相应的UI界面刷新。 通过以上React和Vue的简单小例子我们可以得到如下结论 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也有相应的编辑器、编译器、IDEIntegrated Development Environment插件等相关的工具来进一步提升开发效率。
TS在兼容JS生态方面也做了较好的平衡TS应用通过相应编译器可以编译出纯JS应用可以在标准的JS引擎上运行。同时TS定位为JS的超集即JS应用也是合法的TS应用。此外在标准层面上TS兼容ECMA的相应标准并维护那些还未成为ECMA标准的新特性。
走进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开发范式提供了更简洁更自然的开发体验。在运行时方面在上述的基础上结合语言运行时的类型优化以及渲染运行时的扁平化流水线技术等进一步提升性能体验。
下面是官方ArkUI开发框架图描述了ArkUI开发框架的整体架构其中基于TS扩展的声明式UI范式中所用的语言就是ArkTS。下面结合一个具体示例从应用开发视角简单介绍下基于ArkTS的全新声明式开发范式。
下面在看看ArkTS声明式开发范式。下图所示的代码示例UI界面会显示两段文本和一个按钮当开发者点击按钮时文本内容会从’Hello World’变为‘Hello ArkUI’。
这个示例中所包含的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的主要扩展。
下一篇会以一个官方的小demo来讲解一下ArkTS声明式开发范式的基本组成更多ArkTS/ArkUI完整的开发范式可参考如下资料
基于ArkTS的声明式开发范式方舟开发框架ArkUI开发范式
