jinge

一个小巧的前端界面框架

English Version Readme

特性

• 轻量
  • 框架打包的库产物非压缩和压缩版分别只有 ~55Kb 和 ~31Kb。
  • 极致地 Tree-Shaking 考量，Hello, World 项目构建产物仅 ~3Kb（gzip 后 ~1.4Kb）。
  • 超简洁地 HMR 支撑，HMR 运行时代码仅约 100 行。
• 创新
  • 使用标准 tsx 语法描述模板，从而可以直接使用到 typescript 的生态以及 IDE 的支持。
  • 内核使用 ES Proxy ，没有虚拟 DOM，从而可以做到极简内核。
  • 巧妙地将标准 tsx 和基于 Proxy 的模板进行编译转换。
• 够用
  • 组件定义采用标准的函数组件，搭配功能灵活的插槽传递，足够支撑中大型前端项目。
  • 内置国际化多语言支持。
  • 简洁但完善地 HMR 支持。
  • 完善的范型组件支持。
  • 轻量但够用的路由能力（通过 jinge-router 支持）。
• 友好
  • 完美的类型约束和智能提示，包括组件的参数属性以及插槽传递。
  • 编译器使用 rust 编写，顺畅的研发体验。

示例

Hello, World

// main.tsx
import {
  vm, // vm 函数和 vue 的 reactive 类似，用于定义双向绑定数据。
  bootstrap,
} from 'jinge';
function App() {
  const state = vm({
    n: 10,
  });
  return (
    <>
      <p>Count {state.n}</p>
      <button onClick={() => state.n++}>CLICK</button>
    </>
  );
}
bootstrap(App, document.body);

更多示例

• 经典的 Todo MVC
• 路由：router-demo
• 示例集合：jinge-demos
• UI 组件库：jinge-preline [编写中]
• UI 组件库：jinge-antd [规划中]

使用

当前版本的 jinge 框架暂时仅支持在 vite 项目中使用。你可以从 jinge 的初始项目模板着手：

1. 从 github 上克隆初始模板项目：

   git clone https://github.com/jingeweb/jinge-starter
   # mv jinge-starter [YOUR PROJECT NAME] # 修改为你的项目名

2. 安装依赖并开始研发：

   cd jinge-starter
   pnpm i
   pnpm dev

或者手动配置 vite：

1. 安装依赖：

   pnpm add jinge
   pnpm add -D jinge-compiler

2. 修改 vite.config.ts

   import { defineConfig } from 'vite';
   import { jingeVitePlugin } from 'jinge-compiler';
   
   export default defineConfig({
     plugins: [jingeVitePlugin()],
   });

因为 jinge-compiler 是使用 rust 编写的，未来将逐步支持 webpack 等打包器的项目。

对比

以下内容为 jinge 框架和主流 MVVM 框架的简单对比：

产物大小

渲染性能