Agile Chinese produces HTML5 CSS3 JS mobile application development framework_html/css_WEB-ITnose

Agile is a mobile application development framework based on HTML5 CSS3 JS. The experience is as close as possible to Native Like, and it supports both single-page mode and multi-page mode.

Agile allows HTML5 to give full play to its advantages in mobile application development. All developers can get started quickly, all devices can be adapted, and all projects are applicable.

Simple and scalable
Agile supports Zepto and jQuery dual engines and corresponding extensions; at the same time, Agile supports mobile applications in single-page mode and multi-page mode, and can be integrated with popular cross-platforms such as ExMobi and PhoneGap development framework.

One framework, multiple devices
With the help of Agile, your mobile application can quickly and effectively adapt to mobile phones, tablets and other devices through the same code. All of this is CSS Media Query )’s contribution.

Complete components
Agile provides comprehensive and beautiful documentation. Here you can find all the detailed documentation about HTML elements, HTML and CSS components, and JavaScript plugins.

Getting Started

The Agile framework itself is developed based on standard HTML5. However, due to the large number of local capabilities required in mobile applications, HTML5 is not capable, so it usually needs to rely on a container to run and be able to call Native capabilities in the container.

ExMobi is a mobile application platform launched by Fengxingxingkong. In addition to encapsulating a wealth of native components and local capabilities, it also has good support for HTML5, so you can get a better experience using Agile in ExMobi. In addition, Agile can also run on other containers such as PhoneGap. For how to use Agile in ExMobi, please refer to http://www.exmobi.cn/agile/case.html.

Directory structure
After downloading the Agile source code, unzip it to any directory and you will see four directories "agile", "exmobijs", "ratchet" and "icomoon". Agile is the framework. For core and other directories, please click on the corresponding link above for introduction. How to use them will also be mentioned in the document. The following is the directory structure of agile:

agile/
├── css/
│ ├── agile.css
│ ├── agile.min.css
│ └── check.css
└── js/
├── agile.js
├── agile.min.js
├── iscroll.js
├─ ─ template-native.js
├── touch2mouse.js
└── zepto.js

Some of the files here are not necessary, and some can be replaced. Among them, the core framework of agile with agile.* and app.* must be referenced, and the others are third-party auxiliary frameworks. In general production environments, it is recommended to use files with min.*.

Agile supports dual engines, namely Zepto and jQuery, so zepto here can also be replaced by jQuery, but it is recommended to use Zepto because Zepto is more efficient.

iScroll.js is a solution for mobile page scrolling. The v4.2.5 version is used here. The interface has been encapsulated in Agile. Generally, there is no need to call it directly. If you need to use it, please refer to iScroll 4.2.5 Simple API.

template-native.js is a classic JS template engine that can dynamically inject JSON data into a template file. For details, please visit its location on github.

Basic template
Using the Agile framework, the most basic CSS, JavaScript and HTML pages to be referenced are as follows (all JS and CSS use relative addresses):

Hello World

Obtain

Official website: http://www.exmobi.cn/agile/index.html
Help document: http://www.exmobi.cn/course/course_27.html
Download from this site: agile-dist v3.0.0 | Updated on: 2015-01-15