Omi

Open and modern framework for building user interfaces.

Version Download PRs

[中文README](README.zh-CN.md) ## Omi * [Omi Cli](https://github.com/AlloyTeam/omi-cli) and [Cli Usage](https://github.com/AlloyTeam/omi-cli#用户指南) * If you want to experience the Omi framework, you can visit [Omi Playground](https://alloyteam.github.io/omi/example/playground/) or read the code of [TodoMVC by Omi](https://github.com/AlloyTeam/omi/tree/master/todomvc) * If you want to use the Omi framework or develop and improve omi framework, please read [the Omi documentation](https://github.com/AlloyTeam/omi/tree/master/docs#omi使用文档) * If you want to get a better reading experience of the documents, you can visit [Docs Website](https://alloyteam.github.io/omi/website/docs.html) * Tutorial or blogs about omi framework, you can visit [Omi Tutorial](https://github.com/AlloyTeam/omi/tree/master/tutorial) * If you have Any problems, please [New issue](https://github.com/AlloyTeam/omi/issues/new) * If you want to be more convenient on the exchange of all Omi can join the QQ Omi exchange group (256426170) ## omi-cli ```bash $ npm install omi-cli -g # install cli $ omi init your_project_name # init project, you can also exec 'omi init' in an empty folder $ cd your_project_name # please ignore this command if you executed 'omi init' in an empty folder $ npm start                  # develop $ npm run dist # release ``` other cmd: ```bash $ npm run ie # debugging in ie8 ``` ## Features * Super tiny size, 7 KB (gzip) * Good compatibility, support IE8 (please import es5-shim or [es5-sham](//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js) by yourself) * Fully object-oriented component system * Support Scoped CSS, reusable components are composed of HTML, Scoped CSS and JS * More free updates, each component has a update method, free to choose the right time to update * Template engines can be replaced, developers can override the Omi.template method to use any template engine * Provides two development way ( ES6+ and ES5) for developers to choose freely ## Plugins * [omi-router](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router): Router for Omi. * [omi-finger](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-finger): Omi /[AlloyFinger](https://github.com/AlloyTeam/AlloyFinger) integration. * [omi-transform](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-transform): Omi /[transformjs](https://alloyteam.github.io/AlloyTouch/transformjs/) integration. * [omi-touch](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-touch): Omi /[AlloyTouch](https://github.com/AlloyTeam/AlloyTouch) integration. * [omi-jquery-date-picker](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-jquery-date-picker): Omi / JQuery Date Picker integration. ## Install ```bash $ npm install omi ``` ## Hello World You can use [webpack](https://webpack.github.io/) + [babel](http://babeljs.io/), configure the [babel-loader](https://github.com/babel/babel-loader) in the module settings of webpack, then you can use ES6+ to write your web program. * [[Hello World ES6+ ->Try it on Playground]](http://alloyteam.github.io/omi/website/redirect.html?type=hello_nest) * [[Hello World ES5 ->Try it on Playground]](http://alloyteam.github.io/omi/website/redirect.html?type=hello_es5) if using 'omi.lite.js' (without [mustache.js](https://github.com/janl/mustache.js)), you can [use the ${this.data.name} way](http://alloyteam.github.io/omi/website/redirect.html?type=without_tpl) ## CDN * [https://unpkg.com/omi@1.7.5/dist/omi.min.js](https://unpkg.com/omi@1.7.5/dist/omi.min.js) * [https://unpkg.com/omi@1.7.5/dist/omi.js](https://unpkg.com/omi@1.7.5/dist/omi.js) * [https://unpkg.com/omi@1.7.5/dist/omi.art.min.js](https://unpkg.com/omi@1.7.5/dist/omi.art.min.js) * [https://unpkg.com/omi@1.7.5/dist/omi.art.js](https://unpkg.com/omi@1.7.5/dist/omi.art.js) * [https://unpkg.com/omi@1.7.5/dist/omi.lite.min.js](https://unpkg.com/omi@1.7.5/dist/omi.lite.min.js) * [https://unpkg.com/omi@1.7.5/dist/omi.lite.js](https://unpkg.com/omi@1.7.5/dist/omi.lite.js) * [https://unpkg.com/omi@1.7.5/dist/omi.mustache.min.js](https://unpkg.com/omi@1.7.5/dist/omi.mustache.min.js) * [https://unpkg.com/omi@1.7.5/dist/omi.mustache.js](https://unpkg.com/omi@1.7.5/dist/omi.mustache.js) ## Thanks * [morphdom](https://github.com/patrick-steele-idem/morphdom) - Fast and lightweight DOM diffing/patching (no virtual DOM needed) * [art-template](https://github.com/aui/art-template) - JS template engine with excellent performance * [sodajs](https://github.com/AlloyTeam/sodajs) - Light weight but powerful template engine for JavaScript * [mustache.js](https://github.com/janl/mustache.js) - Minimal templating with {{mustaches}} in JavaScript ## Contributors |name |avatars |company | |---|---|---| | [CodeFalling](https://github.com/CodeFalling) | ![](https://avatars3.githubusercontent.com/u/5436704?v=3&s=60) | alibaba | | [abell123456](https://github.com/abell123456) | ![](https://avatars1.githubusercontent.com/u/2232380?v=3&s=60) | alibaba | | [Aresn](https://github.com/icarusion) | ![](https://avatars3.githubusercontent.com/u/5370542?v=3&s=60) | TalkingCoder | | [pasturn](https://github.com/pasturn) | ![](https://avatars2.githubusercontent.com/u/6126885?v=3&s=60) | Mars Holding | | [vorshen](https://github.com/vorshen) | ![](https://avatars2.githubusercontent.com/u/10334783?v=3&s=60) | Tencent | | [xcatliu](https://github.com/xcatliu) | ![](https://avatars3.githubusercontent.com/u/5453359?v=3&s=60) | Microsoft | | [dorsywang](https://github.com/dorsywang) | ![](https://avatars3.githubusercontent.com/u/7475208?v=3&s=60) | Tencent | | [dntzhang](https://github.com/dntzhang) | ![](https://avatars2.githubusercontent.com/u/7917954?v=3&s=60) | Tencent | # License This content is released under the [MIT](http://opensource.org/licenses/MIT) License.