1# JS UI Framework<a name="EN-US_TOPIC_0000001087318673"></a> 2 3## Introduction<a name="section11660541593"></a> 4 5The OpenHarmony JS UI framework provides basic, container, and canvas UI components and standard CSS animation capabilities. It supports the web-development-like programming paradigm. 6 7- **Web-development-like paradigm** 8 9 The JS UI framework supports languages that are similar to those for web development, such as HTML and CSS. You can use them to describe the page layout and style, and use JavaScript \(conforming to the ECMAScript specification\) for page behavior. This paradigm allows you to avoid code for UI state switching. The view configuration information is intuitive. 10 11 12**Figure 1** JS UI framework<a name="fig15956152211427"></a> 13 14 15 16 17The JS UI framework consists of the application, framework, engine, and porting layers. 18 19- **Application** 20 21 Contains applications with Feature Abilities \(FAs\) developed with the JS UI framework. The FA application in this document refers to the application with FAs developed using JavaScript. 22 23- **Framework** 24 25 Parses UI pages and provides the Model-View-ViewModel \(MVVM\), page routing, custom components and more for front end development. 26 27- **Engine** 28 29 Accomplishes animation parsing, Document Object Model \(DOM\) building, layout computing, rendering command–based building and drawing, and event management. 30 31- **Porting Layer** 32 33 Abstracts the platform layer to provide interfaces for the interconnection with the OS. For example, interconnections of events, rendering pipelines, and lifecycles. 34 35 36## Directory Structure<a name="section179173014915"></a> 37 38The source code of the framework is stored in **/foundation/ace**. The following shows the directory structure. 39 40``` 41/foundation/ace 42├── ace_engine # JS UI framework 43├── ace_engine_lite # JS UI framework for the mini system and above 44└── napi # JS APIs for extending the native development module 45``` 46 47## Usage<a name="section1711605017917"></a> 48 49- JavaScript FA development directory 50 51After a project is created, its **js** directory is displayed. 52 53**Figure 2** Development directory<a name="fig343917486112"></a> 54 55 56The **i18n** directory stores JSON files for various locales. A **pages** subfolder contains multiple pages and each consists of **.hml**, **.css**, and **.js** files. 57 58- **main \> js \> default \> i18n \> en-US.json**: defines the variables displayed on pages in English. Similarly, **zh-CN.json** defines the page content in Chinese. 59 60 ``` 61 { 62 "strings": { 63 "hello": "Hello", 64 "world": "World" 65 } 66 } 67 ``` 68 69- **main \> js \> default \> pages \> index \> index.hml**: describes the layout of the **index** page, components used on the page, and the hierarchy of these components. For example, there is a text component for displaying **Hello World**. 70 71 ``` 72 <div class ="container"> 73 <text class ="title"> 74 {{ $t('strings.hello') }} {{title}} 75 </text> 76 </div> 77 ``` 78 79- **main \> js \> default \> pages \> index \> index.css**: defines the style of the **index** page. For example, the following **index.css** code snippet describes how **container** and **title** will be displayed on the page: 80 81 ``` 82 .container { 83 flex-direction: column; 84 justify-content: center; 85 align-items: center; 86 } 87 .title { 88 font-size: 100px; 89 } 90 ``` 91 92- **main \> js \> default \> pages \> index \> index.js**: defines the service logic on the **index** page, such as data binding and event processing. In this example, the string **World** is assigned to **title**. 93 94 ``` 95 export default { 96 data: { 97 title: '', 98 }, 99 onInit() { 100 this.title = this.$t('strings.world'); 101 }, 102 } 103 ``` 104 105 106## Repositories Involved<a name="section1599816111011"></a> 107 108JS UI framework 109 110ace\_ace\_engine 111 112ace\_ace\_engine\_lite 113 114ace\_napi 115 116
