preface

On June 2, 2021, HarmonyOS2.0 was officially released, using JavaScript as the architecture language for IoT application development. After the launch of SpaceX, JavaScript once again became a hot topic in the development field. Today I’m going to share with you HarmonyOS and the JavaScript GUI stack in HarmonyOS.

Abstract

Hongmeng OS2.0 officially released, attracted the majority of netizens hot discussion. So what is Hongmeng OS? Hongmeng OS is not android case? What impact does Hongmeng OS have on our front-end development? How should Hongmeng APP be developed? This article will guide you step by step to understand hongmeng and answer these questions. Now let’s take these questions to know more about Hongmeng.

What are HarmonyOS

HarmonyOS is a “future-oriented” distributed operating system for all scenarios (mobile office, sports and health, social communications, media and entertainment). Building on the traditional single-device system capabilities, HarmonyOS proposed a distributed system that supports mobile, tablet, smart wear, smart screen, car, PC, smart speaker, headset, AR/VR glasses and more.

HarmonyOS uses OpenHarmony to provide an underlying implementation of iot-related systems and HarmoneyOS on mobile devices to implement a 1, 8, and N distributed operating system.

Hongmeng system code address:

gitee.com/openharmony

What’s the difference between HarmonyOS and Android?

When it comes to Android, you’re wondering if HarmonyOS is an Android shell.

We analyze it from the following aspects:

  1. Usage scenarios

    1. Hongmeng OS is a full-scene distributed operating system, and Android system is mainly for mobile phone research and development system.
    2. Android can also be used as an operating system for TVS, tablets and other electronic devices, but the systems are independent of each other and there is no way for devices from different platforms to communicate with each other.
    3. Hongmeng OS positioning from the development is a IoT system, the use of distributed soft bus technology, so that devices within the LOCAL area network can facilitate communication, data interaction, call remote services, as if between the devices integrated.

  2. The technical architecture

    1. The android framework

2. Hongmeng ArchitectureCopy the code

JIT :(Just In Time) compilation mechanism. When an App is running, it compiles frequently used functions into machine code 010101 that the machine can execute directly, and stores it temporarily without having to translate sentence by sentence.

AOT: (Ahead of Time) App will compile the code that can be compiled into 101010 that can be understood by the machine when it is downloaded and installed on the mobile phone; The rest of the code that doesn’t translate well is compiled by waking up the interpreter while the user is using it.

AOSP: Short for “Android Open Source Project” Chinese for “Android open source project “.

By comparison, we can find that the name used in the Hongmeng system is different. But it’s similar to android’s overall architecture. Horizontal comparison with Android level:

Specifically, several working modules of distributed soft bus are described:

  • Device discovery: The CoAP protocol is used as the device discovery protocol to discover devices by sending broadcasts in a LOCAL area network.
  • Data transfer: Provides unified data transfer function based on Session.
  • Equipment authentication and management.

In fact, the entire distributed soft bus is a private RPC protocol. Based on the RPC protocol, a series of commonly used apis are encapsulated to shield the complicated, diverse and very different communication modes between devices and provide a stable, unified and reliable near-field communication protocol.

Remote Procedure Call (RPC). RPC is a communication technology used to solve IPC (inter-process communication). It was proposed and developed by Nelson as early as 1981. RPC is widely used in system environment construction and application program design in distributed system.

  1. Compile the way

    1. To solve cross-platform and cross-terminal problems, Android relies on virtual machines to compile code into machine code to bridge the differences between platform and hardware interaction. Currently, Android adopts the comprehensive mode of explain execution + JIT + AOT, which has achieved a good balance in space occupation + installation speed + running speed.
    2. The Hongmun system uses ark compiler to solve the cross-platform problem. Ark compiler can turn high-level language (Java) directly into machine code, thus bypassing virtual machines. And this compilation process is not done on the user’s phone, but during the application development phase.
    3. So far, android virtual machines have been used to install Android apps directly in the Hongmeng system on mobile phones. Hongmeng APP, developed by DevEco Studio of Hongmeng, will compile part of the machine code through Ark compiler, which can improve performance when running in Hongmeng system that supports Ark compiler.

Testing on the Edge of danger — Analysis of sina News Speed-version APP supported by Ark Compiler Environment

  1. APP development

    1. For Android system, the development of different platforms of the APP need different code, and hongmeng system with the help of multi-terminal development IDE, so that the multi-platform APP can use the same set of code.
    2. Android only supports the use of JAVA language to develop, and Hongmeng provides support for a variety of development language API, for developers to develop applications. Supported development languages include Java, XML (Extensible Markup Language), C/C++, JS (JavaScript), CSS (Cascading Style Sheets), and HML (HarmonyOS Markup) Language).

Online Experience Editor:

Playground.harmonyos.com/#/cn/online…

