Alins – A WebUI framework that simplifies complexity and is extremely elegant

Recently I built a js framework Alins, let me share it:

Alins: The most pure and elegant WebUI framework

English | Documentation | Practice Ground | Update Log | Feedback Errors/Defects | Gitee | Message Board

0 Introduction

0.1 Preface

Alins is an extremely pure, simple and elegant Web UI framework. Adhering to the development philosophy of 0-API and Less is More, it aims to help developers get rid of the complicated API calling dilemma of UI framework and use the most intuitive, pure and vanillajs development method.

You only need to understand the writing rules of jsx (similar to html syntax) to develop alins web applications without any obstacles. The following is a basic counter example, which you can experience online in the training ground:

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

0.2 Features

  1. 0-API、Less is More, closest to native js development
  2. Powerful responsiveness , supports responsive updates of attributes, styles, text, html and other elements
  3. has extremely high performance (Better than Vue3, React)
  4. Not using vdom, directly Fine-grained changes to the UI
  5. has minimal runtime Time volume and packaging volume (better than Vue3, React)
  6. Supports two-way data binding , supports component development and follows a single data flow
  7. Built-in data sharing solution, Easily manage shared data between components
  8. Rich surrounding ecological support , supports plug-ins such as vite, rollup, webpack, esbuild, etc., and can customize third-party tools based on the underlying compilation module.
  9. Supports if and switch logic , and supports logical components such as If, Switch, For, etc.
  10. Support custom renderer Achieve cross-platform development
  11. Use jsx, tsx description UI, built-in typescript compilation support
  12. Developed using ts, highly Friendly type support

0.3 TODO

The following peripheral tools are under development, and we hope that interested developers can participate.

  1. alins-router: Single-page application routing solution
  2. alins-ssr: server-side rendering solution
  3. alins-ui: official UI library (consider implementation ant-design or meterial-design)
  4. alins-v: official form validation library
  5. alins-term: developed based on a custom renderer Tools for command line applications
  6. alins-canvas: developed based on a custom renderer Tools for applications that use canvas to render UI

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 method is not recommended for use in production environments
  2. You can use type=text/babel’ to get the editor’s own syntax highlighting.

You can also use it freely in the training ground, which also uses the web compiler

2 Comparison

2.1 js-framework-benchmark data

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

2.2 Code comparison

2.3 Comparison of compiled products

Comprehensive source code volume, packaged code volume and framework runtime volume are compiled into a table

Indicators alins vue3 react
Source code size 90byte 281byte 302byte
Compiled product volume 140byte 620byte 435byte
Runtime size 26.6kb 474kb 139kb
Volume score 1.24 2.74 1.52
Runtime performance 1.36 1.45 1.54
Memory usage score 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 | Chinese