Open and modern framework for building user interfaces.

• 中文文档
• Omi REPL
• Change Log

Features

• Super fast, click here!!!!
• Super tiny size, 7 KB (gzip)
• Good compatibility, support IE8
• 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

Hello Omi

class Hello extends Omi.Component {
    render() {
        return <div> Hello {this.data.name}!</div>
    }
}

class App extends Omi.Component {
    install() {
        this.name = 'Omi'
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(e) {
        this.name = 'Hello Omi' 
        this.update()
    }

    style() {
        return `h3{
	            color:red;
	            cursor: pointer;
	        }`
    }

    render() {
        return <div>
	            <Hello name={this.name}></Hello>
	            <h3 onclick={this.handleClick}>Scoped css and event test! click me!</h3>
	        </div>
    }
}

Omi.render(<App />, '#container')

Using Store System

class Store  {
    constructor(data, callbacks) {
        this.name = data.name || ''
        this.onRename = callbacks.onRename || function(){}
    }

    rename(name){
        this.name = name
        this.onRename()
    }
}


class Hello extends Omi.Component {
    render() {
        return (
            //you can also use this.$store.name here. but using data if this is a pure component.
            <div> Hello <span>{this.data.name}</span>!</div>
        )
    }
}

class App extends Omi.Component {

    install(){
        this.rename = this.rename.bind(this)
    }

    rename(){
        this.$store.rename('Hello Omi')
    }

    render() {
        return (
            <div onclick={this.rename}>
                <Hello name={this.$store.name}></Hello>
            </div>
        )
    }
}

let app = new App()
let store = new Store({ name : 'Omi' } ,{
    onRename :()=>{
        app.update()
    }
})

Omi.render(app, 'body',{
    store
})

→Try it online←

omi-cli

$ 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

Install

npm install omi

or get it from CDN:

• https://unpkg.com/omi@1.8.0/dist/omi.min.js
• https://unpkg.com/omi@1.8.0/dist/omi.js

Plugins

• omi-tap: Support tap event in your Omi project..
• omi-router: Router for Omi.
• omi-finger: Omi /AlloyFinger integration.
• omi-transform: Omi /transformjs integration.
• omi-touch: Omi /AlloyTouch integration.

License

This content is released under the MIT License.