conclusion

Look at the system as a whole

Hongmeng system and Android are very different, Hongmeng is not only a mobile phone system, but an IoT operating system. And asking if Hong Meng is an Android in a shell is like asking if a fruit salad is an apple.

From the mobile operating system

The current HONGmeng OS2.0 is largely a secondary development based on AOSP, and provides an application development framework with Ability at its core that shields the differences between operating systems and enables developed code to run on different operating systems. Besides, ark compiler is used to compile the machine code in advance, so that APP can run more smoothly and improve performance in the mobile phone system that supports Ark compiler.

Have you studied Hongmeng OS 2.0 on huawei P40? Is it a new operating system or is it android in a shell? – zhihu)

3. What’s the impact on app developers

First of all, for IOS developers, there is almost no impact.

For Android developers, if they just do mobile apps without considering multi-terminal compatibility, they can continue to use Android development. However, if they want to use Hongmeng system to develop multi-terminal compatible apps, they need to migrate existing projects, and the migration cost is not particularly high. Because Hongmeng supports JAVA application development, it is very friendly for Android developers.

For front-end developers, there is little practical impact, and front-end developers can develop native apps using only their familiar HML+CSS+JavaScript development model.

3.1 Migration cost for Android development

  1. The overall project needs to be migrated from Android Studio to DevEco Studio, and the project needs to be rebuilt in DevEco Studio. Because the underlying compilation logic is different.
  2. API replacement switch from Android to Hongmeng API.
  3. The replacement of tripartite library needs to select hongmeng with similar functions on Android tripartite library.
  4. The modification of the packaging method needs to be re-packaged in accordance with the packaging format of the Hongmeng framework and put on the application market of Hongmeng.

3.2 What is the impact on front-end developers

Hongmeng system is very friendly to front-end developers, through the development of HML+CSS+JavaScript, can quickly achieve a Hongmeng native APP.

As front-end students, we usually develop several types of projects such as H5, React Native, and small programs. So how will the release of Hongmeng system affect us?

Flutter practice: see appendix.

4, how to implement a JS UI architecture of the original Hongmeng APP

  1. Hongmeng APP composition

Before we start to implement small features, first we need to understand the composition of a hongmeng APP.

Eg:

  1. JS application development framework

JS application development frameworks include JS Data Binding, JS Runtime and JS framework.

  1. JS Data binding
    1. The JS data binding framework uses the JavaScript language to provide a basic set of data binding capabilities.
  2. JS runtime
    1. The JS runtime is used to support parsing and execution of JS code.
  3. JS framework
    1. The JS framework part uses C++ language to provide the framework mechanism of JS apis and components.

  1. JS UI framework

Then we look at the overall structure of the JS UI:

  • Application
    • The application layer represents FA applications developed by developers using the JS UI framework.
  • Framework
    • The front-end framework layer mainly completes the front-end page parsing, and provides MVVM (Model-view-ViewModel) development mode, page routing mechanism and custom components.
    • Line by line analysis of the JavaScript framework of the Hongmeng system.
  • Engine
    • The engine layer mainly provides animation parsing, DOM (Document Object Model) tree construction, layout calculation, rendering command construction and drawing, event management and other capabilities.
  • Porting Layer
    • The adaptation layer mainly abstracts the platform layer and provides abstract interfaces, which can be connected to the system platform. For example: event docking, rendering pipeline docking and system life cycle docking.

Next, we need to understand the syntax of using HML + CSS + JavaScript in Hongmeng APP.

  1. HML grammar

Documentation: JS API Reference -HML syntax reference

<! -- Data binding -->
<div class="container">
    <text class="title {{className}}">
        hello {{word}}
    </text>
</div>

<! -- Bind events -->
<div>
  <! -- bind events with '@' -->
  <div @click="Clickfunc (' ha ha ')"></div>
  <! -- bind events with 'on' -->
  <div onclick="clickfunc"></div>
  <! Bind event callback functions using event bubble mode. 5 + - >
  <div on:touchstart.bubble="touchstartfunc"></div>
  <! Bind event callback functions using event capture mode. 5 + - >
  <div on:touchstart.capture="touchstartfunc"></div>
  <! -- on:{event} is equivalent to on:{event}.bubble. 5 + - >
  <div on:touchstart="touchstartfunc"></div>
  <! Bind the event callback function, but prevent the event from passing up. 5 + - >
  <div grab:touchstart.bubble="touchstartfunc"></div>
  <! Bind the event callback function, but prevent the event from passing down. 5 + - >
  <div grab:touchstart.capture="touchstartfunc"></div>
  <! -- grab:{event} is equivalent to grab:{event}.bubble. 5 + - >
  <div grab:touchstart="touchstartfunc"></div>
</div>


