🚀 Alins: 最纯粹优雅的WebUI框架

English | 文档 | 演练场 | 更新日志 | 反馈错误/缺漏 | Gitee | 留言板

国内高速访问地址: 文档 | 演练场

0 简介

0.0 为什么是Alins

我猜你也不喜欢 ref()、 reactive() .value OR useState() setState().

这些就是 vue3 的 Composition API 和 React Hooks，以及其他一些复杂的 API 和概念，例如 defineProps, defineEmits, useEffect, useContext 等等

// vue3
import {ref} from 'vue';
const count = ref(1);
count.value ++;

// react
import {useState} from 'react';
const [count, setCount] = useState(1);
setCount(++count);

如果你确实不喜欢这些，那么你应该会喜欢 Alins

// Alins
let count = 1;
count ++;

而 Alins 不止于此，Alins 是最接近原生 js 的 UI 框架。相较于vue3 和 React，Alins有如下特点和优势

1. 无vdom、可以做到最最细粒度更新dom，性能极佳。（js-framework-bench跑分优于vue3和react）
2. 秉持 0-API的开发理念，无任何响应式api和hooks之类的东西，同时又支持完全响应式数据、单项数据流、双向绑定。代码及其简洁，最贴近js。
3. 组件仅仅运行一次，无任何副作用。组件仅仅作为UI逻辑的组织形式，而非一个运行时需要重复渲染的模块。

0.1 什么是Alins

Alins是一款极致纯粹、简洁、优雅的Web UI框架。秉持0-API、Less is More 的开发理念，旨在帮助开发者摆脱UI框架繁杂的API调用困境，以最直观、最纯粹、最贴近vanillajs的开发方式。

您只需要了解jsx的书写规则（类似html的语法）便可以没有任何阻碍的开发 alins web应用，下面是一个最基本的计数器示例，你可以在演练场中在线体验：

let count = 1;
<button onclick={count++} $mount='#App'>
    count is {count}
</button>;

这个例子只是简写，你也可以使用标准的js语法

let count = 1;
document.getElementById('App').appendChild(
  <button onclick={(e) =>{ count++ }}>
    count is {count} 
  </button>
);
function Counter(){
    let count = 1;
    return <button onclick={count++}>
        count:{count}
    </button>;
}

0.2 特性

1. 0-API、Less is More，最贴近原生js开发
2. 强大的响应式能力，支持属性、样式、文本、html等元素的响应式更新
3. 具有极高的性能（优于Vue3、React）
4. 未使用vdom，直接细粒度变更UI
5. 具有极小的运行时体积和打包体积（优于Vue3、React）
6. 支持双向数据绑定，支持组件开发，遵循单项数据流
7. 内置数据共享方案，可以轻松的管理组件共享数据
8. 丰富的周边生态支持，支持 vite、rollup、webpack、esbuild等插件，同时可以基于底层编译模块定制第三方工具
9. 支持if、switch逻辑，同时支持 If、Switch、For等逻辑组件
10. 支持自定义渲染器实现跨平台开发
11. 使用jsx、tsx描述UI，内置typescript编译支持
12. 使用ts开发，高度友好的类型支持

0.3 TODO

以下周边工具正在开发中，也希望感兴趣的开发者可以一起参与进来

1. alins-router：单页面应用程序路由方案
2. alins-ssr：服务端渲染方案
3. alins-ui：官方UI库 （考虑实现ant-design或者meterial-design）
4. alins-v：官方表单验证库
5. alins-term：基于自定义渲染器开发命令行应用程序的工具
6. alins-canvas: 基于自定义渲染器开发使用canvas渲染ui的应用程序的工具

1 快速开始

1.1 命令行创建

npm create alins

按照步骤执行完成之后，执行以下命令便可以安装运行起来了

cd <project>
npm i
npm run dev

您也可以直接克隆 模版代码仓库

1.2 使用Web编译器

<script src='https://cdn.jsdelivr.net/npm/alins-compiler-web'></script>
<script type='text/alins'> 
    let count = 1;
    <button onclick={count++} $mount='body'>
        count is {count}
    </button>;
</script>

注：

1. 该方式不建议在生产环境使用
2. 可以使用 type='text/babel'，这样可以获得编辑器自带的语法高亮

您也可以在 演练场 中自由使用，演练场也是使用Web编译器

2 比较

2.1 js-framework-benchmark 数据

注：分数越低表示性能越好

2.2 代码对比

2.3 编译产物对比

综合源码体积、打包代码体积和框架运行时体积，整理出表格

注：该比较仅针对当前计数器示例，仅作参考

3 文档

请参考以下在线文档

English | 中文