---
title: Overview
---

# Overview

## File structure

Smart MiniApp is divided into two layers: `app` and `page`. The `app` layer describes the whole miniapp and the `page` layer describes each page. The `project` configurations are optional and can be described as required.
The `app` layer consists of three files and must be placed in the source code directory of a miniapp.

> By default, the source code directory of Smart MiniApp is equivalent to the root directory of the project. You can modify the `miniprogramRoot` field in the project configuration file `project.tuya.json`.

### Example of project directory

```
├── project.tuya.json
├── app.js
├── app.json
├── app.tyss
├── assets
│   └── images
│       └── tab
│           └─ component.png
├── i18n
│   └── strings.json
├── components
│   └── foo
│       ├── index.js
│       ├── index.json
│       ├── index.tyml
│       └── index.tyss
├── pages
│   └── page
│       ├── index.js
│       ├── index.json
│       ├── index.tyml
│       └── index.tyss
├── theme.json
├── package.json
└── node_modules
```

## Files of app

The `app` layer consists of three files and must be placed in the root directory of a miniapp project.

| File       | Required | Feature                                               |
| ---------- | -------- | ----------------------------------------------------- |
| app.js     | Yes      | Application logic                                     |
| app.json   | Yes      | Global configuration, such as the paths of all pages. |
| app.tyss   | No       | Global style sheet                                    |
| theme.json | No       | Theme configuration file                              |

## Pages

| File type | Required | Feature            |
| --------- | -------- | ------------------ |
| js        | Yes      | Page logic         |
| json      | Yes      | Page configuration |
| tyml      | Yes      | Page structure     |
| tyss      | No       | Page style sheet   |

> Note: For your convenience, these four files must have the same path and filename.
> `project` refers to the file `project.tuya.json` and must be placed in the root directory of the project. For more information about the project configurations, see [Configurations of miniapp project](/en/miniapp/develop/miniapp/framework/app/config).
> All your programming code of Smart MiniApp will be packaged into a JavaScript script. The system runs the script to start a miniapp and destroys the script to stop the miniapp.

## Custom components

| File | Required | Feature                 |
| ---- | -------- | ----------------------- |
| js   | Yes      | Component logic         |
| json | Yes      | Component configuration |
| tyss | No       | Component style sheet   |
| tyml | Yes      | Component structure     |

> Note: For your convenience, these four files must have the same path and filename.

## i18n

| File         | Required | Feature               |
| ------------ | -------- | --------------------- |
| strings.json | Yes      | Multilingual settings |

## Logic layer

The core of Smart MiniApp is a responsive data binding system that consists of the view layer and logic layer. Data is synced between these two layers. Any data changes at the logic layer will be synced to the view layer accordingly.

Examples:

```xml
<! -- View Layer -->
<view> Hello {{name}}! </view>
<button bind:tap="changeName">Click me! </button>
```

```js
// The logic layer.
// Registers a page.
Page({
  data: { name: 'world' },
  changeName(e) {
    // Modifies data.
    this.setData({ name: 'Smart MiniApp' });
  },
});
```

In this example, the framework automatically binds `name` at the logic layer with `{{name}}` at the view layer. This allows `Hello AppContainer!` to appear immediately after the page is opened .

After users tap a button, the view layer sends the `changeName` event to the logic layer. The logic layer finds the respective event handler. The logic layer executes the `setData` operation to change `name` from `world` to `Smart MiniApp`. The logic layer is bound with the view layer. Therefore, the view layer automatically changes to show `Hello Smart MiniApp!`.

> Note: The framework does not work in the browser, so certain web capabilities of `JavaScript` cannot be used, such as the `document` and `window` objects.

## Modular architecture

Smart MiniApp supports modular syntax specifications of `CommonJS` and `ESModule`. `ESModule` is recommended. Note that the script files in the project must follow the unified syntax specifications. Otherwise, the program might run exceptionally.

### Modular syntax of ESModule

```js
import util from './util'; // Imports the relative path.
import absolute from '/absolute'; // Imports the file in the root directory of the project.
import lodash from 'lodash'; // Imports the third-party npm package.
```

### Modular syntax of CommonJS

```js
const util = require('./util'); // Imports the relative path.
const absolute = require('/absolute'); // Imports the file in the root directory of the project.
const lodash = require('lodash'); // Imports the third-party npm package.
```

For more information, see [Modular Syntax](/en/miniapp/develop/miniapp/framework/module).

## Reserved names

Smart MiniApp regards certain object names in the browser such as `window` and `document` as reserved names for future use. Do not use these names as a variable name or use them in logic. Otherwise, the module can not be used as expected.

## NPM module

Smart MiniApp supports a third-party module. You must firstly run the following command to install the module in the root directory of the project:

`$ npm install query-string --save`

After the installation, the module can be used in the logic layer.

`import queryString from 'query-string'; // Imports the third-party npm module.`