Ale.js

Compare other frameworks

Welcome to this page, we believe that the purpose of coming here is to understand the difference between Ale and other large frameworks, which is exactly what we want to answer here.

Objectively speaking, as the core developer of Ale, we will definitely prefer Ale, and think it would be better to solve it with Ale for some problems. But here, we want to describe everything as fair and accurate as possible. Other frameworks have significant advantages, such as React’s vast ecosystem, or like Angular and Vue, which have numerous solutions for large projects. We will try to list all of them.


We also want to get help from You to keep the documentation up to date, because the world of JavaScript is progressing too fast. If you notice an inaccurate or seemingly incorrect place, please submit a question for let us know.


React

React and Ale are almost identical. In fact, React is the inspiration for the early Ale, they all have:

  • Update only the necessary [use diff algorithm] when status (data) is updated
  • Provides view components for responsive and componentized.
  • Focus on the core library and pass other functions to the relevant libraries.

Because there are many similarities, we will spend more time comparing them in this block. Here we not only guarantee the accuracy of the technical content, but also take into account the balance considerations. We need to recognize where React is better than Ale, such as a richer ecosystem.

Performance

Here we only tested for component definition and component rendering, so the test results do not represent full performance. But what is certain is that Ale outperforms React in both respects: (defining a component and rendering 1000 elements)

  • Ale: 46~52 (ms)
  • React: 307~336 (ms)

Of course, we also did a test on responsive dynamic rendering, which showed that Ale performed dynamic rendering 2.5 times faster than React.

The reason for the slowness of React may be due to the fact that we use Babel for dynamic rendering. But don’t forget, Ale doesn’t need to compile. If you compile React ahead of time, this will be unfair to Ale.

HTML & CSS

In React, everything is JavaScript. Not only can HTML be expressed in JSX, but the trend is now increasingly incorporating CSS into JavaScript. This type of approach has its advantages, but there are some trade-offs that are not acceptable to every developer.

Ale’s overall idea is to embrace and extend the classic Web technologies. We will analyze it in detail below.

JSX vs Templates

In React, the rendering capabilities of all components rely on JSX. JSX is a syntactic sugar for writing JavaScript using XML syntax.

Using JSX has the following advantages:

  • You can build your view page using the full programming language JavaScript functionality. For example, you can use temporary variables, JS’s own flow control, and directly reference the values ​​in the current JS scope.
  • Development tools support JSX is more advanced than other available Ale templates (eg, linting, type checking, editor auto-completion).

But in fact, Ale also provides rendering functions, and even Ale abandons the traditional Mustache (JSX) template and chooses a less popular rendering function, which includes the following aspects:

  • Depends on JavaScript’s own complete compiler, so we no longer need to manually write the template rendering function, which can effectively improve the overall speed of Ale template compilation, because the rendering function is closer to the JavaScript compiler itself than the template engine.
  • When you add a JavaScript expression to a JSX template, some compilers don’t have a corresponding syntax hint. At the same time, in some scenarios, you really need the ability to fully program JavaScript.

Scale

Expanding up

Well, to be honest, Ale is really not designed for large applications. We designed it to be able to handle almost all small and medium-sized applications.

In contrast, React provides powerful routing for large applications. And the React community is very innovative in terms of state management (such as Flux, Redux), which Ale can’t match.

Downward expansion

The React learning curve is steep, and you need to know JSX and ES2015 before you start learning React, because many examples use these syntaxes. You need to learn to build the system, although you can technically compile the code in real time with Babel, but this is not recommended for production environments.

However, Ale expands down to be very similar to jQuery. Because you just have to put the following tags on the page to run:

1
<script src="ale.js"></script>

Then you can write the Ale code and apply it to production. You just need to replace it with the min version of the Ale file without worrying about other performance issues.

Since Ale’s start-up phase doesn’t require any complex knowledge points, such as ES2015 and JSX, developers can build simple applications in less than half an hour by reading the guide.

Native rendering

React Native enables you to write native rendering capabilities for apps (iOS and Android) using the same component model. Being able to develop across multiple platforms at the same time is great for developers. In contrast, Ale is a bit weaker in this regard. But we didn’t stop here. As Ale slowly develops, these build systems will be released accordingly, so stay tuned.

Volume

Compared to React, Ale is extremely lightweight. Ale’s compressed files (not g-zip) [including APIs for manipulating DOM] are only about 8kb size, while React’s core library plus DOM library is amazing 108kb**.

Preact and other classes React library

The libraries of the class React often share API and ecology with React as much as possible. Therefore the above comparison is equally applicable to them. They differ from React in that they have a smaller ecology and higher performance. However, because these libraries are not 100% compatible with all of the React ecosystem, some tools and auxiliary libraries may not be available. Or even if it seems to work, there may be incompatibility at any time, unless the React library you use is officially consistent with React.

Vue

It is time to compare the most important frameworks. Earlier we said that React was the inspiration for early Ale. In fact, Ale’s more inspiration comes from Vue, which is why some of the features and APIs provided by Ale are very similar to Vue.

However, although Ale and Vue have similarities in some places, we recommend that you install both Ale and Vue, because Vue can make Ale’s development more efficient. But if you don’t want to do this, you can just install a framework.

Complexity

Ale.js is much simpler than Vue in both API and design, and is more suitable for beginners to learn, so you can quickly master all of its features and invest in development.

Flexibility and componentization

Compared to Angular, Vue.js is a more flexible and open solution. But in Ale, this situation will change.

In fact, Vue enforces one-way data flow between different components, which makes the data flow in the application clearer and easier to understand, but it also limits the flexibility between components. In Ale, there are only composite components, and there are no parent and child components, and any component in the composite component can interoperate because they share a set of data.

Performance

Here we are the same as React, and only tested for component definition and component rendering, so the test results do not represent the performance of all operations. But what is certain is that Ale outperforms Vue in both respects: (defining a component and rendering 1000 elements)

  • Ale: 46~52 (ms)
  • Vue: 181~228 (ms)

TypeScript

Vue provides an official type declaration and component decorator for TS, but not everyone wants to use TS. In small and medium-sized projects, the introduction of TS may not bring much obvious advantages. In these cases, using Ale would be a better choice.

Volume

The separate vue.min.js file has a size of 88kb, while Ale has a size of only about 8kb, which is relatively lightweight compared to Vue.

learning curve

In this regard, both frameworks are similar, except that you need to have a good HTML and JavaScript foundation. With these basic skills, you can invest in development very quickly through the reading guide.

But specifically, Vue’s API area is much larger than Ale, so you need to understand more concepts to get productive. Of course, the complexity of Vue itself is because it is designed to target large, complex applications. But it is undeniable that this also makes it quite unfriendly to developers who are not experienced enough.

Angular

Of course, the editors don’t know much about Angular, so they don’t make a good comparison. Here, we hope that more experienced developers can help us write articles comparing Angular. You can click on the Edit page below, then go to Github to submit, thank you for your support and understanding!

Supplement

In fact, there is one more thing to add in terms of performance, because Vue and React use virtual DOM and diff algorithms. Ale actually traverses the real DOM tree directly, and then uses the diff algorithm to compare the differences. This is similar to Angular’s dirty check, and performance is affected. However, this approach also eliminates the need to create a virtual DOM tree.


Found some errors? Edit on Github!