Ale.js

Introduction

What is Ale.js?

Ale (Chinese: 啤酒) is a set of progressive frameworks for building user interfaces in the form of components. It believes that everything is a component. Unlike other large frameworks, Ale only needs you to focus on the data and does not need to care about any content related to the view. When you update the data, any places in the view that use it will be updated.


We combine some of the features of Vue and React in Ale to make it more convenient and lightweight. At the same time, the diff algorithm is also used in Ale (thanks to Ale’s self-developed diff algorithm, which is only about 50 lines, extremely lightweight).


At the same time, in Ale, you don’t have to worry about anything about performance, because Ale is compressed (non-g-zip) only about 7kb in size, and the execution speed is also close to 3 times that of Vue and React!


If you are already an experienced front-end developer and want to know the specific differences between Ale and other libraries/frames, check out Compare other frameworks.

Start

Our official guide assumes that you already know intermediate knowledge about HTML, CSS, and JavaScript. If you are just starting to learn about front-end development, it may not be the best idea to use the framework as your first step - get the basics and come back! Previous experience with other frameworks will help, but it is not required.

The simplest example of using Ale is to make a HelloWorld page. Let’s create a .html file and then introduce Ale as follows (or you can also view on jsfiddle /billdong/Lqb8hy5z/5/)):

1
2
<!-- Development environment version -->
<script src="ale.js"></script>

Or:

1
2
<!-- Production environment version, compressed code -->
<script src="ale.min.js"></script>

The installation tutorial gives you more ways to install Ale. If you want to know more about how to install Ale, please visit Installation Tutorial

The first component

Have you included the Ale core library file? Let’s start making our first component!

In Ale, all components are created with the Ale function:

1
Ale(); /* When you included the Ale core library, Ale will be registered as a global function. */

The Ale function receives 2 arguments, the first argument is used to set the name of the component (string), and the second argument is used to configure some default arguments (objects):

1
2
3
4
/* Define a component called com1 */
Ale("com1", {
/* config */
});

Of course, this alone can not create a basic component, a basic component at least to add a parameter called template in the configuration, used to set the template of the component:

1
2
3
4
5
/* Define a component called com1 */
Ale("com1", {
/* The configuration template is HelloWorld. */
template: "HelloWorld"
});

At this point, the most basic components are defined!

But if we simply define the component without rendering it, then this component will have no effect. At this point we can use the Ale.render function to render a component:

1
Ale.render(); /* Rendering component function */

The Ale.render function also receives 2 arguments, just like the Ale function, the first argument is used to set the name of the component (string), and the second argument is used to configure some default arguments (object):

1
2
3
Ale.render("com1", {
el: "#app" /* When you render a component, you must add the el attribute to select the element. */
});

Where id is the element of app:

1
<div id='app'></div>

Among them, at least one configuration parameter must be added each time the component is rendered, that is - el, used to set the elements that need to be selected. At this point, open our html file and you will see that the component rendering is complete:

Are you ready?

Congratulations, now that you have created your first Ale component! And our tutorial is just getting started - the rest of this tutorial will cover more detailed details of other advanced features, so be sure to read the full tutorial!


Found some errors? Edit on Github!