<! -- List render -->
<list class="tag-list">
    <list-item for="{{(index, item) in taskList}}" class="todo-list-item" focusable="false" tid="id" >
        <todo-list-item item="{{item}}" index="{{index}}" @item-change='handleClick'></todo-list-item>
    </list-item>
</list>

<! -- Conditional Render -->
<div class="container">
  <text if="{{show}}"> Hello-One </text>
  <text elif="{{display}}"> Hello-Two </text>
  <text else> Hello-World </text>
</div>

<! -- Template reference -->
<! -- template.hml -->
<div class="item">
  <text>Name: {{name}}</text>
  <text>Age: {{age}}</text>
</div>
<! -- index.hml -->
<element name='comp' src='.. /.. /common/template.hml'></element>
<div>
  <comp name="Tony" age="18" @customer-click='handleClick'></comp>
</div>
Copy the code

  1. The CSS syntax

Documentation: JS API Reference -CSS syntax reference

5.1 Size unit:

Logical pixel px (represented by < length > in the document) :

  1. The default screen has a logical width of 720px. The actual display will scale the page layout to the actual screen width, such as 100px on the actual screen width of 1440 physical pixels, the actual rendering will be 200 physical pixels (from 720px to 1440 physical pixels, all sizes double).
  2. With an additional autoDesignWidth set to true, the logical pixel PX will be scaled according to the screen density, such as 100px on a device with a screen density of 3, rendering to 300 physical pixels. This method is recommended when the application needs to adapt to multiple devices.

Percentage (expressed in < percentage > in this document) :

Represents the component’s percentage of the parent component’s size, such as a component whose width is set to 50%, indicating that its width is 50% of the parent component’s.

5.2 the selector

5.3 grammar

/* Support for style import */
@import '.. /.. /common/style.css';
.container {
  justify-content: center;
}

/* Support pseudo classes (:disabled :focus, :active, :waiting, :checked) */
.button:active {
  background-color: # 888888;When the /* button is activated, the background color changes to #888888 */
}

/* Support less sass SCSS */
@colorBackground: #000000;
.container {
  background-color: @colorBackground; /* Use the variable */ defined in the current less file
}

Copy the code

  1. JS grammar

Documentation: JS API Reference -JS syntax reference

6.1 ES6 Syntax supported

// Module import
import router from '@system.router';
import utils from '.. /.. /common/utils.js';

export default {
  data: {
    keyMap: {
      OS: 'HarmonyOS'.Version: '2.0',}},handleClick(e){
      console.log(e.target)
  },
  getAppVersion() {
    this.$set('keyMap.Version'.'3.0');
    console.info("keyMap.Version = " + this.keyMap.Version); / / keyMap. Version = 3.0

    this.$delete('keyMap');
    console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined}}// Template components

export default {
  data: {
    title:' ',},props: {
      name: {default: 'Ha-ha-ha'}}handleClick(index, e){
      this.$emit('customerClick',{
          index,
          e,
      })
  }
}
Copy the code

6.2 Life Cycle

  1. Realize the TODOList

After understanding the basic syntax, we will implement a TodoList to be familiar with the development process of the Hongmeng system.

“Scan the QR code to get the video”

5, summary

  1. Hongmeng system has excellent cross-terminal experience on multiple platforms, but the MOBILE OS is still based on AOSP, and Huawei still needs to work hard.
  2. The editor DevEco Studio can be used to build multi-platform apps very quickly, and I feel the document is a bit messy.
  3. For the front end, Android development is more friendly, almost use their usual familiar syntax to achieve Hongmeng APP.
  4. The VM does not support hot update. You need to restart the application constantly.
  5. Development using TS is not currently supported.

6. Reference documents

Getting started – System definition

Ramble: how to explain to girlfriend hongmeng OS is how to achieve cross-platform?

Hongmeng, Android system technical architecture comparison

Testing on the Edge of danger — Analysis of sina News Speed-version APP supported by Ark Compiler Environment

Has anyone studied Hongmeng OS 2.0 on Huawei P40? Is it a new operating system or is it android in a shell? – zhihu

What’s the difference between Hongmeng Harmony and Android?

7, the appendix

OpenHarmony: OpenHarmony is an open source project incubated and operated by the OpenAtom Foundation. Its goal is to build an intelligent terminal device operating system for the era of full scenario, full connection and full intelligence

Online Experience -HarmonyOS app development

Make the Flutter run on the Hongmeng system

Line by line analysis of the JavaScript framework of the Hongmeng system

JS API Reference -HML syntax reference

JS API Reference -CSS syntax reference

JS API Reference -JS syntax reference

Codelabs_ Huawei Cutting-edge Technologies _ Coding Experience – Huawei Developer Alliance

Welcome to “Byte front end ByteFE”

Resume mailing address: [email protected]