[HarmonyOS] Two paradigms of UI development: ArkTS and JS (take login interface development as an example for comparison)

I. Introduction

1. Development environment

Later sharing of HarmonyOS technology will continue to be used in the following versions

• Harmony OS: 3.1/4.0
• SDK：API 9 Release
• Node.js：v14.20.1
• DevEco Studio： 3.1.0

2. Overall architecture diagram

2. Get to know ArkUI

The UI development of HarmonyOS applications relies on the Ark development framework (ArkUI for short) .
According to the official introduction, ArkUI provides UI syntax, rich UI functions (components, layouts, animations and interactive events), and real-time interface preview tools, etc., which can support developers in visual interface development.

1. Basic concepts

(The official has given a very detailed introduction, I will copy it here, mainly to pave the way for subsequent practical operations)

• UI: User interface. Developers can design the application's user interface into multiple functional pages, each page manages separate files, and uses the page routing API to complete scheduling and management between pages, such as jumps and rollbacks, to implement functions within the application. Decoupled.
• Component: The smallest unit for UI construction and display, such as lists, grids, buttons, radio buttons, progress bars, text, etc. Developers use a combination of multiple components to build a complete interface that meets their own application requirements.

2. Development paradigm (attached: case)

ArkUI provides developers with two paradigms: TypeScript-based declarative paradigm (ArkTS) and JS-compatible web development paradigm (JS)

（1）ArkTS

I have only been learning ArkTS for four months. Compared with my ability to develop UI interfaces using JS, I am a bit weak.
Compared with Android: ArkUI puts the interface design and specific operations into a file (of course ArkUI has component customization, which is another matter), this method is relatively novel. The memory usage will be relatively reduced, and the performance and maintenance will be relatively improved.

（2）JS

I believe many IT people are already very familiar with this set of technologies such as HTML, CSS, and JS. This is also an important factor in my ability to quickly get started with HarmonyOS. Personally, I also recommend using this technology for simple applications. If you want to use mobile phone hardware functions, I recommend using ArkTS. ArkTS is much more convenient than JS in operation and writing.

3. Accessories

• ArkTS code

@Entry
@Component
struct Index {
    
    

  @State textName: string = "账号/电话号码"
  @State textPass: string = "密码"
  @State btnLogin: string = "登录"

  build() {
    
    
    Row() {
    
    
      Column() {
    
    
        // person
        Image($r('app.media.person')).width(100).height(100).margin({
    
    top:50, bottom:50})
        // data
        TextArea({
    
     placeholder : this.textName}).margin(15)
        TextArea({
    
     placeholder : this.textPass}).margin(15)
        // btn
        Button(this.btnLogin, {
    
     type: ButtonType.Normal, stateEffect: true })
          .borderRadius(18)
          .backgroundColor(0x317aff)
          .width(90)
          .height(40)
          .margin({
    
    top:50})
      }
    }
  }
}

• JS code

index.hml

<div class="container">
    <!--  title  -->
    <div class="login-title">
        <image class="person" src="../../common/person.png"></image>
    </div>
    <!--  data  -->
    <div class="input-data">
        <input type="text" required="" id="userName" placeholder="账号\电话号码"/>
    </div>
    <div class="input-data">
        <input type="text" required="" id="userPass" placeholder="密码"/>
    </div>
    <!--  btn  -->
    <div class="login-btn">
        <button>{
   
   { $t('strings.btn_dl') }}</button>
    </div>
</div>

• index.css

.container {
    
    
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(-135deg, #50c8c2, #4158d0);
}

.person {
    
    
    text-align: center;
    background: linear-gradient(-135deg, #ff2481ef, #ffe03092);
    width: 230px;
    height: 230px;
    margin: 100px;
    border-radius: 230px;
}

@media screen and (orientation: landscape) {
    
    
    .title {
    
    
        font-size: 60px;
    }
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    
    
    .title {
    
    
        font-size: 100px;
    }
}

.input-data{
    
    
    padding: 40px;
}

.login-btn button{
    
    
    margin-top: 80px;
    padding: 30px;
}