中文 | Documentation | Playground | Update Log | Feedback Errors/Defects | Gitee | Message Board
I Guess You Don't Like ref()
、 reactive()
.value
OR useState()
setState()
either.
These are vue3's Composition API and React hooks, as well as some other complex APIs and concepts, such as defineProps
, defineEmits
, useEffect
, useContext
, etc.
// vue3
import {ref} from 'vue';
const count = ref(1);
count.value ++;
// react
import {useState} from 'react';
const [count, setCount] = useState(1);
setCount(++count);
If you really don't like these, then you should like Alins
.
// Alins
let count = 1;
count ++;
And Alins is more than that. Alins is the UI framework closest to native js.Compared to vue3 and React, Alins has the following features and advantages
Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic Counter Program that you can experience online in the playground:
let count = 1;
<button onclick={count++} $mount='#App'>
count is {count}
</button>;
This example is just a shorthand, you can also use standard js syntax:
let count = 1;
document.getElementById('App').appendChild(
<button onclick={(e) =>{ count++ }}>
count is {count}
</button>
);
The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
npm create alins
After following the steps, execute the following command to install and run it.
cd <project>
npm i
npm rundev
You can also directly clone the template code repository
<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>
Note:
You can also freely use it in the playground, which also utilizes a web compiler.
Note: The lower the score, the better the performance.
Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
metrics | alins | vue3 | react |
---|---|---|---|
Source size | 90byte | 281byte | 302byte |
Compiled product size | 140byte | 620byte | 435byte |
Runtime Size | 26.6kb | 474kb | 139kb |
Startup Metrics | 1.24 | 2.74 | 1.52 |
Runtime Performance | 1.36 | 1.45 | 1.54 |
Memory Usage | 2.77 | 3.30 | 3.28 |
Note: This comparison is only for the current counter example and is for reference only
Please refer to the following online documentation
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。