🚀 Alins: The most pure and elegant WebUI framework

中文 | Documentation | Playground | Update Log | Feedback Errors/Defects | Gitee | Message Board

0 Introduction

0.1 Preface

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 example that you can experience online in the playground:

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

0.2 Features

1. 0-API, Less is More, closest to native JavaScript development.
2. Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
3. High performance (superior to Vue3 and React).
4. Does not use virtual DOM (vdom), directly updates UI at a granular level.
5. Extremely small runtime and bundle size (better than Vue3 and React).
6. Supports two-way data binding, component development, and follows a unidirectional data flow.
7. Built-in data sharing solution, easily manages shared data among components.
8. Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
9. Supports if and switch logic, as well as If, Switch, For, and other logical components.
10. Supports custom renderers for cross-platform development.
11. Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
12. Developed using TypeScript, with highly friendly type support.

0.3 TODO

The following peripheral tools are currently under development, and we also hope that interested developers can participate together:

1. alins-router: Single-page application routing solution
2. alins-ssr: Server-side rendering solution
3. alins-ui: Official UI library (consider implementing ant-design or meterial-design)
4. alins-v: Official form validation library
5. alins-term: Tool for developing command line applications based on custom renderers
6. alins-canvas: Tool for developing applications with canvas based on custom renderers

1 Quick Start

1.1 Command line creation

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

1.2 Using the Web Compiler

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

Note:

1. This approach is not recommended for production environments.
2. You can use type='text/babel' to enable syntax highlighting provided by the editor.

You can also freely use it in the playground, which also utilizes a web compiler.

2 Compare

2.1 js-framework-benchmark data

Note: The lower the score, the better the performance.

2.2 Code comparison

2.3 Comparing the Compilation Products.

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

3 Documentation

Please refer to the following online documentation

English | 中文