OMI the surprising Chinese Web Components Framework ✨
Tags: omi, webcomponents, frontend, webdev
Published: 2024-05-01 18:15:44




In my spare time I usually look for promising projects and also see what the big companies are doing in open source.

When I found out that Tencent (the big Chinese company) has a github profile I started looking all the projects. They have a lot of interesting and powerful projects but OMI is amazing 🤯.

Of course it's not a new must framework or anything like that but it has some promising aspects and also things I don't like. More on that later

### OMIjs
It is defined itself as a Web Components Framework but in my opinion it goes beyond that . It offers **reactive signals**, **cross framework components**, **tiny** size, **fast** performance and much more.

By the way OMI uses Vite so it is compatible with all the Vite stuff (like TailwindCSS support, ...).

Now let's look at some code to create the typical Hello World counter :

```jsx
import { tag, Component, h, render, signal } from 'omi'

const count = signal(0)

@tag('hello-omi')
class HelloOmi extends Component {
  render(props) {
    return (
      <>
        <h1>Hello {props.msg}!</h1>
        {count.value}<button onClick={()=>count.value++}>+</button>
      </>
    )
  }
}

render(<hello-omi msg='Omi' />, 'body')
```

![Counter example OMI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xkiri3efzb9a2q0nmpg.png)

It looks very cool, you can use OOP with reactive signals and also JSX.

I now it is a very strange mix OOP + signals but it feels realy intuitive and easy.

Are you thinking in how can you style your app created in OMI, it is very easy (but uses CSS in JS techniques):

```jsx

...
class HelloOmi extends Component {
  
  static css = `h1 { color: #07c160 } `

  render(props) {
     ...
  }
}
```

![Counter example with text in green](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzgr987ytbpsur5i4rqn.png)

This way you can have scoped css but you can also share your styles with other components in other ways.

#### Cross framework

One of the most exciting features of the framework itself is that it can interact with Vue and React out of the box

![Example of Vue working with OMI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhl7pu7y846gzxbt82ij.gif)

As you can see this has a double counter, one controlled by Vue and the other by OMI and they are both synchronised!

If you are interested in this particular aspect and how to code it 👉 [Cross Frameworks Guide](https://omi.cdn-go.cn/home/latest/cross-frameworks.html)

### Conclusion

OMI looks very fast to develop with, easy to use and embeddable with other frameworks so I might play with it in some project.

It might be difficult at first but it has a good docs site and also a really cool [playground](https://omi.cdn-go.cn/tutorial/latest/#/hello-omi)

But there is one thing I don't like, **CSS in JS** but I have to say that the implementation is really good, probably the best CSS in JS I have seen.

Well if you want to check out the project you have here:
🌐 [Docs website](https://omi.cdn-go.cn/home/latest/)
📦 [Github repo](https://github.com/Tencent/omi)

I hope you really enjoyed  this post ♥
If you want to know about other projects I find interesting on Github, let me know below 👇