一起学习下一代前端框架 Omi

Omi 是什么

去万物糟粕，合精华为一， 4kb JavaScript 的下一代 Web 框架 (Web Components + JSX + Proxy + Store + Path Updating).

Omi 设计思想

• Web Components 也可以数据驱动视图, UI = fn(data)
• 基于 Shadow/Light Dom 设计样式天然原生态隔离，社区生态的最优解决方案
• Shadowt DOM 与 Virtual DOM 融合双管齐下解决 View 层的各种问题
• Web Components+ JSX 融合为一个框架 Omi
• 框架无关任何框架可以使用 Omi 自定义元素
• 提供桌面、移动和小程序整体解决方案

Omi Demo

有 react 开发经验的可以很快速的迁移 omi 的核心本身也就是 webcomponent + jsx

import { define, WeElement } from 'omi'

define('hello-element', class extends WeElement {
  onClick = evt => {
    // trigger CustomEvent
    this.fire('Abc', { name: 'dntzhang', age: 12 })
    evt.stopPropagation()
  }

  static propTypes = {
    msg: String
  }

  static css = `
      div {
        color: red;
        cursor: pointer;
      }`

  render(props) {
    return (
      <div onClick={this.onClick}>
        Hello {props.msg}
        <div>Click Me!</div>
      </div>
    )
  }
})

Omi 学习资料

WebComponent 学习：github.com/Tencent/omi…

Omi 官方文档：tencent.github.io/omi/site/do…

awesame-webcomponent：project-awesome.org/mateusortiz…

MDN webcomponent：developer.mozilla.org/zh-CN/docs/…

关于 Omi 贡献

欢迎更多用户加入 Omi 生态中，也欢迎各位开发者为 Omi 贡献代码。及时提出 issue 提出你的痛点，我们一起解决，也欢迎大家不要吝啬 pull requst 保证最快进行反馈。

Omi 周边生态

Omi 自最新版后本着大道至简的原则官方推荐使用以及 Readme 文档对一些内容进行了隐藏，因此需要在 GitHub Omi 项目中切换到 V6 分支进行查看.

Ecosystem of Omi

💯Base

Project	Description
omi-docs and codepen and webcomponents.dev	Omi official documents
omix	小程序全局状态管理框架，数据触手可及，状态无处遁形
omim	Cross frameworks and themes components.(DOCS & REPL && JOIN US!)
omi-kbone	使用 omi + kbone 多端开发(小程序和Web)的贪吃蛇游戏。
omio	Omi for old browsers with same api(IE8+)
omis	Omis + React
omi-ssr	Server-side rendering(support omio only)
omi-router	Omi official router in 1KB js
omi-cli	Project scaffolding. → Base Templates and → Other Templates
omi-devtools	Browser DevTools extension
omiu	Simple Omi UI
omil	Webpack loader for Omi.js components.(DOCS)
omi-snippets	A beautify VSCode extension for .omi or .eno file, Install now!
obaa or JSONPatcherProxy	Observe or Proxy any object's any change

🐍Snake MVP

Project	Description
omi-snake & → Touch the demo	The Snake-Eating Game Based on MVP Architecture Written by Omi
omi-kbone-snake	omi-kbone 写的 MVP 架构的跨端贪吃蛇游戏，支持小程序和 H5
Preact-snake & → Touch the demo	The Snake-Eating Game Based on MVP Architecture Written by Preact + Preact-CSS + Omis
[P]react-snake & → Touch the demo	The Snake-Eating Game Based on MVP Architecture Written by React/Preact
omix-snake	The Snake-Eating Game Based on MVP Architecture Written by Omix

👍Mini Program(小程序)

Project	Description
omix	小程序全局状态管理框架，数据触手可及，状态无处遁形
react-kbone	直接使用 React 开发小程序或 Web，基于 kbone
preact-kbone	直接使用 Preact 开发小程序或 Web，基于 kbone
omi-cloud	小程序•云开发
omip	直接使用 Omi 开发小程序或 H5 SPA
mps	原生小程序增强框架(JSX + Less 输出 WXML + WXSS)，也支持 QQ 轻应用
cax	小程序 Canvas 和 SVG 渲染引擎
omi-mp	通过微信小程序开发和生成 Web 单页应用(H5 SPA)
westore	小程序状态管理
comi	小程序代码高亮和 markdown 渲染组件
wx-touch-event	基于 AlloyFinger 改造的小程序手势解决方案

📚Other

Project	Description
omi-piano	Build piano with Omi and Omi Snippets, Enjoy now!
omi-chart	Simple HTML5 Charts using chart-x tag.
md2site	Static Site Generator with markdown powered by Omio.
omi-30-seconds	Useful Omi snippets that you can understand in 30 seconds.
omi-canvas	Perfect fusion of web components, jsx and canvas.
omi-swiper	Omi + Swiper
omi-vscode	VSCode extension for omi, Install now!
omi-ex	Omi.js extension(TypeScript)
omi-transform	Omi / css3transform integration. Made css3 transform super easy in your Omi project.
omi-finger	Support touch and gesture events in your Omi project.
omi-touch	Smooth scrolling, rotation, pull to refresh and any motion for the web.
omi-native	Render web components to native
omi-i18n	Internationalization solution for omi.js using i18next ecosystem
omi-page	Tiny client-side router by page
omie	Build cross platform desktop apps with Omi.js and Electron.js
omi-cv	Create a front-end engineer curriculum vitae, Get Started!
Soo	Has same API as omi but is great alternative if you want to create custom elements without JSX, virtual DOM and store
CEE	Fork from custom-elements-everywhere