README.md
1# JS UI Framework<a name="EN-US_TOPIC_0000001076213364"></a>
2
3
4- [Introduction](#section15701932113019)
5- [Directory Structure](#section1791423143211)
6- [When to Use](#section171384529150)
7- [Available Components](#section271831717166)
8- [Repositories Involved](#section1447164910172)
9
10## Introduction<a name="section15701932113019"></a>
11
12The OpenHarmony JS UI framework provides basic, container, and canvas UI components and standard CSS animation capabilities. It supports the web-development-like programming paradigm.
13
14- **Web-development-like paradigm**
15
16 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.
17
18
19**Figure 1** Framework architecture<a name="fig2606133765017"></a>
20
21
22The JS UI framework consists of the application, framework, engine, and porting layers.
23
24- **Application**
25
26 Contains apps with Feature Abilities \(FAs\) developed with the JS UI framework. The FA app in this document refers to the app with FAs developed using JavaScript.
27
28- **Framework**
29
30 Parses UI pages and provides the Model-View-ViewModel \(MVVM\), page routing, custom components and more for front end development.
31
32- **Engine**
33
34 Accomplishes animation parsing, Document Object Model \(DOM\) building, layout computing, rendering command building and drawing, and event management.
35
36- **Porting Layer**
37
38 Abstracts the platform layer to provide abstract interfaces to connect to the platform. For example, event interconnection, rendering pipeline interconnection, and lifecycle interconnection.
39
40
41## Directory Structure<a name="section1791423143211"></a>
42
43The source code of the framework is stored in **/foundation/arkui/ace\_engine**. The following shows the directory structure.
44
45```
46/foundation/arkui/ace_engine
47├── adapter # Platform adaptation code
48│ ├── common
49│ └── ohos
50├── frameworks # Framework code
51│ ├── base # Basic libraries
52│ ├── bridge # Bridging layer for frontend and backend components
53│ └── core # Core components
54```
55
56## When to Use<a name="section171384529150"></a>
57
58JS UI framework provides various UI components with rich functionalities and style definitions. You can use and reuse any component anywhere as needed. You can customize new components by combining existing ones to simplify development.
59
60## Available Components<a name="section271831717166"></a>
61
62**Table 1** Components provided by the framework
63
64<a name="table2347172925617"></a>
65<table><thead align="left"><tr id="row5347429155610"><th class="cellrowborder" valign="top" width="28.64%" id="mcps1.2.3.1.1"><p id="p1347102910567"><a name="p1347102910567"></a><a name="p1347102910567"></a>Type</p>
66</th>
67<th class="cellrowborder" valign="top" width="71.36%" id="mcps1.2.3.1.2"><p id="p83475294565"><a name="p83475294565"></a><a name="p83475294565"></a>Components</p>
68</th>
69</tr>
70</thead>
71<tbody><tr id="row15347122918562"><td class="cellrowborder" valign="top" width="28.64%" headers="mcps1.2.3.1.1 "><p id="p679795614335"><a name="p679795614335"></a><a name="p679795614335"></a>Basic</p>
72</td>
73<td class="cellrowborder" valign="top" width="71.36%" headers="mcps1.2.3.1.2 "><p id="p88813982011"><a name="p88813982011"></a><a name="p88813982011"></a>button, text, input, label, image, progress, rating, span, marquee, image-animator, divider, menu, chart, option, picker, picker-view, piece, qrcode, select, slider, switch, toolbar, toolbar-item, toggle</p>
74</td>
75</tr>
76<tr id="row1973535793115"><td class="cellrowborder" valign="top" width="28.64%" headers="mcps1.2.3.1.1 "><p id="p8735195713313"><a name="p8735195713313"></a><a name="p8735195713313"></a>Container</p>
77</td>
78<td class="cellrowborder" valign="top" width="71.36%" headers="mcps1.2.3.1.2 "><p id="p1268024618208"><a name="p1268024618208"></a><a name="p1268024618208"></a>div, list, list-item, list-item-group, stack, swiper, tabs, tab-bar, tab-content, refresh, dialog, badge, panel, popup, stepper, stepper-item</p>
79</td>
80</tr>
81<tr id="row1792218915320"><td class="cellrowborder" valign="top" width="28.64%" headers="mcps1.2.3.1.1 "><p id="p692289163220"><a name="p692289163220"></a><a name="p692289163220"></a>Canvas</p>
82</td>
83<td class="cellrowborder" valign="top" width="71.36%" headers="mcps1.2.3.1.2 "><p id="p199228910327"><a name="p199228910327"></a><a name="p199228910327"></a>canvas</p>
84</td>
85</tr>
86<tr id="row837615526208"><td class="cellrowborder" valign="top" width="28.64%" headers="mcps1.2.3.1.1 "><p id="p4377752152016"><a name="p4377752152016"></a><a name="p4377752152016"></a>Grid</p>
87</td>
88<td class="cellrowborder" valign="top" width="71.36%" headers="mcps1.2.3.1.2 "><p id="p17377185222019"><a name="p17377185222019"></a><a name="p17377185222019"></a>grid-container, grid-row, grid-col</p>
89</td>
90</tr>
91</tbody>
92</table>
93
94## Repositories Involved<a name="section1447164910172"></a>
95
96JS UI framework
97
98**arkui\_ace\_engine**
99
100ace\_engine\_lite
101
102arkui\_napi
103
104
