OMI the surprising Chinese Web Components Framework ✨

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 :

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')

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):

...
class HelloOmi extends Component {

  static css = `h1 { color: #07c160 } `

  render(props) {
     ...
  }
}

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

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

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

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
📦 Github repo

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